Como criar várias colunas responsivas com Bootstrap 3
Publicados: 2022-02-16
Gostaria de melhorar a capacidade de resposta do seu site com o Bootstrap? O aspecto mais importante do Bootstrap é seu primeiro sistema de grade móvel de 12 colunas. Isso é o que você usa para criar um layout responsivo.
Neste tutorial em vídeo, você criará um site básico usando o Bootstrap e aprenderá a usar o sistema de grade do Bootstrap para criar um layout responsivo com várias colunas.
Antes de assistir ao tutorial
Antes de poder seguir o tutorial em vídeo abaixo e aprender a criar suas próprias colunas responsivas, você precisará:
- Compreensão básica do que é Bootstrap
- Compreensão básica do que é o sistema de grade Bootstrap
- Baixe o Bootstrap para o seu disco rígido
- Crie um arquivo básico do Bootstrap index.html para construir
O que é Bootstrap
- Bootstrap é um framework para desenvolvedores de HTML, CSS e JavaScript que trabalham na capacidade de resposta do site.
- Ele consiste em um estilo CSS responsivo já pré-construído para colunas, listas, navegação, formulários da web e muitos outros elementos da web.
Entendendo o sistema de grade de bootstrap
- O sistema de grade Bootstrap classifica os tamanhos de tela em quatro tipos: Extra-pequeno, Pequeno, Médio e Grande.
- O Extra-pequeno é para telefones celulares. O Small é para tablets, como I-Pad. O Medium é para monitores de desktop. E o Grande é apenas para monitores de mesa maiores.
- Para ajudá-lo a ajustar a capacidade de resposta para esses quatro tipos de telas, o Bootstrap divide a largura dos dispositivos de visualização da Web no sistema de grade de 12 colunas.
- Cada um desses quatro tipos de Bootstrap Grid se torna responsivo apenas se você atribuir a ele sua própria classe CSS designada.
- Por exemplo, para tornar um div responsivo para dispositivos extra pequenos, o div deve ter sua própria classe Bootstrap .col-xs-<number_of_columns_to_take>, como <div class="col-xs-6">.
Baixando o Bootstrap
- Vá para getboostrap.com e clique no botão "Download Bootstrap":
- Você verá a página "Introdução". Clique no botão "Baixar Bootstrap":
- Salve este arquivo no disco rígido do seu computador, onde quiser. Ele não precisa ser salvo em um servidor web.
- Descompacte este arquivo e renomeie a pasta extraída para "bootstrap".
Preparando sua página index.html do Bootstrap básico
Passo 1. Crie seu arquivo bootstrap index.html
- Volte para a página "Introdução" (http://getbootstrap.com/getting-started/#download) e clique no link "Modelo Básico" na barra lateral direita:
- Você verá o código "Modelo básico". Clique no botão "Copiar" para copiar o código:
- Cole o código "Basic Template" em seu editor de texto e salve-o como index.html na mesma pasta, onde você salvou a pasta "bootstrap". Ele agora se tornará a primeira página do seu site Bootstrap.
- Abra o index.html recém-criado e dê uma olhada no seu site básico do Bootstrap:
- Abra o arquivo index.html em seu editor de texto e entre as tags de abertura <body> e <h1> adicione <div class="container"> (1). Feche esta nova div após a tag de fechamento </h1> (2) e salve o arquivo:
- Verifique o front-end da página e observe como o "Hello World!" não está mais preso à borda da página e agora se moveu um pouco para a direita, para parecer um pouco mais organizado. A classe "container" do Bootstrap que você atribuiu a esta div adicionou a este texto alguma margem:
- Volte para o seu arquivo index.html. Entre as tags <h1> e </h1> substitua o "Hello World!" para "Trusthub". Salve o arquivo e verifique o front-end do seu site.
Passo 2. Adicione algum conteúdo e uma barra lateral
- Volte ao seu arquivo index.html e abaixo do código <h1>Trustub</h1> copie o seguinte código:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- Volte para o front-end do seu site. Atualize-o. Agora você deve ver seu conteúdo e a barra lateral "Nossa equipe", sem layout responsivo em colunas ainda:
- Volte ao site getbootstrap.com e no menu superior clique no botão "CSS":
- Na barra lateral clique no botão "Grid System":
- Role a página até a seção "Opções de grade" (1) e observe o sistema de grade de 12 colunas do Bootstrap com seus quatro tipos de tamanhos de tela, sua largura e seus prefixos de classe CSS designados (2):
- Não se preocupe se as opções do sistema de grade do Bootstrap ainda não fizerem sentido para você. Tudo se reunirá para você em um segundo quando você começar a brincar com eles em seu site.
- Abra seu arquivo index.html mais uma vez e abaixo de <div class="row">, para seu <div> existente digite class "col-md-9". Seu novo div agora deve parecer "div class="col-md-9">:
- Agora vá para o seu div, localizado logo acima do cabeçalho <h2> "Out Team" e dê a classe CSS "col-md-3" da grade do Bootstrap. Salve o arquivo:
- Volte ao seu site para ver essa mudança em ação. Pressione a tecla F5 no teclado para atualizar seu site. Agora você verá que sua área de conteúdo e a barra lateral estão lado a lado.
- Seu conteúdo div agora está ocupando 9 das 12 colunas disponíveis em sua grade Bootstrap (75% de toda a largura da tela da área de trabalho). E sua barra lateral ocupa 3 de sua grade Bootstrap 12 colunas (25% de toda a largura da tela da área de trabalho):
Brilhante! Agora você está pronto para seguir o tutorial em vídeo abaixo. Vamos começar.
Parabéns! Você acabou de aprender a criar um layout de página da Web responsivo com várias colunas usando o Bootstrap. Quer saber mais sobre o Bootstrap? Se sim, visite nosso canal OSTraining no YouTube e assista aos "Tutoriais do Bootstrap Framework".