Bootstrap: Uma solução rápida para sites web

Capítulo

12

Bootstrap: Uma solução rápida para sites web

Douglas Siqueira

Abstract

This chapter describes some of key features and utilities  of Bootstrap for developing web   interfaces.   Bootstrap   is   a   framework   of   web   interfaces,   using   CSS   and JS(JavaScript), however this article focuses only on how developing interfaces in CSS.

Resumo

Este   capítulo   descreve   algumas   das   principais   funcionalidades   e   utilidades   do Bootstrap para o desenvolvimento nas interfaces web. O Bootstrap é uma framework de interfaces web, usando CSS e JS(JavaScript), porém este artigo terá como foco apenas o desenvolvimento das interfaces no CSS.

1.1. Introdução

O   Bootstrap   é   uma   das   principais   frameworks   existentes   no   planeta   e   a   principal framework de desenvolvimento front­end do mundo. Nela são usadas linguagens como o HTML, CSS e JavaScript. Criado por desenvolvedores do Twitter obteve uma grande aceitação por parte dos desenvolvedores de interfaces web.

As  vantagens que podem ser destacadas  com o uso  do Bootstrap é que o seu código fonte é aberto isso possibilita que qualquer pessoa possa mexer no código e até criar o seu próprio Bootstrap. Sua aceitação por parte de desenvolvedores de todo o mundo mostra o tamanho da framework no atual mercado,  principalmente quando se fala da questão de responsividade e adaptação em diferentes navegadores.

No Brasil o Bootstrap é muito usado e aceito por causa da sua praticidade e sua facilidade de uso. Além disso uma amostra clara da aceitação da framework no Brasil é o fato de desenvolvedores dos Sites Globo usarem e terem o seu próprio Bootstrap.

1.1.2. Definição

III Escola Regional de Informática do Piauí. Livro Anais - Artigos e Minicursos, v. 1, n. 1, p. 487-499, jun, 2017.

www.eripi.com.br/2017 - ISBN: 978-85-7669-395-6

O Bootstrap é um poderoso auxiliador para os desenvolvedores front­end, ele é gratuito  e contém seu código fonte aberto para alteração. Isso possibilita um desenvolvimento de maneira ágil e fácil.

1.1.3. História

O Bootstrap teve seu início no dia 19 de agosto de 2011, nesta data Mark Otto e Jacob Thorton,   fizeram   o   anúncio   do   em   um   artigo   publicado   no   Twitter.   No   artigo   foi descrito   que   o   Bootstrap   veio   como   uma   solução   para   um   problema   ocorrido   no desenvolvimento da parte de front­end do Twitter. 

O  problema  descrito  pelos  criadores  do Bootstrap  foi que  no  desenvolvimento  das interfaces do Twitter os demais desenvolvedores utilizavam as bibliotecas de front­end nas quais já estavam mais familiarizados. Isto acabou criando uma inconsistência, desta forma criando uma dificuldade de integração. No dia 22 a 29 de outubro de 2011 foi lançada a primeira versão estável e pronta para uso do Bootstrap. Atualmente estamos na versão 3.3.7 e está no final do desenvolvimento para a versão 4 do Bootstrap.

1.1.4. Organização dos assuntos no capítulo 

O Bootstrap contém as bibliotecas de JavaScript e CSS. Neste capítulo será abordado os assuntos de CSS seguindo a mesma ordem dos assuntos que estão na documentação oficial do Bootstrap.

Na seção 1.2 será explicado como baixar, configurar e usar o Bootstrap, na seção 1.3 a organização dos elementos conhecidos por grids. Na seção 1.4 iremos ver a parte de ícones prontos do Bootstrap conhecidos como glyphicons, seção 1.5 terá tipografia que entra   no   assunto   de   cabeçalhos,   sobre   os   elementos   de   texto,   na   seção   1.6  será formulários. Para Finalizar será explicado no capítulo 1.7 menus. 

1.2. Baixar e configurar o Bootstrap 

O Bootstrap assim como outras frameworks de front­end permite a implementação de seu elementos na interface de seu site a partir da web, mas ela também contém uma versão que pode ser baixada e configurada pelo desenvolvedor caso ele queira. E e isso que iremos ver nesta seção.

