<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>巨幕 页头 缩略图 警告框组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <style> .a{ border: 1px solid red; height: 50px; background-color: aquamarine; } </style> <body style="margin:50px;"> <!--巨幕展示网站最关键的部分 jumbotron 巨幕组件 page-header 页头组件 thumbnail 缩略图 --> <div class="container"> <div class="jumbotron"> <h2>网站标题</h2> <p>我是网站的详细简介</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> <div class="page-header"> <h2>我是大标题<small>我是小标题</small></h2> </div> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-6 "> <div class="thumbnail"> <img src="img/0.png" alt="pic" /> <h3>图片</h3> <p>关于这张图片</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6 "> <div class="thumbnail"> <img src="img/0.png" alt="pic" /> <h3>图片</h3> <p>关于这张图片</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6 "> <div class="thumbnail"> <img src="img/0.png" alt="pic" /> <h3>图片</h3> <p>关于这张图片</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6 "> <div class="thumbnail"> <img src="img/0.png" alt="pic" /> <h3>图片</h3> <p>关于这张图片</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div> </div> </div> <!-- alert 警告框组件 alert-success 警告框样式 close 关闭的css样式 data-dismiss=“alert” js样式 alert-link 插入链接样式 --> <div class="alert alert-success" style="margin: 0 100px;"> 警告框下载<a href="" class="alert-link">最新版本</a> <div class="close" data-dismiss="alert" ><span>×</span></div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> </body> </html>