Bootstrap - kit de ferramentas de

código aberto para desenvolvimento com

HTML, CSS e JS
Módulo 02 – Bootstrap Aula 01
Módulo 02 – Bootstrap Aula 01

Introdução ao Bootstrap

O Bootstrap é um kit de ferramentas de código aberto para

desenvolvimento com HTML, CSS e JS. Crie um protótipo rápido de suas

ideias ou construa seu aplicativo inteiro com as variáveis ​e mixins sass,

sistema de grade responsivo, componentes pré-construídos extensos e

plugins poderosos criados em Javascript.

Módulo 02 – Bootstrap Aula 01

Por que usar Bootstrap? Vantagens de usar Bootstrap:

● Fácil de usar: Qualquer pessoa com conhecimentos apenas básicos de HTML e CSS pode

começar a usar Bootstrap;

● Características Responsivas: O CSS responsivo do Bootstrap se ajusta para celulares,

tablets e desktops;

● Mobile e adaptável

● Compatibilidade com navegadores: Bootstrap é compatível com todos os navegadores

modernos (Chrome, Firefox, Internet Explorer, Safari e Opera)

Módulo 02 – Bootstrap Aula 01

Vamos instalar o Bootstrap em nosso projeto

Acesse: https://getbootstrap.com/
Módulo 02 – Bootstrap Aula 01

O Grid System utilizado pelo Bootstrap

O Bootstrap funciona em cima de um sistema composto por linhas e colunas

chamado grid system. Nesse sistema, o Bootstrap trata a área de exibição da aplicação da

seguinte maneira:

• A área de exibição é dividida em 12 partes no sentido vertical, gerando 12 colunas;

• Horizontalmente, não há limite de linhas que podem ser criadas.

Módulo 02 – Bootstrap Aula 01
Se estivéssemos em um desktop, por exemplo, a tela seria dividida de acordo
com a ilustração abaixo:

Se estivéssemos em um celular, a divisão também aconteceria:

Módulo 02 – Bootstrap Aula 01

Por exemplo: se quisermos criar duas divs, sendo que cada uma ocupe metade da tela,
nós precisamos instruir ao Bootstrap que cada div ocupe 6 das 12 colunas que são criadas
Módulo 02 – Bootstrap Aula 01
Opções de grade

O sistema de grade do Bootstrap pode se adaptar em todos os seis

pontos de interrupção padrão e em qualquer ponto de interrupção que

você personalizar. As seis camadas de grade padrão são as seguintes:

• Extra pequeno (xs)
• Pequeno (m)
• Médio (md)
• Grande (lg)
• Extra grande (xl)
• Extra extra grande (xxl)
Módulo 02 – Bootstrap Aula 01

Opções de grade
Módulo 02 – Bootstrap Aula 01

Containers

Os contêineres são blocos de construção fundamental do Bootstrap que contém,

preenche e alinha seu conteúdo em um determinado dispositivo ou viewport.

É o elemento de layout mais básico no Bootstrap e são necessários ao usar nosso

sistema de grade padrão . Os contêineres são usados ​para conter, preencher e (às

vezes) centralizar o conteúdo dentro deles. Embora os contêineres possam ser aninhados,

a maioria dos layouts não exige um contêiner aninhado.

Módulo 02 – Bootstrap Aula 01

O Bootstrap vem com três contêineres diferentes:

•.container, que define a max-width em cada ponto de interrupção responsivo

•.container-fluid, que está width: 100% em todos os pontos de interrupção

Módulo 02 – Bootstrap Aula 01
Vamos a prática e criar um layout usando grid com uma linha e três colunas.

Na linha 7 temos a especificação para a responsividade da página

Na linha 9 e 10 estamos direcionando para o CDN css do Bootstrap, essa linha garante que as formatações serão

buscadas no arquivo bootstrap.min.css que está disponível online.

Da linha 11 a linha 16 estamos criando uma formatação personalizada usando uma class chamada .destaque.
Módulo 02 – Bootstrap Aula 01
Na linha 20 inicia a div principal com a class container

atribuída, essa classe é uma classe do bootstrap e estamos usando

uma outra class chamada destaque, que criamos de forma

personalizada.

Repare que na linha 21 temos o início da nossa linha usando

a class row e na linha 38 temos o final da nossa linha, dentro desta

div criamos as nossas colunas usando a class col. Para cada

coluna colocamos um parágrafo com a descrição coluna 1,2 e 3.

Desta forma temos uma linha com 3 colunas com fundo amarelo

conforme imagem abaixo.

Módulo 02 – Bootstrap Aula 01
 www.recode.org.br

Institucional

recodepro.org.br /rederecode /recoderede