Le schede di Bootstrap forniscono un contenitore di contenuti flessibile ed estensibile con più varianti e opzioni.
Di
Una carta è un contenitore di contenuti flessibile ed estensibile. Include opzioni per intestazioni e piè di pagina, un'ampia varietà di contenuti, colori di sfondo contestuali e potenti opzioni di visualizzazione. Se hai familiarità con Bootstrap 3, le schede sostituiscono i nostri vecchi pannelli, pozzi e miniature. Funzionalità simili a quelle componenti sono disponibili come classi modificatori per le carte.
Esempio
Le carte sono costruite con il minor numero possibile di markup e stili, ma riescono comunque a fornire un sacco di controllo e personalizzazione. Costruiti con flexbox, offrono un facile allineamento e si combinano bene con altri componenti Bootstrap. Non hanno marginper impostazione predefinita, quindi usa le utilità di spaziatura secondo necessità.
Di seguito è riportato un esempio di una scheda base con contenuto misto e larghezza fissa. Le carte non hanno una larghezza fissa per iniziare, quindi riempiranno naturalmente l'intera larghezza del suo elemento genitore. Questo è facilmente personalizzabile con le nostre varie opzioni di dimensionamento .
Titolo della carta
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Le schede supportano un'ampia varietà di contenuti, tra cui immagini, testo, gruppi di elenchi, collegamenti e altro. Di seguito sono riportati esempi di ciò che è supportato.
Corpo
L'elemento costitutivo di una carta è il .card-body. Usalo ogni volta che hai bisogno di una sezione imbottita all'interno di una carta.
Questo è del testo all'interno del corpo di una carta.
Titoli, testo e collegamenti
I titoli delle carte vengono utilizzati aggiungendo .card-titlea un <h*>tag. Allo stesso modo, i collegamenti vengono aggiunti e posizionati uno accanto all'altro aggiungendo .card-linka un <a>tag.
I sottotitoli vengono utilizzati aggiungendo a .card-subtitlea un <h*>tag. Se gli .card-titleelementi e .card-subtitlesono inseriti in un .card-bodyelemento, il titolo e il sottotitolo della carta sono ben allineati.
Titolo della carta
Sottotitolo della carta
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
.card-img-topposiziona un'immagine in cima alla scheda. Con .card-text, il testo può essere aggiunto alla scheda. Il testo all'interno .card-textpuò anche essere stilizzato con i tag HTML standard.
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Elenca i gruppi
Crea elenchi di contenuti in una carta con un gruppo di elenchi di colore.
Cras solo odio
Dapibus ac facilisis in
Vestibolo all'eros
In primo piano
Cras solo odio
Dapibus ac facilisis in
Vestibolo all'eros
Lavandino della cucina
Mescola e abbina più tipi di contenuto per creare la scheda di cui hai bisogno o butta tutto lì dentro. Di seguito sono mostrati stili di immagine, blocchi, stili di testo e un gruppo di elenchi, il tutto racchiuso in una scheda a larghezza fissa.
Titolo della carta
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Le carte non presuppongono un widthinizio specifico, quindi saranno larghe al 100% se non diversamente indicato. Puoi modificarlo secondo necessità con CSS personalizzati, classi di griglia, mixin Sass della griglia o utilità.
Utilizzo del markup della griglia
Usando la griglia, avvolgi le carte in colonne e righe secondo necessità.
Trattamento speciale del titolo
Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.
Puoi modificare rapidamente l'allineamento del testo di qualsiasi scheda, nella sua interezza o in parti specifiche, con le nostre classi di allineamento del testo .
Trattamento speciale del titolo
Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.
Le schede includono alcune opzioni per lavorare con le immagini. Scegli tra l'aggiunta di "tappi immagine" a una delle estremità di una scheda, la sovrapposizione di immagini con il contenuto della scheda o semplicemente l'incorporamento dell'immagine in una scheda.
Tappi immagine
Simile alle intestazioni e ai piè di pagina, le schede possono includere "cappucci immagine" in alto e in basso, immagini nella parte superiore o inferiore di una scheda.
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Ultimo aggiornamento 3 minuti fa
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Ultimo aggiornamento 3 minuti fa
Sovrapposizioni di immagini
Trasforma un'immagine in uno sfondo di una carta e sovrapponi il testo della tua carta. A seconda dell'immagine, potresti aver bisogno o meno di stili o utilità aggiuntivi.
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Ultimo aggiornamento 3 minuti fa
Tieni presente che il contenuto non deve essere più grande dell'altezza dell'immagine. Se il contenuto è più grande dell'immagine, il contenuto verrà visualizzato all'esterno dell'immagine.
Orizzontale
Utilizzando una combinazione di griglia e classi di utilità, le carte possono essere rese orizzontali in modo ottimizzato per i dispositivi mobili e reattive. Nell'esempio seguente, rimuoviamo le grondaie della griglia con .no-gutterse utilizziamo .col-md-*le classi per rendere la scheda orizzontale al punto di mdinterruzione. Potrebbero essere necessarie ulteriori modifiche a seconda del contenuto della tua carta.
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Ultimo aggiornamento 3 minuti fa
Stili di carte
Le schede includono varie opzioni per la personalizzazione di sfondi, bordi e colore.
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta secondaria
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta di successo
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta di pericolo
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta di avviso
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della scheda informativa
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta leggera
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta scura
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Trasmettere significato alle tecnologie assistive
L'uso del colore per aggiungere significato fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni denotate dal colore siano ovvie dal contenuto stesso (ad es. il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .sr-onlyclasse.
Confine
Usa le utilità di confine per cambiare solo il border-colordi una carta. Nota che puoi inserire .text-{color}classi sul genitore .cardo su un sottoinsieme dei contenuti della scheda come mostrato di seguito.
Intestazione
Titolo della carta principale
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta secondaria
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta di successo
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta di pericolo
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta di avviso
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della scheda informativa
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta leggera
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Intestazione
Titolo della carta scura
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Utilità di mixin
Puoi anche modificare i bordi dell'intestazione e del piè di pagina della carta secondo necessità e persino rimuoverli background-colorcon .bg-transparent.
Intestazione
Titolo della carta di successo
Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.
Disposizione delle carte
Oltre allo stile del contenuto all'interno delle carte, Bootstrap include alcune opzioni per disporre le serie di carte. Per il momento, queste opzioni di layout non sono ancora reattive .
Gruppi di carte
Usa i gruppi di carte per rendere le carte come un singolo elemento allegato con colonne di larghezza e altezza uguali. I gruppi di carte utilizzano display: flex;per ottenere il loro dimensionamento uniforme.
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Ultimo aggiornamento 3 minuti fa
Titolo della carta
Questa scheda ha un testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.
Ultimo aggiornamento 3 minuti fa
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questa carta ha un contenuto ancora più lungo della prima a mostrare quell'azione di uguale altezza.
Ultimo aggiornamento 3 minuti fa
Quando si utilizzano gruppi di carte con piè di pagina, il loro contenuto si allineerà automaticamente.
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Titolo della carta
Questa scheda ha un testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questa carta ha un contenuto ancora più lungo della prima a mostrare quell'azione di uguale altezza.
Mazzi di carte
Hai bisogno di un set di carte di uguale larghezza e altezza che non sono attaccate l'una all'altra? Usa i mazzi di carte.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Ultimo aggiornamento 3 minuti fa
Titolo della carta
Questa scheda ha un testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.
Ultimo aggiornamento 3 minuti fa
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questa carta ha un contenuto ancora più lungo della prima a mostrare quell'azione di uguale altezza.
Ultimo aggiornamento 3 minuti fa
Proprio come con i gruppi di carte, i piè di pagina delle carte nei mazzi si allineeranno automaticamente.
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Titolo della carta
Questa scheda ha un testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.
Titolo della carta
Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questa carta ha un contenuto ancora più lungo della prima a mostrare quell'azione di uguale altezza.
Carte griglia
Usa il sistema di griglia Bootstrap e il suo.row-cols classi per controllare quante colonne della griglia (avvolte attorno alle tue carte) mostri per riga. Ad esempio, ecco la .row-cols-1disposizione delle carte su una colonna e la .row-cols-md-2suddivisione di quattro carte in larghezza uguale su più righe, dal punto di interruzione medio in su.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Cambialo in .row-cols-3e vedrai il quarto involucro di carta.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Quando hai bisogno della stessa altezza, aggiungi .h-100alle carte. Se vuoi altezze uguali per impostazione predefinita, puoi impostare $card-height: 100%in Sass.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Titolo della carta
Questa è una carta corta.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.
Titolo della carta
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Colonne di carte
Le carte possono essere organizzate in colonne in stile Massoneria con solo CSS avvolgendole in .card-columns. Le schede sono costruite con columnproprietà CSS invece di flexbox per un allineamento più semplice. Le carte sono ordinate dall'alto verso il basso e da sinistra a destra.
Dritta! Il tuo chilometraggio con le colonne della carta può variare. Per evitare che le carte si rompano tra le colonne, dobbiamo impostarle display: inline-blockperché column-break-inside: avoidnon è ancora una soluzione a prova di proiettile.
Titolo della carta che va a capo su una nuova riga
Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante.
Titolo della carta
Questa scheda ha un testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.
Ultimo aggiornamento 3 minuti fa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat.
Titolo della carta
Questa carta ha un titolo regolare e un breve paragrafo di testo sotto di esso.
Ultimo aggiornamento 3 minuti fa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante.
Titolo della carta
Questa è un'altra carta con titolo e testo di supporto sotto. Questa carta ha alcuni contenuti aggiuntivi per renderla leggermente più alta nel complesso.
Ultimo aggiornamento 3 minuti fa
Le colonne delle carte possono anche essere ampliate e personalizzate con qualche codice aggiuntivo. Di seguito è mostrata un'estensione della .card-columnsclasse che utilizza lo stesso CSS che utilizziamo, le colonne CSS, per generare una serie di livelli reattivi per modificare il numero di colonne.