English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
El sistema de cuadrícula de Bootstrap es la manera más rápida y sencilla de crear diseños de páginas web adaptables.
Bootstrap proporciona un sistema de cuadrícula fluido y adaptable, con prioridad para dispositivos móviles, que se divide automáticamente en hasta 12 columnas.
También podemos definir el número de columnas según nuestras necesidades:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Bootstrap 4 El sistema de cuadrícula es adaptable, las columnas se reordenan automáticamente según el tamaño de la pantalla.
Bootstrap 4Contiene clases de cuadrícula predefinidas, que permiten crear rápidamente disposiciones de cuadrícula para diferentes tipos de dispositivos (por ejemplo, teléfonos, tabletas, laptops y computadoras de escritorio, etc.). Por ejemplo, puede usar estas.col-*Clases para dispositivos ultrapequeños en modo vertical, al igual que, puede usar estas.col-sm-*Clases para dispositivos de pantalla pequeña (como teléfonos en modo horizontal),.col-md-*Dispositivos de pantalla media (como tabletas),.col-lg-*Dispositivos grandes (como computadoras de escritorio) y.col-xl-*Clases para crear columnas de cuadrícula para pantallas de sobremesa grandes.
Bootstrap 4 El sistema de cuadrícula tiene las siguientes 5 Clases:
.col- Para todos los dispositivos
.col-sm- tabletas - El ancho de la pantalla es igual o mayor que 576px
.col-md- monitores de escritorio - El ancho de la pantalla es igual o mayor que 768px)
.col-lg- monitores de escritorio grandes - El ancho de la pantalla es igual o mayor que 992px)
.col-xl- monitores de escritorio ultraanchos - El ancho de la pantalla es igual o mayor que 1200px)
Bootstrap4 Reglas del sistema de cuadrícula:
Cada fila de la cuadrícula debe colocarse en un .container (ancho fijo) o .container-La clase fluida (ancho de pantalla completa) del contenedor, de esta manera se puede establecer automáticamente algunos márgenes externos e internos.
Usar filas para crear grupos de columnas horizontales.
El contenido debe colocarse en las columnas y solo las columnas pueden ser nodos directos de la fila.
Clases predefinidas como .row y .col-sm-4 Se puede usar para crear rápidamente una disposición de cuadrícula.
Las columnas se crean llenando el espacio entre el contenido de las columnas. Este espacio se establece mediante el margen negativo en la clase .rows para la primera fila y la última columna, desplazando así.
Las columnas de la cuadrícula se crean al cruzar las columnas especificadas 12 columnas para crear. Por ejemplo, para configurar tres columnas iguales, es necesario usar tres.col-sm-4 para configurar.
Bootstrap 3 y Bootstrap 4 La mayor diferencia radica en Bootstrap 4 Ahora utilice flexbox (caja flexible) en lugar de flotación. Una de las grandes ventajas de Flexbox es que las columnas de la cuadrícula sin especificar el ancho se establecen automáticamente comocolumnas de ancho y altura iguales 。 Si deseas obtener más información sobre Flexbox, puedes leer nuestra guía de CSS Flexbox.
la siguiente tabla resume cómo funciona el sistema de cuadrícula de Bootstrap en diferentes dispositivos:
| dispositivos ultrpequeños <576px | tabletas ≥576px | monitores de escritorio ≥768px | monitores de escritorio grandes ≥992px | monitores de escritorio ultraanchos ≥1200px | |
|---|---|---|---|---|---|
| ancho máximo del contenedor | Ninguno (auto) | 540px | 720px | 960px | 1140px |
| prefijo de clase | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| número de columnas y | 12 | ||||
| ancho del espacio | 30px de cada lado de una columna 15(px) | ||||
| empaquetables | Sí | ||||
| ordenar columnas | Sí | ||||
las siguientes clases se pueden usar juntas para crear una disposición de página más flexible.
el siguiente código es la estructura básica de Bootstrap 4 estructura básica de la cuadrícula:
<!-- primer ejemplo: controla el ancho de las columnas y cómo se muestran en diferentes dispositivos --> <div class="row"> <div class="col-*-*></div> </div> <div class="row"> <div class="col-*-*></div> <div class="col-*-*></div> <div class="col-*-*></div> </div> <!-- segundo ejemplo: Bootstrap se encargará automáticamente del diseño --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
primer ejemplo: crea una fila (<div class="row">)。Luego, agrega las columnas necesarias (.col-*-* ) se configura en la clase). El primer asterisco (*) ) indica el dispositivo de respuesta: sm, md, lg o xl, el segundo asterisco (*) indica un número, y la suma de los números en la misma fila debe ser 12。
segundo ejemplo: no necesitas agregar números en cada col agregar números para que Bootstrap maneje automáticamente el diseño, y todos los elementos de la misma fila tendrán el mismo ancho: dos "col" cada una es 5del ancho, tres "col"cada una es 33.33del ancho, cuatro "col"cada una es 25del ancho, etc. Además, puedes usar .col-sm|md|lg|xl configuramos las reglas de respuesta de las columnas.
ahora podemos ver el ejemplo.
<!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>¡Hola, Mundo! </h1> <p>¡Crea tres columnas de ancho igual! Prueba a agregar un nuevo div con la clase "col" dentro del div con clase "row", y se mostrarán cuatro columnas de ancho igual.</p> <div class="row"> <div class="col" style="background-color: lavanda;">.col</div> <div class="col" style="background-color: naranja;">.col</div> <div class="col" style="background-color: lavanda;">.col</div> </div> </div> </body> </html>Prueba para ver ‹/›
a continuación, se muestra un ejemplo de cómo crear columnas responsivas de ancho igual en tabletas y pantallas más grandes. en dispositivos móviles, es decir, cuando el ancho de la pantalla sea menor que 576px, las cuatro columnas se alinearán verticalmente.:
<!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>¡Hola, Mundo! </h1> <p>调整浏览器大小查看效果。/p> <p>en dispositivos móviles, es decir, cuando el ancho de la pantalla sea menor que 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>Prueba para ver ‹/›
a continuación, se muestra un ejemplo de cómo crear columnas responsivas de ancho variable en tabletas y pantallas más grandes. en dispositivos móviles, es decir, cuando el ancho de la pantalla sea menor que 576cuando el ancho de la pantalla es de 960 px, las dos columnas se alinearán verticalmente.:
<!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>¡Hola, Mundo! </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>Prueba para ver ‹/›
以下示例演示了在桌面设备的显示器上两个列的宽度各占 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>Prueba para ver ‹/›
以下示例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：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>Prueba para ver ‹/›
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的外边距(margin)增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 Es.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>Desplazamiento de columnas</h1> <p>.offset-md-4 Es.col-md-4 Se ha desplazado a la derecha cuatro columnas.</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>Prueba para ver ‹/›
Esperamos que ya haya entendido el nuevo Bootstrap 4Conocimientos básicos del sistema de rejilla Bootstrap4. En los siguientes capítulos, aprenderá a usar este sistema de rejilla flexbox para crear布局 básicos de página web.