Подключение бутстрап – Bootstrap 3 · Основы Bootstrap, как загрузить Bootstrap, поддерживаемые браузеры и устройства — Вебджем.рф

Содержание

Введение. Начало работы · Bootstrap

Начните работу с Bootstrap, самым популярным в мире фреймворком для создания быстродействующих мобильных сайтов с BootstrapCDN и шаблонами стартовой страницы.

Быстрый старт

Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.

CSS

Скопируйте и вставьте часть кода <link> в свой <head> перед всеми другими таблицами стилей, чтобы загрузить наш CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS

Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода

<script> в конце страниц, прямо перед закрывающим </body>. Сперва jQuery , потом Popper.js, потом наши.

Мы используем мини-сборку jQuery, но и полную можно использовать.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.

Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают в себя Popper, но не jQuery. Для получения дополнительной информации о том, что входит в Bootstrap, пожалуйста, смотрите наш раздел содержание.

Показать компоненты, требующие JavaScript

Уведомления отмены
Кнопки изменения состояний и чекбоксов/»радио»
Карусель для поведения «слайд», элементы контроля и индикаторы
Коллапс для изменения видимости содержимого
Выпадающие элементы для отображения и расположения (также требует Popper.js)
Модальные окна для отображения, расположения и создания поведения прокрутки

Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
Отслеживание прокрутки и обновления навигации

Начальный шаблон страницы

Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Это все, что вам нужно из общих требований к странице. Посетите Обзорный раздел или наши официальные примеры для создания контента и компонентов вашего сайта.

Важные глобальные атрибуты

Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.

HTML5 doctype

Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

«Отзывчивый» мета-тэг

Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах.

Вставьте этот кусок кода в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Вы можете посмотреть пример этого в действии на странице starter template.

Размер ширины и высоты элемента

Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box. Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.

В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:

.selector-for-some-widget {
  box-sizing: content-box;
}

С использованием фрагмента кода, приведенного выше, вложенные элементы – включая сгенерированный через

:before и :after контент – будут все наследовать заданный box-sizing для класса .selector-for-some-widget.

Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.

Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:

@getbootstrap on Twitter.
The Official Bootstrap Blog.
the official Slack room.
Чат с камрадами по Bootstrap. Канал ##bootstrap на сервере irc.freenode.net.
Помощь в реализации Bootstrap 4 на Stackoverflow bootstrap-4).
При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово bootstrap в своих пакетах и библиотеках для максимальной видимости.

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.

Содержание. Начало работы · Bootstrap

Узнайте, что включено в Bootstrap, включая наши скомпилированные и исходные коды. Помните, что для плагинов JavaScript Bootstrap’у требуется jQuery.

Предварительно компилированный Bootstrap

Строение скачанного архива BS4 будет таким:

bootstrap/
+-- css/
¦   +-- bootstrap-grid.css
¦   +-- bootstrap-grid.css.map
¦   +-- bootstrap-grid.min.css
¦   +-- bootstrap-grid.min.css.map
¦   +-- bootstrap-reboot.css
¦   +-- bootstrap-reboot.css.map
¦   +-- bootstrap-reboot.min.css
¦   +-- bootstrap-reboot.min.css.map
¦   +-- bootstrap.css
¦   +-- bootstrap.css.map
¦   +-- bootstrap.min.css
¦   L-- bootstrap.min.css.map
L-- js/
    +-- bootstrap.bundle.js
    +-- bootstrap.bundle.js.map
    +-- bootstrap.bundle.min.js
    +-- bootstrap.bundle.min.js.map
    +-- bootstrap.js
    +-- bootstrap.js.map
    +-- bootstrap.min.js
    L-- bootstrap.min.js.map

Это базовая форма Bootstrap: перекомпилированные файлы для быстрого подключения в почти любой веб-проект. Доступны: компилированные файлы CSS и JS (bootstrap.*), как и компилированные «облегченные» файлы (bootstrap.min.*). Карты исходного кода CSS (bootstrap.*.map) доступны для использования лишь с определенными инструментами разработчика в браузере. Связанные JS-файлы (bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js

) включают Popper, но не jQuery.

