Classi di confine in Bootstrap 5 | Spiegato
In questo articolo hai una conoscenza dettagliata sulle classi bootstrap 5 per
- Aggiunta di confine
- Rimozione del bordo
- Colori del bordo
- Larghezza del bordo
- Dimensioni di confine
- Dimensioni del raggio
Classi di confine in Bootstrap 5
In Bootstrap 5 i bordi vengono creati aggiungendo .confine Classe per qualsiasi tag DIV o immagine o qualsiasi forma o texatoa.
Classi per applicare il confine
Bootstrap 5 fornisce un paio di classi per specificare il bordo a qualsiasi elemento HTML che viene spiegato di seguito:
Confine
.confine La classe viene utilizzata per applicare bordi su tutti e quattro i lati della scatola.
Codice
Classi di confine
Lorem ipsum dolor sit Amet Consecttur Adipiscing Elit. Tranneturi ipsum culpa neque commodi Modi eaque?
Ecco come crei bordi per tutti e quattro i lati.
Top di confine
.Border-top La classe viene utilizzata per applicare il bordo sul lato superiore della scatola.
Codice
Classi di confine
Lorem ipsum dolor sit Amet Consecttur Adipiscing Elit. Tranneturi ipsum culpa neque commodi Modi eaque?
Ecco come si crea un bordo per il lato superiore.
Border Bottom
.Border-Bottom La classe viene utilizzata per applicare il bordo sul lato inferiore della scatola.
Codice
Classi di confine
Lorem ipsum dolor sit Amet Consecttur Adipiscing Elit. Tranneturi ipsum culpa neque commodi Modi eaque?
Ecco come si crea un bordo per il lato inferiore.
Inizio del confine
.Border-Start La classe viene utilizzata per applicare il bordo sul lato sinistro della scatola.
Codice
Classi di confine
Lorem ipsum dolor sit Amet Consecttur Adipiscing Elit. Tranneturi ipsum culpa neque commodi Modi eaque?
Ecco come si crea un bordo per il lato sinistro.
Fine del confine
.bordo La classe viene utilizzata per applicare il bordo sul lato destro della scatola.
Codice
Classi di confine
Lorem ipsum dolor sit Amet Consecttur Adipiscing Elit. Tranneturi ipsum culpa neque commodi Modi eaque?
Ecco come crei un bordo per il lato destro.
Classi per rimuovere il bordo
Per rimuovere il bordo da qualsiasi lato basta aggiungere -0 a qualsiasi classe di aggiunta di confine
Da top
Per rimuovere il bordo dalla parte superiore aggiungi .bordo-top-0 con .confine classe.
Codice
Classi di confine
Lorem ipsum dolor sit Amet Consecttur Adipiscing Elit. Tranneturi ipsum culpa neque commodi Modi eaque?
Ecco come rimuovi il bordo dall'alto.
Dal basso
Per rimuovere il bordo dal basso Aggiungi .Border-Bottom-0 con .confine classe.
Codice
Classi di confine
Lorem ipsum dolor sit Amet Consecttur Adipiscing Elit. Tranneturi ipsum culpa neque commodi Modi eaque?
Ecco come rimuovi il bordo dal fondo.
Da sinistra
Per rimuovere il bordo da sinistra aggiungi .Border-Start-0 con .confine classe.
Codice
Classi di confine
Lorem ipsum dolor sit Amet Consecttur Adipiscing Elit. Tranneturi ipsum culpa neque commodi Modi eaque?
Ecco come rimuovi il bordo dal lato sinistro.
Da destra
Per rimuovere il bordo da destra aggiungi .Border-end-0 con .confine classe.
Codice
Classi di confine
Lorem ipsum dolor sit Amet Consecttur Adipiscing Elit. Tranneturi ipsum culpa neque commodi Modi eaque?
Ecco come rimuovi il bordo dal lato destro.
Classi di colore del bordo
Per aggiungere i colori del bordo, basta aggiungere .Border-Primary/Info/Success/Danger/Warning/Dark con .confine classe.
Codice
Classi di confine
È così che dai colore ai tuoi confini.
Classi di larghezza del confine
Per dare spessore al tuo uso del bordo .Border-1/2/3/4/5 classe con .confine classe.
Codice
Classi di confine
È così che dai spessore al tuo bordo.
Raggio di confine
Per specificare il raggio del bordo, utilizzare .arrotondato, .arrotondato-top/fine/fondo/start/cerchio/pillola classi.
Codice
Classi di confine
Produzione
Per creare un cerchio arrotondato e pillola arrotondata:
Codice
Classi di confine
È così che si specifica il raggio del bordo.
Dimensioni del raggio
Per specificare la dimensione del raggio del bordo, basta aggiungere .arrotondato-0/1/2/3 classi.
Codice
Classi di confine
Produzione
Ecco come si specifica la dimensione del raggio di confine.
Conclusione
Per dare un bordo a qualsiasi div o elemento aggiungi a .confine classe. Per aggiungere il bordo unilaterale Aggiungi .bordo-top/fondo/fine/avvio classe insieme a .confine classe e per rimuovere il bordo da un lato Basta aggiungere -0. Per specificare il colore del bordo aggiungi .Border-Primary/Success/Danger/Info/Warning/Dark/Light classe.
Per dare spessore al bordo aggiungi .Border-1/2/3/4/5, Per specificare il raggio del bordo aggiungi .arrotondato, .arrotondato-top/fondo/fine/start/cerchio/pillola classe. Per specificare la dimensione del raggio del bordo aggiungi .arrotondato-0/1/2/3 classe.