1.2.1. Baixar o Bootstrap 

Para   baixar   o   Bootstrap,   basta   entrar   no   site   oficial   do   mesmo   que   eh   o http://getbootstrap.com/,   nesse   site   poderá   ser   visto   a   sua   documentação   e   como funciona cada função no navegador de sua preferência.

Figura 1.1. Site oficial do Bootstrap

Clique em Download Bootstrap no site do getbootstrap, isso abrirá uma nova página, na qual   o   desenvolvedor   escolhe   qual   Bootstrap   baixar.   Para   baixar   o   Bootstrap   só   é necessário clicar em Download Bootstrap. Será baixado um arquivo .zip, contendo a versão mais atualizada do Bootstrap. 

Figura 1.2. Site para download do Bootstrap

1.2.2. Organização dos arquivos Bootstrap

Quando é feito o download do Bootstrap uma série de arquivos e pastas na framework é baixada, cada arquivo está organizado em uma pasta que identifica a funcionalidade básica de cada arquivo. Como mencionado anteriormente o Bootstrap é uma framework de agilização no desenvolvimento da interface gráfica usando CSS e JS, por isso quando o Bootstrap é baixado existe uma pasta para os arquivos do CSS e uma para os do JS.

Além de uma pasta com o nome de fontes que contém ícones pré­definidos que podem ser usados.

Figura 1.3. Organização das pastas do Bootstrap

Figura 1.4. Organização dos arquivos do Bootstrap

1.2.3 Configurar Bootstrap para uso

A configuração dos arquivos para uso no Bootstrap, pode ser determinada de duas maneiras. A primeira maneira é usando link do Bootstrap online e adicionando na tag

<link>, já a segunda maneira é baixando o Bootstrap e linkando onde está a pasta e os arquivos que o desenvolvedor deseja usar.

1.2.3.1 Bootstrap online

Para usar o Bootstrap online é necessário conter o link de acesso de suas classes e id’s.

Este   é   o   link:  https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.

Para acessar o que é necessário do Bootstrap de maneira online, basta incluir o link acima na tag <link>, assim como descrito acima.

1.2.3.2 Bootstrap local

Para usar o Bootstrap local é necessário fazer o download no site oficial, após isso o processo de inserção dos arquivos do Bootstrap é basicamente o mesmo que o do online. Usa­se a tag  <link>  para colocar os arquivos necessários, como foi visto na seção 1.3.1 o Bootstrap contém diversos arquivos, neste livro iremos usar apenas o arquivo bootstrap.css. Neste arquivo terá todas classes e id’s que precisaremos.

1.2.3.3 Usar Bootstrap

A utilização desta framework, assim como a de outras frameworks de interface web é feita por meios das classes no CSS. Sendo assim o usuário coloca o nome da classe na sua tag HTML. Exemplo: <div class=”col­md­12”>.

1.3 Organização dos elementos (Grids)

O Bootstrap contém uma organização própria dos elementos que estarão no seu site, dessa maneira dividindo a tela em n partes, cada parte contendo uma quantidade x de elementos.

A organização desses elementos é conhecida como grids. As grids no Bootstrap é dividida em 12 partes iguais, sendo que estas grids são aplicadas apenas a tag <div>.

Além disso o Bootstrap divide as grids dependendo do tamanho da tela, sendo que são 4 tipos de grids diferentes cada grid adaptada para um tipo de tela. Na figura 1.5 abaixo

iremos ver a divisão da tela pelo Bootstrap.

Figura 1.5. Grids

O exemplo mostrado acima é a forma forma de divisão de tela que o Bootstrap faz, essa divisão sendo em 12 partes iguais, na qual essas partes podem variar de tamanho chegando até o tamanho 12 no final da tela. Porém a especificação de tamanho pode ser dada em outras pequenas partes de tamanho como 1, 2, 3, até chegar ao final de tamanho da tela que é de 12.

Como   foi   mencionado   anteriormente   as   grids   do   Bootstrap   podem   variar dependendo do tamanho da tela. Atualmente esses tipos de tamanho são 4 tipos, sendo estes a xs (for phones), sm (for tablets), md (for desktops) e lg (for larger desktops).

