bootstrap学习10-巨幕 页头 缩略图 警告框组件

<!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>&times;</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>

 

posted @ 2017-02-12 16:05  daniel-lij  阅读(150)  评论(0编辑  收藏  举报