Кодовые карты дают независимый от языка способ показа соответствия рабочего кода и исходных кодов (sources), написанных вами при разработке.

Файлы СSS

Bootstrap включает несколько параметров для подключения всех ваших компилированных CSS.

CSS файлы Разметка Содержание Компоненты Утилиты

CSS файлы	Разметка	Содержание	Компоненты	Утилиты
`bootstrap.css` `bootstrap.min.css`	Включены	Включены	Включены	Включены
`bootstrap-grid.css` `bootstrap-grid.min.css`	Только Система сеток	Не включены	Не включены	Только flex утилиты
`bootstrap-reboot.css` `bootstrap-reboot.min.css`	Не включены	Только Reboot	Не включены	Не включены

bootstrap.css

bootstrap.min.css

Включены

bootstrap-grid.css

bootstrap-grid.min.css

Только Система сеток

Не включены

Только flex утилиты

bootstrap-reboot.css

bootstrap-reboot.min.css

Не включены

Только Reboot

Не включены

Файлы JS

Аналогично имеются параметры для подключения всех или некоторых компилированных файлов JavaScript.

JS-файлы Popper jQuery

JS-файлы	Popper	jQuery
`bootstrap.bundle.js` `bootstrap.bundle.min.js`	Включены	Не включены
`bootstrap.js` `bootstrap.min.js`	Не включены	Не включены

bootstrap.bundle.js

bootstrap.bundle.min.js

Включены

Не включены

bootstrap.js

bootstrap.min.js

Не включены

Исходный код Bootstrap

Загрузка исходного кода Bootstrap включает в себя предварительно скомпилированные ресурсы CSS и JavaScript, а также исходный код Sass, JavaScript и документацию. Если быть более точным, сюда входит следующее:

bootstrap/
+-- dist/
¦   +-- css/
¦   L-- js/
+-- site/
¦   L--docs/
¦      L-- 4.4/
¦          L-- examples/
+-- js/
L-- scss/

В папках scss/ и js/ лежат исходники нашего CSS и JS. Папка dist/ содержит всё перечисленное в параграфе Precompiled Bootstrap выше. Папка docs/ лежит исходный код документации, и содержит папку examples/ — примеры использования Bootstrap. Помимо этого, любой другой подключенный файл нужен для поддержки пакетов, содержит информацию о лицензии и разработке.

Содержание. Начало работы · Bootstrap. Версия v4.2.1

Предварительно компилированный Bootstrap

Строение скачанного архива BS4 будет таким:

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

Файлы СSS

Bootstrap включает несколько параметров для подключения всех ваших компилированных CSS.

CSS файлы Разметка Содержание Компоненты Утилиты

CSS файлы	Разметка	Содержание	Компоненты	Утилиты
`bootstrap.css` `bootstrap.min.css`	Включены	Включены	Включены	Включены
`bootstrap-grid.css` `bootstrap-grid.min.css`	Только Система сеток	Не включены	Не включены	Только flex утилиты
`bootstrap-reboot.css` `bootstrap-reboot.min.css`	Не включены	Только Reboot	Не включены	Не включены

bootstrap.css

bootstrap.min.css

Включены

bootstrap-grid.css

bootstrap-grid.min.css

Только Система сеток

Не включены

Только flex утилиты

bootstrap-reboot.css

bootstrap-reboot.min.css

Не включены

Только Reboot

Не включены

Файлы JS

Аналогично имеются параметры для подключения всех или некоторых компилированных файлов JavaScript.

JS-файлы Popper jQuery

JS-файлы	Popper	jQuery
`bootstrap.bundle.js` `bootstrap.bundle.min.js`	Включены	Не включены
`bootstrap.js` `bootstrap.min.js`	Не включены	Не включены

bootstrap.bundle.js

bootstrap.bundle.min.js

Включены

Не включены

bootstrap.js

bootstrap.min.js

Не включены

Исходный код Bootstrap

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──docs/
│      └── 4.2/
│          └── examples/
├── js/
└── scss/

Информеры. Компоненты · Bootstrap. Версия v4.0.0

