Os Bootstrap Grids são ferramentas úteis para exibir informações corretamente. As grades organizam as informações em colunas com larguras ajustáveis, mas não fornecem uma estrutura clara como uma tabela.
Como Criar um Bootstrap Grid
- Crie uma página ou edite uma existente.
Adicione qualquer conteúdo que tenha a barra de ferramentas do editor (Texto, Acordeão, Cartões, Texto com plano de fundo, Texto na mídia) e selecione Inserir Bootstrap Grid.
Imagem
Selecione o número desejado de colunas > Avançar
Imagem
- Selecione a largura desejada de cada coluna (exemplo à direita) expandindo o acordeão para cada tamanho de exibição
- Use a lista a seguir para definir o comportamento da coluna com base na configuração de
largura: Extra Pequeno - Tela
vertical do celular Pequeno - Tela
horizontal do celular Médio - Tela
do tablet Grande - Tela
do laptop Extra Grande - Tela do desktop
- Selecionar Nenhum fará com que a largura da coluna se adapte ao comprimento do texto. Se o texto dentro de uma coluna exceder uma linha de comprimento, a coluna será empurrada para a próxima linha.
- Defina o comportamento desejado da coluna para cada configuração de largura. A configuração de largura do comportamento da coluna maior especificada será aplicada a todas as configurações de largura maior. Veja a dica abaixo para mais informações.
- Use a lista a seguir para definir o comportamento da coluna com base na configuração de
- Salvar
Dica: Se você deseja adicionar duas colunas - como o texto (à esquerda) e a imagem (à direita) mostrados abaixo, siga estas etapas:
- Insira um bootstrap grid usando as etapas acima
- Selecione 2 colunas
- Abra o acordeão para o dispositivo Padrão (Extra Pequeno) e selecione as colunas de largura igual mostradas em verde na imagem (à direita ou abaixo)
- Abra a opção do dispositivo Pequeno e selecione
- Selecione o número de colunas para a grade
- Use a categoria extra pequena para configurações móveis e pequena para configurações de desktop
Nota:
A largura total (100%) geralmente é a melhor opção para configurações móveis.
Imagem
Ao clicar com o botão direito do mouse na grade, você pode redimensionar a largura da coluna, mas não poderá alterar o número de colunas. Existem dois métodos de edição de um grid.
- Método 1: Clique com o botão direito do mouse em sua grade e selecione Editar Grid.
- Método 2: Clique dentro de sua grade e clique em Inserir bootstrap grid na barra de ferramentas do editor.
Depois que a grade é criada, o número de colunas não pode ser alterado.
Este grid de exemplo tem 4 colunas de tamanho igual e demonstra como diferentes elementos são redimensionados para caber no bootstrap grid.
Conteúdo da coluna 1
Esta é uma coluna com texto e uma visualização de página.
Conteúdo da coluna 2
Esta é uma coluna com texto e uma foto.
Crédito da imagem de amostra B
Conteúdo da coluna 3
Esta é uma coluna apenas com texto.
O texto em colunas é restrito para caber na largura da coluna e será ajustado se a largura da coluna for alterada
Conteúdo da coluna 4
Esta é uma coluna com texto e uma tabela.
| Estudante | Contato |
|---|---|
| Wilma Gato Selvagem | wilmawildcat@email.arizona.edu |
| Wilbur Gato Selvagem | wilburwildcat@email.arizona.edu |