Bootstrap 3 - Панели

В этой статье вы узнаете, как создать панели с помощью Twitter Bootstrap.

Создание панели с помощью Twitter Bootstrap 3

Иногда, на сайте может потребоваться разместить некоторый логически связанный текст в рамке. Это можно сделать с помощью компонента Bootstrap панель.

Для создания панели необходимо заключить текст в блочный элемент <div> с классом .panel-body. Который в свою очередь заключить в ещё один блочный элемент <div> с классами .panel и .panel-default.

<div class="panel panel-default">
  <div class="panel-body">Пример простой панели</div>
</div>

Вышеприведенный пример будет выглядеть примерно так:

Bootstrap - Панель
Bootstrap - Пример простой панели

Создание панели с заголовком

Чтобы добавить заголовок в панель, его необходимо поместить в контейнер <div> с классом .panel-heading.

<div class="panel panel-default">
  <div class="panel-heading">Панель с заголовком</div>
  <div class="panel-body">
    Содержимое панели
  </div>
</div>
Bootstrap - Панель с заголовком
Bootstrap - Пример панели с заголовком

Вы также можете заключить текст заголовка в элементы от <h1> до <h6> и применить к нему стили с помощью класса .panel-title.

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

Панель с футером

Подобно панелям с заголовком, Вы также можете добавить секцию подвала для ваших панелей, используя класс .panel-footer. Футер панели может использоваться для размещения кнопок или дополнительного текста.

<div class="panel panel-default">
  <div class="panel-body">
    Содержимое панели
  </div>
  <div class="panel-footer">Панель подвала</div>
</div>
Bootstrap - Панель с футером
Bootstrap - Пример панели с футером

Классы, акцентирующие состояние контекста панели