Документация и примеры добавления всплывающих подсказок Bootstrap, подобных тем, которые находятся в iOS, к любому элементу вашего сайта.

Обзор

Вот что надо знать для эффективного использования плагина всплывающих элементов (поповеров):

Таковой плагин использует для позиционирования 3-ю часть библиотеки Popper.js. Чтобы плагин работал, Вы должны подключать popper.min.js ПЕРЕД bootstrap.js, или использовать bootstrap.bundle.min.js / bootstrap.bundle.js – содержащие Popper.js!
Поповеры требуют плагина всплывающих подсказок в качестве зависимости.
Если вы подключаете ваш JavaScript в виде файла, вам потребуется util.js.
Поповеры не подключены по умолчанию по причинам производительности, так что вы должны инициализировать их самостоятельно.
Для работы плагина значения title and content не должны быть нулевыми.
Задавайте container: 'body' для избегания проблем с отрисовкой в более сложных компонентах (таких как группы ввода, кнопок, т.д.)
Запуск поповеров на скрытых элементах не работает.
Поповеры для элементов класса .disabled or disabled должны запускаться на «оборачивающем» элементе.
Когда поповеры запущены из ссылок, которые оборачивают множественные строки, всплывающие элементы будут центрироваться по общей ширине ссылок. Используйте white-space: nowrap; в ваших <a>, чтобы избежать этого.
Поповеры должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.

Ниже несколько примеров.

Пример: включайте поповеры везде

Один из способов инициализации всех поповеров на странице – выбрать их по атрибутам data-toggle:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Пример: использование параметра `container`

Когда у вас есть некие стили родительского элемента, которые взаимодействуют с поповером, вам потребуется создать обычный container — так, чтобы HTML ВЭ появлялся внутри того элемента.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Пример

Click to toggle popover

<button type="button" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Четыре направления

Четыре параметра выравнивания доступны: верх, право, низ, лево.

Popover on top Popover on right Popover on bottom Popover on left

<button type="button" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Отмена по клику

Используйте триггер focus для закрытия поповеров по клику на другом элементе или вне поповера.

Для такого поведения нужна специальная разметка

Для правильного кросс-браузерного и кросс-платформенного поведения, описанного в «Отмене по клику» выше – надо использовать не тэг <button>, а <a>, также вы можете подключить атрибут tabindex.

<a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

Отключение элементов

Неактивные элементы с атрибутом disabled не являются интерактивными, т.е. юзеры не могут кликать на них для вызова поповера (или всплывающей подсказки) и по наведению их стиль не изменится. Как один из «обходных способов» — можно запустить поповер из оборачивающего элемента <div> или <span> и «преодолеть» событие pointer-events дезактивированных элементов.

Для дезактивированных элементов-триггеров поповеров также можно задать data-trigger="hover", что заставит поповер визуально «откликаться» на наведение, т.к. юзеры могут и не захотеть кликнуть на дезактивированный элемент.

Disabled button

<span data-toggle="popover" data-content="Disabled popover">
  <button type="button" disabled>Disabled button</button>
</span>

Использование

Активируйте поповеры через JavaScript:

$('#example').popover(options)

Параметры

Параметры можно передавать через атрибуты или JS. В случае атрибутов добавляйте нужное название к data-, как в data-animation="".

