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

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
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.