English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
O sistema de grade do Bootstrap é o método mais rápido e mais simples para criar layouts de páginas web responsivas.
O Bootstrap oferece um sistema de grade fluído, priorizando dispositivos móveis, que se torna automaticamente em até 12 colunas.
Também podemos definir o número de colunas conforme necessário:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Bootstrap 4 O sistema de grade é responsivo, as colunas são reordenadas automaticamente com o tamanho da tela.
Bootstrap 4Contendo classes de grade predefinidas, que podem criar rapidamente layouts de grade para diferentes tipos de dispositivos (por exemplo, telefones celulares, tablets, laptops e desktops, etc.). Por exemplo, você pode usar essas.col-*Classes para dispositivos de pequeno tamanho vertical, igualmente, você pode usar essas.col-sm-*Classes para dispositivos de tela pequena (como telefones celulares em modo horizontal),.col-md-*Dispositivos de tela média (como tablets),.col-lg-*Grandes dispositivos (como computadores de mesa) e.col-xl-*Classes para criar colunas da grade para grandes telas de desktop
Bootstrap 4 O sistema de grade tem os seguintes 5 Classes:
.col- Para todos os dispositivos
.col-sm- 超小设备 - A largura da tela é igual ou maior que 576大桌面显示器
.col-md- 平板 - A largura da tela é igual ou maior que 768px)
.col-lg- 桌面显示器 - A largura da tela é igual ou maior que 992px)
.col-xl- px - A largura da tela é igual ou maior que 1200px)
Bootstrap4 Regras do sistema de grade:
Cada linha da grade precisa estar dentro de .container (largura fixa) ou .container-Os contêineres da classe fluid (largura da tela inteira), assim, alguns espaços externos e internos podem ser configurados automaticamente.
Use linhas para criar grupos de colunas horizontais.
O conteúdo precisa ser colocado dentro das colunas e apenas as colunas podem ser nós diretamente filhos da linha.
Classes predefinidas como .row e .col-sm-4 Pode ser usado para criar rapidamente layouts de grade.
As colunas são criadas através do preenchimento para criar espaços entre o conteúdo das colunas. Este espaço é configurado pelo negativo margem da classe .rows, ajustando o deslocamento da primeira linha e da última coluna.
As colunas da grade são criadas ao cruzar as colunas especificadas 12 colunas para criar. Por exemplo, para definir três colunas iguais, é necessário usar três.col-sm-4 para configurar.
Bootstrap 3 e Bootstrap 4 A maior diferença está no Bootstrap 4 Agora use flexbox (caixa flexível) em vez de flutuante. Uma das principais vantagens do Flexbox é que as colunas da grade não especificadas automaticamente serão configuradas sem largura等宽与等高列 等宽与等高列
。 如果您想了解有关Flexbox的更多信息，可以阅读我们的CSS Flexbox教程。
| 下表总结了 Bootstrap 网格系统如何在不同设备上工作的： <576大桌面显示器 | 超小设备 超大桌面显示器576大桌面显示器 | 平板 超大桌面显示器768大桌面显示器 | 桌面显示器 超大桌面显示器992大桌面显示器 | px 超大桌面显示器12≥ | |
|---|---|---|---|---|---|
| 00px | 容器最大宽度 | 54间隙宽度 | 72间隙宽度 | 96间隙宽度 | 114间隙宽度 |
| None (auto) | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 类前缀 | 12 | ||||
| 列数量和 | 3间隙宽度 0px 15（一个列的每边分别 | ||||
| px） | 列排序 | ||||
| 可嵌套 | 列排序 | ||||
Yes
网格的基本结构 4 以下代码为 Bootstrap
><-- 网格基本结构 --> <div class="row"> <div class="col-*-*第一个实例：控制列的宽度及在不同的设备上如何显示/div> </div> <div class="row"> <div class="col-*-*第一个实例：控制列的宽度及在不同的设备上如何显示/div> <div class="col-*-*第一个实例：控制列的宽度及在不同的设备上如何显示/div> <div class="col-*-*第一个实例：控制列的宽度及在不同的设备上如何显示/div> </div> ><-- <! --> <div class="row"> 第二个实例：或让 Bootstrap 者自动处理布局/div> 第二个实例：或让 Bootstrap 者自动处理布局/div> 第二个实例：或让 Bootstrap 者自动处理布局/div> </div>
<div class="col"><第一个实例：创建一行( <divclass="row">.col-*-* )。然后， 添加是需要的列(*) ) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。
第二个实例: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。
接下来我们可以看看示例。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!/h1> <p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col" div，会显示四个等宽的列。</p> <div class="row"> <div class="col" style="background-color:lavender;">.col</div> <div class="col" style="background-color:orange;">.col</div> <div class="col" style="background-color:lavender;">.col</div> </div> </div> </body> </html>Teste e veja ‹/›
以下示例演示了如何在平板及更大屏幕上创建等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!/h1> <p>调整浏览器大小查效果。</p> <p> 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p> <div class="row"> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> </div> </div> </body> </html>Teste e veja ‹/›
以下示例演示了在平板及更大屏幕上创建不等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!/h1> <p>调整浏览器大小查效果。</p> <p>在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div> </div> </div> </body> </html>Teste e veja ‹/›
以下示例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%，在移动手机等小型设备上会堆叠显示。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>平板与桌面的网格布局</h1> <p>以下示例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%，在移动手机等小型设备上会堆叠显示。 </p> <p>调整浏览器窗口大小，查看效果。</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 bg-warning"> 基础教程网 </div> </div> </div> </div> </body> </html>Teste e veja ‹/›
以下示例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%，在移动手机等小型设备上会堆叠显示。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>平板、桌面、大桌面显示器、超大桌面显示器</h1> <p>以下示例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%，在移动手机等小型设备上会堆叠显示。</p> <p>调整浏览器窗口大小，查看效果。</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning"> 基础教程网 </div> </div> </div> </div> </body> </html>Teste e veja ‹/›
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距(margin)增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 É .col-md-4 向右移动了四列。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Deslocamento de coluna</h1> <p>.offset-md-4 É .col-md-4 Moveu para a direita quatro colunas de grade.</p> <div class="container-fluid"> <div class="row"> <div class="col-md-4 bg-success">.col-md-4</div> <div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div> </div> </div> </div> </body> </html>Teste e veja ‹/›
Esperamos que você já tenha entendido o novo Bootstrap 4Conhecimentos básicos do sistema de grade Bootstrap4. Nos próximos capítulos, você aprenderá a usar este sistema de grade flexbox para criar layouts básicos de páginas da web.