В этой статье мы расскажем о панелях 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>

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




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok