Компьютерапия

Бутстрап - Панели

Категория: Bootstrap 3
Просмотров: 1405

Содержание:

В этой статье мы расскажем о панелях 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, чтобы добавить заголовок с предварительным стилем.

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

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

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

Групповые контекстуальные альтернативы

Используйте контекстные классы состояния, такие как panel-primary, panel-success, panel-info, panel-warning, panel-danger, чтобы сделать панель более значимой для конкретного контекста.

<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 к этому элементу. Теперь в эту панель входят ваши группы списков. Вы можете научиться создавать группу списков из разделов Список групп.

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



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok