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

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 1.4 Glyphicons (Ícones) Figura 1.7. Resultado do código para grids 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. 1.5 Tipografia Figura 1.8. Exemplo de código com o uso de ícone 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, textjustify. 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 1.6 Formulários Figure 1.14. Resultado do código de personalização 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

1.7 Menus Figura 1.18. Resultado do código para personalização de texto 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> Tag <nav> 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. 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.