Objetivos da Aula

Snippets

  1. As imagens do boostrap ficam nessa parte da documentação: https://bootstrapdoconebitcode.netlify.app/pages/5imagens.html você vai ver que temos apenas 2, mas são as que são importantes de usarmos

  2. A primeira classe de imagens é a imagem fluída, que ela pode ser usada no topo de um site ou algo nesse sentido, e ela vai seguir o aspect-rate do site, você pode usar ela em um tamanho específico até certo tamanho de tela e depois deixar ela fluída.

    <img src="..." class="img-fluid" alt="...">
    
  3. O segundo tipo é a thumb, que ela é uma imagem quadrada, pequena que tem o aspecto padrão dela de 200x200, e você usa de acordo com o seu projeto.

    <img src="..." class="img-thumbnail" alt="...">
    
  4. Existem alguns outros tipos de imagens que você pode ver na documentação do boostrap, mas elas não mudam muito do que eu mostrei, mudam mesmo o posicionamento delas.

  5. As utilidades que iremos utilizar são relacionadas a margin, padding e display, que você pode mexer usando as classes, para você usar cada uma delas, está abaixo o código respectivo.

    <div class="m-3"></div>
    <div class="my-3"></div>
    <div class="mx-3"></div>
    
    <div class="p-3"></div>
    <div class="py-3"></div>
    <div class="px-3"></div>
    
    <div class="d-flex"></div>
    <div class="d-block"></div>
    <div class="d-none"></div>