Название	Тип	По умолчанию	Описание
animation	boolean	true	Применяет CSS переход «угасание» к поповеру.
container	string \| element \| false	false	Добавляет поповер к элементу. Пример: `container: 'body'`. Этот параметр в частности позволяет позиционировать поповер в «потоке документа» рядом с элементом-триггером – что предотвратит «уплывание» поповера при изменении размера экрана.
content	string \| element \| function	»	Дефолтное значение содержимого, если атрибут `data-content` не существует. Если функция задана, этот параметр будет вызван к элементу, к которому прикреклен поповер, ее экземпляром `this`.
delay	number \| object	0	Откладывает показ и скрытие поповера (милисекунды) – не применяется к типу «триггер вручную». Если число задано, отсрочка применяется и к показу, и к скрытию. Структура объекта такова: `delay: { "show": 500, "hide": 100 }`.
html	boolean	false	Вводит HTML-код в поповер. Если «false», для вставки контента в DOM будет использован `текстовый` метод jQuery. Используйте, если вы беспокоитесь насчет XSS-атак.
placement	string \| function	‘right’	Позволяет позиционировать поповер – авто \| верх \| низ \| лево \| право. Когда `auto` — динамически переориентирует поповер. Когда функция используется для определения расположения, она вызывается «узлом» поповера в DOM, который выступает как первый аргумент, и запускающий элемент «узла» DOM – как второй. Контекст `this` задается экземпляру поповера.
selector	string \| false	false	Если селектор задан, объекты поповера будут «делегированы» определенным «целям». На практике это используется для активации возможности добавления поповеров в динамическое содержимое HTML. Смотри сюда и сюда.
template	string	`'<div role="tooltip"><div></div><h4></h4><div></div></div>'`	Обычный HTML для использования при создании поповера. `title` поповера будет введен в класс `.popover-header`. `content` поповера будет введен в класс `.popover-body`. `.arrow` станет «стрелочкой» поповера. Элемент, куда обернуты все остальные – должен иметь класс `.popover`.
title	string \| element \| function	»	Дефолтное название, если `title` не задан. Если функция задана, этот параметр будет вызван к элементу, к которому прикреклен поповер, ее экземпляром `this`.
trigger	string	‘click’	Задает то, как поповер вызывается — клик \| hover \| focus \| вручную. Вы можете передать множественные триггеры: разделите их пробелом. «Вручную» (manual) нельзя сочетать с прочими.
offset	number \| string	0	Отступ поповера относитеьлно его «цели». Для информации идите обратитесь к документам по отступам в Popper.js.
fallbackPlacement	string \| array	‘flip’	Позволяет задать, на какой позиции Popper встанет при откате. Для информации — сюда.
boundary	string \| element	‘scrollParent’	Ограничивает отображение границ поповера, если он целиком не помещается и выходит за область заданных размеров. Принимает значения `'viewport'`, `'window'`, `'scrollParent'`, или отсылку к элементу HTML (через JavaScript). Для информации – документы по предотвращению Оверфлоу.

Атрибуты для индивидуальных поповеров

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

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Смотрите документацию JavaScript для информации.

`$().popover(options)`

Инициализирует поповеры для коллекции элементов.

`.popover('show')`

Выявляет поповер элемента. Возвращается к функции-вызову до того, как поповер показан (т.е. до того, как произойдет событие shown.bs.popover). Расценивается как «ручной» запуск поповера. Поповеры, чьи название и содержимое есть значения нулевой длины – никогда не отображаются.

$('#element').popover('show')

`.popover('hide')`

Скрывает поповер элемента. Возвращается к функции-вызову до того, как модальный элемент скрыт. (т.е. до того, как произойдет событие hidden.bs.popover). Расценивается как «ручной» запуск поповера.

$('#element').popover('hide')

`.popover('toggle')`

Изменяет состояние поповера. Возвращается к функции-вызову до того, как модальный элемент скрыт. (т.е. до того, как произойдут события shown.bs.popover или hidden.bs.popover). Расценивается как «ручной» запуск поповера.

$('#element').popover('toggle')

`.popover('dispose')`

Скрывает и уничтожает поповер элемента. Поповеры, которые используют делегирование (т.е. которые созданы параметром селектора), не могут быть уничтожены по одному из нижестоящих элементов-триггеров.

$('#element').popover('dispose')

`.popover('enable')`

Дает поповеру элемента возможность быть показанным. Поповеры включены по умолчанию.

$('#element').popover('enable')

`.popover('disable')`

Удаляет у поповера элемента возможность быть показанным. Поповер будет иметь возможность показанным лишь если он пере-включен.

$('#element').popover('disable')

`.popover('toggleEnabled')`

Переключает возможность поповера элемента быть показанным или скрытым.

$('#element').popover('toggleEnabled')

`.popover('update')`

Обновляет позицию поповера элемента.

$('#element').popover('update')

События

Тип события	Описание
show.bs.popover	Это событие наступает немедленно, когда вызван экземпляр метода `show`.
shown.bs.popover	Это событие наступает, когда поповер только что сделан видимым юзеру (будет ждать завершения переходов CSS).
hide.bs.popover	Это событие наступает немедленно, когда только что вызван экземпляр метода `hide`.
hidden.bs.popover	Это событие наступает, когда поповер только что перестал быть скрытым от юзера (будет ждать завершения переходов CSS).
inserted.bs.popover	Это событие наступает после события `show.bs.popover`, когда шаблон поповера только что добавлен в DOM.

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Компоненты. Документация Bootstrap 3.3.7

Доступные символы

Включает в себя более 250 символов в формате шрифта из Glyphicon Полурослики набор. Значки символов Халфлинги, как правило, не предоставляются бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. В качестве благодарности, мы только просим, чтобы вы включили ссылку на Значки символов при любой возможности.

Как использовать

Для повышения производительности, все иконы требуют базового класса и отдельных иконка класса. Для использования, поместите следующий код в любом месте. Не забудьте оставить пространство между иконка и текст для надлежащего внутренний отступ.

Не смешивайте с другими компонентами

Классы значков не могут сочетаться с другими элементами. Они спроектированы, чтобы быть отдельными элементами. Вместо этого добавте <span> и применить значок классов <span>

Только для пустых элементов

Классы Иконок следует использовать только на элементах, которые не содержат текстовое содержимое и не имеют дочерние элементы.

Изменение местоположения значка шрифта

Bootstrap предполагает значок файлов шрифтов будет располагаться в ../fonts/ каталог, по сравнению с скомпилированных файлов CSS. Перемещение и переименование этих файлов шрифтов означает обновление CSS в одном из трех способов:

Изменить @icon-font-path and/или @icon-font-name переменные в источнике малых файлов.
Использование опции относительно URL-адреса тем меньше обеспечивается компилятора.
Изменить url() пути в составленном CSS.

Используйте все, что вариант лучше всего подходит вашей конкретной установки развития.

Доступно иконки

Современные версии ассистивных технологий объявит CSS Контента, а также специальные символы Unicode. Чтобы избежать непредвиденных и запутанных выхода в программы чтения с экрана (в частности, при иконки используется чисто для декора), то скрыть их с атрибутом aria-hidden="true".

Если вы используете иконка, чтобы передать смысл (а не только как декоративный элемент), убедитесь, что это значение также передал вспомогательные технологии – например, включать дополнительный контент, визуально скрыты с .sr-only класс.

Если вы создаете элементы другого текста (например, <button>, который только содержит иконка), Вы всегда должны предоставить альтернативный контент, чтобы определить цель контроля, так что будет иметь смысл для пользователей вспомогательных технологий. В этом случае, можно добавить aria-label атрибут на себя управление.

<span aria-hidden="true"></span>

Примеры

Используйте их в кнопках, группах кнопок для панели инструментов, панели навигации, или в приставках элементов формы.

<button type="button" aria-label="Left Align">
  <span aria-hidden="true"></span>
</button>

<button type="button">
  <span aria-hidden="true"></span> Star
</button>

В иконка используется в предупреждение передать, что это сообщение об ошибке, с дополнительным .sr-only текст, чтобы передать эту подсказку для пользователей вспомогательных технологий.

Error: Enter a valid email address

<div role="alert">
  <span aria-hidden="true"></span>
  <span>Error:</span>
  Enter a valid email address
</div>

Переключаемое, контекстное меню для отображения списка ссылок. Их интерактивность обеспечивается JavaScript плагином для dropdown меню.

Пример

Оберните кнопку выпадающего меню и список с помощью класса .dropdown или другого элемента, который объявляет position: relative;.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span></span>
  </button>
  <ul 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"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Выпадающие меню могут быть изменены, чтобы расширить вверх (а не вниз), добавив .dropup родителю.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span></span>
  </button>
  <ul 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"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Выравнивание

По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

Может потребоваться дополнительное позиционирование

Dropdowns автоматически позиционируется с помощью CSS в пределах нормального потока документа. Это означает, что выпадающее меню может быть обрезано родителями с определенными свойствами overflow или появляются за пределми области просмотра. Адресуйте эти вопросы по своему усмотрению, когда они возникают.

`.pull-right` устаревшее выравнивание

В версии 3.1, мы определили устаревшим выравнивание .pull-right для выпадающего меню. Для выравнивания меню справа, используйте .dropdown-menu-right. Компоненты, выровненные справа в навигационной панели используют реализован версию класса right-aligned, для автоматического выравнивания меню. Для переопределения их, используйте .dropdown-menu-left.

<ul aria-labelledby="dLabel">
  ...
</ul>

Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.

<ul aria-labelledby="dropdownMenu3">
  ...
  <li>Dropdown header</li>
  ...
</ul>

Делитель

Добавить разделитель для разделения ряда ссылок в выпадающем меню.

<ul aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator"></li>
  ...
</ul>

Заблокированы части меню

Добавьте .disabled к <li> в выпадающем списке, чтобы отключить ссылку.

<ul aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Сгруппируйте серию кнопок вместе в одну линию, создав таким образом групповую кнопку. С помощью JavaScript и нашего плагина кнопок, можно еще добавить стиль поведения переключателей или галочек (checkbox).

Обеспечить правильное `role` и укажите метку

Для того, для вспомогательных технологий, таких как программы чтения с экрана – донести, что ряд кнопок сгруппированы, соответствующий role атрибут должен быть обеспечен. Для группы кнопок, это будет role="group", в то время как панели инструментов должны иметь role="toolbar".

Одно исключение-это группы, которые содержат только один элемент управления (например, оправдано группы кнопок с <button> элементами) или выпадающий.

Кроме того, группы и панели инструментов должны иметь четкие этикетки, как и большинство технологий, иначе не озвучить их, несмотря на наличие правильно role атрибута. В примерах, приведенных здесь, мы используем aria-label, но альтернативы, такие как aria-labelledby, также можно использовать.

Основной пример

Оберните серию кнопок с классом .btn класс .btn-group.

<div role="group" aria-label="...">
  <button type="button">Left</button>
  <button type="button">Middle</button>
  <button type="button">Right</button>
</div>

Объедините набор <div> с помощью <div> для более сложных компонентов.

<div role="toolbar" aria-label="...">
  <div role="group" aria-label="...">...</div>
  <div role="group" aria-label="...">...</div>
  <div role="group" aria-label="...">...</div>
</div>

Изменение размера

Вместо применения кнопки классы размеров для каждой кнопки в группе, просто добавьте .btn-group-* друг .btn-group, в том числе для вложения нескольких групп.

Left Middle Right

<div role="group" aria-label="...">...</div>
<div role="group" aria-label="...">...</div>
<div role="group" aria-label="...">...</div>
<div role="group" aria-label="...">...</div>

Вложенность

Разместите .btn-group в середине другой .btn-group, если вы хотите совместить выпадающее меню с серией кнопок.

<div role="group" aria-label="...">
  <button type="button">1</button>
  <button type="button">2</button>

  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span></span>
    </button>
    <ul>
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Вертикальные вариации

Сделайте набор кнопок, составленных вертикально, а не горизонтально. Split кнопки выпадающего меню не поддерживаются.

Button Button Button Button

<div role="group" aria-label="...">
  ...
</div>

Группа кнопок Justified

Создавайте группы кнопок, растянуты на всю ширину их родительского элемента. Также рассмотрите вариант с кнопкой в выпадающем меню внутри группы кнопок.

Обработка рамок

Из-за специфических HTML и CSS, используемой для обоснования кнопок (а именно display: table-cell), границы между которыми удвоятся. В регулярных группах кнопок, margin-left: -1px используется для стека границ вместо удаления их. Впрочем, margin не работает с display: table-cell. В результате этого, в зависимости от ваших настроек в Bootstrap, вы можете удалить или повторно изменить цвет рамок.

IE8 и рамки

Internet Explorer 8 не оказывает границы на кнопках в обоснованной группе кнопок, будь то на <a> или <button> елементах. Чтобы избежать этого, обернуть каждую кнопку в другую .btn-group.

Смотрите #12476 для подробной информации.

С `<a>` элементами

Просто заключите серию .btn в .btn-group.btn-group-justified.

<div role="group" aria-label="...">
  ...
</div>

Ссылки действуя как кнопки

Если <a> элементы используются в качестве кнопки запуска на странице функциональность, вместо того, чтобы переходить на другой документ или раздел в пределах текущей страницы – они также должны быть даны соответствующие role="button".

С `<button>` элементами

Для использования групп кнопок по ширине с элементами <button>, вы должны заключить каждую кнопку в группу кнопок. Большинство браузеров не правильно применяют наш CSS для обоснования, элемента <button>, но так как мы поддерживаем кнопки выпадающего меню, мы можем обойти это

<div role="group" aria-label="...">
  <div role="group">
    <button type="button">Left</button>
  </div>
  <div role="group">
    <button type="button">Middle</button>
  </div>
  <div role="group">
    <button type="button">Right</button>
  </div>
</div>

Используйте любую кнопку для выпадающего меню разместив ее в .btn-group, и обеспечив ее правильно-размеченным меню.

Одиночная кнопка выпадающего меню

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

<!-- Одна кнопка -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span></span>
  </button>
  <ul>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Split кнопка с выпадающим меню

Аналогично, создайте split кнопку c выпадающим меню с такими же изменениями в разметки, только с разделенной кнопкой.

<!-- Раздельная кнопка -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span></span>
    <span>Toggle Dropdown</span>
  </button>
  <ul>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Изменение размера

Кнопки в выпадающем меню могут иметь любой размер.

<!-- Большая группа кнопок -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span></span>
  </button>
  <ul>
    ...
  </ul>
</div>

<!-- Малая группа кнопок -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span></span>
  </button>
  <ul>
    ...
  </ul>
</div>

<!-- Очень малая группа кнопок -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span></span>
  </button>
  <ul>
    ...
  </ul>
</div>

Вариант списка сверху

Создайте меню, элементы которого поднимаются вверх, прибавив .dropup к родительскому контейнеру.

<div>
  <button type="button">Dropup</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span></span>
    <span>Toggle Dropdown</span>
  </button>
  <ul>
    <!-- Ссылки выпадающего меню -->
  </ul>
</div>

Продлить элементов управления формы, добавляя текст или кнопки до, после или с обеих сторон в любом текстовом <input>. Используйте .input-group С .input-group-addon или .input-group-btn добавлять или добавлять элементы к одному .form-control.

Текстовое `<input>` только

В данном случае избегайте использования элементов <select>, поскольку они в полной мере не могут стилизоваться в WebKit браузерах.

Избегайте использования <textarea> элементы вот как их rows атрибута не будут уважать в некоторых случаях.

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

Когда используете подсказки или информеры (popovers) на элементах в пределах .input-group, вам необходимо определить параметр container: 'body', для избежания нежелательных побочных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов при вызове подсказок или информеров).

Не смешивайте с другими компонентами

Не смешивайте группы форм или классы столбцов разметки непосредственно с группами ввода. Вместо этого, внедрите группу ввода внутри группы формы или связанной разметки с элементом.

Всегда добавляйте ярлыки

Программы чтения с экрана будут иметь проблемы со своими формами если Вы не включите метки для каждого входа. Для этих входных групп, убедитесь, что каких-либо дополнительных надписей или функциональности передается вспомогательных технологий.

Точный метод будет использоваться (видимых <label> элементы <label> элементы скрыты с помощью .sr-only класса, или использование aria-label, aria-labelledby, aria-describedby, title или placeholder атрибут) и какие дополнительные сведения должны быть доведены будет варьироваться в зависимости от типа интерфейса виджета вы реализуете. Примеры в этом разделе представлено несколько рекомендаций, конкретных подходов.

Основной пример

Поместите дополнительный компонент или кнопку по обе стороны от ввода. Вы также можете разместить один с обеих сторон.

Мы не поддерживаем несколько дополнений (.input-group-addon или .input-group-btn) на одной стороне.

