bootstrap_概論及栅格系統

　　此處與bootstrap3的中文文檔内容相一緻，主要是使得對bootstrap的内容進行一遍複習，以及日後再次查找資料的時候，進行使用

　　全局CSS樣式：

　　　　　　1.概論

　　　　　　　　　使用bootstrap的過程中，需要将html檔案的基本格式設定未html5的格式。

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

　　　　　　　2.移動裝置優先

　　　　　　　　　　bootstrap3關于基于移動裝置的方面已經是融合于架構之内的。也就是說是移動裝置優先的。

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

　　　　　　　　在移動裝置浏覽器上，通過為視口（viewport）設定 meta 屬性為

user-scalable=no

可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，使用者隻能滾動螢幕，就能讓你的網站看上去更像原生應用的感覺。注意，這種方式我們并不推薦所有網站使用，還是要看你自己的情況而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

　　　　　　　　　3.布局容器

　　　　　　　　　Bootstrap 需要為頁面内容和栅格系統包裹一個

.container

容器。我們提供了兩個作此用處的類。注意，由于

padding

等屬性的原因，這兩種容器類不能互相嵌套。

.container

類用于固定寬度并支援響應式布局的容器。

<div class="container">
  ...
</div>

.container-fluid

類用于 100% 寬度，占據全部視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

　　　　　　2.栅格系統

　　　　　　　　　　　Bootstrap 提供了一套響應式、移動裝置優先的流式栅格系統，随着螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。

　　　　　　　　　　　1.簡介

　　　　　　　　　　　　栅格系統用于通過一系列的行（row）與列（column）的組合來建立頁面布局，你的内容就可以放入這些建立好的布局中。下面就介紹一下 Bootstrap 栅格系統的工作原理：　　　

“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合适的排列（aligment）和内補（padding）。
通過“行（row）”在水準方向建立一組“列（column）”。
你的内容應當放置于“列（column）”内，并且，隻有“列（column）”可以作為行（row）”的直接子元素。
類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速建立栅格布局。Bootstrap 源碼中定義的 mixin 也可以用來建立語義化的布局。
通過為“列（column）”設定 padding 屬性，進而建立列與列之間的間隔（gutter）。通過為 .row 元素設定負值 margin 進而抵消掉為 .container 元素設定的 padding ，也就間接為“行（row）”所包含的“列（column）”抵消掉了 padding 。
負值的 margin就是下面的示例為什麼是向外突出的原因。在栅格列中的内容排成一行。
栅格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來建立。
如果一“行（row）”中包含了的“列（column）”大于 12，多餘的“列（column）”所在的元素将被作為一個整體另起一行排列。
栅格類适用于與螢幕寬度大于或等于分界點大小的裝置，并且針對小螢幕裝置覆寫栅格類。是以，在元素上應用任何 .col-md-* 栅格類适用于與螢幕寬度大于或等于分界點大小的裝置，并且針對小螢幕裝置覆寫栅格類。是以，在元素上應用任何 .col-lg-* 不存在，也影響大螢幕裝置。

　　　　　　　　　　　　　2.栅格參數

超小螢幕手機 (<768px)	小螢幕平闆 (≥768px)	中等螢幕桌面顯示器 (≥992px)	大螢幕大桌面顯示器 (≥1200px)
栅格系統行為	總是水準排列	開始是堆疊在一起的，當大于這些門檻值時将變為水準排列C
`.container` 最大寬度	None （自動）	750px	970px	1170px
類字首	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）數	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

　　　　　　　　　　　　　這裡需要注意的是：類字首，這個嚴格控制了螢幕的大小所使用的布局。　

　　　　　　　　　　　　　　xs sm md lg 這些都是比較重要的

　　　　　　　　　　　　 3.執行個體：多餘的列将另起一行

　　　　　　　　　　　　　　　　如果在一個

.row

内包含的列（column）大于12個，包含多餘列（column）的元素将作為一個整體單元被另起一行排列。

　　　　　　　　　　　　 4.響應式列重置

　　　　　　　　　　　　　　　　在某些門檻值時，某些列可能會出現比别的列高的情況。為了克服這一問題，建議聯合使用

.clearfix

和響應式工具類。

　　　　　　　　　　　 5.列偏移

　　　　　　　　　　　　　　　　使用

.col-md-offset-*

類可以将列向右側偏移。這些類實際是通過使用

選擇器為目前元素增加了左側的邊距（margin）。例如，

.col-md-offset-4

類将

.col-md-4

元素向右側偏移了4個列（column）的寬度。

　　　　　　　　　　　 6.嵌套類

　　　　　　　　　　　　　　　　為了使用内置的栅格系統将内容再次嵌套，可以通過添加一個新的

.row

元素和一系列

.col-sm-*

元素到已經存在的

.col-sm-*

元素内。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須占滿12列）。

　　　　　　　　　　　　7.列排序

　　　　　　　　　　　　　　　　通過使用

.col-md-push-*

和

.col-md-pull-*

類就可以很容易的改變列（column）的順序。

　　　　　　　　　　　　8.代碼示範

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>
            div{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        
        <div class="row">
          <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
          <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        </div>
        
        <br /><br /><br />
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
        
        <br /><br /><br />
        <div class="row">
          <div class="col-xs-6 col-sm-4">
              dddddddddddddddds
          </div>
          <div class="col-xs-6 col-sm-4">
              dsssdddddddddddddddds
          </div>
          <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
              ddddddddddddddddds
          </div>
        </div>
        
        <br /><br /><br />
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        
        <br /><br /><br />
        <div class="row">
          <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
          <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
        </div>
        
        <div class="row">
          <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
          <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
        </div>
        
        
        
        <br /><br /><br /><br />
        <div class="row">
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3 Resize your viewport or check it out on your phone for an example. </div>
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        
          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix visible-xs-block"></div>
        
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        </div>
        
        
        <br /><br /><br /><br />
        <div class="row">
          <div class="col-xs-9">.col-xs-9</div>
          <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
          <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
        </div>
        <br /><br /><br /><br />
        
        
        
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8">.col-md-8</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-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>
        
        
        <br /><br /><br />
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <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>
        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <div class="row">
          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        <!-- Columns are always 50% wide, on mobile and desktop -->
        <div class="row">
          <div class="col-xs-6">.col-xs-6</div>
          <div class="col-xs-6">.col-xs-6</div>
        </div>
        
        
        <br /><br /><br /><br />
        <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-md-4">.col-xs-6 .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>
              <!-- Optional: clear the XS cols if their content doesn't match in height -->
              <div class="clearfix visible-xs-block">ssssssssss</div>
             <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        </div>
        
        
        
        
        
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
          <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

轉載于:https://www.cnblogs.com/strator/p/7513136.html

bootstrap_概論及栅格系統

全局CSS樣式：

1.概論

2.移動裝置優先

3.布局容器

2.栅格系統

1.簡介

2.栅格參數

3.執行個體：多餘的列将另起一行

4.響應式列重置

5.列偏移

6.嵌套類

7.列排序

8.代碼示範

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條