"带图片文章列表"
Bootstrap 3.1.0 Snippet by naodan

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-8"> <h4><strong><a href="#">文章标题</a></strong></h4> </div> </div> <div class="row"> <div class="col-md-2"> <a href="#" class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> </a> </div> <div class="col-md-6"> <p> 我问佛:为何不给所有女子羞花闭月的容颜?佛曰:那只是昙花的一现,用来蒙蔽世俗的眼,没有什么美可以抵过一颗纯净仁爱的心,我把它赐给每一个女子,可有人让它蒙上了灰。 </p> <p><a class="btn" href="#">阅读全文</a></p> </div> </div> <div class="row"> <div class="col-md-8"> <p></p> <p> <i class="icon-user"></i> by <a href="#">发布者</a> | <i class="icon-calendar"></i> 2014年5月4日 | <i class="icon-comment"></i> <a href="#">3 条回复</a> | <i class="icon-share"></i> <a href="#">转发 39 次</a> | <i class="icon-tags"></i> Tags : <a href="#"><span class="label label-info">Snipp</span></a> <a href="#"><span class="label label-info">Bootstrap</span></a> <a href="#"><span class="label label-info">UI</span></a> <a href="#"><span class="label label-info">growth</span></a> </p> </div> </div> </div> </div> <hr> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-8"> <h4><strong><a href="#">文章标题</a></strong></h4> </div> </div> <div class="row"> <div class="col-md-2"> <a href="#" class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> </a> </div> <div class="col-md-6"> <p> 我问佛:为何不给所有女子羞花闭月的容颜?佛曰:那只是昙花的一现,用来蒙蔽世俗的眼,没有什么美可以抵过一颗纯净仁爱的心,我把它赐给每一个女子,可有人让它蒙上了灰。 </p> </div> </div> <div class="row"> <div class="col-md-8"> <p></p> <p> <i class="icon-user"></i> by <a href="#">Mark</a> | <i class="icon-calendar"></i> 2014年5月4日 | <i class="icon-comment"></i> <a href="#">3条回复</a> | <i class="icon-share"></i> <a href="#">转发 39 次</a> | <i class="icon-tags"></i> Tags : <a href="#"><span class="label label-info">Snipp</span></a> <a href="#"><span class="label label-info">Bootstrap</span></a> <a href="#"><span class="label label-info">UI</span></a> <a href="#"><span class="label label-info">growth</span></a> </p> </div> </div> </div> </div> <hr> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-8"> <h4><strong><a href="#">文章标题</a></strong></h4> </div> </div> <div class="row"> <div class="col-md-2"> <a href="#" class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> </a> </div> <div class="col-md-6"> <p> 我问佛:为何不给所有女子羞花闭月的容颜?佛曰:那只是昙花的一现,用来蒙蔽世俗的眼,没有什么美可以抵过一颗纯净仁爱的心,我把它赐给每一个女子,可有人让它蒙上了灰。 </p> <p><a href="#">阅读全文</a></p> </div> </div> <div class="row"> <div class="col-md-8"> <p></p> <p> <i class="icon-user"></i> by <a href="#">Mark</a> | <i class="icon-calendar"></i> 2014年5月4日 | <i class="icon-comment"></i> <a href="#">3条回复</a> | <i class="icon-share"></i> <a href="#">转发 39 次</a> | <i class="icon-tags"></i> Tags : <a href="#"><span class="label label-info">Snipp</span></a> <a href="#"><span class="label label-info">Bootstrap</span></a> <a href="#"><span class="label label-info">UI</span></a> <a href="#"><span class="label label-info">growth</span></a> </p> </div> </div> </div> </div> <hr>

Related: See More


Questions / Comments: