Exemplos de cuadrícula de arranque
Disposicións básicas de cuadrícula para familiarizarte coa construción dentro do sistema de grade Bootstrap.
Nestes exemplos a .themed-grid-col
clase engádese ás columnas para engadir algunha temática. Esta non é unha clase dispoñible en Bootstrap por defecto.
Cinco niveis de reixa
Hai cinco niveis para o sistema de grella Bootstrap, un para cada gama de dispositivos que admitimos. Cada nivel comeza cun tamaño mínimo de visualización e aplícase automaticamente aos dispositivos máis grandes a non ser que se anule.
Tres columnas iguais
Obtén tres columnas de igual ancho comezando en escritorios e escalando a escritorios grandes . En dispositivos móbiles, tabletas e abaixo, as columnas apilaranse automaticamente.
Alternativa de tres columnas iguais
Usando as .row-cols-*
clases, podes crear facilmente unha grella con columnas iguais.
.col
fillo de
.row-cols-md-3
.col
fillo de
.row-cols-md-3
.col
fillo de
.row-cols-md-3
Tres columnas desiguais
Obtén tres columnas comezando en escritorios e escalando a escritorios grandes de varios anchos. Lembra que as columnas da grella deberían sumar doce para un só bloque horizontal. Ademais, as columnas comezan a apilarse sen importar a ventana gráfica.
Dúas columnas
Obtén dúas columnas comezando en escritorios e escalando a escritorios grandes .
Ancho total, columna única
Non son necesarias clases de cuadrícula para elementos de ancho completo.
Dúas columnas con dúas columnas aniñadas
Segundo a documentación, a anidación é sinxela: basta con poñer unha fila de columnas dentro dunha columna existente. Isto dálle dúas columnas que comezan en escritorios e escalan a escritorios grandes , con outras dúas (anchuras iguais) dentro da columna máis grande.
En tamaños de dispositivos móbiles, tabletas e inferiores, estas columnas e as súas columnas aniñadas apilaranse.
Mixto: móbil e escritorio
O sistema de cuadrícula Bootstrap v4 ten cinco niveis de clases: xs (extra pequeno, non se usa este infixo de clase), sm (pequeno), md (mediano), lg (grande) e xl (extra grande). Podes usar case calquera combinación destas clases para crear deseños máis dinámicos e flexibles.
Cada nivel de clases amplía a escala, é dicir, se planeas establecer os mesmos anchos para md, lg e xl, só precisas especificar md.
Mixto: móbil, tableta e escritorio
Canaletas
Coas .gx-*
clases pódense axustar os canlóns horizontais.
.col
con
.gx-4
canalóns
.col
con
.gx-4
canalóns
.col
con
.gx-4
canalóns
.col
con
.gx-4
canalóns
.col
con
.gx-4
canalóns
.col
con
.gx-4
canalóns
Use as .gy-*
clases para controlar as cunetas verticais.
.col
con
.gy-4
canalóns
.col
con
.gy-4
canalóns
.col
con
.gy-4
canalóns
.col
con
.gy-4
canalóns
.col
con
.gy-4
canalóns
.col
con
.gy-4
canalóns
Coas .g-*
clases pódense axustar as cunetas en ambas direccións.
.col
con
.g-3
canalóns
.col
con
.g-3
canalóns
.col
con
.g-3
canalóns
.col
con
.g-3
canalóns
.col
con
.g-3
canalóns
.col
con
.g-3
canalóns
Contenedores
As clases adicionais engadidas en Bootstrap v4.4 permiten contedores que teñen un ancho 100 % ata un punto de interrupción particular. v5 engade un novo punto de xxl
interrupción.