zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    yii 引入文件
    CodeForces 621C Wet Shark and Flowers
    面试题题解
    POJ 2251 Dungeon Master
    HDU 5935 Car(模拟)
    HDU 5938 Four Operations(暴力枚举)
    CodeForces 722C Destroying Array(并查集)
    HDU 5547 Sudoku(dfs)
    HDU 5583 Kingdom of Black and White(模拟)
    HDU 5512 Pagodas(等差数列)
  • 原文地址:https://www.cnblogs.com/daniel-lij/p/6391184.html
Copyright © 2011-2022 走看看