Introduzione ai pannelli Bootstrap
Il contenuto dei dati deve essere pulito, ordinato e adeguato. Avere spazio nei contenuti, intestazione e piè di pagina colorati e bordo per i contenuti sembra attraente. I contenuti interessanti sono facili da leggere e comprendere. Il pannello Bootstrap funziona esattamente in modo simile per il contenuto. Viene utilizzato per border-box per contenuti con imbottitura specifica. Funziona con contenuto, intestazione, piè di pagina e anche in un colore diverso. Il pannello di bootstrap di base funziona utilizzando la classe ".panel" in un elemento div, con questa classe è richiesta anche la classe ".panel-default".
Esempio:
THIS IS A DEFAULT PANEL
Produzione:
Tipi di pannelli Bootstrap
I pannelli sono classificati con diverse classificazioni e obiettivi, che è il seguente. Il contenuto ha una parte intestazione, corpo e piè di pagina. Per creare contenuti e stile eleganti con uno scopo, il pannello presenta queste categorie:
1. Pannello con l'intestazione
Nell'intestazione del riquadro, riquadro racchiuso nell'intestazione del contenuto e nel corpo del contenuto con riempimento del formato. Pannello di intestazione add class = "panel-header" e body body add class = "panel-body".
Codice:
Content Heading
Content Body
Produzione:
È possibile aggiungere class = "panel-title" per modificare separatamente l'intestazione del contenuto. Questa classe viene usata raramente perché la classe di intestazione del pannello modifica tutti gli stili da sola.
2. Pannello con piè di pagina
Nel piè di pagina del riquadro, riquadro con bordo piè di pagina e corpo del contenuto con riempimento del formato. Footer panel add class = "panel-footer" e il contenuto del contenuto aggiunge class = "panel-body".
Codice:
Content Body
Content Footer
Produzione:
3. Gruppo di pannelli
Questo pannello viene utilizzato per associare più pannelli contemporaneamente. Rimuove il margine del pannello inferiore e crea un gruppo di pannelli.
Codice:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Produzione:
4. Pannelli con classi contestuali
Per ottenere un contesto più significativo, il pannello bootstrap progetta classi diverse per il contesto. Ogni intestazione di classe contestuale ha un colore diverso per mostrare l'impatto del contesto. Queste classi di pannelli sono di seguito con i loro esempi e risultati,
- .panel-default: questo è il pannello predefinito usato per il contesto.
Codice:
Content Heading
Content Body
Produzione:
- .panel-primary: questa classe utilizzata per il contesto primario significa contesti principali.
Codice:
Content Heading with panel-primary class /div>
Content Body2
Produzione:
- .panel-success: questa classe viene usata quando un contesto ha il significato di successo.
Codice:
Content Heading with panel-success class
Content Body3
Produzione:
- .panel-info: questa classe viene utilizzata quando alcuni contesti hanno informazioni.
Codice:
Content Heading with panel-info class
Content Body4
Produzione:
- .panel-warning: questa classe viene utilizzata quando alcuni contesti hanno il significato di un segnale di avvertimento.
Codice:
Content Heading with panel-warning class
Content Body5
Produzione:
- .panel-danger: questa classe viene utilizzata quando un contesto ha il significato di pericolo e vuole indicare.
Codice:
Content Heading with panel-danger class
Content Body6
Produzione:
Esempi di pannelli Bootstrap
Di seguito sono riportati gli esempi del pannello bootstrap spiegati in dettaglio,
Esempio n. 1: pannello Bootstrap semplice
Questo è un semplice esempio di pannello predefinito bootstrap in cui sono posizionati intestazione del pannello, piè di pagina del pannello e corpo della descrizione.
Codice:
Content Heading
Content Body
Panel body for context
Content Footer
Produzione:
Esempio n. 2: Pannello Bootstrap con tabella
- In questo esempio ottieni l'output della tabella usando il pannello bootstrap. Il tavolo può essere modificato per sembrare elegante. L'esempio e l'output seguenti sono la tabella che utilizza il pannello bootstrap.
- Questo esempio richiede una classe di tabella per creare una tabella. Rende la classe di intestazione primaria e del pannello mantiene un nome di tabella.
- La classe table presenta una classe body panel. In questa tabella vengono inseriti i dati di intestazione e tabella.
Codice:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
