他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

WEB前端響應式布局之BootStarp使用

2019-5-27    seo達人

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

Bootstrap:
 

1. 概念: 一個前端開發的框架,Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它簡潔靈活,使得 Web 開發更加快捷。
    * 框架:一個半成品軟件,開發人員可以在框架基礎上,在進行開發,簡化編碼。
    * 好處:
        1. 定義了很多的css樣式和js插件。我們開發人員直接可以使用這些樣式和插件得到豐富的頁面效果。
        2. 響應式布局。
            * 同一套頁面可以兼容不同分辨率的設備。

2. 快速入門
  
    1. 下載Bootstrap
    2. 在項目中將這三個文件夾復制
    3. 創建html頁面,引入必要的資源文件

3.演示案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面,任何其他內容都*必須*跟隨其后! -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <h1>你好,世界!</h1>
</body>
</html>
響應式布局
同一套頁面可以兼容不同分辨率的設備。
* 實現:依賴于柵格系統:將一行平均分成12個格子,可以指定元素占幾個格子
* 步驟:
    1. 定義容器。相當于之前的table、
        * 容器分類:
            1. container:兩邊留白
            2. container-fluid:每一種設備都是100%寬度
    2. 定義行。相當于之前的tr   樣式:row
    3. 定義元素。指定該元素在不同的設備上,所占的格子數目。樣式:col-設備代號-格子數目
        * 設備代號:
            1. xs:超小屏幕 手機 (<768px):col-xs-12
            2. sm:小屏幕 平板 (≥768px)
            3. md:中等屏幕 桌面顯示器 (≥992px)
            4. lg:大屏幕 大桌面顯示器 (≥1200px)

    * 注意:
        1. 一行中如果格子數目超過12,則超出部分自動換行。
        2. 柵格類屬性可以向上兼容。柵格類適用于與屏幕寬度大于或等于分界點大小的設備。
        3. 如果真實設備寬度小于了設置柵格類屬性的設備代碼的最小值,會一個元素沾滿一整行。

CSS樣式和JS插件
 

1. 全局CSS樣式:
    * 按鈕:class="btn btn-default"
    * 圖片:
        *  class="img-responsive":圖片在任意尺寸都占100%
        *  圖片形狀
            *  <img src="..." alt="..." class="img-rounded">:方形
            *  <img src="..." alt="..." class="img-circle"> : 圓形
            *  <img src="..." alt="..." class="img-thumbnail"> :相框
    * 表格
        * table
        * table-bordered
        * table-hover
    * 表單
        * 給表單項添加:class="form-control" 
2. 組件:
    * 導航條
    * 分頁條
3. 插件:
    * 輪播圖

 

演示案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面,任何其他內容都*必須*跟隨其后! -->
    <title>Bootstrap HelloWorld</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .paddtop{
            padding-top: 10px;
        }
        .search-btn{
            float: left;
            border:1px solid #ffc900;
            width: 90px;
            height: 35px;
            background-color:#ffc900 ;
            text-align: center;
            line-height: 35px;
            margin-top: 15px;
        }
 
        .search-input{
            float: left;
            border:2px solid #ffc900;
            width: 400px;
            height: 35px;
            padding-left: 5px;
            margin-top: 15px;
        }
        .jx{
            border-bottom: 2px solid #ffc900;
            padding: 5px;
        }
        .company{
            height: 40px;
            background-color: #ffc900;
            text-align: center;
            line-height:40px ;
            font-size: 8px;
        }
    </style>
</head>
<body>
 
   <!-- 1.頁眉部分-->
   <header class="container-fluid">
       <div class="row">
           <img src="img/top_banner.jpg" class="img-responsive">
       </div>
       <div class="row paddtop">
           <div class="col-md-3">
               <img src="img/logo.jpg" class="img-responsive">
           </div>
           <div class="col-md-5">
               <input class="search-input" placeholder="請輸入線路名稱">
               <a class="search-btn" href="#">搜索</a>
           </div>
           <div class="col-md-4">
               <img src="img/hotel_tel.png" class="img-responsive">
           </div>
 
       </div>
       <!--導航欄-->
       <div class="row">
           <nav class="navbar navbar-default">
               <div class="container-fluid">
                   <!-- Brand and toggle get grouped for better mobile display -->
                   <div class="navbar-header">
                       <!-- 定義漢堡按鈕 -->
                       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                       </button>
                       <a class="navbar-brand" href="#">首頁</a>
                   </div>
 
                   <!-- Collect the nav links, forms, and other content for toggling -->
                   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                       <ul class="nav navbar-nav">
                           <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                           <li><a href="#">Link</a></li>
                           <li><a href="#">Link</a></li>
                           <li><a href="#">Link</a></li>
                           <li><a href="#">Link</a></li>
                           <li><a href="#">Link</a></li>
 
                       </ul>
                   </div><!-- /.navbar-collapse -->
               </div><!-- /.container-fluid -->
           </nav>
 
       </div>
 
       <!--輪播圖-->
       <div class="row">
           <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
               <!-- Indicators -->
               <ol class="carousel-indicators">
                   <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2"></li>
               </ol>
 
               <!-- Wrapper for slides -->
               <div class="carousel-inner" role="listbox">
                   <div class="item active">
                       <img src="img/banner_1.jpg" alt="...">
                   </div>
                   <div class="item">
                       <img src="img/banner_2.jpg" alt="...">
                   </div>
                   <div class="item">
                       <img src="img/banner_3.jpg" alt="...">
                   </div>
 
               </div>
 
               <!-- Controls -->
               <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                   <span class="sr-only">Previous</span>
               </a>
               <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                   <span class="sr-only">Next</span>
               </a>
           </div>
    </div>
 
 </header>
<!-- 2.主體部分-->
   <div class="container">
        <div class="row jx">
            <img src="img/icon_5.jpg">
            <span>黑馬精選</span>
        </div>
 
       <div class="row paddtop">
           <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/jiangxuan_3.jpg" alt="">
                    <p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                    <font color="red">&yen; 699</font>
                </div>
           </div>
           <div class="col-md-3">
               <div class="thumbnail">
                   <img src="img/jiangxuan_3.jpg" alt="">
                   <p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                   <font color="red">&yen; 699</font>
               </div>
 
           </div>
           <div class="col-md-3">
 
               <div class="thumbnail">
                   <img src="img/jiangxuan_3.jpg" alt="">
                   <p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                   <font color="red">&yen; 699</font>
               </div>
           </div>
           <div class="col-md-3">
 
               <div class="thumbnail">
                   <img src="img/jiangxuan_3.jpg" alt="">
                   <p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                   <font color="red">&yen; 699</font>
               </div>
           </div>
           </div>
           <div class="row jx">
               <img src="img/icon_6.jpg">
               <span>國內游</span>
           </div>
           <div class="row paddtop">
               <div class="col-md-4">
                   <img src="img/guonei_1.jpg">
               </div>
               <div class="col-md-8">
                   <div class="row">
                       <div class="col-md-4">
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
                       </div>
                       <div class="col-md-4">
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
 
                       </div>
                       <div class="col-md-4">
 
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
                       </div>
 
                   </div>
                   <div class="row">
                       <div class="col-md-4">
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
                       </div>
                       <div class="col-md-4">
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
 
                       </div>
                       <div class="col-md-4">
 
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
                       </div>
                        </div>
 
           </div>
 
       </div>
   </div>
   <!-- 3.頁腳部分-->
   <footer class="container-fluid">
       <div class="row">
           <img src="img/footer_service.png" class="img-responsive">
       </div>
       <div class="row company">
           CSDN博客楊校老師 版權所有Copyright 2017-2019, All Rights Reserved 魯ICP備19007759號-1
       </div>
 
   </footer>
</body>
</html> 
藍藍設計ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://ssll180.com

存檔