網(wǎng)格基礎(chǔ)

Bootstrap 5 網(wǎng)格系統(tǒng)

Bootstrap 的網(wǎng)格系統(tǒng)是用 flexbox 構(gòu)建的，頁面上最多允許 12 列。

如果您不想單獨(dú)使用所有 12 列，那么可以將這些列組合在一起，以創(chuàng)建更寬的列：

span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1
span 4				span 4				span 4
span 4				span 8
span 6						span 6
span 12

網(wǎng)格系統(tǒng)響應(yīng)迅速，列會(huì)根據(jù)屏幕大小自動(dòng)重新排列。

請(qǐng)確保總和等于或小于 12（如果不需要使用所有 12 個(gè)可用列）。

網(wǎng)格類

Bootstrap 5 網(wǎng)格系統(tǒng)有六個(gè)類：

• .col- (超小型設(shè)備 - 屏幕寬度小于 576px)
• .col-sm- (小型設(shè)備 - 屏幕寬度等于或大于 576px)
• .col-md- (中型設(shè)備 - 屏幕寬度等于或大于 768 像素)
• .col-lg- (大型設(shè)備 - 屏幕寬度等于或大于 992 像素)
• .col-xl- (xlarge 設(shè)備 - 屏幕寬度等于或大于 1200px)
• .col-xxl- (xxlarge 設(shè)備 - 屏幕寬度等于或大于 1400px)

您可以組合上述類，以創(chuàng)建更動(dòng)態(tài)和靈活的布局。

提示：每個(gè)類都是按比例放大的，所以如果你想為 sm 和 md 設(shè)置相同的寬度，你只需要指定 sm。

Bootstrap 5 網(wǎng)格的基本結(jié)構(gòu)

以下是 Bootstrap 5 網(wǎng)格的基本結(jié)構(gòu)：

<!-- 控制列寬，以及它們?cè)诓煌O(shè)備上的顯示方式 -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- 或者讓 Bootstrap 自動(dòng)處理布局 -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

第一個(gè)例子：創(chuàng)建一行（<div class="row">）。然后，添加所需數(shù)量的列（帶有合適的 .col-*-* 類的標(biāo)簽）。第一顆星 (*) 代表響應(yīng)度：sm、md、lg、xl 或 xxl，而第二顆星代表數(shù)字，每行加起來應(yīng)為 12。

第二個(gè)例子：不是給每個(gè) col 添加一個(gè)數(shù)字，而是讓 bootstrap 處理布局，以創(chuàng)建等寬的列：兩個(gè) "col" 元素 = 每個(gè) col 為 50% 寬度，而三個(gè) cols = 每個(gè) col 為 33.33% 寬度。四個(gè)列 = 25% 寬度，等等。您還可以使用 .col-sm|md|lg|xl|xxl 使列獲得響應(yīng)性。

下面我們整理了一些基本的 Bootstrap 5 網(wǎng)格布局的例子。

三等分列

下例顯示如何在所有設(shè)備和屏幕寬度上創(chuàng)建三個(gè)等寬列：

實(shí)例

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

響應(yīng)式列

下例顯示了如何從平板電腦開始創(chuàng)建四個(gè)等寬的列，然后擴(kuò)展到超大桌面。在寬度小于 576px 的手機(jī)或屏幕上，列會(huì)自動(dòng)堆疊在一起：

實(shí)例

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

兩個(gè)不等的響應(yīng)式列

下例顯示了如何在平板電腦得到兩個(gè)不同寬度的列并擴(kuò)展到超大型桌面：

實(shí)例

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

提示：您將在本教程的后面學(xué)習(xí)有關(guān) 網(wǎng)格系統(tǒng) 的更多內(nèi)容。