Мы не поддерживаем несколько form-control в одной группе ввода.

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div>
  <input type="text" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span>@example.com</span>
</div>

<div>
  <span>$</span>
  <input type="text" aria-label="Amount (to the nearest dollar)">
  <span>.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div>
  <span>https://example.com/users/</span>
  <input type="text" aria-describedby="basic-addon3">
</div>

Изменение размера

Разместите один приложение или одну кнопку с любой стороны от формы ввода. Вы также можете разместить их по обе стороны от формы ввода.

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Дополнение для флажков и переключателей

Поместите любые опции галочек (checkbox) или переключателей в рамках дополнения формы ввода вместо текста.

<div>
  <div>
    <div>
      <span>
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" aria-label="...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <span>
        <input type="radio" aria-label="...">
      </span>
      <input type="text" aria-label="...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.строки -->

Дополнение для кнопок

Кнопки в группах ввода немного отличаются и требуют один дополнительный уровень вложенности. Вместо .input-group-addon, вы должны будете использовать .input-group-btn. Это необходимо из-за стилей браузера по умолчанию, которые не могут быть переопределены.

<div>
  <div>
    <div>
      <span>
        <button type="button">Go!</button>
      </span>
      <input type="text" placeholder="Search for...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text" placeholder="Search for...">
      <span>
        <button type="button">Go!</button>
      </span>
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.строки -->

Кнопки с выпадающим меню

<div>
  <div class=

Подключение бутстрап – Bootstrap 3 · Основы Bootstrap, как загрузить Bootstrap, поддерживаемые браузеры и устройства

Введение. Начало работы · Bootstrap

Быстрый старт

CSS

JS

Начальный шаблон страницы

Важные глобальные атрибуты

HTML5 doctype

«Отзывчивый» мета-тэг

Размер ширины и высоты элемента

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Содержание. Начало работы · Bootstrap

Предварительно компилированный Bootstrap

Файлы СSS

Файлы JS

Исходный код Bootstrap

Содержание. Начало работы · Bootstrap. Версия v4.2.1

Предварительно компилированный Bootstrap

Файлы СSS

Файлы JS

Исходный код Bootstrap

Информеры. Компоненты · Bootstrap. Версия v4.0.0

Обзор

Пример: включайте поповеры везде

Пример: использование параметра container

Пример

Четыре направления

Отмена по клику

Для такого поведения нужна специальная разметка

Отключение элементов

Использование

Параметры

Атрибуты для индивидуальных поповеров

Методы

Асинхронные методы и переходы

$().popover(options)

.popover('show')

.popover('hide')

.popover('toggle')

.popover('dispose')

.popover('enable')

.popover('disable')

.popover('toggleEnabled')

.popover('update')

События

Компоненты. Документация Bootstrap 3.3.7

Доступные символы

Как использовать

Не смешивайте с другими компонентами

Только для пустых элементов

Изменение местоположения значка шрифта

Доступно иконки

Примеры

Пример

Выравнивание

Может потребоваться дополнительное позиционирование

.pull-right устаревшее выравнивание

Делитель

Заблокированы части меню

Обеспечить правильное role и укажите метку

Основной пример

Изменение размера

Вложенность

Вертикальные вариации

Группа кнопок Justified

Обработка рамок

IE8 и рамки

С <a> элементами

Ссылки действуя как кнопки

С <button> элементами

Одиночная кнопка выпадающего меню

Split кнопка с выпадающим меню

Изменение размера

Вариант списка сверху

Текстовое <input> только

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

Не смешивайте с другими компонентами

Всегда добавляйте ярлыки

Основной пример

Изменение размера

Пример: использование параметра `container`

`$().popover(options)`

`.popover('show')`

`.popover('hide')`

`.popover('toggle')`

`.popover('dispose')`

`.popover('enable')`

`.popover('disable')`

`.popover('toggleEnabled')`

`.popover('update')`

`.pull-right` устаревшее выравнивание

Обеспечить правильное `role` и укажите метку

С `<a>` элементами

С `<button>` элементами

Текстовое `<input>` только