anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Bootstrap – O queridinho do Front End

Bootstrap

A procura por sites responsivos está a cada dia aumentando. Bem fazer um site responsivo manualmente da um certo trabalho nem sempre fica perfeito em todas as telas.

Foi pensando na facilidade do desenvolvedor que Mark Otto desenvolveu o Bootstrap. O Bootstrap hoje é considerado o framework de desenvolvimento front end mais utilizado no mundo.

Mas o que faz o Bootstrap ser tão utilizado? Bom vamos la:
– O Bootstrap lhe da varios elementos ja prontos precisando somente chamar as classes do Bootstrap e o elemento ja fica todo formatado, você quase não precisa utilizar css, less, sass ou outras linguagens de estilo.

Bom, vamos ver alguns do recursos do Bootstrap:

Importação dos arquivos

Como em qualquer outro framework devemos importar os arquivos, seja via CDN ou baixando os arquivos

Importando o Bootstrap via CDNBootstrap CDN

Grid

Ele trabalha com um sistema de grid composto por 12 colunas, ou seja a sua tela é dividida em 12 partes de tamanhos iguais para você estar os tamanhos e posições dos elementos HTML.

Grid Bootstrap

 

Você deve estar se perguntando, o que é esse .col-md-1 , .col-md-6??

Isso são as classes do grid do Bootstrap, ele trabalha com 4 tipos de col:

col-xs = Dispositivos com telas pequenas, menores que 768px de largura, como um iPhone

col-sm = Dispositivos com telas pequenas, partindo de 768px de largura, como um iPad em modo retrato

col-md = Dispositivos com telas médias, partindo de 992px de largura, como um iPad em modo paisagem

col-lg = Dispositivos/Monitores grandes, partindo de 1200px de largura, como monitores de notes e desktops

 

– Ou seja utilizando as classes citadas acima, você não precisa trabalhar com as media queries. Mas se precisar o bootstrap utiliza o LESS CSS para fazer as medias queries. Não sabe utilizar o LESS CSS? Clique Aqui

Media queries LESS CSS

Formulários

Os formulários não foram esquecidos no Bootstrap, bem quem trabalha com o css puro sabe o quanto é chato formatar os campos de formulários, no Bootstrap basta chamar a class .form-control nos campos de formulário e ele ja pega a formatação padrão do Bootstrap.

Form Bootstrap

Botões

Outra coisa que ficávamos quebrando a cabeça para arrumar, os botões.

No Bootstrap temos alguns exemplos ja prontos.

Botões Bootstrap

Segue as classes dos botões em ordem(da esquerda para a direita)

.btn btn-default = Um botão de formatação simples.

.btn btn-primary = Insere uma cor azul no botão para uso geral no seu site.

.btn btn-success = Um botão para envio de formulário, por exemplo.

.btn btn-info = Geralmente utilizamos ele para chamar um modal.

.btn btn-warning = Cria um botão que geralmente utilizamos para exibir um tooltip.

.btn btn-danger = Este botão tem diversas utilidades mas geralmente uso para cancelar ações.

.btn btn-link = Cria um botão “falso” com aparência de link.

Bom vou parar por aqui pois são muitas coisas a se falar sobre o Bootstrap, se você curtiu, vá até o site do Bootstrap e la para cada class você tem um mini tutorial explicando como utilizar aquela class.

Captura de Tela 2015-08-23 às 10.40.42

Ivan Lanza, 22 anos, casado, formado pelo SENAC SP como Desenvolvedor Web, Certificado pela W3C em HTML 5 e CSS 3, Google Design Pattern e Certificado pela Apple Como Apple Genius e iOS Senior Developer. Sou instrutor de Web em São Caetano do Sul há 3 anos e 6 meses e no restante das horas vagas trabalho como freelancer home office para outras empresas.

Facebook: https://www.facebook.com/Lanzaivan1

Próximo

Postado por

Postagem Relacionada

capa
Criando um menu personalizado no Dreamweaver com HTML e CSS
Tutorial de Dreamweaver Quando pensamos em criar um site, o primeiro passo que precisamos nos