Bootstrap-Tabellen

Kommentar verfassen / Von /

In diesem Tutorial werden die verschiedenen Arten von Tabellenstrukturen erläutert, die in Bootstrap verfügbar sind. Wie wir wissen, werden Tabellen verwendet, um die Daten in Form von Zeilen und Spalten darzustellen. Mit dem Bootstrap-Framework können wir mithilfe von Tabellen erstellen .Tisch Klasse zu Element. Es gibt einige der Tabellenelemente, die wir im Bootstrap wie folgt verwenden werden:

  • : Es handelt sich um eine Reihe von Datenwerten, die in einem Tabellenformat mit vertikalen Spalten und horizontalen Zeilen dargestellt werden.
  • : Es wird verwendet, um Überschriften für Tabellenspalten in einer Tabelle zu definieren.

  • : Wird zum Gruppieren von Hauptinhalten in einer Tabelle verwendet.

  • : Wird verwendet, um eine Reihe von Zellen in einer Tabelle zu definieren.
  • : Es wird verwendet, um eine Zelle zu definieren, die Daten enthält.
  • : Wird verwendet, um eine Kopfzelle in einer Tabelle zu definieren.
  • : Es beschreibt die Art oder den Titel dessen, was die Tabelle enthält, und ist immer der erste Nachkomme von a .

Lesen Sie auch:

  • Bootstrap-Typografie
  • Bootstrap-Grid-System
  • Bootstrap-CSS

Beispiel einer einfachen Tabelle

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Simple Table Example</h2>
<table  >
   <caption>Top five cities in India</caption>
   <thead>
      <tr>
	  <th>Position</th>
	  <th>City Name</th>
      </tr>
   </thread>
   <tbody>
       <tr>
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr>
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr>
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr>
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</body>
</html>
  • Führen Sie die Bootstrap Simple Table-Demo aus

Einfaches Bootstrap-Tabellenbild

Beispiel einer Tabelle mit gestreiften Zeilen

Wir können durch einfaches Verwenden einen Tischhintergrund wie Zebrastreifen erstellen .tischgestreift Klasse zum <.table> Basisklasse.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Striped Rows Table Example</h2>
<table  >
   <caption>Top Five Cities in India</caption>
    <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr>
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr>
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr>
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr>
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</body>
</html>
  • Führen Sie Bootstrap aus Demo zur Tabelle „Streifenreihen“.

Bootstrap-Tabellenbild mit gestreiften Reihen

Beispiel einer umrandeten Tabelle

Wenn wir jedes Element in einer Tabelle mit einem Rahmen umgeben möchten, können wir dies nutzen .tabellenumrandet Klasse zum <.table> Basisklasse.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Bordered Table Example</h2>
<table  >
   <caption>Top Five Cities in India</caption>
   <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr>
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr>
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr>
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr>
	   <td>5</td>
	   <td>Ahmedabad</td>
	 </tr>
   </tbody>
</table>
</body>
</html>
  • Führen Sie Bootstrap aus Demo der umrandeten Tabelle

Bootstrap-Tabellenbild mit Rand

Beispiel einer Hover-Zeilentabelle

Wir können auch eine Tabelle mit Mauszeiger im Bootstrap-Stil erstellen, indem wir verwenden .table-hover Klasse zum <.table> Basisklasse.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Hover Rows Table Example</h2>
<table  >
   <caption>Top Five Cities in India</caption>
   <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr>
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr>
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr>
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr>
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</body>
</html>
  • Führen Sie Bootstrap aus Hover-Zeilentabellen-Demo

Bootstrap-Hover-Zeilen-Tabellenbild

Beispiel einer komprimierten Tabelle

Durch die Verwendung der Klasse könnten wir den Tisch kompakter machen und Platz sparen .tabellenkomprimiert Klasse zum <.table> Basisklasse. Durch das Halbieren der Zellpolsterung wird der Tisch kompakter.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Condensed Table Example</h2>
<table  >
   <caption>Top Five Cities in India</caption>
   <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr>
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr>
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr>
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr>
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</body>
</html>
  • Führen Sie Bootstrap aus Verkürzte Tabellendemo

Bootstrap komprimiertes Tabellenbild

Beispiel für kontextbezogene Klassen

Bootstrap bietet einige kontextbezogene Klassen, um die Zellen in der Tabelle mit einigen leichten Stilen hervorzuheben, indem die folgenden Klassen verwendet werden:

  • .aktiv: Es verleiht einer bestimmten Zelle eine Hover-Farbe, wenn wir die Maus auf der bestimmten Zelle halten.
  • .Erfolg: Es definiert, wann die erfolgreiche Aktion in einer Zelle ausgeführt wird.
  • .Warnung: Zeigt eine Warnung an, die beachtet werden muss.
  • .Gefahr: Definiert, wann ein Fehler oder eine gefährliche Aktion vorliegen kann.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Contextual Classes Example</h2>
<table  >
   <caption>Top Five Cities in India</caption>
   <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr  >
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr  >
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr  >
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr  >
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</body>
</html>
  • Führen Sie Bootstrap aus Demo zu kontextbezogenen Klassen

Bild der Bootstrap-Kontextklassen

Beispiel einer Responsive-Tabelle

Responsive Table ermöglicht das horizontale Scrollen auf kleinen Geräten mit einer Breite von weniger als 768 Pixel. Um einen horizontalen Bildlauf zu erstellen, wickeln wir ein .Tisch In .table-responsive Klasse. Die Anzeige auf größeren Geräten (mehr als 7698 Pixel) macht jedoch keinen großen Unterschied.

 <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Responsive Table Example</h2>
<div  >
<table  >
   <caption  >Top Five Cities in India</caption>
   <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr  >
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr  >
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr  >
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr  >
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Responsive Table-Demo

Bootstrap Responsive Table-Bild

Bootstrap-Referenz

Related Posts

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen