компоненти
Понад дюжина багаторазових компонентів, створених для забезпечення іконографії, спадних меню, груп введення, навігації, сповіщень та багато іншого.
Понад дюжина багаторазових компонентів, створених для забезпечення іконографії, спадних меню, груп введення, навігації, сповіщень та багато іншого.
Містить понад 250 гліфів у форматі шрифту з набору Glyphicon Halflings. Glyphicons Halflings зазвичай не доступні безкоштовно, але їхній творець зробив їх доступними для Bootstrap безкоштовно. На знак подяки ми лише просимо вас додати посилання на Glyphicons , коли це можливо.
З міркувань продуктивності всі піктограми потребують базового класу та окремого класу піктограм. Щоб використовувати, розмістіть наведений нижче код де завгодно. Обов’язково залишайте простір між піктограмою та текстом для правильного відступу.
Класи піктограм не можна безпосередньо поєднувати з іншими компонентами. Їх не слід використовувати разом з іншими класами для того самого елемента. Замість цього додайте вкладений <span>
і застосуйте класи значків до <span>
.
Класи значків слід використовувати лише для елементів, які не містять текстового вмісту та не мають дочірніх елементів.
Bootstrap передбачає, що файли шрифтів значків будуть розташовані в ../fonts/
каталозі відносно скомпільованих файлів CSS. Переміщення або перейменування цих файлів шрифтів означає оновлення CSS одним із трьох способів:
@icon-font-path
та/або @icon-font-name
змінні у вихідних файлах Less.url()
шляхи в скомпільованому CSS.Використовуйте будь-який варіант, який найкраще відповідає вашим конкретним налаштуванням розробки.
Сучасні версії допоміжних технологій оголошуватимуть вміст, згенерований CSS, а також певні символи Unicode. Щоб уникнути ненавмисного та заплутаного виведення в програмах зчитування з екрана (зокрема, коли піктограми використовуються виключно для прикраси), ми приховуємо їх за допомогою aria-hidden="true"
атрибута.
Якщо ви використовуєте значок для передачі значення (а не лише як декоративний елемент), переконайтеся, що це значення також передається допоміжним технологіям – наприклад, додайте додатковий вміст, візуально прихований за допомогою .sr-only
класу.
Якщо ви створюєте елементи керування без іншого тексту (наприклад, <button>
який містить лише піктограму), вам слід завжди надавати альтернативний вміст, щоб визначити призначення елемента керування, щоб він був зрозумілим для користувачів допоміжних технологій. У цьому випадку ви можете додати aria-label
атрибут до самого елемента керування.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Використовуйте їх у кнопках, групах кнопок для панелі інструментів, навігації або введених форм.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Піктограма, яка використовується в сповіщенні , щоб передати, що це повідомлення про помилку, з додатковим .sr-only
текстом, щоб передати цю підказку користувачам допоміжних технологій.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Перемикається контекстне меню для відображення списків посилань. Зроблено інтерактивним за допомогою спадного плагіна JavaScript .
Загорніть тригер спадного меню та спадне меню всередину .dropdown
або інший елемент, який оголошує position: relative;
. Потім додайте HTML меню.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Випадаючі меню можна змінити на розгортання вгору (замість вниз), додавши .dropup
до батьківського.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
За замовчуванням спадне меню автоматично розташовується на 100% від верхнього краю та вздовж лівого боку батьківського меню. Додайте .dropdown-menu-right
до a, .dropdown-menu
щоб вирівняти спадне меню праворуч.
Випадаючі списки автоматично розміщуються за допомогою CSS у звичайному потоці документа. Це означає, що спадні списки можуть бути обрізані батьками з певними overflow
властивостями або з’являтися поза межами вікна перегляду. Вирішуйте ці проблеми самостійно, коли вони виникають.
.pull-right
вирівнюванняПочинаючи з версії 3.1.0, ми припинили підтримку .pull-right
спадних меню. Щоб вирівняти меню за правим краєм, використовуйте .dropdown-menu-right
. Вирівняні за правим краєм навігаційні компоненти на навігаційній панелі використовують версію mixin цього класу для автоматичного вирівнювання меню. Щоб змінити це, використовуйте .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Додайте заголовок, щоб позначити розділи дій у будь-якому спадному меню.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Додайте роздільник до окремих рядів посилань у спадному меню.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Додайте .disabled
в <li>
спадне меню, щоб вимкнути посилання.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Згрупуйте ряд кнопок разом на одному рядку за допомогою групи кнопок. Додайте необов’язкове перемикач JavaScript і поведінку стилю прапорця за допомогою нашого плагіна кнопок .
Під час використання спливаючих підказок або спливаючих елементів для елементів у .btn-group
, вам доведеться вказати опцію, container: 'body'
щоб уникнути небажаних побічних ефектів (таких як елемент стає ширшим і/або втрачає свої заокруглені кути, коли спрацьовує підказка чи спливаюче вікно).
role
та надайте міткуЩоб допоміжні технології, такі як програми зчитування з екрана, передавали групу кнопок, потрібно надати відповідний role
атрибут. Для груп кнопок це буде role="group"
, тоді як панелі інструментів повинні мати role="toolbar"
.
Виняток становлять групи, які містять лише один елемент керування (наприклад, вирівняні групи кнопок з <button>
елементами) або спадне меню.
Крім того, групам і панелям інструментів слід надати чітку мітку, оскільки в іншому випадку більшість допоміжних технологій не повідомлять про них, незважаючи на наявність правильного role
атрибута. У наведених тут прикладах ми використовуємо , але також можна використовувати aria-label
такі альтернативи, як .aria-labelledby
Загорніть ряд ґудзиків .btn
у .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Об’єднайте набори <div class="btn-group">
в <div class="btn-toolbar">
складніші компоненти.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
Замість того, щоб застосовувати класи розміру кнопки до кожної кнопки в групі, просто додайте .btn-group-*
до кожної .btn-group
, у тому числі під час вкладення кількох груп.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Розмістіть одне .btn-group
в іншому .btn-group
, якщо ви бажаєте, щоб спадні меню були змішані з серією кнопок.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Зробіть так, щоб набір кнопок виглядав вертикально, а не горизонтально. Розділені кнопки тут не підтримуються.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Зробіть так, щоб група ґудзиків розтягувалася на однакові розміри, щоб охопити всю ширину свого батька. Також працює зі спадними меню кнопок у групі кнопок.
Через особливості HTML і CSS, які використовуються для вирівнювання кнопок (а саме display: table-cell
), межі між ними подвоюються. У звичайних групах кнопок margin-left: -1px
використовується для складання рамок замість їх видалення. Однак margin
не працює з display: table-cell
. У результаті, залежно від ваших налаштувань Bootstrap, ви можете видалити або змінити колір рамок.
Internet Explorer 8 не відображає межі кнопок у вирівняній групі кнопок, незалежно від того, увімкнено <a>
чи <button>
елементи. Щоб уникнути цього, загорніть кожну кнопку в іншу .btn-group
.
Дивіться #12476 для отримання додаткової інформації.
<a>
елементамиПросто оберніть ряд .btn
s у .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Якщо <a>
елементи використовуються як кнопки – для запуску функціональних можливостей на сторінці, а не для переходу до іншого документа чи розділу на поточній сторінці – їм також слід надати відповідний role="button"
.
<button>
елементамиЩоб використовувати вирівняні групи кнопок з <button>
елементами, ви повинні обернути кожну кнопку в групу кнопок . Більшість браузерів неправильно застосовують наш CSS для обґрунтування <button>
елементів, але оскільки ми підтримуємо розкривні списки кнопок, ми можемо це обійти.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Використовуйте будь-яку кнопку, щоб викликати спадне меню, розташувавши його в межах .btn-group
і вказавши правильну розмітку меню.
Випадаючі списки кнопок вимагають, щоб у вашій версії Bootstrap був включений плагін спадного меню .
Перетворіть кнопку на розкривний перемикач із деякими базовими змінами розмітки.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Подібним чином створіть спадні списки розділених кнопок із тими самими змінами розмітки, лише з окремою кнопкою.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Випадаючі списки кнопок працюють із кнопками будь-якого розміру.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Запускайте спадні меню над елементами шляхом додавання .dropup
до батьківського.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Розширте елементи керування форми, додавши текст або кнопки до, після або з обох боків будь-якого текстового <input>
. Використовуйте .input-group
з .input-group-addon
або .input-group-btn
, щоб додавати елементи до одного .form-control
.
<input>
Лише текстовіУникайте використання <select>
елементів тут, оскільки вони не можуть бути повністю стилізовані в браузерах WebKit.
Уникайте використання <textarea>
тут елементів, оскільки їхній rows
атрибут у деяких випадках не поважатиметься.
Під час використання спливаючих підказок або спливаючих елементів для елементів у межах .input-group
, вам доведеться вказати опцію, container: 'body'
щоб уникнути небажаних побічних ефектів (таких як елемент стає ширшим і/або втрачає свої заокруглені кути під час спрацьовування підказки чи спливного вікна).
Не змішуйте групи форм або класи стовпців сітки безпосередньо з групами введення. Натомість вкладіть групу введення всередину групи форми або пов’язаного з сіткою елемента.
Програми зчитування з екрана матимуть проблеми з вашими формами, якщо ви не включите мітку для кожного введення. Для цих груп вводу переконайтеся, що будь-яка додаткова мітка або функція передається до допоміжних технологій.
Точна техніка, яка буде використана (видимі <label>
елементи, <label>
елементи, приховані за допомогою .sr-only
класу, або використання атрибутів aria-label
, aria-labelledby
, aria-describedby
, title
або placeholder
) і яку додаткову інформацію потрібно буде передати, залежатимуть від точного типу віджета інтерфейсу, який ви реалізуєте. Приклади в цьому розділі надають кілька пропонованих підходів до конкретних випадків.
Розмістіть по одному додатку або кнопці з обох боків від входу. Ви також можете розмістити по обидві сторони входу.
Ми не підтримуємо кілька доповнень ( .input-group-addon
або .input-group-btn
) на одній стороні.
Ми не підтримуємо кілька елементів керування формою в одній групі введення.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Додайте до себе відносні класи розміру форми .input-group
, і вміст усередині автоматично змінить розмір — не потрібно повторювати класи розміру керування формою для кожного елемента.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Розмістіть будь-який прапорець або перемикач у аддоні групи введення замість тексту.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Кнопки в групах введення дещо відрізняються і потребують додаткового рівня вкладеності. Замість .input-group-addon
, вам потрібно буде використовувати .input-group-btn
для обертання кнопок. Це потрібно через стандартні стилі веб-переглядача, які не можна змінити.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Хоча ви можете мати лише одне доповнення на кожній стороні, ви можете мати кілька кнопок всередині одного .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Nav, доступні в Bootstrap, мають спільну розмітку, починаючи з базового .nav
класу, а також спільні стани. Поміняйте місцями класи модифікаторів для перемикання між кожним стилем.
Зверніть увагу, що для .nav-tabs
класу потрібен .nav
базовий клас.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Візьміть той самий HTML, але використовуйте .nav-pills
замість нього:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Таблетки також можна укласти вертикально. Просто додайте .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Легко створюйте вкладки або таблетки такої ж ширини, як і їхні батьківські елементи, на екранах із шириною понад 768 пікселів за допомогою .nav-justified
. На менших екранах навігаційні посилання згруповані.
Вирівняні навігаційні посилання на навігаційній панелі наразі не підтримуються.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
.disabled
Для будь-якого навігаційного компонента (вкладки чи таблетки) додайте сірі посилання та відсутність ефектів наведення .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Додайте спадні меню з додатковим кодом HTML і плагіном JavaScript для спадних меню .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Панелі навігації — це адаптивні метакомпоненти, які служать навігаційними заголовками для вашої програми або сайту. Вони починають згортатися (і їх можна перемикати) у мобільних переглядах і стають горизонтальними зі збільшенням доступної ширини вікна перегляду.
Вирівняні навігаційні посилання на навігаційній панелі наразі не підтримуються.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Замініть бренд навігаційної панелі на власне зображення, замінивши текст на <img>
. Оскільки у .navbar-brand
нього є власні відступи та висота, вам може знадобитися змінити деякі CSS залежно від вашого зображення.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Розмістіть вміст форми .navbar-form
для належного вертикального вирівнювання та згорнутої поведінки у вузьких вікнах перегляду. Використовуйте параметри вирівнювання, щоб визначити, де він знаходиться в межах вмісту панелі навігації.
Як хедз-ап, .navbar-form
ділиться більшою частиною свого коду з .form-inline
через mixin. Деякі елементи керування форми, як-от групи введення, можуть вимагати фіксованої ширини, щоб належним чином відображатися на панелі навігації.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Додайте .navbar-btn
клас до <button>
елементів, які не знаходяться в a <form>
, щоб вертикально відцентрувати їх на навігаційній панелі.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Обгортання рядків тексту в елементі з .navbar-text
, як правило, на <p>
тегу для правильного інтервенію та кольору.
<p class="navbar-text">Signed in as Mark Otto</p>
Для людей, які використовують стандартні посилання, які не входять до звичайного навігаційного компонента навігаційної панелі, скористайтеся .navbar-link
класом, щоб додати відповідні кольори для стандартних і інверсних параметрів навігаційної панелі.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Вирівняйте навігаційні посилання, форми, кнопки або текст за допомогою службових класів .navbar-left
або . .navbar-right
Обидва класи додадуть CSS float у вказаному напрямку. Наприклад, щоб вирівняти навігаційні посилання, розмістіть їх окремо <ul>
із застосуванням відповідного класу корисності.
Ці класи є змішаними версіями .pull-left
і .pull-right
, але вони призначені для медіа-запитів для легшої обробки компонентів навігаційної панелі на різних розмірах пристроїв.
Додайте .navbar-fixed-top
та включите .container
або .container-fluid
до центру та додавання вмісту панелі навігації.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Додайте .navbar-fixed-bottom
та включите .container
або .container-fluid
до центру та додавання вмісту панелі навігації.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Створіть навігаційну панель на всю ширину, яка прокручується разом із сторінкою, додавши .navbar-static-top
та включивши .container
або .container-fluid
, щоб відцентрувати та розмістити вміст навігаційної панелі.
На відміну від .navbar-fixed-*
класів, вам не потрібно змінювати відступи на body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Змініть вигляд навігаційної панелі, додавши .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Укажіть розташування поточної сторінки в навігаційній ієрархії.
Роздільники автоматично додаються в CSS через :before
і content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Надайте посилання на розбивку сторінок для свого сайту чи програми за допомогою компонента розбиття на багато сторінок або простішої альтернативи пейджера .
Просте розбиття сторінок на основі Rdio, чудове для додатків і результатів пошуку. Великий блок важко помітити, він легко масштабується та забезпечує великі області натискання.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Компонент розбиття на сторінки має бути загорнутий в <nav>
елемент, щоб ідентифікувати його як розділ навігації для програм зчитування з екрана та інших допоміжних технологій. Крім того, оскільки сторінка, імовірно, уже має більше одного такого розділу навігації (наприклад, основна навігація в заголовку або навігація на бічній панелі), доцільно надати опис aria-label
, <nav>
який відображає її призначення. Наприклад, якщо компонент розбиття на сторінки використовується для навігації між набором результатів пошуку, відповідною міткою може бути aria-label="Search results pages"
.
Посилання можна налаштувати для різних обставин. Використовуйте .disabled
для неактивних посилань і .active
для позначення поточної сторінки.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
Ми рекомендуємо замінити активні чи вимкнені прив’язки на <span>
, або опустити прив’язку у випадку попередніх/наступних стрілок, щоб видалити функцію клацання, зберігаючи заплановані стилі.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Бажаєте збільшити чи зменшити сторінки? Додати .pagination-lg
або .pagination-sm
для додаткових розмірів.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Швидкі попередні та наступні посилання для простого розбиття на сторінки з легкою розміткою та стилями. Це чудово підходить для простих сайтів, таких як блоги чи журнали.
За замовчуванням пейджер центрує посилання.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Крім того, ви можете вирівняти кожне посилання по сторонах:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Посилання на пейджер також використовують загальний .disabled
корисний клас із пагінації.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Додайте будь-який із наведених нижче класів модифікаторів, щоб змінити зовнішній вигляд мітки.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Проблеми з візуалізацією можуть виникнути, якщо у вас є десятки вбудованих міток у вузькому контейнері, кожна з яких містить свій власний inline-block
елемент (наприклад, значок). Спосіб обійти це налаштування display: inline-block;
. Для контексту та прикладу див. #13219 .
Легко виділяйте нові або непрочитані елементи, додаючи <span class="badge">
до посилань, навігацій Bootstrap тощо.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Якщо немає нових або непрочитаних елементів, значки просто згорнуться (через :empty
селектор CSS), якщо в них немає вмісту.
Значки не згортаються самостійно в Internet Explorer 8, оскільки він не підтримує :empty
селектор.
Вбудовані стилі включені для розміщення значків у активних станах у навігації таблеток.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Легкий, гнучкий компонент, який за бажанням може розширити всю область перегляду, щоб продемонструвати ключовий вміст вашого сайту.
Це простий герой, простий компонент у стилі jumbotron для привернення додаткової уваги до рекомендованого вмісту чи інформації.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Щоб зробити jumbotron повної ширини та без заокруглених кутів, розмістіть його за межами всіх .container
s і натомість додайте .container
всередині.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Проста оболонка для h1
відповідного розподілу та сегментації розділів вмісту на сторінці. Він може використовувати елемент h1
за замовчуванням small
, а також більшість інших компонентів (з додатковими стилями).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Розширте систему сіток Bootstrap за допомогою компонента мініатюр, щоб легко відображати сітки зображень, відео, тексту тощо.
Якщо ви шукаєте презентацію мініатюр різної висоти та/або ширини, подібну до Pinterest, вам знадобиться використовувати сторонній плагін, наприклад Masonry , Isotope або Salvattore .
За замовчуванням мініатюри Bootstrap створені для демонстрації пов’язаних зображень із мінімальною необхідною розміткою.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
За допомогою додаткової розмітки можна додавати до мініатюр будь-який вміст HTML, як-от заголовки, абзаци чи кнопки.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Надайте контекстні повідомлення зворотного зв’язку для типових дій користувача за допомогою кількох доступних і гнучких повідомлень попереджень.
Перенести будь-який текст і необов’язкову кнопку відхилення в .alert
один із чотирьох контекстних класів (наприклад, .alert-success
) для базових повідомлень попередження.
Сповіщення не мають класів за замовчуванням, лише базові класи та класи-модифікатори. Стандартне сіре сповіщення не має особливого сенсу, тому вам потрібно вказати тип через контекстний клас. Виберіть успіх, інформацію, попередження або небезпеку.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Створіть будь-яке сповіщення, додавши необов’язкову .alert-dismissible
кнопку закриття.
Для повноцінного функціонування сповіщень, які можна відхилити, необхідно використовувати плагін JavaScript для сповіщень .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Обов’язково використовуйте <button>
елемент з data-dismiss="alert"
атрибутом data.
Використовуйте .alert-link
клас утиліти, щоб швидко надати відповідні кольорові посилання в будь-якому сповіщенні.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Надайте актуальний відгук про перебіг робочого процесу або дії за допомогою простих, але гнучких індикаторів виконання.
Індикатори прогресу використовують переходи та анімацію CSS3 для досягнення певних ефектів. Ці функції не підтримуються в Internet Explorer 9 і нижче або старіших версіях Firefox. Opera 12 не підтримує анімацію.
Якщо на вашому веб-сайті є політика безпеки вмісту (CSP) , яка не дозволяє style-src 'unsafe-inline'
, ви не зможете використовувати вбудовані style
атрибути для встановлення ширини панелі виконання, як показано в наших прикладах нижче. Альтернативні методи встановлення ширини, які сумісні зі строгими CSP, включають використання невеликого спеціального JavaScript (який встановлює element.style.width
) або використання спеціальних класів CSS.
Індикатор прогресу за умовчанням.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Щоб відобразити видимий відсоток , видаліть клас <span>
із .sr-only
панелі прогресу.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Щоб переконатися, що текст мітки залишається розбірливим навіть при низьких відсотках, подумайте про додавання min-width
до панелі виконання.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
Індикатори виконання використовують деякі з однакових класів кнопок і сповіщень для узгоджених стилів.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Використовує градієнт для створення смугастого ефекту. Недоступно в IE9 і нижче.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Додайте .active
для .progress-bar-striped
анімації смуг справа наліво. Недоступно в IE9 і нижче.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Помістіть кілька брусків в одне .progress
ціле, щоб скласти їх.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Стилі абстрактних об’єктів для створення різних типів компонентів (наприклад, коментарів до блогу, твітів тощо), які містять зображення, вирівняне за лівим або правим краєм, поряд з текстовим вмістом.
За замовчуванням медіа-об’єкт (зображення, відео, аудіо) відображається ліворуч або праворуч від блоку вмісту.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Класи .pull-left
і .pull-right
також існують і раніше використовувалися як частина медіа-компонента, але вони застаріли для такого використання, починаючи з версії 3.3.0. Вони приблизно еквівалентні .media-left
та .media-right
, за винятком того, що .media-right
слід розміщувати після .media-body
в html.
Зображення або інші носії можна вирівняти зверху, посередині або знизу. За умовчанням вирівняно по верхньому краю.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
Додавши трохи додаткової розмітки, ви можете використовувати медіа-внутрішній список (корисно для потоків коментарів або списків статей).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Групи списків — це гнучкий і потужний компонент для відображення не лише простих списків елементів, а й складних із настроюваним вмістом.
Найпростіша група списків — це просто невпорядкований список із елементами списку та відповідними класами. Розвивайте його за допомогою наведених нижче параметрів або власного CSS за потреби.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Додайте компонент значків до будь-якого елемента групи списку, і він автоматично розміститься праворуч.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Пов’яжіть елементи групи списку за допомогою тегів прив’язки замість елементів списку (це також означає батьківський <div>
елемент замість <ul>
). Немає необхідності в окремих батьках навколо кожного елемента.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Елементи групи списку можуть бути кнопками замість елементів списку (це також означає батьківський <div>
елемент замість <ul>
). Немає необхідності в окремих батьках навколо кожного елемента. Не використовуйте тут стандартні .btn
класи.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Додайте .disabled
до a .list-group-item
, щоб зробити його сірим і відображатися вимкненим.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Використовуйте контекстні класи для стилізації елементів списку, типових або пов’язаних. Також включає .active
держ.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Додайте майже будь-який HTML-код, навіть для пов’язаних груп списків, як наведений нижче.
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Хоча це не завжди необхідно, іноді вам потрібно помістити свій DOM у коробку. Для таких ситуацій спробуйте компонент панелі.
За замовчуванням все, що потрібно зробити .panel
, це застосувати деякі базові рамки та відступи, щоб вміст певного вмісту.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Легко додайте контейнер заголовків на свою панель за допомогою .panel-heading
. Ви також можете включити будь -який <h1>
- <h6>
із .panel-title
класом, щоб додати попередньо стилізований заголовок. Однак розмір шрифту <h1>
- <h6>
замінюється на .panel-heading
.
Для правильного фарбування посилань обов’язково розміщуйте посилання в заголовках у межах .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 title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Перенесення кнопок або другорядного тексту в .panel-footer
. Зауважте, що нижні колонтитули панелей не успадковують кольори та межі під час використання контекстних варіантів, оскільки вони не призначені для розміщення на передньому плані.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Як і інші компоненти, можна легко зробити панель більш значущою для певного контексту, додавши будь-який із класів контекстного стану.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Додайте будь-які рамки .table
всередині панелі для бездоганного дизайну. Якщо є .panel-body
, ми додаємо додаткову рамку у верхній частині таблиці для розділення.
Деякий вміст панелі за замовчуванням тут. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | Ім'я | Прізвище | Ім'я користувача |
---|---|---|---|
1 | Марк | Отто | @mdo |
2 | Яків | Торнтон | @жирний |
3 | Ларрі | птах |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Якщо немає тіла панелі, компонент переміщується з заголовка панелі в таблицю без перерви.
# | Ім'я | Прізвище | Ім'я користувача |
---|---|---|---|
1 | Марк | Отто | @mdo |
2 | Яків | Торнтон | @жирний |
3 | Ларрі | птах |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Легко включайте групи списків повної ширини в будь-яку панель.
Деякий вміст панелі за замовчуванням тут. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Дозвольте браузерам визначати розміри відео чи слайд-шоу на основі ширини блоку, що містить їх, створивши власне співвідношення, яке правильно масштабуватиметься на будь-якому пристрої.
Правила застосовуються безпосередньо до елементів <iframe>
, <embed>
, <video>
і ; <object>
необов’язково використовуйте явний клас-нащадок, .embed-responsive-item
якщо ви хочете відповідати стилю для інших атрибутів.
Професійна порада! Вам не потрібно включати frameborder="0"
в <iframe>
s, оскільки ми замінюємо це для вас.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Використовуйте свердловину як простий ефект на елементі, щоб надати йому ефекту вставки.
<div class="well">...</div>
Керуйте відступами та закругленими кутами за допомогою двох додаткових класів модифікаторів.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>