Einführung in Bootstrap Panels
Der Inhalt der Daten muss sauber, ordentlich und geeignet sein. Platz in Inhalten, farbigen Kopf- und Fußzeilen und Rahmen für Inhalte zu haben, sieht attraktiv aus. Attraktive Inhalte sind leicht zu lesen und zu verstehen. Das Bootstrap-Bedienfeld funktioniert inhaltlich genauso. Es wird für Rahmen für Inhalte mit spezifischer Auffüllung verwendet. Es funktioniert für Inhalt, Kopfzeile, Fußzeile und auch in einer anderen Farbe. Grundlegende Bootstrap-Bedienfelder arbeiten mit der Klasse ".panel" in einem div-Element, wobei diese Klasse auch die Klasse ".panel-default" benötigt.
Beispiel:
THIS IS A DEFAULT PANEL
Ausgabe:
Arten von Bootstrap-Panels
Die Panels sind nach verschiedenen Klassifikationen und Zielen kategorisiert. Der Inhalt besteht aus einem Kopf-, Text- und Fußzeilenteil. Um einen eleganten Inhalt und eine stilvolle Gestaltung zu erzielen, bietet das Bedienfeld die folgenden Kategorien:
1. Panel mit der Überschrift
In der Panel-Überschrift wird der Rahmen mit der Inhaltsüberschrift und dem Inhaltshauptteil mit Formatauffüllung umgeben. Überschriften-Panel Klasse hinzufügen = "Panel-Überschrift" und Inhalts-Body Klasse hinzufügen = "Panel-Body".
Code:
Content Heading
Content Body
Ausgabe:
Sie können den class = "panel-title" hinzufügen, um die Überschrift des Inhalts separat zu ändern. Diese Klasse wird selten verwendet, da die Panel-Überschriftenklasse alle Stile selbst ändert.
2. Panel mit Fußzeile
In der Panel-Fußzeile wird die Rahmenbox von der Inhaltsfußzeile und dem Inhaltskörper mit Formatpolsterung umgeben. Fußzeile panel add class = "panel-footer" und content body add class = "panel-body".
Code:
Content Body
Content Footer
Ausgabe:
3. Panel-Gruppe
Diese Tafel wird zum gleichzeitigen Binden der vielen Tafeln verwendet. Dadurch wird der Rand des unteren Fensters entfernt und eine Gruppe von Fenstern erstellt.
Code:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Ausgabe:
4. Panels mit Kontextklassen
Um einen aussagekräftigeren Kontext zu erhalten, entwerfen Sie im Bootstrap-Panel verschiedene Klassen für den Kontext. Jede kontextbezogene Klassenüberschrift hat eine andere Farbe, um die Auswirkung des Kontexts anzuzeigen. Diese Panel-Klassen sind unten mit ihren Beispielen und Ausgaben,
- .panel-default: Dies ist das Standardpanel, das für den Kontext verwendet wird.
Code:
Content Heading
Content Body
Ausgabe:
- .panel-primary: Diese Klasse, die für den primären Kontext verwendet wird, bedeutet Hauptkontexte.
Code:
Content Heading with panel-primary class /div>
Content Body2
Ausgabe:
- .panel-success: Diese Klasse wird verwendet, wenn ein bestimmter Kontext die Bedeutung von Erfolg hat.
Code:
Content Heading with panel-success class
Content Body3
Ausgabe:
- .panel-info: Diese Klasse wird verwendet, wenn ein Kontext informative Informationen enthält.
Code:
Content Heading with panel-info class
Content Body4
Ausgabe:
- .panel-warning: Diese Klasse wird verwendet, wenn ein Kontext die Bedeutung eines Warnzeichens hat.
Code:
Content Heading with panel-warning class
Content Body5
Ausgabe:
- .panel-danger: Diese Klasse wird verwendet, wenn ein Kontext die Bedeutung von Gefahr hat und anzeigen möchte.
Code:
Content Heading with panel-danger class
Content Body6
Ausgabe:
Beispiele für Bootstrap-Panels
Im Folgenden werden die Beispiele des Bootstrap-Panels ausführlich erläutert.
Beispiel 1: Einfaches Bootstrap-Panel
Dies ist ein einfaches Bootstrap-Standardbedienfeldbeispiel, in dem die Bedienfeldüberschrift, die Bedienfeldfußzeile und der Beschreibungstext platziert sind.
Code:
Content Heading
Content Body
Panel body for context
Content Footer
Ausgabe:
Beispiel # 2: Bootstrap Panel mit Tabelle
- In diesem Beispiel wird die Ausgabe der Tabelle über das Bootstrap-Panel abgerufen. Die Tabelle kann geändert werden, um elegant auszusehen. Das folgende Beispiel und die Ausgabe ist die Tabelle unter Verwendung des Bootstrap-Bedienfelds.
- In diesem Beispiel wird eine Tabellenklasse benötigt, um eine Tabelle zu erstellen. Dadurch behält die primäre und die Panel-Überschriftenklasse einen Tabellennamen.
- Die Tischklasse wartet mit einer Panel-Body-Klasse auf. In dieser Tabelle werden Tabellenkopf und Tabellendaten abgelegt.
Code:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
