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-colclase 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.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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.

.col-md-4

Alternativa de tres columnas iguais

Usando as .row-cols-*clases, podes crear facilmente unha grella con columnas iguais.

.colfillo 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.

.col-md-3

.col-md-6

.col-md-3

Dúas columnas

Obtén dúas columnas comezando en escritorios e escalando a escritorios grandes .

.col-md-8

.col-md-4

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.

.col-md-8

.col-md-6

.col-md-4

Mixto: móbil e escritorio

O sistema de cuadrícula Bootstrap v5 ten seis niveis de clases: xs (extra pequeno, non se usa este infixo de clase), sm (pequeno), md (mediano), lg (grande), xl (x-grande) e xxl (xx). -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, xl e xxl, só precisas especificar md.

.col-md-8

.col-6 .col-md-4

.col-6

Mixto: móbil, tableta e escritorio

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Canaletas

Coas .gx-*clases pódense axustar os canlóns horizontais.

.colcon .gx-4canalóns

Use as .gy-*clases para controlar as cunetas verticais.

.colcon .gy-4canalóns

Coas .g-*clases pódense axustar as cunetas en ambas direccións.

.colcon .g-3canaló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 xxlinterrupción.

.envase

.contedor-sm

.contedor-md

.contedor-lg

.contedor-xl

.contedor-xxl

.recipiente-fluído