Come utilizzare le carte Bootstrap 5
Questo articolo illustrerà l'uso delle schede bootstrap coprendo i seguenti aspetti:
- Come creare una carta semplice?
- Come creare un'intestazione e un piè di pagina della carta?
- Come creare una carta con contenuto?
- Come creare una carta con un'immagine?
- Come creare un pulsante su una scheda?
- Come modellare la carta?
- Come creare una carta con sovrapposizioni?
- Come creare gruppi di elenchi sulla carta?
- Come creare una barra di navigazione sulla carta?
Come creare una carta semplice?
IL "cartaClasse "con il"Body di carta"È utilizzato per creare una carta semplice.
Andiamo oltre l'esempio per ottenere una migliore comprensione.
Esempio
Nel file HTML, seguire i passaggi per creare una semplice scheda:
- Aggiungere un "" elemento e assegnargli una classe "contenitore". Questo è un blocco di base che contiene imbottitura e allineamento al contenuto all'interno di un dispositivo specifico.
- Quindi, assegnalo una classe "carta"Utilizzato per creare una scheda di base.
- Per specificare il contenuto all'interno della scheda, creare un div con la classe "Body di carta"Ciò contiene i dati necessari della scheda:
Scheda Linuxhint
Una carta in Bootstrap 5 è una scatola con imbottitura attorno al suo testo e a un bordo.
Produzione
Come creare un'intestazione e un piè di pagina della carta?
IL "Terreno di carta" e il "Footer di carta"Le classi vengono utilizzate per stabilire l'intestazione della carta e il piè di pagina. Fare così:
- Imposta l'elemento con la classe "contenitore" E "M-4".
- Regola il div con la classe "carta".
- Impostare l'intestazione della carta utilizzando la classe "Terreno di carta".
- Le informazioni sulla scheda vengono posizionate utilizzando il “Footer di carta"Classe sul piè di pagina della carta:
Scheda Bootstrap 5
Scuola Linuxhint
Una carta in Bootstrap 5 è una scatola con bordo e imbottitura attorno al testo.
Contatto: XXX-XXX-XXXX
Produzione
Come creare una carta con contenuto?
Puoi aggiungere contenuti alla scheda utilizzando il "Body di carta"Contenitore di contenuti estensibili. Le classi di seguito menzionate devono essere incluse all'interno di questa classe:
- "Title delle carte"Regola il titolo sulla carta.
- "Testo di carta"Descrive il testo con le proprietà di styling sulla pagina.
- "Link di carta"Associa un collegamento di un'altra fonte nella pagina:
Scheda Linuxhint
Linuxhint è un eccellente sito web di tutorial.
Lezione introduttiva
Visita il nostro sito Web
Produzione
Come creare una carta con un'immagine?
Il modo più popolare per progettare una scheda è aggiungere un'immagine alla scheda. Per farlo, il bootstrap "CARD-IMG-TOP"La classe è utilizzata come segue:
Scuola Linuxhint
Per ottenere maggiori informazioni visita il nostro sito Web ufficiale.
clicca qui
Contatto: XXX-XXX-XXXX
Produzione
Come creare un pulsante su una scheda?
L'elemento del pulsante può essere aggiunto alla scheda. A tale scopo, implementa il "btn"Classe all'interno dell'elemento. IL "BTN-PRIMARY"Indica l'azione principale in un gruppo di pulsanti e aggiunge un peso visivo aggiuntivo:
Scuola Linuxhint
Per ottenere maggiori informazioni visita il nostro sito Web ufficiale.
clicca qui
Contatto: XXX-XXX-XXXX
Produzione
Come modellare la carta?
Per modellare il contenitore delle carte bootstrap, molte classi possono essere utilizzate in questo modo:
Linuxhint
Titolo della carta primaria
Forniamo articoli e lezioni video al mondo.
Linuxhint
Titolo della carta primaria
Forniamo articoli e lezioni video al mondo.
Produzione
Come creare una carta con sovrapposizioni?
IL "Card-IMG-Overlay"La classe regola l'immagine come sfondo. Per utilizzarlo, in primo luogo, impostare l'immagine della carta utilizzando il “"Tag. Inoltre, la larghezza dell'immagine è impostata come "100%":
Dipartimento video
Forniamo video di alta qualità su argomenti di informatica.
Ulteriori informazioni
Produzione
Come creare gruppi di elenchi sulla carta?
Per identificare gli elementi del gruppo su una carta, implementa il div "contenitore" classe. Quindi, aggiungi un contenitore "div" insieme alla classe "carta".
Per creare un elenco, applica il "" E ""Tag con classi appropriate:
- Html
- Bootstrap
- JavaScript
Di seguito è riportata la descrizione delle classi bootstrap sopra utilizzate:
- Per creare gruppi di elenchi, il bootstrap "gruppo di elenco"La classe può essere applicata. Aiuta a specificare un elenco di contenuti per la scheda.
- Aggiungendo il “flush-group-group", È possibile visualizzare gli elementi del gruppo di elenco Edge-to-Edge in un contenitore principale, i.e., carte. Per fare ciò, rimuove gli angoli e i confini arrotondati.
- IL "Elenco-Group-Items"Definisce gli elementi dell'elenco.
Produzione
Come creare una barra di navigazione sulla carta?
Puoi anche aggiungere una barra di navigazione anche alle carte. Più specificamente, viene creata una barra di navigazione corretta e ben allineata utilizzando diverse classi:
Tessera sanitaria
Segui la guida per la tua registrazione
Registrazione
Qui:
- "Nav Nav-tabs"La classe viene utilizzata per creare schede di navigazione.
- "tabs-tabs"La classe aiuta a modellare le linguette nell'intestazione della carta.
- "Nav-Item"Fornisce uno stile agli articoli di navigazione.
- "Nav-link"Viene utilizzato per stabilire il collegamento di altri blocchi di navigazione.
Produzione
Si trattava di usare le classi bootstrap per creare carte ben formattate.
Conclusione
Bootstrap 5 utilizza numerose classi per modellare e creare le carte. Queste classi aiutano a regolare le informazioni in un formato strutturato. Alcune delle classi sono "Title delle carte","Testo di carta","Terreno di carta","Footer di carta", e molti altri. Queste classi offrono funzionalità, come specificare il titolo, il testo, l'intestazione e il piè di pagina delle carte. Questo articolo ha dimostrato come utilizzare le carte Bootstrap 5 con diverse funzionalità.