Bootstrap 3 - Панели

Содержание:
  1. Создание панели с помощью Twitter Bootstrap 3
  2. Комментарии

В этой статье вы узнаете, как создать панели с помощью 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

Комментарии: 24

Lana
Lana
доброго время суток, Александр
подскажите как сделать две отдельные рамки для lk
сейчас она выглядит так
Срок устранения
<asp:RadioButton ID=«RbSrokUs_Yes» GroupName=«Timeframe» runat=«server» Text=«истек» Checked=«true» />
<asp:RadioButton ID=«RbSrokUs_Not» GroupName=«Timeframe» runat=«server» Text=«истекает»/>

     

<%-- --%>
Статус отправления
<asp:RadioButton ID=«RBStat_All» GroupName=«Contr_Stat» runat=«server» Text=«все» Checked=«true»/>
<asp:RadioButton ID=«RBStat_Not» GroupName=«Contr_Stat» runat=«server» Text=«неотправленные» />
<asp:RadioButton ID=«RBStat_Yes» GroupName=«Contr_Stat» runat=«server» Text=«отправленные» />


Александр Мальцев
Александр Мальцев
Например, оберните контент, который должен находиться в рамке с помощью элемента div. Добавьте этим элементам какой-то определённый класс.
После этого в CSS задайте элементам с этим классам стили, например:
border: 1px solid #000;
Если нужно с помощью Bootstrap, то можно так:
<div class="panel panel-default">
  <div class="panel-body">
    Срок устранения
    <asp:RadioButton ID=«RbSrokUs_Yes» GroupName=«Timeframe» runat=«server» Text=«истек» Checked=«true» />
    <asp:RadioButton ID=«RbSrokUs_Not» GroupName=«Timeframe» runat=«server» Text=«истекает»/>
  </div>
</div>
Аноним
Аноним
еще вопрос по 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>
и почему правильно так а не иначе? информации по этому поводу нигде не найду.
спасибо.
Александр Мальцев
Александр Мальцев
Блок row используется только для адаптивных блоков (col-*-*). Правильный второй 2 вариант.
Только какой в нём смысл, можно так:
<div class="container">
  ...
  <ol class="breadcrumb">
    <li><a href="{U_INDEX}">{L_INDEX}</a></li>            
  </ol>
  ...
</div>
Аноним
Аноним
.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. Но в таком случае нет боковых отступов.
и сразу еще один вопрос, как закрасить ПОЛНОСТЬЮ ячейки, например в шахматном порядке, что бы высота закрашенной левой части соответствовала закрашенной правой.
Спс
Аноним
Аноним
вот пример jsfiddle.net/m3b4Lv55/1/ без row между col
работает правильно. с row — не правильно.
Александр Мальцев
Александр Мальцев
Потому что вы вместо
<div class="panel-body">
написали
<div class="pandel-body">
Александр Мальцев
Александр Мальцев
В этом случае лучше использовать таблицу:
<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>
Аноним
Аноним
спасибо. печальная опечатка! )
Аноним
Аноним
Т.е. в css3 все же не стоит избавляться от таблиц? Мне кажется не совсем верный подход.
А как же в том случае если это укзкий экран мобильного телефона. Таблица не «перепрыгнет» на новую строчку…
Аноним
Аноним
и все же, не понятно, почему В ЭТОМ СЛУЧАЕ ЛУЧШЕ ТАБЛИЦА?
Моя неопыоность не позволяет мне определить «этот случай».
Именно из-за таких проблем я не люблю блочную верстку, в табличной все просто. Но усиленно стараюсь использовать именно блочную верстку, дабы идти в ногу с прогрессом.

Еще раз хочу сказать вам большое спасибо за ваш ресурс, по бутрсрапу только к вам, даже через поисковик + первоисточник!
Александр Мальцев
Александр Мальцев
Лучше конечно для разметки не использовать, а применять только для создания таблиц. Но если с помощью float это не достигнуть, а с помощью таблиц это получается легко, то почему бы это не использовать. Если даже такие сервисы как Яндекс Директ их используют.
Можно конечно и без таблиц, например, с помощью flex. Через некоторое время flex будет основной стандарт для создания разметки. Но единственный недостаток то, что его не поддерживают браузеры Internet Explorer 8, 9. Internet Explorer 10, 11 поддерживают flex-вёрстку частично. Если поддержка этих браузеров не нужна, то можно переписать код используя flex-разметку.
Александр Мальцев
Александр Мальцев
Так от них никто не избавляется. С помощью CSS можно любой элемент настроить так, чтобы он отображался как таблица или его часть. Т.е. задав элементу display:table, display:table-cell и др.
Аноним
Аноним
Скажите пожалуйста, как вы сделали меню с права сайтбаре аккардионом, у меня никак не получается.
Спасибо
Александр Мальцев
Александр Мальцев
Аноним
Аноним
Здравствуйте!
Подскажите пожалуйста как сделать что бы содержимое панели прокручивалось!
Например задаем для панели фиксированную высоту 300px, а содержимое которое там содержится больше и сейчас оно просто вылазиет за приделы панели, а нужно сделать прокрутку.
Александр Мальцев
Александр Мальцев
Здравствуйте.
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>
Аноним
Аноним
Добрый день. Подскажите, как с помощью последнего примера сделать страницу в магазине. Есть 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>
Александр Мальцев
Александр Мальцев
Добрый день, Андрей.
На сколько я понимаю Вы хотите управлять видимостью блоков 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>
Аноним
Аноним
Спасибо большое! Со всем забыл про 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>
Аноним
Аноним
а почему нельзя бордеред таблицы пихать внутрь панели? я впихнул, потому что не знал что нельзя и всё нормально смориться, правда маргины вроде выставлял -15пх???
Александр Мальцев
Александр Мальцев
Да, сейчас можно все таблицы помещать внутрь панелей. Текст статьи поправил.
Они специально для таблиц, помещённых в панели и имеющих класс .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>
Аноним
Аноним
Шеф, я не в тему, но на данном сайте так верстка выполнена, что при lg, md и xs разрешениях (в терминах бутстрапа) кнопки входа и регистрации в том или ином виде имеются, а вот при sm — нет. Проверь :) Они с навбара пропадают при переходе в sm-диапазон, и появляется только внутри гамбургер-кнопки при коллапсе навбара, когда мы переходим в xs диапазон.
Александр Мальцев
Александр Мальцев
Спасибо, Денис. Проверил, действительно так.
Внёс изменения, теперь кнопки входа и регистрации появились на sm устройствах.