Classi di immagini in Bootstrap 5 | Spiegato
Modellare le immagini in bootstrap 5
Ai fini del disegno delle tue immagini fornendo loro una certa forma, ci sono più classi disponibili in Bootstrap 5. Queste classi insieme alle loro dimostrazioni sono state discusse in questa sezione.
.arrotondato
Al fine di arrotondare gli angoli dell'immagine utilizzare il .arrotondato classe. Per fare ciò devi semplicemente includere questa classe nel tag.
Html
Sappiamo che Bootstrap funziona con elementi di avvolgimento all'interno di un contenitore, quindi abbiamo creato un contenitore Div nel codice sopra e nidificato un'immagine al suo interno. L'immagine è stata assegnata la classe arrotondata insieme a una certa larghezza e altezza.
Produzione
L'uscita sopra mostra un'immagine con angoli arrotondati.
.cerchio arrotondato
Come suggerisce il nome, la classe in discussione in questa sezione rende un'immagine un cerchio. Di seguito abbiamo mostrato la sua dimostrazione.
Html
Per rendere l'immagine un cerchio abbiamo assegnato la classe di cerchio arrotondato all'immagine.
Produzione
L'immagine è stata trasformata in un cerchio con successo.
.IMG-Thumbnail
Le miniature svolgono un ruolo vitale durante la progettazione di un sito Web che visualizza più immagini su una singola pagina Web. In bootstrap 5, per convertire le immagini in una miniatura il .IMG-Thumbnail la classe viene utilizzata.
Html
Per far apparire la nostra immagine come una miniatura, gli abbiamo assegnato il .Classe IMG-Thumbnail. Questa classe fondamentalmente fa una miniatura con un confine.
Produzione
Una miniatura è stata creata con successo.
Allineare le immagini in bootstrap 5
Oltre a modellare le immagini, allinearle nella giusta posizione è anche molto significativo. Questa sezione discute più classi che ti aiutano ad allineare le immagini in bootstrap 5.
.Float-Start
Questa classe posiziona un'immagine all'inizio del contenitore.
Html
Qui prima di tutto abbiamo creato un contenitore e abbiamo messo un'immagine al suo interno. Per posizionare quell'immagine all'inizio del contenitore, la stiamo assegnando il .Float-Start Class e un po 'di larghezza e altezza.
Produzione
L'immagine è stata posizionata all'inizio del contenitore.
.Float-end
Ai fini di posizionare un'immagine alla fine del contenitore, questa classe viene utilizzata.
Html
Nel codice sopra, per posizionare l'immagine alla fine del contenitore abbiamo dato il tag il .Classe di fascia galleggiante.
Produzione
L'immagine è stata posizionata correttamente alla fine del contenitore.
.MX-Auto .D-blocco
Queste classi vengono utilizzate per centrare un'immagine all'interno di un contenitore. IL .MX-Auto La classe regola il margine su auto e il .D-blocco La classe visualizza un'immagine come un blocco. Ecco come vengono utilizzate queste classi.
Html
Allo scopo di centrare un'immagine il .MX-Auto e .Le classi d-block sono state assegnate all'immagine nello snippet di codice sopra.
Produzione
L'immagine è stata centrata.
Immagini reattive in bootstrap 5
Al fine di rendere le immagini reattive che alterano il loro comportamento a seconda della larghezza del dispositivo, utilizzare la classe di seguito fornita da Bootstrap 5.
.img-fluid
IL .La classe IMG-Fluid fa un'immagine altera le dimensioni in base alla dimensione dello schermo. L'immagine che utilizza questa classe cambierà le sue dimensioni in corrispondenza con l'elemento genitore, inoltre, questa classe regola la larghezza massima dell'immagine al 100% e altezza su automatica.
Html
Nel codice sopra, stiamo assegnando la classe IMG-Fluid all'immagine. Per vedere l'effetto di questa classe in scala la finestra del browser su e giù.
Produzione
Quando la larghezza dello schermo è 680px e sopra.
Alla larghezza dello schermo 400px e in basso.
L'immagine è stata resa reattiva con successo.
Conclusione
Le classi di immagini in Bootstrap 5 ti consentono di modellare le immagini che appaiono sul tuo sito Web. Usando queste classi puoi dare alle immagini una certa forma, allineamento o puoi renderle anche reattivi. Alcune delle classi di immagini Bootstrap 5 sono .arrotondato, .img-fluid, .Float-Start, ecc. Queste classi sono discusse in dettaglio, elaborando lo scopo che servono.