Bootstrap-Panels

Allgemein, Panel ist eine Darstellung von Informationen, die unter bestimmten Umständen an den Bildschirm des Benutzers gesendet werden. Manchmal müssen wir aus bestimmten Gründen Informationen in eine Box packen oder DOM in eine Box packen. In solchen Situationen ist die Panel-Komponente sehr nützlich. Die Box wird mit einem einfachen Rand und einer Polsterung um den Inhalt herum angezeigt. Bootstrap bietet .panel Klasse innerhalb des div-Elements.
In diesem Tutorial werden die folgenden Themen erläutert, die mit Bootstrap-Panels verwendet werden.

  • Standardpanel
  • Tafel mit Überschrift
  • Panel mit Kontextzuständen
  • Tafel mit Tischen
  • Panel mit Listengruppen
  • lesen Sie auch:

    • Bootstrap-Setup
    • Bootstrap-Typografie

    Die folgenden Beispiele zeigen die verschiedenen Techniken, die zur Implementierung der Panels in Bootstrap verwendet werden. Wenn Sie Fragen dazu haben Bootstrap-Panelsschreiben Sie es bitte in den Kommentarbereich.

    Bootstrap-Standardpanel

    Wir können ein Standardpanel erstellen, indem wir das verwenden .panel-default Klasse zusammen mit der Basisklasse .panel. Die Inhalte werden innerhalb der definiert .Panel-Körper Klasse, die mit einem div-Element umschlossen ist. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </style>
    </head>
    <body>
    <div  >
    <h2>Default Panel</h2><br>
    <div  >
       <div  >
          This is basic Panel
       </div>
    </div>
    </div>
    </body>
    </html>
    
    • Beispiel für das Bootstrap-Standardpanel ausführen

    Beispiel für ein Bootstrap-Standardpanel

    Überschrift des Bootstrap-Panels

    Wir können dem Panel eine Überschrift geben, indem wir verwenden .panel-heading class innerhalb des div-Elements und verwenden Sie eines der Header-Tags von h1 bis h6, um den Titel für das Panel zu definieren, indem Sie einfach das umschließen .Panel-Titel Klasse innerhalb der Header-Tags. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </style>
    </head>
    <body>
    <div  >
    <h2>Panel Heading</h2><br>
    <div  >
       <div  >
             <h3  >Bootstrap Definition</h3>
       </div>
       <div  >
       The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.
       </div>
    </div>
    </div>
    </body>
    </html>
    
    • Führen Sie ein Beispiel für eine Bootstrap-Panel-Überschrift aus

    Beispiel für eine Bootstrap-Panel-Überschrift

    Bootstrap-Panels mit Kontextzuständen

    Wir können verschiedene Arten von Panels mit jeweils unterschiedlichen Farbtypen erstellen, indem wir kontextbezogene Klassen in das div-Element einschließen. Im Folgenden sind die kontextbezogenen Klassen aufgeführt, die den Panel-Komponenten mehr Bedeutung verleihen.

    • Panel-primär
    • Panel-Erfolg
    • Panel-Info
    • Panel-Warnung
    • Panel-Gefahr
    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </style>
    </head>
    <body>
    <div  >
    <h2>Contextual States Panels</h2><br>
    <div  >
       <div  >
          <h3  >My Panel</h3>
       </div>
       <div  >
          Primary Panel
       </div>
    </div>
    <div  >
       <div  >
          <h3  >My Panel</h3>
       </div>
       <div  >
          Success Panel
       </div>
    </div>
    <div  >
       <div  >
          <h3  >My Panel</h3>
       </div>
       <div  >
          Informational Panel
       </div>
    </div>
    <div  >
       <div  >
          <h3  >My Panel</h3>
       </div>
       <div  >
          Warning Panel
       </div>
    </div>
    <div  >
       <div  >
          <h3  >My Panel</h3>
       </div>
       <div  >
          Danger Panel
       </div>
    </div>
    </div>
    </body>
    </html>
    
    • Beispiel für das Panel „Bootstrap-Kontextstatus“ ausführen

    Beispiel für ein Bootstrap-Kontextstatus-Panel

    Bootstrap-Panel mit Tabelle

    Wir können eine nicht umrandete Tabelle innerhalb des Panels erstellen, indem wir einfach die verwenden .Tisch Klasse mit dem Element . Wir können der Tabelle auch eine Überschrift geben, indem wir verwenden .panel-heading Klasse innerhalb des div-Elements und muss vor der Tabellenklasse deklariert werden. Der .Panel-Körper Die Klasse wird verwendet, um zur Trennung einen zusätzlichen Rahmen am oberen Rand der Tabelle hinzuzufügen. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </style>
    </head>
    <body>
    <div  >
    <h2>Panel Table</h2><br>
    <div  >
       <div  >ICC ODIs Rankings</div>
       <div  >
          The table shows ICC Rankings for ODIs updated on 5th June,2014.
       </div>
       <table  >
          <thead>
             <tr>
    	    <th>Rank</th>
    	    <th>Country</th>
    	    <th>Ratings</th>
             </tr>
          </thead>
          <tbody>
              <tr>
                 <td>1</td>
                 <td>Australia</td>
                 <td>115</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>Srilanka</td>
                  <td>112</td>
              </tr>
              <tr>
    	      <td>3</td>
    	      <td>India</td>
    	      <td>112</td>
              </tr>
              <tr>
    	      <td>4</td>
    	      <td>South Africa</td>
    	      <td>109</td>
              </tr>
              <tr>
    	      <td>5</td>
    	      <td>England</td>
    	      <td>109</td>
              </tr>
          </tbody>
       </table>
    </div>
    </div>
    </div>
    </body>
    </html>
    
    • Führen Sie ein Bootstrap-Panel-Tabellenbeispiel aus

    Beispiel für eine Bootstrap-Panel-Tabelle

    Bootstrap-Panel mit Listgroups

    Wir können eine Listengruppe erstellen, indem wir die hinzufügen .list-group Klasse innerhalb eines Panels. Um eine Listengruppe in einem beliebigen Panel zu definieren, können wir Folgendes verwenden .list-group Klasse innerhalb eines ungeordneten Listenelements, wie im folgenden Beispiel gezeigt:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </style>
    </head>
    <body>
    <div  >
    <h2>Panel Listgroups</h2><br>
    <div  >
       <div  >Top Countries</div>
       <div  >
          The following are the top five largest countries in the world.
       </div>
       <ul  >
          <li  >Russia</li>
          <li  >Canada</li>
          <li  >United States</li>
          <li  >China</li>
          <li  >Brazil</li>
       </ul>
    </div>
    </body>
    </html>
    
    • Führen Sie das Bootstrap-Panel-Listgroups-Beispiel aus

    Beispiel für Bootstrap-Panel-Listengruppen

    Kommentar verfassen

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

    Nach oben scrollen