Inleiding tot bootstrap-panelen
De inhoud van gegevens moet schoon, netjes en geschikt zijn. Ruimte in de inhoud, kleurrijke kop- en voettekst en rand voor inhoud ziet er aantrekkelijk uit. Aantrekkelijke inhoud is gemakkelijk te lezen en te begrijpen. Bootstrap-paneel werkt exact hetzelfde voor inhoud. Het wordt gebruikt voor border-box voor inhoud met specifieke opvulling. Het werkt voor inhoud, koptekst, voettekst en ook in een andere kleur. Basis bootstrap-paneelwerk met de klasse ".panel" in een div-element, waarbij deze klasse ".panel-default" ook vereist is.
Voorbeeld:
THIS IS A DEFAULT PANEL
Output:
Soorten Bootstrap-panelen
Panelen zijn gecategoriseerd met verschillende classificaties en doelen die de volgende zijn. Inhoud heeft een kop-, hoofd- en voettekstgedeelte. Om elegante inhoud en stijl doelgericht te maken, komt het paneel met deze categorieën:
1. Paneel met de kop
In paneelkop, border-box omringd met inhoudkop en inhoud met opvulling. Rubriek paneel add class = "panel-header" en inhoud body add class = "panel-body".
Code:
Content Heading
Content Body
Output:
U kunt de class = "panel-title" toevoegen om de kop van de inhoud afzonderlijk te wijzigen. Deze klasse wordt zelden gebruikt omdat de klasse van de paneelkop alle stijlen zelf wijzigt.
2. Paneel met voettekst
In paneelvoettekst, border-box omgeven met inhoudvoettekst en inhoud met opvulling. Voettekstpaneel add class = "panel-footer" en inhoud body add class = "panel-body".
Code:
Content Body
Content Footer
Output:
3. Paneelgroep
Dit paneel wordt gebruikt om de vele panelen tegelijk te binden. Het verwijdert de marge van het onderste paneel en maakt een groep panelen.
Code:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Output:
4. Panelen met contextuele klassen
Om een meer betekenisvolle context te krijgen, bootstrap-paneelontwerp verschillende klassen voor context. Elke contextuele klassenkop heeft een andere kleur om de impact van context te tonen. Deze paneelklassen staan hieronder met hun voorbeelden en uitvoer,
- .panel-default: Dit is het standaardpaneel dat wordt gebruikt voor context.
Code:
Content Heading
Content Body
Output:
- .panel-primary: deze klasse die wordt gebruikt voor primaire context betekent hoofdcontexten.
Code:
Content Heading with panel-primary class /div>
Content Body2
Output:
- .panel-success: deze klasse wordt gebruikt wanneer een context de betekenis van succes heeft.
Code:
Content Heading with panel-success class
Content Body3
Output:
- .panel-info: deze klasse wordt gebruikt wanneer een context informatief is.
Code:
Content Heading with panel-info class
Content Body4
Output:
- .panel-warning: deze klasse wordt gebruikt wanneer een context de betekenis heeft van een waarschuwingsbord.
Code:
Content Heading with panel-warning class
Content Body5
Output:
- .panel-hazard: deze klasse wordt gebruikt wanneer een context de betekenis van gevaar heeft en wil aangeven.
Code:
Content Heading with panel-danger class
Content Body6
Output:
Voorbeelden van Bootstrap-panelen
Hierna volgen enkele voorbeelden van het bootstrap-paneel,
Voorbeeld # 1: Simple Bootstrap Panel
Dit is een eenvoudig standaard bootstrap-paneelvoorbeeld waarbij de paneelkop, de voettekst en de beschrijving van het paneel worden geplaatst.
Code:
Content Heading
Content Body
Panel body for context
Content Footer
Output:
Voorbeeld # 2: Bootstrap-paneel met tabel
- In dit voorbeeld krijgt u de uitvoer van de tabel met behulp van het bootstrap-paneel. De tafel kan worden aangepast om er elegant uit te zien. Het volgende voorbeeld en uitvoer is de tabel met het bootstrap-paneel.
- Dit voorbeeld heeft een tabelklasse nodig om een tabel te maken. Het zorgt ervoor dat de primaire en paneelkopklasse een tabelnaam behoudt.
- De tafelklasse komt met een paneelbodyklasse. In deze tabel worden tabelkop en tabelgegevens geplaatst.
Code:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
