深入解析Bootstrap中的網格系統-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

深入解析Bootstrap中的網格系統

青灯夜游

Sep 13, 2021 pm 06:46 PM

bootstrap網格系統

這篇文章帶大家介紹一下Bootstrap中的網頁佈局網格系統，了解Bootstrap 網格系統的工作原理、單元格寬度設定和響應式佈局方式，希望對大家有所幫助！

深入解析Bootstrap中的網格系統

1、Bootstrap 網格系統的工作原理

1.1 十二個柵格系統

柵格就是網格，英文Grid，之所以有的地方是網格，有的地方是柵格，只是翻譯習慣不同。十二柵格系統的意思是將整個螢幕按寬度劃分為十二等份，而一等分代表螢幕寬度的十二分之一，為什麼劃分為十二等份，而不是十等分或其他等份呢，這是因為12是1，2，3，4，6的最小公倍數，根據經驗，依照這樣的劃分是最美觀實用的。當然，我也看過36柵格和十柵格系統，從使用上來看，確實不如12柵格方便。【相關推薦：《bootstrap教學》】

在十二個柵格系統，如果我想把螢幕分成左右兩側，左邊佔三分之一，右邊佔三分之二，則可以將左邊寬度設定為4柵格，右邊設定為8柵格。如果我需要左右各站一半，只需要設定每個為6柵格。如果我只需要設定一個頁面佔滿螢幕，可以直接設定為12柵格。你看，是不是很方便呢？

1.2 Bootstrap 網格系統標籤

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

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）來建立列的水平群組。
一個頁面內可以有多個行。
行必須放置在容器（container）內，以便獲得適當的對齊（alignment）和內邊距（padding）。
內容應該放置在列（col）內，且只有列可以是行的直接子元素。
列內也可以巢狀行，而列內的行不需要container，因為列本身就是個容器。
可以直接使用預先定義的網格類，例如 col-螢幕大小-柵格數，用於快速建立柵格佈局。
預定義類別中，螢幕大小有5個值，主要用於響應式設計，請參閱3.1。柵格數為數字1到12，代表佔螢幕寬度。

2、Bootstrap 網格系統中單元格寬度設定

2.1 預設等寬版面配置

如果我們不設定每個列的寬度，則預設有多少列都會平均分佈各列所佔寬度，但是如果一行有超過12個列，將會出現不可預測的現象（我是為了研究一下做了幾個測試，你沒有必要去測試這個，如果你想佈局超過12個，可以用表格）。下面我給一段程式碼，後面將一直沿用這段程式碼，做一些微小的更改，不在重複給。

採用col、col-柵格數設定寬度的時候，預覽效果請把視窗寬度設為最大，否則可能會導致效果偏差，另外我們不建議實際應用中這樣設置，請使用響應式網格佈局，即使你不想回應。

<!doctype html>
<html>
  <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>
        <div>
            <div>
                <h1 id="Bootstrap是什么">Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1 id="Bootstrap是什么">Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1 id="Bootstrap是什么">Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1 id="Bootstrap是什么">Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

深入解析Bootstrap中的網格系統

這段程式碼效果顯示如上圖所示，你可以將下面單元格部分多複製幾個，看看效果。

              <div class="col">
                <h1 id="Bootstrap是什么">Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>

深入解析Bootstrap中的網格系統

2.2 設定每個列寬

試著將三個中的col分別換成col-3，col-6，col-3或其他的數值，總之三個數相加和為12即可。當然你也可以刪除或增加一個或幾個儲存格，總之一行的和為12即可。透過這樣的簡單設置，可以非常方便的修改單元格的寬度。下圖是設定為col分別換col-2，col-2，col-4，col-4顯示效果

深入解析Bootstrap中的網格系統

2.3 可變寬度的列

如果你在設定單元格數值的時候，如果有三個單元格，只設定了一個，則剩下的兩個單元格會平分剩下的空間，這樣就可以很方便的設定可變寬度的列了。提醒一下，設定固定值的儲存格並不需要在前面，例如，2.1程式碼你可以設定第二個儲存格佔螢幕一般（col-6），其他儲存格平均分配。

深入解析Bootstrap中的網格系統

2.4 自動換行的列

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

將2.1的例子，將四個<div class="col">中的col都換成col-6，查看效果。 <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/569/508/978/1631529707575018.png?x-oss-process=image/resize,p_40" class="lazy" title="1631529707575018.png" alt="深入解析Bootstrap中的網格系統"></p> <ul style="list-style-type: disc;"><li><p>將2.1的例子，將四個<code><div class="col">中的col都換成col-12，看效果。 <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/288/939/606/1631529713379410.png?x-oss-process=image/resize,p_40" class="lazy" title="1631529713379410.png" alt="深入解析Bootstrap中的網格系統"></p> <ul style="list-style-type: disc;"><li><p>將2.1的例子，將四個<code><div class="col">中的col都換成col-8，看效果。 <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/677/573/414/163152971963671深入解析Bootstrap中的網格系統?x-oss-process=image/resize,p_40" class="lazy" title="163152971963671深入解析Bootstrap中的網格系統" alt="深入解析Bootstrap中的網格系統"></p> <p>可以看出，雖然設定為col-8也可以每個單元格一行，但是文字只佔螢幕的十二分八，也就是三分之二，所以如果沒有特殊要求，盡量將每行的儲存格數值相加剛好為12。 </p> <h2 id="strong-Bootstrap-網格響應式佈局-strong"><strong>3、Bootstrap 網格響應式佈局</strong></h2> <p><strong><span style="font-size: 16px;">#3.1 什麼是響應式佈局</span></strong></p> <p>關於響應式佈局，簡單來說就是在不同螢幕大小的時候，展現出的頁面佈局不同。例如手機看的時候一行只有一個單元格，平板看的時候一行兩個單元格，電腦看的時候有三個。 Bootstrap可以很方便的實現這種功能。 </p> <p><strong><span style="font-size: 18px;">3.2 Bootstrap 網格系統畫面大小分割</span></strong></p> <p>#看看下面的表格，是不是很熟悉，和斷點的規定一模一樣，只是多了個xs而已，其實預設就是xs，所以可以直接省略。可以看到，Bootstrap透過5個斷點，將螢幕分成6種大小類型。 </p> <table> <tbody> <tr class="firstRow"> <th><br></th> <th>xs<br> </th> <th>sm<br># ≥576px</th> <th>md<br># ≥768px</th> <th>lg<br># ≥992px</th> <th>xl<br># ≥1200px</th> <th>xxl<br> ≥1400px</th> </tr> <tr> <td>Container容器</td> <td>None (auto)</td> <td>540px</td> <td>720px</td> <td>960px</td> <td>1140px</td> <td>1320px</td> </tr> <tr> <td>#螢幕大小類別前綴</td> <td>##.col-<code> #.col-sm- .col-md- #.col-lg- .col-xl- .col-xxl- #
3.3 Bootstrap 網格響應式佈局實例

#將2.1的例子，將四個<div class="col"> 都換成<code><div class="col-12 col-md-6 col-lg-4">，改變瀏覽器視窗大小，查看效果，這段程式碼的意思是<p><img src="/static/imghwm/default1.png" data-src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0d333468f544f4c93537e842e7d7db6~tplv-k3u1fbpfcp-watermark.awebp?x-oss-process=image/resize,p_40" class="lazy" alt="深入解析Bootstrap中的網格系統" ></p> <p>當然你還可以換分的更細一點,換成<code><div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">。 <p>在這裡告訴你一個小技巧，如果你想一行顯示幾列，寬度只會用12除以幾，哈哈，估計你也能想得到。 </p> <p><strong><span style="font-size: 18px;">3.4 如果你不想回應</span></strong></p> <p>如果你想讓所有的瀏覽器顯示效果一致，都分成兩列，也就是不想讓它響應式顯示，那麼很簡單，你把所有的螢幕下的柵格數設定相同的數值即可<code><div class="col-6 col-sm-6 col-md-6 col- md-6 col-lg-6 col-xl-6 col-xxl-6">，這樣就可以保持任何螢幕下一致了。 <blockquote> <p>原文網址：https://juejin.cn/post/6970846739293011998#heading-9</p> <p>作者：俺老劉</p> </blockquote> <p>#更多程式設計相關知識，請造訪：<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">程式設計影片</a>！！ </p> </div>

以上是深入解析Bootstrap中的網格系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金--俺老刘。如有侵權，請聯絡admin@php.cn刪除

打破bootstrap：是什麼以及為什麼重要Apr 14, 2025 am 12:05 AM

Bootstrapisafree，開放式frameworkthatsimplifiesRessiveandMobile-firstwebsitedEvelvelopment.itofferspre-styledComponentsAndAgridSystem，流化inthiningthecreationofaesthethetshethetshetshetshetshetshetshetshetshetshethetshethet interpleaseansing和Runctinctionalwebdesigns。

Bootstrap：使網頁設計更容易Apr 13, 2025 am 12:10 AM

Bootstrap讓網頁設計更容易的原因是其預設組件、響應式設計和豐富的社區支持。 1)預設組件庫和样式讓開發者無需編寫複雜的CSS代碼；2)內置網格系統簡化了響應式佈局的創建；3)社區支持提供了豐富的資源和解決方案。

Bootstrap的影響：加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發，通過提供預定義的樣式和組件，開發者可以快速搭建響應式網站。 1)它縮短了開發時間，例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins，Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能，提高加載速度。

理解引導：核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一個開源的前端框架，主要作用是幫助開發者快速構建響應式網站。 1)它提供了預定義的CSS類和JavaScript插件，方便實現複雜的UI效果。 2)Bootstrap的工作原理依賴於其CSS和JavaScript組件，通過媒體查詢實現響應式設計。 3)使用示例包括基本用法，如創建按鈕，以及高級用法，如自定義樣式。 4)常見錯誤包括類名拼寫錯誤和未正確引入文件，建議使用瀏覽器開發者工具調試。 5)性能優化可通過自定義構建工具實現，最佳實踐包括使用語義化HTML和Bootstrap的預定義

Bootstrap Deep Dive：響應式設計和高級佈局技術Apr 10, 2025 am 09:35 AM

Bootstrap通過網格系統和媒體查詢實現響應式設計，使網站適應不同設備。 1.使用預定義類（如col-sm-6）定義列寬。 2.網格系統基於12列，需注意總和不超12。3.使用斷點（如sm、md、lg）定義不同屏幕尺寸下的佈局。

Bootstrap面試問題：降落您夢想的前端工作Apr 09, 2025 am 12:14 AM

Bootstrap是一套開源的前端框架，用於快速開發響應式網站和應用。 1.它提供了響應式設計、一致的UI組件和快速開發的優勢。 2.網格系統使用flexbox佈局，基於12列結構，通過.container、.row和.col-sm-6等類實現。 3.自定義樣式可以通過修改SASS變量或覆蓋CSS實現。 4.常用JavaScript組件包括模態框、輪播圖和折疊。 5.優化性能可以通過只加載必要組件、使用CDN和壓縮合併文件來實現。