Cada um desses tipos é perfeito para o seu um tamanho x da tela em pixels.

 xs para telas 768px ou menos

 sm para telas de 769px até 992px

 md para telas de 993px até 1199px

 lg para telas de acima de 1200px

Agora que sabemos como funciona as grids no Bootstrap, vamos aplicar o que foi descrito anteriormente. Como foi o Bootstrap funciona em um sistema de classes, desta forma para chamar a grid do Bootstrap usamos a classe col seguido do seu tipo e por fim o seu tamanho que terá essa grid. Sua sintaxe fica col­tipo­tamanho. Iremos ver isso   com   o   seguinte   código   na  figura   1.6  e   seu   resultado   na  figura   1.7

Figura 1.6. Exemplo de código para grids

Figura 1.7. Resultado do código para grids

1.4 Glyphicons (Ícones)

Os ícones tem grande utilização dentro da interfaces de páginas web, eles são elementos essenciais para a IHC (Interação Humano Computador) dos sites. Cada ícone desse tem um significado diferente para representar uma determinada ação que será executada no site.

O Bootstrap tem como uma de suas vantagens a utilização desses ícones prontos na framework para fazer a representação das ações. Estes ícones no Bootstrap são chamados de glyphicons, sendo que estas glyphicons representa ações que poderam ser feitas no back­end. Estes ícones estão dentro da pasta fonts e podem ser chamadas por classe. Por uma questão de padrão as glyphicons são chamadas nas classes usando a tag

<span>.  Para   ter   acesso   a   todas   a   todas   as   glyphicons   acesse   o   site.

http://getbootstrap.com/components/#glyphicons. A sintaxe a ser usada para o uso dos ícones é: glyphicons glyphicons­nome­do­ícones. O exemplo a seguir mostra o uso de um ícones com uma estrela.

Figura 1.8. Exemplo de código com o uso de ícone

1.5 Tipografia

No Bootstrap a tipografia é o nome dado aos tipos de texto que o mesmo cria por padrão, sendo mais específico é a forma na qual é tratado as tags de texto como a <h1>

e suas derivadas. Iremos ver logo abaixo alguns exemplos do Bootstrap para as suas tipografias.

1.5.1 Cabeçalho

Como padrão o Bootstrap fornece códigos para ser usados em diferentes partes do seu site, abaixo na figura 1.9 1.10 como fica um cabeçalho de um site usando o Bootstrap.

O Bootstrap por padrão aumenta os valores para cada uma das tags h’s, dessa forma o tamanho as tags h’s ficam com esses respectivos tamanhos

 h1 36px

 h2 30px

 h3 24px

 h4 18px

 h5 14px

 h6 12px

Figura 1.9. Código para cabeçalho

Figura 1.10. Resultado do código para cabeçalho

Porém se por algum motivo o desenvolvedor quiser diminuir o tamanho desses texto o Bootstrap fornece uma solução sem mexer diretamente no CSS, usando a tag

<small>.   O   código   e   o   resultado   fica   desta   forma   mostrada   nas  figuras   11  e  12 respectivamente. Perceba na  figura 12  que ao lado o texto  Secondary text  aparece pequeno isso porque esse texto na  figura 11 este mesmo texto aparece dentro da tag

<h1>, assim seu tamanho fica menor e não fica mais em negrito o texto.

Figura 1.11. Código para cabeçalho pequeno

Figura 1.12. Resultado do código para cabeçalho pequeno

1.5.2 Personalização de texto

No atual HTML algumas tags foram colocadas como tags extintas ou como tags que usadas mostraria uma má prática de marcação do site, estas tags são <b>, <i>, <u> e

<center>. Cada uma destas tags tinha uma funcionalidade, a tags <b>, deixava o texto em negrito, a tag <i> deixava o texto em itálico, a tag <u> deixava o texto sublinhado e a tag <center> centralizava o texto.

A “proibição” do uso dessas tags acima foi substuida pelo uso do CSS para deixar   o   texto   em   negrito,   itálico,   sublinhado   ou   centralizado.   Com   o   Bootstrap   é possível personalizar o texto sem  a necessidade  de usar diretamente o CSS, assim usando apenas algumas tags HTML e classes do Bootstrap para personalização. 

