Aulas de imagem no bootstrap 5 | Explicado
Modelando imagens no bootstrap 5
Com o objetivo de modelar suas imagens, fornecendo alguma forma, existem várias classes disponíveis no bootstrap 5. Essas classes junto com suas manifestações foram discutidas nesta seção.
.arredondado
Para arredondar os cantos da imagem, use o .arredondado aula. Para isso, você simplesmente precisa incluir esta aula na tag.
Html
Sabemos que o bootstrap trabalha com elementos de embrulho dentro de um recipiente, portanto, criamos um contêiner de div no código acima e aninhou uma imagem dentro dele. A imagem foi atribuída a classe arredondada junto com alguma largura e altura.
Saída
A saída acima mostra uma imagem com cantos arredondados.
.círculo arredondado
Como o nome sugere, a classe em discussão nesta seção torna uma imagem um círculo. Abaixo, mostramos sua demonstração.
Html
Para tornar a imagem um círculo, atribuímos a classe de círculo arredondado à imagem.
Saída
A imagem foi transformada em um círculo com sucesso.
.IMG-THUMBNAIL
As miniaturas desempenham um papel vital ao projetar um site que exibe várias imagens em uma única página da web. No bootstrap 5, para converter imagens em uma miniatura do .IMG-THUMBNAIL A classe é usada.
Html
Para fazer nossa imagem aparecer como uma miniatura, atribuímos -a a .Classe IMG-Thumbnail. Esta classe basicamente faz uma miniatura com uma fronteira.
Saída
Uma miniatura foi criada com sucesso.
Alinhando imagens no bootstrap 5
Além de moldar imagens, alinhá -las na posição correta também é muito significativo. Esta seção discute várias classes que ajudam você a alinhar imagens no bootstrap 5.
.Float-start
Esta classe posiciona uma imagem no início do contêiner.
Html
Aqui, antes de tudo, criamos um contêiner e colocamos uma imagem dentro dela. Para colocar essa imagem no início do contêiner, estamos atribuindo -a a .classe de partida de flutuação e alguma largura e altura.
Saída
A imagem foi posicionada no início do contêiner.
.final de flutuação
Com o objetivo de colocar uma imagem no final do recipiente, esta classe é usada.
Html
No código acima, para posicionar a imagem no final do contêiner, damos à tag o .Classe de final de flutuação.
Saída
A imagem foi colocada com sucesso no final do contêiner.
.MX-AUTO .D-bloco
Essas classes são usadas para centralizar uma imagem dentro de um recipiente. O .MX-AUTO A classe ajusta a margem para o automóvel e o .D-bloco A classe exibe uma imagem como um bloco. Aqui está como essas classes são usadas.
Html
Com o objetivo de centralizar uma imagem o .MX-AUTO e .As aulas de bloco D foram atribuídas à imagem no trecho de código acima.
Saída
A imagem foi centrada.
Imagens responsivas no bootstrap 5
Com o objetivo de tornar as imagens responsivas que alteram seu comportamento, dependendo da largura do dispositivo, use a classe mencionada abaixo fornecida pelo Bootstrap 5.
.IMG-FLUID
O .A classe IMG-Fluid faz com que uma imagem altere seu tamanho de acordo com o tamanho da tela. A imagem usando esta classe mudará seu tamanho em correspondência com o elemento pai, além disso, esta classe ajusta a largura máxima da imagem para 100% e a altura para o automóvel.
Html
No código acima, estamos atribuindo a classe img-fluid para a imagem. Para ver o efeito desta classe escalar a janela do seu navegador para cima e para baixo.
Saída
Quando a largura da tela é 680px e acima.
Na largura da tela 400px e abaixo.
A imagem foi responsiva com sucesso.
Conclusão
Aulas de imagem no bootstrap 5 permitem estilizar as imagens que aparecem em seu site. Usando essas classes, você pode dar a imagens uma certa forma, alinhamento, ou pode torná -las responsivas também. Algumas das classes de imagens de bootstrap 5 são .arredondado, .IMG-FLUID, .Float-start, etc. Essas classes são discutidas em detalhes, elaborando o propósito que eles servem.