ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Никогда не бывает больших дел без больших трудностей (Вольтер).

Bootstrap – Панели

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
В этой главе мы поговорим о панелях в Bootstrap. Компоненты панели используются, когда вы хотите, установить компонент DOM в окне. Для того, чтобы получить основную панель, просто добавьте класс .panel к элементу <div>. Кроме того, добавить класс .panel-default для этого элемента, как показано в следующем примере:
 

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

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

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

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

 

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

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

 

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

Панель альтернативного контента

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

 

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

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

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

 

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

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

 

 


Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close