Bootstrap - panele

W tym rozdziale omówimy panele Bootstrap. Komponenty panelu są używane, gdy chcesz umieścić komponent DOM w pudełku. Aby uzyskać podstawowy panel, po prostu dodaj klasę.paneldo elementu <div>. Dodaj także klasę.panel-default do tego elementu, jak pokazano w poniższym przykładzie -

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Panel z nagłówkiem

Istnieją dwa sposoby dodawania nagłówka panelu -

• Posługiwać się .panel-heading klasy, aby łatwo dodać kontener nagłówka do panelu.

• Użyj dowolnych <h1> - <h6> z rozszerzeniem .panel-title klasy, aby dodać wstępnie stylizowany nagłówek.

Poniższy przykład ilustruje oba sposoby -

<div class = "panel panel-default">
   <div class = "panel-heading">
      Panel heading without title
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">
         Panel With title
      </h3>
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

Panel ze stopką

Możesz dodawać stopki do paneli, zawijając przyciski lub dodatkowy tekst w klasie zawierającej <div> .panel-footer. Poniższy przykład ilustruje to.

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <div class = "panel-footer">Panel footer</div>
</div>

Stopki paneli nie dziedziczą kolorów i obramowań, gdy używane są warianty kontekstowe, ponieważ nie mają one znajdować się na pierwszym planie.

Panel kontekstowe alternatywy

Użyj kontekstowych klas stanu, takich jak, panel-primary, panel-success, panel-info, panel-warning, panel-danger, aby nadać panelowi większe znaczenie w określonym kontekście.

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Panel ze stołami

Aby uzyskać tabelę bez obramowania w panelu, użyj klasy .tablewewnątrz panelu. Załóżmy, że istnieje <div> zawierający.panel-body, dodajemy dodatkowe obramowanie na górze tabeli w celu oddzielenia. Jeśli nie ma <div> zawierającego.panel-body, komponent przechodzi z nagłówka panelu do tabeli bez przerywania.

Poniższy przykład demonstruje to -

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

Panel z listami grup

Możesz dołączyć grupy list do dowolnego panelu. Utwórz panel, dodając klasę.paneldo elementu <div>. Dodaj także klasę.panel-defaultdo tego elementu. Teraz w tym panelu uwzględnij swoje grupy list. Możesz nauczyć się utworzyć grupę list z rozdziału listy grup .

<div class = "panel panel-default">
   <div class ="panel-heading">Panel heading</div>
   
   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>
   
   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>
</div>