追求卓越一諾千金

藍藍設計||_正大天地,2011年成立-_|易彩属违法行为吗,主創清華團隊-|闫雪瑞,專注軟件和互聯網ui設計開發__|仲博平台注册账号。擅長企業信息化管理_-十堰物流云帆t、監控-_永胜彩票平台、大數據軟件UIUE谘詢和設計開發服務|||198彩票总代。立足UI-联想旭日c466,好好學習-辽宁电视台全运频道,天天進步_-|亿博娱乐登录网站!


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

2019-5-27 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容_-_qq空间克隆下载,每天自動發到您的郵箱中|_1399pk皇家彩世界, 請點這裏

Bootstrap-_-许昌胖子店:
 

1. 概念|--耳鼻喉科解放军466医院: 一個前端開發的框架---东北二嫂百度云,Bootstrap||-天目通移动维修论坛,來自 Twitter-|众博国际怎么样,是目前很受歡迎的前端框架|_闪光夫妇为什么下车。Bootstrap 是基於 HTML--诺瑞斯、CSS||靓眼网、JavaScript 的_-悟空传电影百度云,它簡潔靈活-_|长治文明小博客,使得 Web 開發更加快捷|18种预示好运来临。
    * 框架:一個半成品軟件_-_中兴彩票是什么,開發人員可以在框架基礎上-__快乐大本营陆贞传奇完整版,在進行開發-亿发国际官网ibb,簡化編碼--西瓜晶。
    * 好處___众亿彩票被骗:
        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標簽*必須*放在最前麵--|106苹果版本,任何其他內容都*必須*跟隨其後-||陕西医科大学! -->
    <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 插件_|-乔洋演唱会。你也可以根據需要隻加載單個插件|-赢彩网app下载。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <h1>你好___该隐打卡修斯,世界|_dell显示器保修查询!</h1>
</body>
</html>
響應式布局
同一套頁麵可以兼容不同分辨率的設備-|北京466耳鼻咽喉医院。
* 實現_-曹淳亮:依賴於柵格係統|-_moluoke:將一行平均分成12個格子_镇江警官学校,可以指定元素占幾個格子
* 步驟_铁粉吧:
    1. 定義容器-_外地二手车过户北京。相當於之前的table_|优胜彩票、
        * 容器分類_|-西安都市快报直播:
            1. container||众发娱乐代理能提现吗:兩邊留白
            2. container-fluid-|小米盒子越狱:每一種設備都是100%寬度
    2. 定義行_|mc水观音擦皮鞋歌词。相當於之前的tr   樣式-__dhc滋养化妆水:row
    3. 定義元素_-|玫琳凯之窗登录。指定該元素在不同的設備上_--艺考生百日冲刺,所占的格子數目|__中国军衔胸章。樣式_-中博彩票平台可靠吗?:col-設備代號-格子數目
        * 設備代號铺铺儿:
            1. xs-|邯郸晚报电子版:超小屏幕 手機 (<768px)|168开奖网APP:col-xs-12
            2. sm_-038彩票平台坑人吗:小屏幕 平板 (≥768px)
            3. md_|驿站网络日记本:中等屏幕 桌麵顯示器 (≥992px)
            4. lg--家有辣嫂2:大屏幕 大桌麵顯示器 (≥1200px)

    * 注意-|-盈盈彩平台:
        1. 一行中如果格子數目超過12-|优彩娱乐平台是真的吗,則超出部分自動換行-_助赢在哪下载。
        2. 柵格類屬性可以向上兼容_-金大班结局。柵格類適用於與屏幕寬度大於或等於分界點大小的設備|_-雷克萨斯ex350。
        3. 如果真實設備寬度小於了設置柵格類屬性的設備代碼的最小值|_-2元彩票网走势图大全,會一個元素沾滿一整行||-105彩票怎么玩。

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"> _|htcg13报价:相框
    * 表格
        * table
        * table-bordered
        * table-hover
    * 表單
        * 給表單項添加__-淘宝网耐克鞋:class="form-control" 
2. 組件|-易彩娱乐1957:
    * 導航條
    * 分頁條
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標簽*必須*放在最前麵|__pp助手源地址,任何其他內容都*必須*跟隨其後|||长青贝妮! -->
    <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 插件-|2元体彩七星彩走势图。你也可以根據需要隻加載單個插件__壮警的烦恼(h) txt。 -->
    <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> 
藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_|-整点聚怎么抢,為期望卓越的國內外企業提供卓越的UI界麵設計__永盛彩票网手机app、BS界麵設計 __计提职工福利费、 cs界麵設計 ||广州华英雄手机店、 ipad界麵設計 _|锥子脸蒂娜、 包裝設計 -_天国凤凰第二部全集、 圖標定製 -_-上海配汽车钥匙、 用戶體驗 |pdf7 0专业版、交互設計--来凤百姓、 網站建設 ||_毕业证复印件生成器、平麵設計服務|||中国大陆身份证生成器。

標簽: WEB前端響應式布局之BootStarp使用 « 知乎 Redesign 視覺設計 | 用一個實戰案例|_-阳羡茶,告訴你如何處理複雜需求_-_苏州十中吧!»


訂閱Rss