<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>巨幕页头缩略图和警告框组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- <div class="container"> <div class="jumbotron"> <h3>网站标题</h3> <p>我是网站的简介</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> --> <!-- <div class="jumbotron"> <div class="container"> <h3>网站标题</h3> <p>我是网站的简介</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> --> <!-- <div class="page-header"> <h1>我是大标题 <small>我是小标题</small></h1> </div> --> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail"> <img src="img/aaa.jpg" alt=""> <div class="caption"> <h3>图片</h3> <p>关于这张图片的详情!</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail"> <img src="img/aaa.jpg" alt=""> <div class="caption"> <h3>图片</h3> <p>关于这张图片的详情!</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail"> <img src="img/aaa.jpg" alt=""> <div class="caption"> <h3>图片</h3> <p>关于这张图片的详情!</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail"> <img src="img/aaa.jpg" alt=""> <div class="caption"> <h3>图片</h3> <p>关于这张图片的详情!</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> </div> </div> </div> <div class="alert alert-success" style="margin: 0 200px;"> 我是一个成功警告框!请下载 <a href="#" class="alert-link">最新版本</a> <button class="close" data-dismiss="alert"><span>×</span></button> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图: