bootstrap系列之十七缩略图和警告框

来源：互联网发布：淘宝可爱耳钉店铺推荐编辑：程序博客网时间：2024/06/10 16:25

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>demo01</title><link rel="stylesheet" href="css/bootstrap.min.css" /><script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>    <script language="JavaScript" src="js/bootstrap.min.js"></script>  </head><body>    <div class="container"><div class="row">  <div class="col-xs-6 col-md-3">    <a href="#" class="thumbnail">      <img src="img/pic01.jpg" alt="pic">    </a>  </div>  <div class="col-xs-6 col-md-3">    <a href="#" class="thumbnail">      <img src="img/pic01.jpg" alt="pic">    </a>  </div>  <div class="col-xs-6 col-md-3">    <a href="#" class="thumbnail">      <img src="img/pic01.jpg" alt="pic">    </a>  </div>  <div class="col-xs-6 col-md-3">    <a href="#" class="thumbnail">      <img src="img/pic01.jpg" alt="pic">    </a>  </div></div>        <hr/>        <div class="row">  <div class="col-sm-6 col-md-4">    <div class="thumbnail">      <img src="./img/pic01.jpg" alt="pic">      <div class="caption">        <h3>Thumbnail label</h3>        <p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</p>        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>      </div>    </div>  </div>  <div class="col-sm-6 col-md-4">    <div class="thumbnail">      <img src="./img/pic01.jpg" alt="pic">      <div class="caption">        <h3>Thumbnail label</h3>        <p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</p>        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>      </div>    </div>  </div>  <div class="col-sm-6 col-md-4">    <div class="thumbnail">      <img src="./img/pic01.jpg" alt="pic">      <div class="caption">        <h3>Thumbnail label</h3>        <p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</p>        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>      </div>    </div>  </div>  </div>    </div>      </body></html>

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>demo01</title><link rel="stylesheet" href="css/bootstrap.min.css" /><script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>    <script language="JavaScript" src="js/bootstrap.min.js"></script>  </head><body><div class="container"> <div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> <p>这里是提示信息</p> </div> <hr />   <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert">×</button> <p>这里是提示信息<a href="#" class="alert-link">百度</a></p> </div></div></body></html>

阅读全文

0 0