Use o código e tenha 10% de desconto!

Bootstrap 4 Conheça a biblioteca front-end mais utilizada no mundo

Natan Souza

BOOTSTRAP, A ORIGEM

Imagine que você faz parte da equipe de front-end da Juquinha Consultoria, uma importante consultoria de TI. Você e seu time desenvolvem um guia de estilos com CSS que logo se torna padrão na empresa inteira, inclusive na sede.

Passado um tempo, vocês se perguntam se outras equipes ao redor do mundo não se beneficiarão do uso deste guia, e resolvem disponibilizá-lo online, no GitHub, totalmente open source. O repositório/projeto é um sucesso, e cai no gosto da comunidade mundial de desenvolvimento, principalmente entre os desenvolvedores back-end – e talvez também seja um pouco odiado pelos designers (veremos o motivo disso adiante).

Esta história é baseada em fatos reais, e aconteceu com uma "pequena" empresa chamada Twitter que, em agosto de 2011, lançou para o mundo seu guia de estilos em CSS, que ficaria famoso por muitos anos, o Bootstrap. É isso mesmo, o Bootstrap é, resumidamente, um grande arquivo CSS com uma excelente documentação (diga-se de passagem) e que possui dezenas e dezenas de componentes prontos.

Fazer um site elegante com três colunas nunca foi tão fácil, mesmo para quem nem sabe escrever uma linha de CSS e, muito menos, algo sobre harmonia das cores. Foi aí que começaram as divergências, pois, se de um lado temos desenvolvedores back-end felizes em não precisar mexer com CSS e/ou design, tínhamos front-enders bravos, pois o HTML ficava muito sujo, e os designers mais bravos ainda, já que a cara de todo site feito em Bootstrap ficava igual!

Falaremos mais disso em capítulos posteriores, mas o fato é que a criação do Bootstrap foi um marco para a área de desenvolvimento. Sistemas internos no geral começaram a ter um trabalho mais bem finalizado com relação a estrutura e layout por conta dele.

Herói ou vilão? Batman ou Coringa? Você vai conferir neste livro como trabalhar com essa fantástica biblioteca em sua última versão 4, e verá alguns de seus segredos mais profundos, algumas de suas fraquezas e, principalmente, suas características mais notáveis.

O livro é focado em profissionais ligados à tecnologia, que possuam conhecimentos básicos de HTML/CSS e que nunca tiveram contato com o Bootstrap.

Se você já conhece o Bootstrap 3 e quer apenas se atualizar, esta leitura não é indicada. Mas recomendo dar uma olhada no próprio blog deles: http://blog.getbootstrap.com/2018/01/18/bootstrap-4/. Agora, vamos começar a brincar de Bootstrap!

Sumário

  • 1 O projeto Better
    • 1.1 E no mobile?
    • 1.2 Terminando o menu
    • 1.3 Resumo
  • 2 Destacando o que deve ser destacado
    • 2.1 Relembrando o wireframe e colocando a mão na massa
    • 2.2 Jumbo quem?
    • 2.3 Tirando as margens
    • 2.4 Estilizando um campo de formulário
    • 2.5 Campo e botão lado a lado
    • 2.6 Resumo
  • 3 Entendendo as grids do Bootstrap
    • 3.1 Analisando o wireframe da galeria
    • 3.2 Começando a marcação
    • 3.3 Centralizando tudo
    • 3.4 Melhorando a galeria
    • 3.5 Um site responsivo para telas maiores
    • 3.6 Ajustando para telas maiores
    • 3.7 Resumo
  • 4 Flexbox, agora no Bootstrap
    • 4.1 Não é TV Fama, é Hall da Fama!
    • 4.2 O flexbox mais rápido do oeste
    • 4.3 Ajeitando o hall
    • 4.4 Resumo
  • 5 Media, um componente atualizado
    • 5.1 Um antigo componente
    • 5.2 Resumo
  • 6 Cartas na mesa: brincando com o card
    • 6.1 Começando com o plano
    • 6.2 Estilizando nosso primeiro card
    • 6.3 Aplicando a grid aos cards
    • 6.4 Mudando o estilo do plano principal
    • 6.5 Fazendo o rodapé
    • 6.6 Resumo
  • 7 Classes semânticas e CSS mais leve
    • 7.1 Diminuindo a poluição no HTML usando Sass
    • 7.2 Preparando a infra
    • 7.3 Juntando regras CSS em uma só classe
    • 7.4 Escolhendo o que usar do Bootstrap
    • 7.5 Resumo
  • 8 Conselhos e dicas
    • 8.1 Qual é o melhor framework CSS?
    • 8.2 Links de saideira

Dados do produto

Número de páginas:
172
ISBN:
978-85-94188-60-1
Data publicação:
05/2018

Compartilhe!

Compartilhe no Facebook Compartilhe no Twitter