Introduction aux panneaux Bootstrap
Le contenu des données doit être propre, soigné et adapté. Avoir de l'espace dans le contenu, un en-tête et un pied de page colorés et une bordure pour le contenu semble attrayant. Le contenu attrayant est facile à lire et à comprendre. Le panneau Bootstrap fonctionne exactement de la même manière pour le contenu. Il est utilisé pour border-box pour le contenu avec un remplissage spécifique. Il fonctionne pour le contenu, l'en-tête, le pied de page et également dans une couleur différente. Travail de base du panneau d'amorçage utilisant la classe ".panel" dans un élément div, avec cette classe ".panel-default" également requise.
Exemple:
THIS IS A DEFAULT PANEL
Production:
Types de panneaux Bootstrap
Les panneaux sont classés avec des classifications et des objectifs différents, ce qui est le suivant. Le contenu a un titre, un corps et un pied de page. Pour créer un contenu élégant et un style avec un but, le panneau propose ces catégories:
1. Panneau avec le titre
Dans l'en-tête du panneau, le cadre de bordure est entouré d'un en-tête de contenu et d'un corps de contenu avec un remplissage de format. Le panneau de titre ajoute class = "panel-header" et le corps du contenu ajoute class = "panel-body".
Code:
Content Heading
Content Body
Production:
Vous pouvez ajouter le class = "panel-title" pour modifier le titre du contenu séparément. Cette classe est rarement utilisée car la classe d'en-tête du panneau modifie tous les styles par elle-même.
2. Panneau avec pied de page
Dans le pied de page du panneau, le cadre de bordure entouré de pied de page de contenu et le corps de contenu avec un remplissage de format. Le panneau de pied de page ajoute class = "panel-footer" et le corps du contenu ajoute class = "panel-body".
Code:
Content Body
Content Footer
Production:
3. Groupe d'experts
Ce panneau est utilisé pour lier les nombreux panneaux à la fois. Il supprime la marge du panneau inférieur et crée un groupe de panneaux.
Code:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Production:
4. Panneaux avec classes contextuelles
Pour obtenir un panneau de démarrage contextuel plus significatif, concevez différentes classes pour le contexte. Chaque en-tête de classe contextuelle a une couleur différente pour montrer l'impact du contexte. Ces classes de panel sont ci-dessous avec leurs exemples et sorties,
- .panel-default: il s'agit du panneau par défaut utilisé pour le contexte.
Code:
Content Heading
Content Body
Production:
- .panel-primary: Cette classe utilisée pour le contexte principal signifie les contextes principaux.
Code:
Content Heading with panel-primary class /div>
Content Body2
Production:
- .panel-success: Cette classe est utilisée lorsqu'un contexte a le sens de succès.
Code:
Content Heading with panel-success class
Content Body3
Production:
- .panel-info: Cette classe est utilisée lorsque certains contextes sont informatifs.
Code:
Content Heading with panel-info class
Content Body4
Production:
- .panel-warning: Cette classe est utilisée lorsqu'un contexte a la signification d'un signe d'avertissement.
Code:
Content Heading with panel-warning class
Content Body5
Production:
- .panel-danger: Cette classe est utilisée lorsqu'un contexte a la signification de danger et veut indiquer.
Code:
Content Heading with panel-danger class
Content Body6
Production:
Exemples de panneaux Bootstrap
Voici les exemples du panneau d'amorçage expliqués en détail,
Exemple # 1: Panneau Bootstrap simple
Il s'agit d'un exemple de panneau par défaut bootstrap simple où l'en-tête, le pied de page et le corps de la description du panneau sont placés.
Code:
Content Heading
Content Body
Panel body for context
Content Footer
Production:
Exemple # 2: Panneau d'amorçage avec table
- Dans cet exemple, obtenez la sortie du tableau à l'aide du panneau d'amorçage. La table peut être modifiée pour être élégante. L'exemple et la sortie suivants sont le tableau utilisant le panneau d'amorçage.
- Cet exemple a besoin d'une classe de table pour créer une table. Il rend la classe d'en-tête primaire et de panneau conserve un nom de table.
- La classe de table propose une classe de corps de panneau. Dans ce tableau, les en-têtes et les données du tableau sont placés.
Code:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
