! DOCTYPE html html head meta charset ="utf-8" title Bootstrap 实例 - 响应式的列重置 / title style .jy1 { background-color : green ; } .jy2 { background-color : blue ; } .jy3 { background-color : yellow ; } .jy4 { background-color
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应式的列重置</title> <style > .jy1 { background-color: green; } .jy2 { background-color: blue; } .jy3 { background-color: yellow; } .jy4 { background-color: red; } .box { position: relative; width: 100%; height: 0; padding-bottom: 61.8%; } .box p { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .border { border-style:solid; border-width:1px; } </style> <link rel="stylesheet" type="text/css" href="css/my.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> function hrefa(imgId,attrName,attrValue) { //alert("Hello World!"); //document.getElementById("img1").src.value="img/demo2.jpg"; document.getElementById(imgId).setAttribute(attrName,attrValue); } </script> </head> <body> <div class="page-header text-center"> <h1>摄影 <small>展会</small> </h1> </div> <ul class="nav nav-tabs"> <li class="active" onclick="hrefa(‘img1‘,‘src‘,‘img/demo1.jpg‘)"><a href="#">Home</a></li> <li><a href="#" onclick="hrefa(‘img2‘,‘src‘,‘img/demo2.jpg‘)">山水</a></li> <li><a href="#" onclick="hrefa(‘img3‘,‘src‘,‘img/demo3.jpg‘)">建筑</a></li> <li><a href="#" onclick="hrefa(‘img4‘,‘src‘,‘img/demo4.jpg‘)">星空</a></li> </ul> <br> <div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3 border"> <div class="box"> <p style=";font-size:80px;word-wrap:break-word ;" class="jy1"> <img id="img1" src="" alt="demo1 not existed"/> </p> </div> </div> <div class="col-xs-6 col-sm-3 border" > <div class="box"> <p style=";font-size:80px;word-wrap:break-word ;" class="jy2"> <img id="img2" src="" alt="demo1 not existed"/> </p> </div> </div> <div class="col-xs-6 col-sm-3 border" > <div class="box"> <p style=";font-size:80px;word-wrap:break-word ;" class="jy3"> <img id="img3" src="" alt="demo1 not existed"/> </p> </div> </div> <div class="col-xs-6 col-sm-3 border" > <div class="box"> <p style=";font-size:80px;word-wrap:break-word ;" class="jy4"> <img id="img4" src="" alt="demo1 not existed"/> </p> </div> </div> </div> <div class="row" > <div class="col-xs-6 col-sm-3 border"> <div class="thumbnail"> <p>一些示例文本。一些示例文本。</p> <img id="img5" src="img/demo5.jpg" alt="demo1 not existed"/> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div> </div> </div> </div> </div> </body> </html>