2019-06-10 Bootstrap

今日內(nèi)容

一. Bootstrap

Bootstrap：

一. 概念：一個前端開發(fā)的框架，Bootstrap，來自 Twitter把介，是目前很受歡迎的前端框架暑刃。Bootstrap 是基于 HTML厢漩、CSS、JavaScript 的岩臣，它簡潔靈活溜嗜，使得 Web 開發(fā)更加快捷。
* 框架:一個半成品軟件婿脸，開發(fā)人員可以在框架基礎(chǔ)上粱胜，在進行開發(fā)，簡化編碼狐树。
* 好處：
1. 定義了很多的css樣式和js插件焙压。我們開發(fā)人員直接可以使用這些樣式和插件得到豐富的頁面效果。
2. 響應(yīng)式布局。
* 同一套頁面可以兼容不同分辨率的設(shè)備涯曲。

二. 快速入門
1. 下載Bootstrap
2. 在項目中將這三個文件夾復(fù)制
3. 創(chuàng)建html頁面野哭，引入必要的資源文件

        <!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標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后幻件！ -->
            <title>Bootstrap HelloWorld</title>
        
            <!-- Bootstrap -->
            <link href="css/bootstrap.min.css" rel="stylesheet">
        
        
            <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery拨黔，所以必須放在前邊) -->
            <script src="js/jquery-3.2.1.min.js"></script>
            <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件绰沥。 -->
            <script src="js/bootstrap.min.js"></script>
        </head>
        <body>
        <h1>你好篱蝇，世界！</h1>
        
        </body>
        </html>

響應(yīng)式布局

一. 同一套頁面可以兼容不同分辨率的設(shè)備徽曲。
二. 實現(xiàn)：依賴于柵格系統(tǒng)：將一行平均分成12個格子零截，可以指定元素占幾個格子
*步驟：
a. 定義容器。相當(dāng)于之前的table秃臣、
* 容器分類：
i. container：兩邊留白
ii. container-fluid：每一種設(shè)備都是100%寬度
b. 定義行涧衙。相當(dāng)于之前的tr 樣式：row
c. 定義元素。指定該元素在不同的設(shè)備上奥此，所占的格子數(shù)目弧哎。樣式：col-設(shè)備代號-格子數(shù)目
* 設(shè)備代號：
i. xs：超小屏幕手機 (<768px)：col-xs-12
ii. sm：小屏幕平板 (≥768px)
iii. md：中等屏幕桌面顯示器 (≥992px)
iv. lg：大屏幕大桌面顯示器 (≥1200px)

注意：
1. 一行中如果格子數(shù)目超過12，則超出部分自動換行稚虎。
2. 柵格類屬性可以向上兼容撤嫩。柵格類適用于與屏幕寬度大于或等于分界點大小的設(shè)備。
3. 如果真實設(shè)備寬度小于了設(shè)置柵格類屬性的設(shè)備代碼的最小值祥绞，會一個元素沾滿一整行非洲。

<div class="container-fluid">
    <div class="row">
        <img src="img/footer_service.png">
    </div>
    <div class="row">
        <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/jiangxuan_1.jpg">
                        <p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)
                        </p>
                        <font color="red">￥  899</font>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/jiangxuan_1.jpg">
                        <p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)
                        </p>
                        <font color="red">￥  899</font>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/jiangxuan_1.jpg">
                        <p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)
                        </p>
                        <font color="red">￥  899</font>
                    </div>
                </div>
    </div>
</div>

CSS樣式和JS插件

一. 全局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"
二. 組件：
* 導(dǎo)航條
* 分頁條
三. 插件：
* 輪播圖

## 案例
    <!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標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后蜕径！ -->
        <title>Bootstrap HelloWorld</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
    
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery两踏，所以必須放在前邊) -->
        <script src="js/jquery-3.2.1.min.js"></script>
        <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件兜喻。 -->
        <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>
           <!--導(dǎo)航欄-->
           <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晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                       <font color="red">&yen; 699</font>
                   </div>
               </div>
    
    
           </div>
           <div class="row jx">
               <img src="img/icon_6.jpg">
               <span>國內(nèi)游</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晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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">
               江蘇傳智播客教育科技股份有限公司 版權(quán)所有Copyright 2006-2018, All Rights Reserved 蘇ICP備16007882
           </div>
    
       </footer>
    
    
    </body>
    </html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末梦染，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子朴皆，更是在濱河造成了極大的恐慌帕识，老刑警劉巖，帶你破解...
沈念sama閱讀 218,204評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件遂铡，死亡現(xiàn)場離奇詭異肮疗，居然都是意外死亡，警方通過查閱死者的電腦和手機扒接，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,091評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門伪货，熙熙樓的掌柜王于貴愁眉苦臉地迎上來们衙，“玉大人，你說我怎么就攤上這事碱呼∶商簦” “怎么了？”我有些...
開封第一講書人閱讀 164,548評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵愚臀，是天一觀的道長忆蚀。經(jīng)常有香客問我，道長姑裂，這世上最難降的妖魔是什么馋袜？我笑而不...
開封第一講書人閱讀 58,657評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮炭分，結(jié)果婚禮上桃焕，老公的妹妹穿的比我還像新娘。我一直安慰自己捧毛，他們只是感情好，可當(dāng)我...
茶點故事閱讀 67,689評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布让网。她就那樣靜靜地躺著呀忧，像睡著了一般。火紅的嫁衣襯著肌膚如雪溃睹。梳的紋絲不亂的頭發(fā)上而账，一...
開封第一講書人閱讀 51,554評論 1贊 305
城市分裂傳說
那天，我揣著相機與錄音因篇，去河邊找鬼泞辐。笑死，一個胖子當(dāng)著我的面吹牛竞滓，可吹牛的內(nèi)容都是我干的咐吼。我是一名探鬼主播，決...
沈念sama閱讀 40,302評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼商佑，長吁一口氣：“原來是場噩夢啊……” “哼锯茄！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起茶没，我...
開封第一講書人閱讀 39,216評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤肌幽，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后抓半，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體喂急，經(jīng)...
沈念sama閱讀 45,661評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,851評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年笛求，在試婚紗的時候發(fā)現(xiàn)自己被綠了廊移。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片讥蔽。...
茶點故事閱讀 39,977評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖画机，靈堂內(nèi)的尸體忽然破棺而出冶伞，到底是詐尸還是另有隱情，我是刑警寧澤步氏，帶...
沈念sama閱讀 35,697評論 5贊 347
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布响禽，位于F島的核電站，受9級特大地震影響荚醒，放射性物質(zhì)發(fā)生泄漏芋类。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,306評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一界阁、第九天我趴在偏房一處隱蔽的房頂上張望侯繁。院中可真熱鬧，春花似錦泡躯、人聲如沸贮竟。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,898評論 0贊 22
一樁弒父案较剃，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽咕别。三九已至，卻和暖如春写穴，著一層夾襖步出監(jiān)牢的瞬間惰拱，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,019評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工啊送，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留偿短，地道東北人。一個月前我還...
沈念sama閱讀 48,138評論 3贊 370
代替公主和親
正文我出身青樓馋没，卻偏偏與公主長得像昔逗，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子披泪，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,927評論 2贊 355

2019-06-10 Bootstrap

今日內(nèi)容

Bootstrap：

響應(yīng)式布局

CSS樣式和JS插件

推薦閱讀更多精彩內(nèi)容