O Bootstrap é atualmente o framework mais popular para o desenvolvimento de interface de sites e aplicações responsivas. Trabalhando com o conceito mobile first, onde a ideia é que o desenvolvedor web inicie a criação do layout a partir dos dispositivos móveis e então passe ao desenvolvimento de dispositivos maiores como tablets e pcs.
Indicado para desenvolvedores iniciantes até os mais experientes, o Bootstrap trabalha com a tríade HTML(5)+CSS(3)+Javascript(Jquery), facilitando a curva de aprendizado ao trabalhar com tecnologias amplamente utilizadas no dia a dia dos desenvolvedores.
Inicialmente este framework foi criado por Mark Otto e Jacob Thornton,que compõem a equipe de trabalho do Twitter, como um kit de ferramentas de desenvolvimento front-end destinado a organizar e agilizar a integração e manutenção do código, pois cada desenvolvedor da equipe utilizava uma biblioteca diferente, o que gerava inconsistências no produto final necessitando um retrabalho para a integração dos diferentes códigos.
A partir desse desenvolvimento inicial que ocorreu durante o primeiro Twitter Hackweek, realizado entre 22 e 29 de outubro de 2010, os dois programadores perceberam o potencial do projeto e em 19 de agosto de 2011 anunciaram a primeira versão estável do framework, distribuído da forma open-source.
Atualmente o projeto se encontra na versão 3.3.7 sendo mantido pela comunidade no formato opensource e distribuído sob a licença MIT através do repositório Github (https://github.com/twbs/bootstrap).
Principais características do Bootstrap
Sendo completamente criado em compatibilidade com os padrões do Html5 e o CSS3, o Bootstrap foi desenvolvido inicialmente utilizando o pré-processador LESS, ferramenta usada para gerar folhas de estilo css, e suportando também o pré-processador SASS, agilizando o desenvolvimento da interface de sites html, não sendo necessário em um primeiro momento que o programador web digite uma linha de CSS sequer, ao mesmo tempo que oferece uma interface amigável e moderna sendo expandido com temas desenvolvidos por terceiros, além de possuir uma vasta gama de componentes de interface, tais como:
- ícones;
- menus de contexto;
- grupos de botões;
- barras de navegação;
- alertas;
- barras de progresso;
Utiliza um sistema de grids que facilita a criação de sites responsivos, fixos ou fluídos e completamente adaptados para os mais variados dispositivos, com foco inicial no desenvolvimento para dispositivos móveis.
Em conjunto com o framework Jquery (Javascript), contém uma grande diversidade de plugins que auxiliam o programador a implementar um interface mais rica sem a menor dificuldade, apenas alterando algumas configurações do plugin desejado, além de estarem completamente integrados com as classes de interface do Bootstrap.
Por ser um dos frameworks front-end mais utilizados atualmente, possui farta documentação que pode ser encontrada na internet sendo que o próprio projeto disponibiliza em seu site oficial (http://getbootstrap.com/) exemplos de utilização do framework.
Futuro do Projeto
Em agosto de 2013 foi lançada a atual versão do Bootstrap (v3), sendo que atualmente está em desenvolvimento a versão 4 do framework, que promete várias novidades entre elas:
- Mudança de LESS para SASS;
- Melhorias no sistema de grids;
- Novas opções de customização;
- Reescrita dos plugins;
- Melhoria na documentação;
- Fim do suporte ao IE8;
O plano de desenvolvimento prevê o lançamento de algumas versões alpha, duas versões betas, duas releases candidates para então lançar a versão final.
Apesar do desenvolvimento da nova versão a equipe do projeto prometeu continuar com a manutenção da versão 3 do framework, através da correção de bugs críticos e melhorias na documentação.
Mão na Massa: Baixando e instalando o Bootstrap
O primeiro passo é fazer o download do arquivo de instalação, para tanto devemos acessar o site oficial do projeto (http://getbootstrap.com/), e clicar no botão Dowload Bootstrap, como pode ser visto na figura 1.
Figura 1: Tela para downloado do bootstrap.
O site será encaminhado para a área de download onde encontra-se várias opções de instalação, a mais comum é fazer o download dos arquivos compactados, que estão disponibilizados em três versões como podemos ver na figura 2.
Figura 2: Opções de download
1 – Bootstrap: Esta é a versão simplificada do bootstrap, ela contém os arquivos – compilados e reduzidos(para um carregamento mais rápido da página) – CSS, JavaScript e as fontes. Nesta versão não está incluído a documentação e nem os arquivos fontes.
2 – Source Code: Possui o código fonte Less dos arquivos CSS, JavaScript, fontes e a documentação do framework, além de exemplos (também disponíveis no site oficial). Para utilização dos arquivos Less é necessário um compilador Less e a configuração dos arquivos.
3 – Sass: Arquivos portados para de Less para Sass para utilização de projetos Ruby, Compass ou Sass.
Nos nossos exemplos usaremos a versão 1 (bootstrap), para tanto clique em Download Bootstrap e será então baixado um arquivo .zip que contém os arquivos necessários para a criação dos projetos.
Após o download descompacte o arquivo em e renomeie a pasta criada para projetos, como mostra a figura 3, ela será utilizada para criação dos exemplos.
Figura 3: Pasta com arquivos descompactados
Outras formas de instalação
CDN: Além das três opções de download o site MaxCDN disponibiliza links para inclusão direta nas página internet, não necessitando fazer o donwload dos arquivos para utilização nos projetos.
Também é possível fazer o controle dos arquivos instalados através de gerenciadores de dependência (pacotes) .
Bower: Gerenciador de dependência também criado pela equipe do Twitter que serve principalmente para controlar os pacotes front-end de um projeto.
NMP: Gerenciador de dependência JavaScript, que utiliza o NodeJS.
Composer: Gerenciador de pacotes PHP.
Finalizando a instalação
Além dos arquivos do bootstrap para que o framework funcione de forma adequada é necessário a instalação do Jquery, para tanto faremos o acesso a página do projeto Jquery e clique na opção Download Jquery, como mostrado na figura 4.
Figura 4: Tela de download do Jquery
O site será encaminhado para a área de download do jquery, para baixar o arquivo vamos clicar com o botão direito em cima do link Download the compressed, production jQuery 3.1.1, e selecionar a opção salvar como, como mostrado na figura 5.
Figura 5: Salvando o arquivo Jquery.
Salve o arquivo na pasta projetos/js e renomeie para jquery.min.js.
Entendo a estrutura de arquivos do bootstrap
A estrutura do framework possui três pastas distintas que contém os arquivos básicos para iniciar a desenvolver os projetos utilizando o bootstrap. Os arquivo css e js possuem as versões normais e as versões reduzidas (.min), ao fazer a referência no arquivo html pode ser utilizado tanto a versão normal quanto a reduzida, na prática a versão normal é mais fácil para fazer a leitura do código fonte caso haja necessidade de fazer alteração em alguma parte do arquivo já a versão reduzida agiliza o processo de carregamento da página, deixando o processo mais rápido devido a compactação do arquivo. Agora vamos entender os arquivos apresentados na figura 6.
Figura 6: Estrutura de arquivo do bootstrap
A pasta css contém os arquivos de estilização do framework, esses arquivos já estão compilados e prontos para uso e são a base para a interface do projeto. O arquivo mais importante é o bootstrap.css (ou min na sua versão reduzida), esse arquivo precisa estar obrigatoriamente vinculado a página em html para poder utilizar os recurso do bootstrap, já o arquivo bootstrap-theme adiciona efeitos especiais em vários componentes de interface não sendo obrigatório sua utilização.
Os arquivos com extensão .map são utilizados apenas no momento de desenvolvimento para mapear os arquivos em ferramentas de debug, eles não não obrigatórios em ambientes de produção.
Em resumo a princípio precisamos apenas vincular o arquivo bootstrap.css ou o bootstrap.min.css, caso haja a necessidade de fazer alguma alteração nos estilos do tema padrão podemos criar um arquivo css extra para tais alterações.
Exemplo de código:
Já a pasta js contém os scripts javascript e os a programação dos plugins nativos do framework, para o funcionamento destes plugins precisamos vincular o arquivo do jquery que baixamos do site do projeto e salvamos na pasta em questão, sendo obrigatório o vínculo na página html do arquivo jquery.min.js e o bootstrap.js ou sua versão reduzida bootstrap.min.js
Exemplo de código:
Nenhum comentário:
Postar um comentário