效果图:
代码:
<div class="container"> <div class="page-header"> <h1>Bootstrop的学习<small>今天主要介绍页头</small></h1> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="1.jpg" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <button class="btn btn-primary">Button</button> <button class="btn btn-default">Button</button> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="1.jpg" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <button class="btn btn-primary">Button</button> <button class="btn btn-default">Button</button> </div> </div> </div> </div>