01_Bootstrap

簡(jiǎn)介

什么是Bootstrap？

  • 框架：庫(kù) lib library

  • jQuery作為一個(gè)框架來(lái)講，提供一套比較便捷的操作DOM的方式

  • 把大家都需要的功能預(yù)先寫(xiě)好到一些文件 這就是一個(gè)框架

  • Bootstrap 讓我們的 Web 開(kāi)發(fā)更簡(jiǎn)單，更快捷；

  • 注意是 Bootstrap 不是 BootStrap！這是一個(gè)詞，不是合成詞，其含義為：n. 引導(dǎo)指令,引導(dǎo)程序

  • Bootstrap 是當(dāng)下最流行的前端框架（界面工具集）；

  • 特點(diǎn)就是靈活簡(jiǎn)潔，代碼優(yōu)雅，美觀大方；

  • 其目的是為了讓 Web 開(kāi)發(fā)更敏捷；

  • 是 Twitter 公司的兩名前端工程師 Mark Otto 和 Jacob Thornton 在 2011 - 年發(fā)起的，并利用業(yè)余時(shí)間完成第一個(gè)版本的開(kāi)發(fā)；

為什么使用Bootstarp？

  • 生態(tài)圈火，不斷地更新迭代；
  • 提供一套美觀大方地界面組件；
  • 提供一套優(yōu)雅的 HTML+CSS 編碼規(guī)范；
  • 讓我們的 Web 開(kāi)發(fā)更簡(jiǎn)單，更快捷；

注意：

使用 Bootstrap 并不代表不用寫(xiě) CSS 樣式，而是不用寫(xiě)絕大多數(shù)大家都會(huì)用到的樣式

準(zhǔn)備

下載Bootstrap

Compatible

設(shè)置IE瀏覽器的兼容模式版本

<meta http-equiv="X-UA-Compatible" content="IE=7">

element快捷語(yǔ)法：meta:compat

  • <meta http-equiv="X-UA-Compatible" content="IE=7">
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">

viewport視口

聲明當(dāng)前網(wǎng)頁(yè)在移動(dòng)端瀏覽器中展示的相關(guān)設(shè)置
element快捷語(yǔ)法:meta:vp

<meta name="viewport" content="width=device-width, initial-scale=1">

  • 視口的作用：在移動(dòng)瀏覽器中，當(dāng)頁(yè)面寬度超出設(shè)備，瀏覽器內(nèi)部虛擬的一個(gè)頁(yè)面容器，將頁(yè)面容器縮放到設(shè)備這么大，然后展示
  • 目前大多數(shù)手機(jī)瀏覽器的視口（承載頁(yè)面的容器）寬度都是980；
  • 視口的寬度可以通過(guò)meta標(biāo)簽設(shè)置
  • 此屬性為移動(dòng)端頁(yè)面視口設(shè)置，當(dāng)前值表示在移動(dòng)端頁(yè)面的寬度為設(shè)備的寬度，并且不縮放（縮放級(jí)別為1）
    • width:視口的寬度
    • initial-scale：初始化縮放
    • user-scalable:是否允許用戶自行縮放（值：yes/no; 1/0）
    • minimum-scale:最小縮放，一般設(shè)置了用戶不允許縮放，就沒(méi)必要設(shè)置最小和最大縮放
    • maximum-scale:最大縮放

條件注釋

  • 條件注釋的作用就是當(dāng)判斷條件滿足時(shí)，就會(huì)執(zhí)行注釋中的HTML代碼，不滿足時(shí)會(huì)當(dāng)做注釋忽略掉
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  • html5shiv.js讓瀏覽器可以識(shí)別HTML5的新標(biāo)簽
  • respond.js讓低版本瀏覽器可以使用CSS3的媒體查詢(xún)
  • 通過(guò)file://的形式訪問(wèn)頁(yè)面， respond.js不生效

基礎(chǔ)的Bootstrap模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 默認(rèn)用IE最新瀏覽器引擎渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 聲明當(dāng)前網(wǎng)頁(yè)在移動(dòng)端瀏覽器中展示的相關(guān)設(shè)置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>Document</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">

    <!--[if lt IE 9]>
      <script src="lib/html5shiv/html5shiv.min.js"></script>
      <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="lib/jquery/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

第三方依賴(lài)

  • jQuery
    Bootstrap框架中的所有JS組件都依賴(lài)于jQuery實(shí)現(xiàn)

  • html5shiv
    讓低版本瀏覽器可以識(shí)別HTML5的新標(biāo)簽，如header、footer、section等

  • respond
    讓低版本瀏覽器可以支持CSS媒體查詢(xún)功能

注：建議以后在HTML中將腳步的引入放到頁(yè)面最底下

.container

Bootstrap中響應(yīng)式容器
　　會(huì)根據(jù)屏幕寬度改變寬度，有三個(gè)等級(jí)：1140px>970px>740px。當(dāng)屏幕小于740px時(shí)，屏幕寬度多大.container盒子寬度就有多大。

mediaquery

@media (判斷條件（針對(duì)于當(dāng)前窗口的判斷）){
    /*這里的代碼只有當(dāng)判斷條件滿足時(shí)才會(huì)執(zhí)行*/
}

