Boostrap 基礎(chǔ)知識

前置知識 （默認 CSS）

{
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
h1{
    font-size:36px;
    margin-top:20px;
    margin-bottom:20px;
}
h2{
    font-size:30px;
    margin-top:20px;
    margin-bottom:20px;
}
h3{
    font-size:24px;
    margin-top:20px;
    margin-bottom:20px;
}
h4{
    font-size:18px;
    margin-top:10px;
    margin-bottom:10px;
}
h5{
    font-size:14px;
    margin-top:10px;
    margin-bottom:10px;
}
h6{
    font-size:12px;
    margin-top:10px;
    margin-bottom:10px;
}

一. 使用示例

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <!--讓IE使用最新的渲染風(fēng)格-->
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <!--設(shè)置瀏覽的寬度 初始化比例為1-->
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- 上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
      <title>Bootstrap的HTML標準模板</title>   
      <!-- Bootstrap -->
      <!-- 加載 Bootstrap 核心 CSS 文件 -->
      <link rel="stylesheet" >
      <!-- 加載自己的樣式文件 -->
      <link href="css/your-style.css" rel="stylesheet">        
      <!-- 以下兩個插件用于在IE8以及以下版本瀏覽器支持HTML5元素和媒體查詢，如果不需要用可以移除 -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
  </head>
  <body>
      <h1>Hello, world!</h1>
      <!-- 如果要使用Bootstrap的js插件，必須先調(diào)入jQuery -->
      <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
      <!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用　-->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

二. 布局容器

顧名思義，就是放Bootstrap代碼的容器，只有放在container里面的html代碼才會被Bootstrap識別。


注：我們要把Bootstrap的HTML的代碼都放在 帶 container 或者 container-fluid類的 <div>標簽中.

三. container 和 container-fluid

  • 數(shù)據(jù)行（.row）必須包含在容器.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)填充（padding）。如：
<div class="container"><!-- 水平居中，兩邊有margin，最小屏幕時，充滿父元素 -->
 <div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默認一直充滿整個父元素 -->
 <div class="row"></div>
</div>
  • 在數(shù)據(jù)行（.row)中可以添加列（column），但列數(shù)之和不能超過平分的總列數(shù)（在超過時，多余部分會換行顯示），默認12。
<div class="container">
 <div class="row">
     <!-- 如：2+6+4=12 -->
     <div class="col-md-2"></div>
     <div class="col-md-6"></div>
     <div class="col-md-4"></div>
 </div>
</div>

  • 詳細查詢


四. 媒體查詢

下面是媒體查詢（media query）的基本結(jié)構(gòu)，根據(jù)查看網(wǎng)頁的設(shè)備的某些重要信息（比如屏幕大小、分辨率、顏色位深等），頁面可以分別應(yīng)用不同的樣式甚至替換整個樣式表。

@media (media-feature-name: value) {
 /* 符合條件時應(yīng)用的樣式 */
}

如果瀏覽器當(dāng)前的條件與圓括號中的條件匹配，它就會采用花括號中的那些樣式。如果不匹配，瀏覽器會忽略這些樣式。
注意：瀏覽器始終會采用位于 @media 代碼塊之外的樣式。滿足條件時的媒體查詢樣式是在其他樣式基礎(chǔ)上應(yīng)用的。 為此，條件式媒體查詢樣式經(jīng)常要覆蓋其他樣式，比如隱藏之前的可見元素，把區(qū)塊移動位置，調(diào)整字號等。

五. 列偏移（offset）

在某些情況下，我們不希望相鄰的列緊靠在一起，如果你希望不通過額外的margin或其他的手段來實現(xiàn)的話，Bootstrap內(nèi)置為我們提供了列偏移（offset），這一系列的類來幫助我們實現(xiàn)想要的效果。
只需要給需要偏移的列元素上添加類名 col-md-offset-* (星號代表要偏移的列組合數(shù))，那么具有這個類名的列就會向右偏移。 這些類實際是通過使用 * 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。例如：在列元素中添加.col-md-offset-6 類將 .col-md-6元素向右側(cè)偏移了6個列（column）的寬度。

<div class="container">
  <div class="row">
    <div class="col-md-2 ">col-md-8 </div>
    <div class="col-md-3 col-md-offset-2">col-md-4 col-md-offset-2</div>
    <div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div>
  </div>
</div>

使用col-md-offset-*對列進行 向右偏移 時，要 保證列與偏移列的總數(shù)不超過12，不然會致列斷行顯示。 其實原因也很簡單：因為該類是對于列設(shè)置margin-left，并且我們在上面的源碼展示中，也可以看有每一列都有著float:left的屬性，從這些地方我們就不難發(fā)現(xiàn)在（偏移+列寬）超過12時，為何會換行顯示了。

六. 列嵌套

Bootstrap框架的網(wǎng)格系統(tǒng)還支持列的嵌套。你可以在一個列中添加一個或者多個行（.row）容器，然后在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（.row），寬度為100%時，就是當(dāng)前外部列的寬度。

<div class="container">
  <div class="row">
    <div class="col-md-8">
      我的里面嵌套了一個網(wǎng)格
        <div class="row">
          <div class="col-md-6">col-md-6</div>
          <div class="col-md-6">col-md-6</div>
        </div>
    </div>
    <div class="col-md-4">col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
      我的里面嵌套了一個網(wǎng)格
      <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
      </div>
    </div>
  </div>
</div>

注意：嵌套的列總數(shù)也需要遵循不超過12列。不然會造成末位列換行顯示。

七. 列排序

列排序其實就是改變列的方向，就是 改變左右浮動，并且 設(shè)置浮動的距離。在 Bootstrap 框架的網(wǎng)格系統(tǒng)中是通過添加類名 col-md-push-* 和 col-md-pull-* (其中星號代表移動的列組合數(shù))。
col-md-push-* ：向右浮動
col-md-pull-*：向左浮動

八. 響應(yīng)式 與 實例

8.1 移動設(shè)備和桌面屏幕

是否不希望在小屏幕設(shè)備上所有列都堆疊在一起？那就使用針對超小屏幕和中等屏幕設(shè)備所定義的類吧，即 .col-xs-和 .col-md-。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-xs-6">.col-md-4 .col-xs-6</div>
        <div class="col-md-4 col-xs-6">.col-md-4 .col-xs-6</div>
        <div class="col-md-4 col-xs-6">.col-md-4 .col-xs-6</div>
    </div>
    <div class="row">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
    </div>
</div>

寬屏顯示效果如下：



窄屏顯示效果如下：



其實從上面代碼和實際的顯示效果，我們就可以看出一些問題來：
  1. 在寬屏?xí)r，使用 col-md-* 的布局方式，在窄屏?xí)r使用 col-xs-* 布局
  2. 響應(yīng)式的列重置與列中設(shè)置的類的排列順序無關(guān)。
  3. 響應(yīng)式列重置，在一個 .row 仍然存在列超過12時，col-xs-6 * 3=18。多余列的元素將作為一個整體單元被另起一行排列。

8.2 手機、平板、桌面

在上面案例的基礎(chǔ)上，通過增加使用針對平板設(shè)備的 .col-sm-* 類，我們來創(chuàng)建更加動態(tài)和強大的布局吧。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
        <div class="col-xs-6 col-sm-12 col-md-4">.col-xs-6 .col-sm-12 .col-md-4</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    </div>
</div>

寬屏：桌面



中屏：平板



窄屏：手機

然后我們從這一部分代碼與實際效果，再加上上面做的一點小總結(jié)，對比之后又能發(fā)現(xiàn)一些問題：

  1. Bootstrap中對于柵格系統(tǒng)的展示總是優(yōu)先展示對應(yīng)屏幕大小范圍的類（.col-xs-6和.col-sm-4等等）。
  2. 在為不同大小屏幕，添加多個類一定要記住在基本用法處的表格中的內(nèi)容，它決定了在不同大小屏幕下的顯示與排列。
  3. 若還要繼續(xù)添加在超大屏幕下的特定顯示效果，只需要對列再添加一個.col-lg-*的類，就能達到你所想要的。

8.3 響應(yīng)式列重置

除了在上面講到的內(nèi)容，在官方文檔中還提到了響應(yīng)式列重置，在我看來其實就是以下幾點（或者說在這樣的條件下可以使用）：

  1. 需要對于不同屏幕大小進行處理，添加多個對于列寬進行處理的類。
  2. 在縮小屏幕時，同一數(shù)據(jù)行（.row）針對小屏幕設(shè)置的類的寬度（.col-sm-*等等）加起來超過12，余下部分進行換行顯示。
  3. 在不同列的高度，有比較大的差異。可以在未超過12與超過12的部分，兩者之間添加下面這樣的代碼：<div class="clearfix visible-xs-block"></div>。（.visible-xs-block這一系列的類，會在后面進行講解） 它最主要的作用是：它是響應(yīng)式的，會占據(jù)未超過12的部分的寬高，且只有在發(fā)生列換行顯示（堆疊）才進行設(shè)置。
  4. 為了便于大家理解，我加一句：把上面那段代碼復(fù)制到數(shù)據(jù)行.row容器內(nèi)的最末端，它所占據(jù)的寬高和.row是一樣的。（內(nèi)容中有多段這樣的代碼的時候不成立，原因大家應(yīng)該都能看出來了）
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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