Tabellenklassen in Bootstrap 5 | Erklärt
Tische mit einem grundlegenden Stil
Zum Zweck des Gebens von Tischen, ein grundlegender Stil, der eine bestimmte Polsterung und horizontale Trennwände aufweist, verwenden die .Tisch Klasse. Hier ist eine Demonstration einer grundlegenden Tabelle.
So erstellen Sie eine einfache Tabelle mit Bootstrap 5
Angenommen, Sie möchten eine einfache Tabelle generieren, dann ist dies so, wie es gemacht wird.
Html
| Autorenname | Kategorie | Artikel veröffentlicht |
|---|---|---|
| Max William | Informatik | 267 |
| Ana James | Physik | 100 |
| Harry Robertson | Biologie | 150 |
Im obigen Code platzieren wir die Tabelle in einem Div -Container und generieren dann die Tabelle, die wir verwenden, die
| , | Um die Tabelle zu erstellen. Ausgang Der Tisch erhielt einen einfachen Stil. Tisch mit einem Rand Zum Zweck des Hinzufügens eines Randes zu Ihrer Tabelle müssen Sie die verwenden .Tischverschluss Klasse. So erstellen Sie einen Tisch mit Rand Erstellen wir einen Tisch mit einem Rand. Html
Die hier erzeugte Tabelle ist die gleiche wie die oben erstellte Tabelle mit dem einzigen Unterschied, dass wir hier abgesehen von einem grundlegenden Stil auch Grenzen hinzufügen, indem wir die verwenden .Tabellenklasse. Ausgang Die Grenzen wurden erfolgreich in den Tisch hinzugefügt. Tisch ohne Grenzen Eine weitere interessante Sache, die Sie mit Bootstrap 5 durchführen können, ist, völlig grenzlose Tische zu erstellen, und dafür müssen Sie die verwenden .tabelllos Klasse. So erstellen Sie einen randlosen Tisch in Bootstrap 5 So generieren Sie eine Tabelle ohne Grenzen. Html
Der obige Code generiert eine randlose Tabelle mit einem grundlegenden Stil i.e. Es wird eine bestimmte Polsterung und horizontale Trennwände haben, aber es wird keine Grenzen haben. Ausgang Die Klasse funktioniert ordnungsgemäß. Tisch mit gestreiften Reihen Um Ihren Tisch zu verschönern, indem Sie gestreifte Zeilen generieren, verwenden Sie die .Tischstreifen Klasse. So erstellen Sie eine Tabelle mit gestreiften Reihen Um die Arbeit dieser Klasse zu verstehen, konsultieren Sie das folgende Beispiel. Html
Der obige Code generiert eine Tabelle mit einem grundlegenden Stil und gestreiften Zeilen. Ausgang Ein Tisch mit gestreiften Reihen wurde mit Erfolg erzeugt. Verleitbarer Tisch Wenn Sie Ihren Zeilen einen Schwebezustand geben möchten, dann verwenden Sie .Tischhale Klasse. Wenn der Benutzer die Maus auf die Zeilen bringt, wird ein Schweberffekt mit einer grauen Hintergrundfarbe erzeugt. So erstellen Sie eine verlagerbare Tabelle Lassen Sie uns eine verlagerbare Tabelle erstellen. Html
Mit dem Codes -Snippet oben können Sie problemlos eine einfach gestaltete Tabelle mit Zeilen mit einem Schwebeffekt erzeugen. Ausgang Wir haben eine verlagerbare Tabelle generiert. Tisch mit farbigen Reihen Mit den von Bootstrap 5 bereitgestellten Farbklassen können Sie mehrere Farben auch zu mehreren Zeilen in einer Tabelle hinzufügen. So erstellen Sie eine farbige Zeilentabelle in Bootstrap 5 Angenommen, Sie möchten jeder Zeile eine andere Farbe geben und dann dem folgenden Beispiel folgen. Html
Im obigen Code geben wir dem Tischkopf zuerst einen dunklen Hintergrund, und dann wurde jeder anderen Zeilen eine andere Farbe zugewiesen. Ausgang Eine Tabelle mit farbigen Zeilen wurde erfolgreich erzeugt. Alle mit Farben in Bootstrap 5 zugeordneten Tabellenklassen sind unten angegeben.
Reaktionstabellen Verwenden Sie das Erstellen von reaktionsschnellen Tabellen, die der Bildschirmbreite entsprechen und ihre Größe entsprechend ändern, die .Tischreaktion Klasse. So erstellen Sie eine Reaktionstabelle mit Bootstrap 5 Angenommen, Sie möchten eine Reaktionstabelle für Ihre Webseite erstellen. Html
Um das Konzept der Reaktionsfähigkeit zu demonstrieren, haben wir im obigen Code mehr Zeilen hinzugefügt. Zusammen mit diesem haben wir auch einen zusätzlichen Div -Container generiert und ihm die zugewiesen .Responsive Klasse. Darüber hinaus hat der Tisch einen grundlegenden Stil. Ausgang Die Klasse funktioniert ordnungsgemäß. Verschiedene Klassen, die die Tabellen abhängig von der Bildschirmbreite verantwortlich machen, finden Sie unten. 1… Responsive SM Für Bildschirmbreite weniger als 576px. 2… Responsive MD Für Bildschirmbreite unter 768px. 3… Responsive LG Für Bildschirmbreite weniger als 992px. 4… tabella-responsive xl Für Bildschirmbreite weniger als 1200 Pixel. 5… Responsive-xxl Für Bildschirmbreite weniger als 1400 Pixel. Abschluss Mit Tabellenklassen in Bootstrap 5 können Sie Tische auf sehr einfache und schnelle Weise stylen. Mit diesen Klassen können Sie den Tischen einige Polster, horizontale Trennwände, Farben, Rand, Schwebezustand usw. geben. Darüber hinaus können Sie Ihre Tabellen auch mit den Klassen reagieren, die den Tischen in Bootstrap 5 zugeordnet sind. In diesem Bericht wurden alle Tabellenklassen zusammen mit relevanten Beispielen erörtert.
|
|---|