Se você está fazendo algo relacionado à web, é provável que já tenha ouvido falar do Bootstrap. Se você ainda não sabe o que é o Bootstrap, ou apenas deseja encontrar um tutorial do Bootstrap para iniciantes para ter uma melhor visão geral do que é e do que faz melhor, você veio ao lugar certo.

Bootstrap é um poderoso kit de ferramentas - uma coleção de ferramentas HTML, CSS e JavaScript para criar e construir páginas da web e aplicativos da web. É um projeto gratuito e de código aberto, hospedado em GitHub , e originalmente criado por (e para) Twitter .

Então, por que aprender Boostrap?

Após seu lançamento de código aberto em 2011, o Bootstrap se tornou popular muito rapidamente, e não sem razão. Web designers e web desenvolvedores como Bootstrap porque é flexível e fácil de trabalhar. Suas principais vantagens são que ele é responsivo por design, mantém ampla compatibilidade com o navegador, oferece design consistente usando componentes reutilizáveis ​​e é muito fácil de usar e rápido de aprender. Ele oferece extensibilidade rica usando JavaScript, que vem com suporte integrado para plug-ins jQuery e uma API JavaScript programática. O bootstrap pode ser usado com qualquer IDE ou editor e qualquer tecnologia e linguagem do lado do servidor, de ASP.NET a PHP e Ruby on Rails.

Com Bootstrap, desenvolvedores web pode se concentrar no trabalho de desenvolvimento, sem se preocupar com design, e ter um site de boa aparência instalado e funcionando rapidamente. Por outro lado, dá aos web designers uma base sólida para a criação de temas interessantes do Bootstrap.

Primeiros passos com o Bootstrap Básico

O Bootstrap está disponível em duas formas; como uma versão pré-compilada e como uma versão de código-fonte. A versão do código-fonte usa o Menos Pré-processador CSS, mas se você gosta mais de Sass, há um porta Sass oficial do Bootstrap também disponível. Para facilitar o uso de prefixos de fornecedores CSS, o Bootstrap usa Autoprefixer .

A versão do código-fonte vem com estilos de código-fonte escritos em Less (ou Sass), todo o JavaScript e a documentação que o acompanha. Isso permite que designers e desenvolvedores mais ambiciosos alterem e personalizem, à sua vontade, todos os estilos fornecidos e construam sua própria versão do Bootstrap. Mas se você não está familiarizado com Less (ou Sass), ou simplesmente não está interessado em alterar o código-fonte, não se preocupe. Você pode apenas usar o CSS vanilla pré-compilado. Todos os estilos podem ser substituídos posteriormente usando estilos personalizados.

Estrutura do Arquivo

Vamos nos concentrar na versão pré-compilada, que pode ser baixada Aqui . Quando você baixa o arquivo zip e descompacta-o, a estrutura básica do arquivo se parece com esta:

A estrutura do Bootstrap é bastante simples e autoexplicativa. Inclui arquivos pré-compilados que permitem o uso rápido em qualquer projeto da web. Além de arquivos CSS e JS compilados e minimizados, também inclui fontes de Glifos e o tema inicial de inicialização opcional.

Esta estrutura pode ser facilmente incorporada na estrutura de arquivos do seu próprio projeto, apenas incluindo os arquivos Bootstrap exatamente como eles saem do arquivo zip, ou se for mais adequado ao seu projeto, você pode reorganizar esses arquivos e colocá-los em qualquer lugar que desejar. Apenas certifique-se de que a pasta de fontes Glyphicons esteja no mesmo nível da pasta CSS.

Modelo HTML básico de bootstrap

Um modelo HTML básico de Bootstrap deve ser semelhante a este:

É importante iniciar qualquer HTML com uma declaração HTML 5 Doctype, para que os navegadores saibam que tipo de documento podem esperar. O cabeçalho contém três tags importantes que devem ser declaradas primeiro e quaisquer tags de cabeçalho adicionais devem ser adicionadas depois delas. Se você deseja oferecer suporte a navegadores mais antigos, como o IE8, também pode incluir HTML 5 shim na cabeça, o que permitirá o uso de elementos HTML5 em navegadores mais antigos, e Respond.js , que irá polyfill CSS3 Media Queries, nas versões antigas do Internet Explorer.