К панелям, как и к большинству других компонентов Bootstrap, можно применять дополнительные классы (.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>
Bootstrap - Панели с акцентными классами
Bootstrap - Пример панелей с акцентными классами

Размещение таблиц и групповых списков внутри панелей

В панелях Twitter Bootstrap 3 можно размещать любые таблицы следующим образом:

<!-- Панель 1 -->
<div class="panel panel-default">
  <div class="panel-heading">Заголовок панели</div>
  <div class="panel-body">
    <p>...</p>
  </div>
  <!-- Таблица -->
  <table class="table">
    ...
  </table>
</div>
Bootstrap - Панель, содержащая текст и таблицу
Bootstrap - Пример панели с тектом и таблицей

При отсутствии содержимого панели, таблица примыкает к заголовку без отступа.

<div class="panel panel-default">
  <!-- Обычное содержимое панели -->
  <div class="panel-heading">Panel heading</div>

  <!-- Таблица -->
  <table class="table">
    ...
  </table>
</div>
Bootstrap - Панель, содержащая таблицу
Bootstrap - Пример панели с таблицей

Групповые списки, тоже можно, аналогичным способом размещать внутри любой панели Bootstrap.

<div class="panel panel-default">
  <!-- Обычное содержимое панели -->
  <div class="panel-heading">Товары</div>
  <div class="panel-body">
    Список наименований товаров, доступных в магазине.
  </div>
  <!-- Групповой список -->
  <div class="list-group">
    <a href="#" class="list-group-item">Смартфоны <span class="badge">32</span></a>
    <a href="#" class="list-group-item">Ноутбуки <span class="badge">204</span></a>
    <a href="#" class="list-group-item">Планшеты <span class="badge">517</span></a>  
    <a href="#" class="list-group-item">Компьютеры <span class="badge">71</span></a>
  </div>
</div>
Bootstrap - Панель, содержащая список
Bootstrap - Пример панели со списком

Демострация компонента Panel



   Bootstrap 0    13708 0

Комментарии (22)

  1. Денис # +1
    Шеф, я не в тему, но на данном сайте так верстка выполнена, что при lg, md и xs разрешениях (в терминах бутстрапа) кнопки входа и регистрации в том или ином виде имеются, а вот при sm — нет. Проверь :) Они с навбара пропадают при переходе в sm-диапазон, и появляется только внутри гамбургер-кнопки при коллапсе навбара, когда мы переходим в xs диапазон.
    1. Александр Мальцев # 0
      Спасибо, Денис. Проверил, действительно так.
      Внёс изменения, теперь кнопки входа и регистрации появились на sm устройствах.
    2. antant # 0
      а почему нельзя бордеред таблицы пихать внутрь панели? я впихнул, потому что не знал что нельзя и всё нормально смориться, правда маргины вроде выставлял -15пх???
      1. Александр Мальцев # 0
        Да, сейчас можно все таблицы помещать внутрь панелей. Текст статьи поправил.
        Они специально для таблиц, помещённых в панели и имеющих класс .table-bordered добавили стиль, который убирает её внешние границы. Так что теперь всё смотрится хорошо.
        Чтобы не было отступов у таблицы, её не надо помещать в контейнер, имеющий класс .panel-body. Их следует располагать на том же уровне вложенности, что и контейнеры (.panel-body).
        1 Вариант (в конце панели):
        <div class="panel panel-default">
          <div class="panel-heading">Заголовок панели</div>
          <div class="panel-body">
            ...
          </div>
          <!-- Таблица -->
          <table class="table">
            ...
          </table>
        </div>
        
        2 Вариант (в середине панели):
        <div class="panel panel-default">
          <div class="panel-heading">Заголовок панели</div>
          <div class="panel-body">
            ...
          </div>
          <!-- Таблица -->
          <table class="table">
            ...
          </table>
          <div class="panel-body">
            ...
          </div>
        </div>
        
        3 Вариант (в начале панели):
        <div class="panel panel-default">
          <div class="panel-heading">Заголовок панели</div>
          <!-- Таблица -->
          <table class="table">
            ...
          </table>
          <div class="panel-body">
            ...
          </div>
        </div>
        
      2. Андрей # 0
        Добрый день. Подскажите, как с помощью последнего примера сделать страницу в магазине. Есть 22 товара: первой категории 9 и второй категории 13. Как с помощью
        .list-group
        или
        <select>
        сделать так, что бы было три вкладки: показать весь товар, показать товар 1 категории, показать товар 2 категории.
        <!DOCTYPE HTML>
        <html>
        
        <head>
          <title>Untitled</title>
          <meta charset="utf-8">
        </head>
        <body>
        <select>
        <option value="0">Все категории</option>
        <option selected="selected" title="Car" value="1">Автомобили <span class="badge">4</span></option>
        <option title="Motorcycle" value="2">Мотоциклы <span class="badge">3</span></option>
        </select>
        <div id="avto">Автомобиль 1</div>
        <div id="avto">Автомобиль 2</div>
        <div id="avto">Автомобиль 3</div>
        <div id="avto">Автомобиль 4</div>
        <div id="moto">Мотоцикл 1</div>
        <div id="moto">Мотоцикл 2</div>
        <div id="moto">Мотоцикл 3</div>
        </body>
        </html>
        
        1. Александр Мальцев # 0
          Добрый день, Андрей.
          На сколько я понимаю Вы хотите управлять видимостью блоков div в зависимости от выбранной категории. Использовать несколько одинаковых идентификаторов запрещено в HTML. Лучше для этого использовать атрибуты data-*.
          <select id="items">
            <option value="0">Все категории</option>
            <option selected="selected" title="Car" value="1">Автомобили <span class="badge">4</span></option>
            <option title="Motorcycle" value="2">Мотоциклы <span class="badge">3</span></option>
          </select>
          <div data-category="avto">Автомобиль 1</div>
          <div data-category="avto">Автомобиль 2</div>
          <div data-category="avto">Автомобиль 3</div>
          <div data-category="avto">Автомобиль 4</div>
          <div data-category="moto">Мотоцикл 1</div>
          <div data-category="moto">Мотоцикл 2</div>
          <div data-category="moto">Мотоцикл 3</div>
          
          <script>
          $(function() {
            function showContent() {
              var selectCategory = $("#items").val();
              switch (selectCategory) {
                case "0": 
                  $('[data-category="avto"]').show();
                  $('[data-category="moto"]').show();
                  break;
                case "1": 
                  $('[data-category="avto"]').show();
                  $('[data-category="moto"]').hide();
                  break;
                case "2": 
                  $('[data-category="avto"]').hide();
                  $('[data-category="moto"]').show();
                  break;
              }
            }
            showContent();
            $("#items").change(function() {
              showContent();
            });
          });
          </script>
          
          1. Андрей # 0
            Спасибо большое! Со всем забыл про id. Немного по химичил и вот получилось:
              <select id="items">
              <option selected="selected" value=".avto, .moto">Все категории</option>
              <option value=".avto">Автомобили</option>
              <option value=".moto">Мотоциклы</option>
            </select>
            <div class="avto">Автомобиль 1</div>
            <div class="avto">Автомобиль 2</div>
            <div class="avto">Автомобиль 3</div>
            <div class="avto">Автомобиль 4</div>
            <div class="moto">Мотоцикл 1</div>
            <div class="moto">Мотоцикл 2</div>
            <div class="moto">Мотоцикл 3</div>
              <script>
                 $(function(){
                 	$("#items").change(function() {
               	  $(".avto,.moto").not($(this.value).show()).hide()
              	});
            	});
              </script>
            
        2. Алексей # 0
          Здравствуйте!
          Подскажите пожалуйста как сделать что бы содержимое панели прокручивалось!
          Например задаем для панели фиксированную высоту 300px, а содержимое которое там содержится больше и сейчас оно просто вылазиет за приделы панели, а нужно сделать прокрутку.
          1. Александр Мальцев # 0
            Здравствуйте.
            1. С помощью атрибута style:
            <div class="panel panel-default">
              <div class="panel-heading">Заголовок панели</div>
              <div class="panel-body" style="max-height: 300px; overflow-y: scroll;">
                Содержимое панели...
              </div>
            </div>
            
            2. В файле CSS.
            2.1 Добавить стиль:
            .panel-scrollable .panel-body {
              max-height: 300px;
              overflow-y: scroll;
            }
            
            2.2. Добавить к необходимым панелям класс panel-scrollable:
            <div class="panel panel-default panel-scrollable">
              <div class="panel-heading">Заголовок панели</div>
              <div class="panel-body">
                Содержимое панели...
              </div>
            </div>
            
          2. Петр Кондратенко # 0
            Скажите пожалуйста, как вы сделали меню с права сайтбаре аккардионом, у меня никак не получается.
            Спасибо
            1. Александр Мальцев # 0
            2. Стас # 0
              .container
              
              <div class="row">
                  <div class="col-xs-12">
                  
                  <div class="row1 panel panel-primary">
                  <div class="panel-heading">{L_VIZ_HEADER}</div>
                  
                    <div class="pandel-body">
                      <div class="col-xs-5">{L_VIZ_EL1}</div>
                      <div class="col-xs-7"><input type="checkbox" /><span class="round-btn"></span></div>      
                      <div class="clearfix"></div>
                         
                      <div class="col-xs-5">{L_VIZ_EL2}</div>
                      <div class="col-xs-7"><input type="checkbox" checked  /><span class="round-btn"></span></div>      
                      <div class="clearfix"></div>
                         
                      <div class="col-xs-5">{L_VIZ_EL3}</div>
                      <div class="col-xs-7">очень много текста очень много текста очень много текста очень много текста очень много текста очень много текста очень много текста очень много текста очень много текста очень много текста очень много текста очень много текста </div>      
                      <div class="clearfix"></div>
                         
                      <div class=" col-xs-5">{L_VIZ_EL4}</div>
                      <div class="col-xs-7"><input type="checkbox" checked  /><span class="round-btn"></span></div>      
                      <div class="clearfix"></div>
                         
                      <div class="col-xs-5">{L_VIZ_EL5}</div>
                      <div class="col-xs-7"><input type="checkbox" checked  /><span class="round-btn"></span></div>      
                      <div class="clearfix"></div>
              
                      <div class="row-xs-12">{L_VIZ_INFO}</div>
                    </div>     
                  </div>
                  </div>
                </div>
              ранее вы писали что в если в col есть вложенные col они должны быть обромлены row. Но в таком случае нет боковых отступов.
              и сразу еще один вопрос, как закрасить ПОЛНОСТЬЮ ячейки, например в шахматном порядке, что бы высота закрашенной левой части соответствовала закрашенной правой.
              Спс
              1. Стас # 0
                вот пример jsfiddle.net/m3b4Lv55/1/ без row между col
                работает правильно. с row — не правильно.
                1. Александр Мальцев # 0
                  Потому что вы вместо
                  <div class="panel-body">
                  
                  написали
                  <div class="pandel-body">
                  
                  1. Стас # 0
                    спасибо. печальная опечатка! )
                2. Александр Мальцев # 0
                  В этом случае лучше использовать таблицу:
                  <div class="panel panel-default">
                    <div class="panel-heading">{L_VIZ_HEADER}</div>
                    <table class="table">
                      <tr>
                        <td class="row2">Какой-то текст, что-то написано на несколько строк.</td>
                        <td class="row1"><input type="checkbox" checked class="cb-arr" /><span class="round-btn"></span></td>
                      </tr>
                      <tr>
                        <td class="row1">мало текста</td>
                        <td class="row2">очень много текста очень много текста очень много текста...</td>
                      </tr>
                    </table>
                  </div>
                  
                  1. Стас # 0
                    Т.е. в css3 все же не стоит избавляться от таблиц? Мне кажется не совсем верный подход.
                    А как же в том случае если это укзкий экран мобильного телефона. Таблица не «перепрыгнет» на новую строчку…
                    1. Александр Мальцев # 0
                      Так от них никто не избавляется. С помощью CSS можно любой элемент настроить так, чтобы он отображался как таблица или его часть. Т.е. задав элементу display:table, display:table-cell и др.
                    2. Стас # 0
                      и все же, не понятно, почему В ЭТОМ СЛУЧАЕ ЛУЧШЕ ТАБЛИЦА?
                      Моя неопыоность не позволяет мне определить «этот случай».
                      Именно из-за таких проблем я не люблю блочную верстку, в табличной все просто. Но усиленно стараюсь использовать именно блочную верстку, дабы идти в ногу с прогрессом.

                      Еще раз хочу сказать вам большое спасибо за ваш ресурс, по бутрсрапу только к вам, даже через поисковик + первоисточник!
                      1. Александр Мальцев # 0
                        Лучше конечно для разметки не использовать, а применять только для создания таблиц. Но если с помощью float это не достигнуть, а с помощью таблиц это получается легко, то почему бы это не использовать. Если даже такие сервисы как Яндекс Директ их используют.
                        Можно конечно и без таблиц, например, с помощью flex. Через некоторое время flex будет основной стандарт для создания разметки. Но единственный недостаток то, что его не поддерживают браузеры Internet Explorer 8, 9. Internet Explorer 10, 11 поддерживают flex-вёрстку частично. Если поддержка этих браузеров не нужна, то можно переписать код используя flex-разметку.
                  2. Стас # 0
                    еще вопрос по breadcrumb

                    как правильно

                    <div class="row">
                        <ol class="breadcrumb">
                          <li><a href="{U_INDEX}">{L_INDEX}</a></li>            
                        </ol>
                      </div>
                    или

                    <div class="row">
                        <div class="col-xs-12">
                          <ol class="breadcrumb">
                            <li><a href="{U_INDEX}">{L_INDEX}</a></li>            
                          </ol>
                        </div>
                      </div>
                    и почему правильно так а не иначе? информации по этому поводу нигде не найду.
                    спасибо.
                    1. Александр Мальцев # 0
                      Блок row используется только для адаптивных блоков (col-*-*). Правильный второй 2 вариант.
                      Только какой в нём смысл, можно так:
                      <div class="container">
                        ...
                        <ol class="breadcrumb">
                          <li><a href="{U_INDEX}">{L_INDEX}</a></li>            
                        </ol>
                        ...
                      </div>
                      

                    Вы должны авторизоваться, чтобы оставлять комментарии.