Bootstrap — Панели

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

<div class = "panel panel-default">
   <div class = "panel-body">
      Это основная панель
   </div>
</div>

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

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

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

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

<div class = "panel panel-default">
   <div class = "panel-heading">
      Панель без заголовка
   </div>
   
   <div class = "panel-body">
      Контент панели
   </div>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">
         Панель с заголовком
      </h3>
   </div>
   
   <div class = "panel-body">
      Контент панели
   </div>
</div>

Панель в подвале

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

<div class = "panel panel-default">
   <div class = "panel-body">
      Это основная панель
   </div>
   
   <div class = "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">Заголовок панели</h3>
   </div>
   
   <div class = "panel-body">
      Эта основная панель
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Заголовок панели</h3>
   </div>
   
   <div class = "panel-body">
      Это основная панель
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Заголовок панели</h3>
   </div>
   
   <div class = "panel-body">
      Это основная панель
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Заголовок панели</h3>
   </div>
   
   <div class = "panel-body">
      Это основная панель
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Заголовок панели</h3>
   </div>
   
   <div class = "panel-body">
      Это основная панель
   </div>
</div>

Панель с таблицами

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

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

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Заголовок панели</h3>
   </div>
   
   <div class = "panel-body">
      Это основная панель
   </div>
   
   <table class = "table">
      <tr>
         <th>Продукт</th>
         <th>Цена </th>
      </tr>
      
      <tr>
         <td>Продукт A</td>
         <td>3500</td>
      </tr>
      
      <tr>
         <td>Продукт B</td>
         <td>3200</td>
      </tr>
   </table>
   
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Заголовок панели</div>
   
   <table class = "table">
      <tr>
         <th>Продукт</th>
         <th>Цена </th>
      </tr>
      
      <tr>
         <td>Продукт A</td>
         <td>5500</td>
      </tr>
      
      <tr>
         <td>Продукт B</td>
         <td>3500</td>
      </tr>
   </table>
   
</div>

Панель групп со списками

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

<div class = "panel panel-default">
   <div class ="panel-heading">Панель в заголовке</div>
   
   <div class = "panel-body">
      <p>Это контент основной панели. Это контент основной панели.
         Это контент основной панели. Это контент основной панели.
         Это контент основной панели. Это контент основной панели.
         Это контент основной панели.</p>
   </div>
   
   <ul class = "list-group">
      <li class = "list-group-item">Бесплатная регистрация доменных имен</li>
      <li class = "list-group-item">Бесплатное оконное пространство хостинга</li>
      <li class = "list-group-item">Количество изображений</li>
      <li class = "list-group-item">Поддержка 24*7</li>
      <li class = "list-group-item">Стоимость продления в год</li>
   </ul>

</div>

Читайте также

Быть веб-разработчиком в 2020 — Часть 1: CSS или Bootstrap?

5 лет назад

Как пользоваться bootstrap Glyphicons

8 лет назад

Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

5 лет назад

0 0 голоса

Рейтинг статьи

Подписаться

авторизуйтесь

Уведомить о

новых последующих комментарияхновых ответах на мои комментарии

Я разрешаю использовать свой email и отправлять уведомления о новых комментариях и ответах (вы cможете отказаться от подписки в любое время).

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

0 комментариев

Старые

Новые Популярные

Межтекстовые Отзывы

Посмотреть все комментарии