Embora, isso não seja muito importante se você está direcionando apenas os navegadores modernos.

Arquivos JavaScript são adicionados ao final do corpo para permitir que a página da web carregue visivelmente antes que qualquer JavaScript seja executado. O jQuery é necessário para os plug-ins Bootstrap e deve ser carregado antes de bootstrap.js. Se não estiver usando nenhum dos recursos interativos do Bootstrap, você também pode omitir esses arquivos da fonte.

Este é o mínimo necessário para obter um layout básico do Bootstrap instalado e funcionando. Se você é um desenvolvedor, provavelmente desejará dar uma olhada em alguns exemplos mais avançados em Página de exemplos do Bootstrap . Se você é um designer ou está apenas procurando inspiração, Expo Bootstrap mostra sites que são construídos usando Bootstrap. Como veremos mais tarde, cada parte do Bootstrap pode ser facilmente personalizada em CSS. Mas se isso não é sua praia, e você está procurando uma aparência ligeiramente diferente dos temas Bootstrap pré-empacotados, há muitos temas gratuitos de código aberto e premium disponíveis em fontes como Bootswatch e WrapBootstrap .

Modelos de bootstrap e componentes de IU

O Bootstrap vem com modelos básicos de design HTML e CSS que incluem muitos componentes de IU comuns. Isso inclui tipografia, tabelas, formulários, botões, glifos, menus suspensos, botões e grupos de entrada, navegação, paginação, rótulos e emblemas, alertas, barras de progresso, modais, guias, acordeões, carrosséis e muitos outros.

Muitos deles usam extensões JavaScript e plug-ins jQuery.

Esses modelos de Bootstrap são disponibilizados como classes CSS bem fatoradas que você pode aplicar ao seu HTML para obter diferentes efeitos. Isso torna o uso do Bootstrap muito conveniente. Usando nomes de classes semânticas como .success, .warning e .info, esses componentes são facilmente reutilizáveis ​​e extensíveis. Mas, embora o Bootstrap use nomes de classe descritivos que têm significado, não é específico sobre os detalhes de implementação. Todas as classes podem ser substituídas por estilo e cor CSS personalizados e, ainda assim, o significado da classe permanecerá o mesmo.

Sistema Bootstrap Grid

Antes de mergulharmos mais nos componentes e modelos de design do Bootstrap, é importante mencionar um dos principais recursos que o Bootstrap introduziu na versão 3: a design mobile-first filosofia, que resultou em um Bootstrap responsivo por design. O resultado final é que o Bootstrap é escalonado de maneira fácil e eficiente com uma única base de código, de telefones, tablets e desktops.

Essa capacidade de resposta é obtida usando um sistema de grade de Bootstrap fluido que pode ser aplicado para dimensionar adequadamente até 12 colunas de acordo com o tamanho do dispositivo ou janela de visualização. As grades fornecem estrutura ao layout, definindo as diretrizes horizontais e verticais para organizar o conteúdo e aplicar as margens. As grades também oferecem uma estrutura intuitiva para os visualizadores, porque é fácil seguir o fluxo de conteúdo da esquerda para a direita ou da direita para a esquerda movendo-se para baixo na página. Antes das grades, e antes do CSS ser tão poderoso, os layouts baseados em grade eram alcançados usando tabelas, onde o conteúdo era organizado dentro das células da tabela. Conforme o CSS se tornou mais maduro, várias estruturas CSS para layouts baseados em grade começaram a aparecer. Esses incluem Grades YUI , 960 GS e planta , para nomear alguns.

Para usar o sistema de grade Bootstrap, algumas regras precisam ser seguidas . Os elementos da coluna da grade são colocados dentro dos elementos da linha, que criam grupos horizontais de colunas. Você pode ter quantas linhas quiser na página, mas as colunas devem ser filhos imediatos das linhas. Em uma linha inteira, as larguras das colunas serão qualquer combinação que some 12, mas não é obrigatório usar todas as 12 colunas disponíveis.