@media (min-width: 768px) and (max-width: 992px) {
  /*這里的代碼只有當(dāng)(min-width: 1280px)滿足時(shí)才會(huì)執(zhí)行*/
  .container {
    width: 750px;
  }
}
  • 當(dāng)使用min-width作為判斷條件一定要從小到大，其原因是CSS從上往下執(zhí)行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒體查詢(xún)</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            height: 1000px;
            background-color: red;
        }
        .container{
            width: 100%;
            margin: 0 auto;
        }
        /*媒體查詢(xún)  當(dāng)使用min-width作為判斷條件的時(shí)候，一定要從小到大的來(lái)寫(xiě)，原因是CSS是從上往下執(zhí)行*/
        @media (min-width: 768px) {
            .container{
                width: 750px;
            }
        }
        @media (min-width: 992px) {
            .container{
                width: 970px;
            }
        }
        @media (min-width: 1200px) {
            .container{
                width: 1170px;
            }
        }
        @media (min-width: 1280px) {
            .container{
                width: 1280px;
            }
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

柵格系統(tǒng)

  • Bootstrap中定義了一套響應(yīng)式的網(wǎng)格系統(tǒng)，
  • 其使用方式就是將一個(gè)容器劃分成12列，
  • 然后通過(guò)col-xx-xx的類(lèi)名控制每一列的占比

.row類(lèi)

  • 因?yàn)槊恳粋€(gè)列默認(rèn)有一個(gè)15px的左右外邊距
  • row類(lèi)的一個(gè)作用就是通過(guò)左右-15px屏蔽掉這個(gè)邊距
<div class="container">
  <div class="row"></div>
</div>

.col-**-*類(lèi)

  • col-xs-[列數(shù)]：在超小屏幕下展示幾份
  • col-sm-[列數(shù)]：在小屏幕下展示幾份
  • col-md-[列數(shù)]：在中等屏幕下展示幾份
  • col-lg-[列數(shù)]：在大屏幕下展示幾份
  • xs : 超小屏幕 手機(jī) (<768px)
  • sm : 小屏幕 平板 (≥768px)
  • md : 中等屏幕 桌面顯示器 (≥992px)
  • lg : 大屏幕 大桌面顯示器 (≥1200px)
<div class="row">
  <div class="col-md-2 text-center"></div>
  <div class="col-md-5 text-center"></div>
  <div class="col-md-2 text-center"></div>
  <div class="col-md-3 text-center"></div>
</div>

此處頂部通欄已經(jīng)被劃分成四列
text-center的作用就是讓內(nèi)部?jī)?nèi)容居中顯示

hover圖片展示

.mobile-link:hover > img {
  display: block;
}

按鈕樣式生成

.btn-itcast {
  color: #ffffff;
  background-color: #E92322;
  border-color: #DB3B43;
}

.btn-itcast:hover,
.btn-itcast:focus,
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
  color: #ffffff;
  background-color: #E92322;
  border-color: #DB3B43;
}

.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
  background-image: none;
}

.btn-itcast.disabled,
.btn-itcast[disabled],
fieldset[disabled] .btn-itcast,
.btn-itcast.disabled:hover,
.btn-itcast[disabled]:hover,
fieldset[disabled] .btn-itcast:hover,
.btn-itcast.disabled:focus,
.btn-itcast[disabled]:focus,
fieldset[disabled] .btn-itcast:focus,
.btn-itcast.disabled:active,
.btn-itcast[disabled]:active,
fieldset[disabled] .btn-itcast:active,
.btn-itcast.disabled.active,
.btn-itcast[disabled].active,
fieldset[disabled] .btn-itcast.active {
  background-color: #E92322;
  border-color: #DB3B43;
}

.btn-itcast .badge {
  color: #E92322;
  background-color: #ffffff;
}

小屏幕隱藏

<div class="topbar hidden-xs hidden-sm"></div>

或者

<div class="topbar visible-md visible-lg"></div>
  • hidden-xx : 在某種屏幕下隱藏
  • visible-xx : 在某種屏幕尺寸下顯示
    • visible-xx-xx：最后一個(gè)xx是決定顯示時(shí)的display到底是啥
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、什么是Bootstrap？ 框架：庫(kù) lib library jQuery作為一個(gè)框架來(lái)講，提供一套比較便捷的...
    EndEvent閱讀 545評(píng)論 0贊 3
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,155評(píng)論 1贊 92
  • Bootstrap是什么？ 一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 11,135評(píng)論 3贊 184
  • 開(kāi)篇廢話是一種情懷 上一篇說(shuō)到Less預(yù)處理語(yǔ)言,這節(jié)就著重講下Bootstrap框架,這款框架應(yīng)該是現(xiàn)在前端人手...
    西巴擼閱讀 782評(píng)論 1贊 4
  • 第2章 Bootstrap 網(wǎng)格系統(tǒng) 在這一章，我們將討論Bootstrap一個(gè)最重要的功能：網(wǎng)格系統(tǒng)。我們將學(xué)會(huì)...
    海上名月閱讀 971評(píng)論 0贊 7

友情鏈接更多精彩內(nèi)容