Funcionalidades do Bootstrap: Layout, Component, Content e Utilities

 

Vamos agora falar um pouco mais de como funciona o Bootstrap, e para isto vamos detalhar e comentar sobre suas principais funcionalidades, quais sejam: layout, components, Content e Utilities.

Layout

Começando pelo layout. Trata-se de um dos principais e mais populares aspectos do framework, é utilizado para criar componentes gráficos de uma aplicação web. Para tal, é utilizado um editor de texto, um navegador web e toda estrutura de arquivos do Bootstrap.

Os sistemas de grid são uma das principais funcionalidades do layout, e serão foco de análise no próximo item.

 

Sistema de grid para layout

A criação de layouts CSS baseados em um grid inicial já é uma técnica bem conhecida e que está disponível desde 2007. Seu grande destaque é  proporcionar grids prontos para uso de desenvolvedores web.

É importante salientar dois aspectos que a utilização de grids proporciona:

 

  • Agilização do processo de criação;
  • Possibilidade de usar as funcionalidades de forma modular.

 

O aumento da agilidade do processo traz o benefício imediato de redução no tempo de trabalho para se atingir o resultado final, o que como um bom desenvolvedor sabe, pode ser algo muito útil já que os prazos normalmente são bem curtos.

Outro aspecto do layout, mas já voltando mais a atenção para as utilities, tem um foco maior no design específico da página, como será apresentado na próxima seção.

 

Utilities

O Bootstrap inclui diversas classes que chamamos de utilities, que implementam funcionalidades como alinhamento, espaçamento de conteúdo, exibição e ocultamento, entre diversas outras.

 

Modificando o display

Utilizando as utilities  de display para alternar de forma responsiva valores comuns da propriedade de exibição, pode ser feita a combinação com o sistema de grid, content, ou components para exibir ou ocultá-los através de viewports específicos.

 

Opções de Flexbox

Bootstrap 4 é construído com flexbox, mas nem todo o elemento de exibição foi modificado para tal finalidade: e bem como isto iria adicionar muitos overrides desnecessários e comportamentos inesperados do browser. A maior parte dos  components são feitos com o flexbox habilitado.

 

Margem e preenchimento

Utilizar os utilities de espaçamento para margem e preenchimento para controlar como os elementos e componentes são espaçados e dimensionados. O Bootsrap 4 inclui uma escala de 5 níveis para utilities de espaçamento, permite a escolha de todos os viewports.

 

Alternar visibilidade

Quando a exibição em alternância não é necessária, é possível alternar a visibilidade de um elemento com a ferramenta visibility utilities. Elementos ocultos ainda irão afetar o layout da página, entretanto não serão visíveis aos visitantes.

Componentes

 

Componentes são criados com blocos de código padrão e classes de estilização previstas pelo Bootstrap de modo a renderizar o componente ao padrão de estilização, ou tema.

 

Alguns dos componentes disponíveis e uma parcela dos que serão analisados:

 

  •    Ícones
  •    Dropdowns
  •    Agrupamento de botões
  •    Elementos de navegação
  •    Thumbnails
  •    Alertas

Ícones

Estes ícones consistem em um conjunto muito diverso, com todo o tipo icon font que poderá ser usado a qualquer momento da marcação. Desde que este não se destine a criar uma funcionalidade do Bootstrap, ou seja, o elemento não deve conter um par atributo/valor específico do framework.

 

Dropdown

Outro componente disponível é o dropdown, o seu funcionamento depende da sua inclusão na página que receberá o menu da biblioteca jQuery, o plugin do Bootstrap para dropdown.

Em questão da marcação HMTL, é feita de forma típica com a definição das classes dropdown e dos atributos de marcação necessários para estilizar e funcionalizar o menu dropdown.

Barra de navegação

O Bootstrap também fornece uma grande variedade de barras de navegação que contém não somente links, mas também:

  • Imagens;
  • Textos;
  • Caixas de busca;
  • Elementos de formulário;
  • Dropdown.

 

As barras em si também podem trazer facilidade e versatilidade, podem ser fixas no topo ou rodapé da aplicação, podem rolar com o conteúdo e são responsivas.

 

Contents

Quando falamos de contents, estamos nos referindo principalmente à possibilidade de incluir códigos fonte pré compilados.

 

Bootstrap pré-compilado

Está é a forma mais básica do Bootstrap: arquivos pré compilados são muito comuns para um uso rápido em praticamente qualquer projeto web.

São fornecidos arquivos compilados em CSS e JS, assim como source maps  em CSS disponíveis em algumas ferramentas de desenvolvimento em alguns browsers.

 

Essas são as principais funcionalidades do Bootstrap. Em um breve texto como esse é difícil apresentar uma abordagem completa. Recomendamos o aprofundamento do estudo no site “getbootstrap”, já referenciado em outros artigos da série.

 

 

Bons estudos!