一、Bootstrap 網格系統的工做原理

1.1 十二柵格系統

柵格就是網格，英文Grid，之因此有的地方是網格，有的地方是柵格，只是翻譯習慣不一樣。十二柵格系統的意思是將整個屏幕按寬度劃分爲十二等份，而一等分表明屏幕寬度的十二分之一，爲何劃分爲十二等份，而不是十等分或其餘等份呢，這是由於12是1，2，3，4，6的最小公倍數，根據經驗，按照這樣的劃分是最美觀和實用的。固然，我也見過36柵格和十柵格系統，從使用上來看，確實不如12柵格方便。bootstrap

在十二柵格系統，若是我想把屏幕分爲左右兩側，左邊佔三分之一，右邊佔三分之二，則能夠將左邊寬度設置爲4柵格，右邊設置爲8柵格。若是我須要左右各站一半，只須要設置每一個爲6柵格。若是我只須要設置一個頁面佔滿屏幕，能夠直接設置爲12柵格。你看，是否是很方便？瀏覽器

1.2 Bootstrap 網格系統標籤

Bootstrap 網格系統設計三個標籤，分別是container，row，col：markdown

container是容器，在上一節中，專門作了詳細的介紹。
row是行的意思，表明着一個水平行
col是單元格，表明着具體每個單元格，其寫法有三種：col、col-柵格數（如col-3）、col-屏幕大小-柵格數（如col-md-3）。

下面是一段示例代碼，將屏幕劃分爲三個等寬的單元，先不用深究具體代碼的寫法，只須要簡單瞭解一下網格系統的結構便可，後面咱們會詳細說明。框架

<div class="container">
    <div class="row"> <div class="col"> 第一個單元 </div> <div class="col"> 第二個單元 </div> <div class="col"> 第三個單元 </div> </div>
</div>
複製代碼

1.3 Bootstrap 網格系統規則

使用行（row）來建立列的水平組。佈局
一個頁面內能夠有多個行。post
行必須放置在容器（container）內，以便得到適當的對齊（alignment）和內邊距（padding）。學習
內容應該放置在列（col）內，且惟有列能夠是行的直接子元素。
列內還能夠嵌套行，列內的行無需container，由於列自己就是個容器。
能夠直接使用預約義的網格類，好比 col-屏幕大小-柵格數，用於快速建立柵格佈局。
預約義類中，屏幕大小有5個值，主要用於響應式設計，見3.1。柵格數爲數字1到12，表明佔屏幕寬度。

二、Bootstrap 網格系統中單元格寬度設置

2.1 默認等寬佈局

若是咱們不設置每一個列的寬度，則默認有多少個列都會平均分佈各列所佔寬度，可是若是一行有超過12個列，將會出現不可預知的現象（我是爲了研究一下作了幾個測試，你沒有必要去測試這個，若是你想佈局超過12個，能夠用表格）。下面我給出一段代碼，後面將一直沿用這段代碼，作一些微小的更改，不在重複給出。

採用col、col-柵格數設置寬度的時候，預覽效果請把窗口寬度設置爲最大，不然可能會致使效果誤差，另外咱們不建議實際應用中這樣設置，請使用響應式網格佈局，哪怕你不想響應。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
 
    <title>網格系統演示</title>
  </head>
  <body>
  
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Bootstrap是什麼？</h1>
                <p>
                    咱們在開發前端頁面的時候，若是每個按鈕、樣式、處理瀏覽器兼容性的代碼都要本身從零
                    開始去寫，那就太浪費時間了。因此咱們須要一個框架，幫咱們實現一個頁面的基礎部分和解
                    決一些繁瑣的細節，只要在它的基礎上進行個性化定製就能夠了。Bootstrap 就是這樣一個簡
                    潔、直觀、強悍的前端開發框架，只要學習並遵照它的標準，即便是沒有學過網頁設計的開發
                    者，也能作出很專業、美觀的頁面，極大地提升了工做效率。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap是什麼？</h1>
                <p>
                    咱們在開發前端頁面的時候，若是每個按鈕、樣式、處理瀏覽器兼容性的代碼都要本身從零
                    開始去寫，那就太浪費時間了。因此咱們須要一個框架，幫咱們實現一個頁面的基礎部分和解
                    決一些繁瑣的細節，只要在它的基礎上進行個性化定製就能夠了。Bootstrap 就是這樣一個簡
                    潔、直觀、強悍的前端開發框架，只要學習並遵照它的標準，即便是沒有學過網頁設計的開發
                    者，也能作出很專業、美觀的頁面，極大地提升了工做效率。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap是什麼？</h1>
                <p>
                    咱們在開發前端頁面的時候，若是每個按鈕、樣式、處理瀏覽器兼容性的代碼都要本身從零
                    開始去寫，那就太浪費時間了。因此咱們須要一個框架，幫咱們實現一個頁面的基礎部分和解
                    決一些繁瑣的細節，只要在它的基礎上進行個性化定製就能夠了。Bootstrap 就是這樣一個簡
                    潔、直觀、強悍的前端開發框架，只要學習並遵照它的標準，即便是沒有學過網頁設計的開發
                    者，也能作出很專業、美觀的頁面，極大地提升了工做效率。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap是什麼？</h1>
                <p>
                    咱們在開發前端頁面的時候，若是每個按鈕、樣式、處理瀏覽器兼容性的代碼都要本身從零
                    開始去寫，那就太浪費時間了。因此咱們須要一個框架，幫咱們實現一個頁面的基礎部分和解
                    決一些繁瑣的細節，只要在它的基礎上進行個性化定製就能夠了。Bootstrap 就是這樣一個簡
                    潔、直觀、強悍的前端開發框架，只要學習並遵照它的標準，即便是沒有學過網頁設計的開發
                    者，也能作出很專業、美觀的頁面，極大地提升了工做效率。
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
複製代碼

這段代碼效果顯示如上圖所示，你能夠將下面單元格部分多複製幾個，看一下效果。

<div class="col">
                <h1>Bootstrap是什麼？</h1>
                <p> 咱們在開發前端頁面的時候，若是每個按鈕、樣式、處理瀏覽器兼容性的代碼都要本身從零 開始去寫，那就太浪費時間了。因此咱們須要一個框架，幫咱們實現一個頁面的基礎部分和解 決一些繁瑣的細節，只要在它的基礎上進行個性化定製就能夠了。Bootstrap 就是這樣一個簡 潔、直觀、強悍的前端開發框架，只要學習並遵照它的標準，即便是沒有學過網頁設計的開發 者，也能作出很專業、美觀的頁面，極大地提升了工做效率。 </p>
            </div>
複製代碼

2.2 設置每一個列寬

試着將三個<div class="col">中的col分別換爲col-3，col-6，col-3或者其餘的數值，總之三個數相加和爲12便可。固然你也能夠刪除或者增長一個或幾個單元格，總之一行的和爲12便可。經過這樣的簡單設置，能夠很是方便的修改單元格的寬度。下圖是設置爲col分別換爲col-2，col-2，col-4，col-4顯示效果

2.3 可變寬度的列

若是你在設置單元格數值的時候，若是有三個單元格，只設置了一個，則剩下的兩個單元格會平分剩下的空間，這樣就能夠很方便的設置可變寬度的列了。提醒一下，設置固定值的單元格並不須要在前面，好比，2.1代碼你能夠設置第二個單元格佔屏幕通常（col-6），其餘單元格平均分配。

2.4 自動換行的列

當每一個單元格都設置了寬度數值，當一行中，剩下的空間再也不容納某個單元格的時候，會自動換行。

將2.1的例子，將四個<div class="col">中的col都換爲col-6，查看效果。

將2.1的例子，將四個<div class="col">中的col都換爲col-12，查看效果。

將2.1的例子，將四個<div class="col">中的col都換爲col-8，查看效果。

能夠看出，雖然設置爲col-8也能夠每一個單元格一行，可是文字只佔屏幕的十二分八，也就是三分之二，因此若是沒有特殊要求，儘可能將每行的單元格數值相加正好爲12。

三、Bootstrap 網格響應式佈局

3.1 什麼是響應式佈局

關於響應式佈局，簡單來講就是在不一樣屏幕大小的時候，展示出的頁面佈局不一樣。例如手機看的時候一行只有一個單元格，平板看的時候一行兩個單元格，電腦看的時候有三個。Bootstrap能夠很方便的實現這種功能。

3.2 Bootstrap 網格系統屏幕大小劃分

看看下面的表格，是否是很熟悉，和斷點的規定如出一轍，只是多了個xs而已，其實默認就是xs，因此能夠直接省略。能夠看到，Bootstrap經過5個斷點，將屏幕分爲6種大小類型。

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container容器	None (auto)	540px	720px	960px	1140px	1320px
屏幕大小類前綴	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`

3.3 Bootstrap 網格響應式佈局實例

將2.1的例子，將四個<div class="col">都換成<div class="col-12 col-md-6 col-lg-4">，改變瀏覽器窗口大小，查看效果，這段代碼的意思是<768px的時候，一行只有一列（每列寬12柵格），當768px<寬度<992px的時候是兩列（每類寬6柵格），當大於992px的時候每行3列（每列寬4柵格）。下面是一段演示錄像

固然你還能夠換分的更細一點,換成<div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">。

在這裏告訴你個小技巧，若是你想一行顯示幾列，寬度只就是用12除以幾，哈哈，估計你也能想獲得。

3.4 若是你不想響應

若是你想讓全部的瀏覽器顯示效果一致，都分爲兩列，也就是不想讓它響應式顯示，那麼很簡單，你把全部的屏幕下的柵格數設置相同的數值便可<div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">，這樣就能夠保持任何屏幕下一致了。

今天的課程就到這裏，請關注我，及時學習俺老劉原創的《Bootstrap5零基礎到精通》第五節 Bootstrap網頁佈局之列的佈局與排序。

《Bootstrap5零基礎到精通》第四節 Bootstrap網頁佈局網格系統