Учебники

Bootstrap — Панели

Октябрь 25, 2018

В этой главе речь пойдет о панелях Bootstrap. Компоненты панели используются, когда вы хотите поместить свой компонент DOM в коробку. Чтобы получить базовую панель, просто добавьте класс .panel к элементу <div>. Также добавьте класс .panel-default к этому элементу, как показано в следующем примере — 

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

Панель с заголовком

Есть два способа добавить заголовок панели:

  • Используйте класс .panel-heading, чтобы легко добавить контейнер заголовка на панель.

  • Используйте любой <h1> — <h6> с классом .panel-title, чтобы добавить предварительно стилизованный заголовок.

Используйте класс .panel-heading, чтобы легко добавить контейнер заголовка на панель.

Используйте любой <h1> — <h6> с классом .panel-title, чтобы добавить предварительно стилизованный заголовок.

Следующий пример демонстрирует оба способа — 

<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>

Панель с нижним колонтитулом

Вы можете добавить нижние колонтитулы на панели, оборачивая кнопки или вторичный текст в <div>, содержащий класс .panel-footer . Следующий пример демонстрирует это. 

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

Нижние колонтитулы панели не наследуют цвета и границы при использовании контекстных вариаций, так как они не должны находиться на переднем плане.

Панель Контекстные Альтернативы

Используйте классы контекстного состояния, такие как: панель-панель, панель-успех, панель-информация, панель-предупреждение, панель-опасность , чтобы сделать панель более значимой для конкретного контекста. 

<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>

Панель со столами

Чтобы получить таблицу без границ на панели, используйте класс .table на панели. Предположим, что есть <div>, содержащий .panel-body , и мы добавляем дополнительную границу к верхней части таблицы для разделения. Если <div> не содержит .panel-body , то компонент перемещается из заголовка панели в таблицу без прерывания.

Следующий пример демонстрирует это — 

<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 к элементу <div>. Также добавьте класс .panel-default к этому элементу. Теперь в этой панели включить ваш список групп. Вы можете научиться создавать группы списков из главы Группы списков .

45
Share: