Introdução
Os containers são um dos fundamentos do Bootstrap. Eles são essencialmente caixas utilizadas para organizar conteúdo em uma página. O Bootstrap fornece três classes de containers, que são semelhantes às classes de grid de colunas. Essas classes ajudam a posicionar e organizar os elementos na página. As três classes variam em sua capacidade de definir larguras máximas. A classe .container define uma largura máxima de 1200px, a classe .container-fluid define uma largura máxima de 100%, e a classe .container-{breakpoint} define uma largura máxima de 1200px até o ponto de interrupção especificado. Depois de entender como essas classes de container operam, elas podem ser usadas em um projeto para dar forma a diferentes seções, como cabeçalhos e rodapés. As classes de container podem substituir estilos personalizados, minimizando a necessidade de criar CSS personalizado.
Prosseguindo com a exploração do Bootstrap, serão apresentadas as classes para estilizar formulários, permitindo torná-los mais atraentes sem a necessidade de criar CSS personalizado. A prática é aplicada na seção de contato de um site, aprimorando a estética e o alinhamento de rótulos e campos. A estilização de tabelas também será abordada, demonstrando como o Bootstrap simplifica o processo ao fornecer diversas classes pré-definidas que substituem a necessidade de CSS personalizado para cada tabela. Ao final, os estudantes devem ser capazes de aplicar esses conceitos em seus próprios projetos, demonstrando um entendimento sólido do Bootstrap e de suas capacidades na criação de interfaces de usuário responsivas e atraentes.
Containers, em sua essência, são caixas que servem para organizar o conteúdo em uma página. O Bootstrap proporciona três tipos de classes de containers, semelhantes às classes de grids de colunas, que auxiliam no posicionamento e organização dos elementos na página.
Os três tipos de classes de containers são:
A classe “container”, que define uma largura máxima para a caixa.
A classe “container” seguida por um breakpoint, que define uma largura máxima até o limite desse breakpoint.
A classe “Container Fluid”, que estabelece uma largura de 100% para qualquer tamanho de tela.
Os breakpoints, mencionados no sistema de grade, são utilizados para ajustar o comportamento em diferentes tamanhos de dispositivos. Por exemplo, utilizando a classe container “SM” (para small devices), a largura máxima será de 540 pixels para dispositivos de tamanho igual ou maior que 576 pixels, e uma largura máxima de 720 pixels para dispositivos iguais ou maiores que 768 pixels, e assim por diante.
Depois de entender as classes de container, a próxima etapa é aplicá-las em um projeto. O exemplo dado inclui um cabeçalho (header), seções (sections) e um rodapé (footer). Em um exemplo comum, atribuímos um plano de fundo ao cabeçalho, alinhamos o texto ao centro e adicionamos um espaçamento (padding). Para o rodapé e as seções, uma margem de 40 pixels é atribuída.
No entanto, o objetivo agora é substituir esses estilos personalizados pelos estilos do framework Bootstrap. A folha de estilo personalizada, às vezes chamada de “custom style”, é reservada para estilizar elementos específicos. A maioria do site será construída usando as classes do Bootstrap, de modo a minimizar a necessidade de criar CSS na folha de estilo pessoal.
Neste exemplo, o cabeçalho terá a classe “container-fluid” atribuída, o que significa que ocupará 100% do tamanho do dispositivo. Tendências atuais favorecem essa abordagem, embora a utilização de containers com tamanho fixo também seja válida dependendo do projeto. Além disso, a classe de padding do Bootstrap, “padding-2”, é usada para definir um espaçamento relativo.
Outra funcionalidade do Bootstrap é a disponibilidade de classes para atribuir planos de fundo. Neste exemplo, a classe “BG Warning” é usada para atribuir uma cor laranja ao plano de fundo. Para centralizar os elementos, a classe “Text Center” é utilizada.
Ao aplicar essas classes, observa-se que o cabeçalho agora preenche 100% da largura, os elementos estão centralizados e o plano de fundo está laranja. O próximo passo é estilizar outras seções do projeto, alternando as cores de fundo entre “background-light” e “background-warning” para diferenciar as seções.
A conclusão é que o uso das classes de container do Bootstrap é uma ferramenta poderosa para a estilização e organização dos elementos em uma página. No próximo módulo, haverá uma continuidade na exploração dessas e de outras classes do Bootstrap.
Agora, vamos abordar a aplicação das classes do Bootstrap para estilizar formulários, tornando-os mais atrativos sem a necessidade de criar CSS personalizado. É possível encontrar todas as classes na documentação do projeto.
Focando no site que está sendo construído, a seção de contato contém um formulário, iniciando com um ‘fieldset’ (grupo de campos no HTML5). O ‘fieldset’ é utilizado para agrupar campos e contém a legenda ‘Dados Pessoais’.
Os rótulos ‘labels’ estão desalinhados. Para resolver isso, classes serão atribuídas para dispor os rótulos verticalmente. A estratégia envolve a criação de uma ‘div’ para cada campo, permitindo que os campos se alinhem verticalmente. A classe ‘MB-3’, que adiciona margem inferior (bottom), será adicionada a esta ‘div’. O rótulo ‘label’ é movido para dentro da ‘div’, e o ‘input’ é movido para fora do ‘label’. Atributos são adicionados ao ‘label’: a classe do Bootstrap ‘form-label’ e o atributo ‘for’, que identifica a qual campo se refere o rótulo. A classe do Bootstrap para estilizar o ‘input’, ‘form-control’, é adicionada ao ‘input’. Esse procedimento melhora a estética do campo.