Bootstrap 4 carte Colori bordo

Le carte sono contenitori flessibili di Bootstrap 4. Forniscono intestazione, testo, colori di sfondo contestuali e molte altre opzioni benefiche. Ci sono centinaia di lezioni di bootstrap che vengono utilizzate per modellare gli elementi. Ad esempio, per regolare il colore di sfondo degli elementi, il “bg"La classe è specificata con le classi di colore, come"BG-PRIMARY","BG-Info", e molti altri.

Questo post illustrerà:

• Come creare una carta in bootstrap?
• Carte Border Colors in Bootstrap
• Come aggiungere il colore del bordo alle carte in bootstrap?

Come creare una carta in bootstrap?

Il bootstrap "carta"La classe può essere utilizzata per creare una scheda. È possibile specificare l'intestazione della scheda, il testo e i componenti per la scheda utilizzando le classi, come “Title delle carte","Body di carta", E "Footer di carta":

Linuxhint

Missione Linuxhint

Forniamo le capacità e le conoscenze tecnologiche richieste per educare il mondo.

Contatto: XXX-XXX-XXXX

Produzione

Carte Border Colors in Bootstrap 4

Diverse lezioni di bootstrap sono utilizzate per applicare bordi colorati attorno alla carta. Alcuni di loro sono riportati di seguito:

Classi di confine	Descrizione
Warning dei confini	Questa classe applica il colore giallo al bordo.
Successo al confine	Questa classe applica il colore verde al bordo.
canale di confine	Questa classe applica il colore rosso al bordo.
Border-Light	Questa classe applica il colore grigio chiaro al bordo.
Border-Info	Questa classe applica il colore blu cielo al bordo.
bordo-primario	Questa classe applica il colore blu al bordo.
bordo-buio	Questa classe applica il colore grigio scuro al bordo.
bordo-secondario	Questa classe applica il colore grigio al bordo.

Come aggiungere il colore del bordo alle carte?

Per una migliore comprensione, aggiungiamo un "Successo al confine"Classe all'interno della""Elemento con classe"carta"Per vedere l'effetto.

Esempio 1: aggiunta del colore del bordo a una singola scheda in bootstrap

In questo esempio, il "Successo al confine"La classe viene utilizzata per applicare il bordo verde attorno alla carta:

Linuxhint

Missione Linuxhint

Forniamo le capacità e le conoscenze tecnologiche richieste per educare il mondo.

L'output fornito verifica che il bordo verde sia stato applicato con successo attorno alla carta:

Dai un'occhiata all'esempio seguente che rappresenta altre classi di colore del bordo applicate alle carte.

Esempio 2: aggiunta di colori al bordo a più carte in bootstrap

Qui, stiamo aggiungendo i colori del bordo a più carte in bootstrap con l'aiuto delle classi specificate:

Linuxhint

Missione Linuxhint

Forniamo le capacità e le conoscenze tecnologiche richieste per educare il mondo.

Linuxhint

Missione Linuxhint

Forniamo le capacità e le conoscenze tecnologiche richieste per educare il mondo.

Linuxhint

Missione Linuxhint

Forniamo le capacità e le conoscenze tecnologiche richieste per educare il mondo.

Produzione

Esempio 3: aggiunta dei colori del bordo a più componenti di una singola scheda in bootstrap

Gli utenti possono anche applicare i colori del bordo attorno ad altri componenti della scheda. Ad esempio, abbiamo applicato le classi di colore del bordo sulla carta, l'intestazione della carta e il piè di pagina della carta:

Linuxhint

Missione Linuxhint

Forniamo le capacità e le conoscenze tecnologiche richieste per educare il mondo.

Contatto: XXX-XXX-XXXX

Produzione

Si tratta di applicare i colori del bordo della carta in Bootstrap 4.

Conclusione

IL "carta"La classe viene utilizzata per creare una scheda in bootstrap. Per aggiungere un bordo attorno alla carta, il “confine"La classe con la classe di colore è implementata, come il"bordo-primario"Classe usata per un bordo blu,"canale di confine"Per un bordo rosso e molti altri. Questo blog ha spiegato i colori del bordo della carta in bootstrap 4.