O Bootstrap é o framework mais conhecido do mundo para criar sites responsivos e mobile. Caso você não saiba, um framewok é um conjunto de funcionalidades que você pode usar em diferentes projetos sem ter que toda hora ficar escrevendo tudo do zero.
No post passado foi mostrado algumas propriedades do CSS, como usá-las e para que servem. Se você achou difícil e não conseguiu assimilar, não fique triste, pois o Bootstrap será sua redençao!
O Bootstrap é baseado em classes CSS e hierarquia de elementos HTML, ou seja, o estilo da sua página será feito através da combinação destes dois fatores.
Você não precisa decorar nada deste post. Sempre que tiver dúvida acesse a documentação do Bootstrap através deste link
Não fique apenas copiando e colando código tente entender o que está sendo feito! Utilize o vscode e execute os exemplos abaixo no browser!
Set up
Copie e cole o arquivo de estilo <link> dentro da sua <head> antes de todos os outros arquivos de estilo para carregar o CSS do Bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">Alguns dos componentes do Bootstrap precisam do Javascript para funcionar. Neste vou mostrar apenas alguns componentes que não precisam do Javascript, pois este será o próximo assunto do curso!
Componentes
No Bootstrap, primary, secondary, success, danger, warning, info, light e dark fazem referência à diferentes cores
Alerts
As classes alert e alert-{alguma definição de cor} dão o estilo às divs. Os alerts são usados, geralmente, para exibir mensagens de acordo com alguma ação do usuário.
<div class="alert alert-primary" role="alert">
Um simples alerta primary. Olha só!
</div>
<div class="alert alert-secondary" role="alert">
Um simples alerta secondary. Olha só!
</div>
<div class="alert alert-success" role="alert">
Um simples alerta success. Olha só!
</div>
<div class="alert alert-danger" role="alert">
Um simples alerta danger. Olha só!
</div>
<div class="alert alert-warning" role="alert">
Um simples alerta warning. Olha só!
</div>
<div class="alert alert-info" role="alert">
Um simples alerta info. Olha só!
</div>
<div class="alert alert-light" role="alert">
Um simples alerta light. Olha só!
</div>
<div class="alert alert-dark" role="alert">
Um simples alerta dark. Olha só!
</div>Alertas também podem conter elementos HTML adicionais como cabeçalhos, parágrafos e divisores.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Muito bem!</h4>
<p>Aêêê! Você conseguiu ler essa mensagem de alerta. Esse texto vai ter quer se extender um pouquinho pra você conseguir ver como o espaçamento dentro de um alerta funciona.</p>
<hr>
<p class="mb-0">Sempre que precisar, use utilitários de margem para manter as coisas perfeitas.</p>
</div>Buttons
As classes btn e btn-{alguma definição de cor} dão o estilo aos botões
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>Precisa de um botão, mas sem cor de backround? Substitua as classes modificadoras padrões pelas .btn-outline-*
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>Card
Um card é um container de conteúdo flexível e extensível. Ele tem opções para cabeçalhos e rodapés, uma larga variedade de conteúdo, cores de background contextuais e opções de display poderosas.
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://picsum.photos/1080" alt="Imagem de capa do card">
<div class="card-body">
<p class="card-text">
Um exemplo de texto rápido para construir o título do card e fazer
preencher o conteúdo do card.
</p>
</div>
</div>Você pode personalizar o Bootstrap card de muitas formas. Clique aqui para saber mais
Jumbotron
Um container simples para exibição de conteúdo
<div class="jumbotron">
<h1 class="display-4">Olá, mundo!</h1>
<p class="lead">
Este é um simples componente jumbotron para chamar mais atenção a um
determinado conteúdo ou informação.
</p>
<hr class="my-4">
<p>
Ele usa classes utilitárias para tipografia e espaçamento de
conteúdo, dentro do maior container.
</p>
<a class="btn btn-primary btn-lg" href="#" role="button">
Leia mais
</a>
</div>List-group
O grupo de lista mais básico é uma<ul> com <li> e algumas classes específicas.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>Observações
Os exemplos acima são as formas mais básicas de uso do Bootstrap.
Todos os componentes do Bootstrap podem ser usados em conjunto.
Sempre que usar o Bootstrap certifique-se de que está usando as CSS class corretamente e que o seu HTML esteja na hierarquia correta de elementos.
Sempre utilize a documentação oficial do Bootstrap como referência para criar os seus Layouts
Exercício
Construa uma página, como o exemplo abaixo, usando o Bootstrap.
Para acrescentar imagens à sua página use o site Lorem Picsum ele fornece links para diferentes tipos de imagens em diferentes tamanhos!
Sinta-se livre para mudar a temática da página, cores etc.
Commentaires