As linhas precisam ser colocadas em um wrapper de layout de largura fixa, que possui um .container classe e uma largura de 1170 px, ou em um wrapper de layout de largura total, que tem um .container-fluid classe, e que permite o comportamento responsivo nessa linha.

O sistema de grade Bootstrap tem quatro camadas de classes: xs para telefones (<768px), sm para tablets (≥768px), md para desktops (≥992 px), e lg para desktops maiores (≥1200 px). Basicamente, eles definem os tamanhos nos quais as colunas irão colapsar ou se espalhar horizontalmente. As camadas de classe podem ser usadas em qualquer combinação para obter layouts dinâmicos e flexíveis.

Por exemplo, se quisermos obter duas linhas, uma com duas colunas e outra com quatro, podemos escrever:

Também podemos usar larguras de coluna mistas:

Podemos até deslocar colunas usando deslocamento, por exemplo, para criar conteúdo mais estreito e centralizado:

As colunas podem ser aninhadas. Pode haver menos de 12 colunas e, conforme mencionado acima, podemos escolher colunas de largura fixa ou largura total usando .container ou .container-fluid invólucros, respectivamente.

Se combinarmos diferentes níveis de classe, teremos visuais diferentes em visualizações de dispositivos móveis e de desktop. No exemplo abaixo, na área de trabalho haverá 4 colunas em uma linha e, no celular, elas terão largura total e serão empilhadas umas sobre as outras.

É possível desativar a capacidade de resposta da página completamente. Isso basicamente desabilitará os aspectos de “site móvel” do Bootstrap. Lembre-se de que, se você desativar a capacidade de resposta, qualquer componente de largura fixa, como uma barra de navegação fixa, não ficará visível quando a janela de visualização se tornar mais estreita do que o conteúdo da página. Para um contêiner sem resposta, isso significa uma largura de 970 px. Também neste caso, as barras de navegação não se retraem nas visualizações móveis, conforme descrito posteriormente.

Estes são apenas exemplos básicos. Para ver todo o potencial das grades, confira Documentação do Bootstrap's Grids .

Tipografia Bootstrap

Os desenvolvedores iniciantes geralmente presumem que seu HTML puro e sem estilo terá a mesma aparência em todos os navegadores. Infelizmente, cada navegador tem sua própria folha de estilo “agente do usuário” padrão que é aplicada ao HTML, e nenhum navegador tem os mesmos padrões. Por exemplo, os tamanhos das fontes dos títulos não são consistentes entre os navegadores, algumas listas desordenadas e ordenadas têm margens à esquerda e outras têm preenchimento à esquerda, os navegadores aplicam bordas e preenchimento personalizados ao corpo do HTML e até mesmo os botões são renderizados de forma diferente entre os navegadores. Para resolver todas essas inconsistências, diferentes regras de “redefinição” de CSS surgiram para definir padrões de estilo consistentes.

O Bootstrap traz mais alguns benefícios para a mesa além da redefinição CSS pura. Vem com normalize.css , uma alternativa pronta para HTML5 para redefinições de CSS, e também possui alguns padrões próprios bem projetados. Por exemplo, o Bootstrap define o padrão global font-size a 14 px, com uma altura de linha de 1,428. A fonte padrão é alterada para Helvetica / Arial, com fallback sans serif. Todos esses estilos são aplicados ao e a todos os parágrafos, com a adição de

(parágrafos) recebem uma margem inferior de metade de sua altura de linha calculada (10px por padrão). Além desses padrões, também existem estilos personalizáveis ​​para tags HTML padrão que trazem mais consistência ao texto, como texto destacado (), texto excluído (e), texto sublinhado (), texto pequeno () e texto em negrito ( ). As classes de alinhamento ajudam a organizar o conteúdo na página mais facilmente usando .text-left, .text-center, .text-right, .text-justify e .text-nowrap Aulas. Existem também estilos predefinidos para aspas em bloco e listas não ordenadas e ordenadas, com opções embutidas, apenas para citar alguns. Para obter uma lista completa, vá para o Página Bootstrap Typography .