Classi di immagini in Bootstrap 5 | Spiegato

Sappiamo che le immagini svolgono un ruolo molto significativo nel rendere attraente l'aspetto dei tuoi siti Web. Anche se solo posizionare le immagini non sarà sufficiente, dare loro la giusta forma, posizione e reattività è molto cruciale. Bootstrap 5 fornisce varie classi con cui puoi modellare le immagini con grande facilità. Questo rapporto discute in dettaglio queste classi di immagini Bootstrap 5.

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.