O Bootstrap padronizou tags para personalização as tags são, <ins>, <strong> e

<em>. Além dessas tags existem também classes para alinhamento de texto estas são as classes text e suas derivadas, estas são as classes text­left, text­center, text­right, text­

justify. Veja abaixo a funcionalidade de cada uma dessas tags e das classes. 

Funcionalidade das tag’s

 <ins> deixa o texto sublinhado

 <strong> deixa o texto em negrito

 <em> deixa o texto em itálico Funcionalidade das classes

 text­left deixa o texto alinhado à esquerda

 text­center deixa o texto centralizado

 text­right deixa o texto alinhado ao centro

 text­justify deixa o texto justificado

Figura 1.13. Código para personalização de texto

Figure 1.14. Resultado do código de personalização

1.6 Formulários

Os   formulários   são   elementos   essenciais   para   o   uso   das   interfaces   web,   nelas   são possíveis colocar informações de um usuário, como sexo, idade, nome, e­mail, entre outros.   Além   disso   há   a   possibilidades   de   utilizar   estes   mesmo   para   enviar   essas informações para uma aplicação em back­end. 

Sabendo disso o Bootstrap fornece diferentes interfaces para diversos modelos de   formulários.   Além   disso   é   fornecido   classes   para   serem   usadas   em   elementos específicos do formulário como, botões, textarea, checkbox, radio, inputs, entre outros.

No Bootstrap existe duas maneiras de tratar os elementos dos formulários, sendo em linha ou ou em horizontal. Para usar estes tipos de formulários necessita colocar as classes form­inline e form­horizontal na tag <form>. Além dessas duas classes usa­se por padrão a classe form­group para uma melhor agrupação dos elementos. Vejamos abaixo nas figuras 15 e 16  e nas figuras 17 e 18 exemplo do uso de formulário em linha e horizontal respectivamente. Por fim é necessário saber que em cada um dos elementos   contidos   no   formulário   deve   ter   a   classe  form­control  para   editar   o formulário seguindo o padrão do Bootstrap.

Figura 1.15. Código para formulário em linha

Figura 1.16. Resultado código para personalização de texto

Figura 1.17. Código para personalização de texto

Figura 1.18. Resultado do código para personalização de texto

1.7 Menus

Os menus são uma das parte mais importantes em qualquer site, pois é nele o usuário vê todas as opções deste site e assim o usuário pode se deslocar para todas ou quase todas as páginas do site sem perder tempo.

O Bootstrap contém alguns tipos de menus, sendo os mais usados nos sites, os menus laterais e os menus no topo do site. Para a utilização desses tipos desse menus é necessário usar as classes  navbar,  navbar­nav, nav, entre outras, sendo que estas classes devem ser usadas em algumas tags específicas como, <nav> e <ul>. Vejamos logo abaixo as classes para cada uma das tags do HTML.

Tag <ul>

 nav junto com navbar­nav: Assim cria um menu normal com seus itens sendo o conteúdo dentro da tag <li>.

 nav junto com navbar­nav e navbar­right: Assim cria cada o menu com seu conteúdo aparecendo no lado direito.

Tag <nav>

 navbar: Cria o menu.

 navbar­fixed­top: Cria o menu fixo no topo do site.

 navbar­fixed­bottom: Cria o menu no fixo na parte de baixo do site.

Veja abaixo um exemplo simples de código do menu e o resultado desse código.

Figura 1.19. Código para menu do site

Figura 1.20. Resultado do código para menu do site

1.7. Referências

As referências para este minicurso tem em vários sites, porém só existe um livro que contém as explicações necessárias para o desenvolvimento no CSS com o Bootstrap, isso faz com que este capítulo se torne mais importante.

References

Bootstrap. (2017) “CSS . Bootstrap”, http://getbootstrap.com/css/, Maio.

Silva   Maurício   Samy.   (1995)   “Livro   Bootstrap   3.3.5   Maujor”,   Interface   Web:

Novateca., p. 4­15.