Бутстрап документация: Bootstrap. Документация на русском языке.

Содержание

Вступление. Начало работы · Bootstrap v5.1.3

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

Хотите использовать Бутстрап в своем проекте? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Нужна система управления пакетами или исходники Bootstrap? Перейдите на страницу загрузки.

CSS

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Многие из наших компонентов требуют использовать для работы JavaScript. В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих тегов <script> в конце страницы, прямо перед закрывающим тегом </body>, чтобы включить их.

Пакетное подключение

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Раздельное подключение

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn. jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>

Модули

Если вы используете <script type="module">, смотрите раздел Использование Bootstrap в качестве модуля.

Компоненты

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

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

Alerts (Уведомления) для отклонения
Buttons (Кнопки) для переключения состояний и функционала флажка/радио
Carousel (Карусель) для любого поведения слайдов, элементов управления и индикаторов
Collapse (Сворачиваемое) для переключения видимости содержимого
Dropdowns (Выпадающие списки) для отображения и позиционирования (также требуется Popper)
Modals (Модальные окна) для отображения, позиционирования и прокрутки
Navbar (Панель навигации) для расширения нашего плагина Сворачиваемое для реализации адаптивного поведения
Offcanvases (Внехолста) для отображения, позиционирования и поведения прокрутки
Toasts (Тосты) для показа и отклонения
Tooltips (Всплывающие подсказки) и popovers (всплывающие окна) для отображения и позиционирования (также требуется Popper)

Scrollspy (Отслеживание прокрутки) для поведения прокрутки и обновлений навигации

Стартовый шаблон

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

<!doctype html>
<html lang="ru">
  <head>
    <!-- Обязательные метатеги -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Привет мир!</title>
  </head>
  <body>
    <h2>Привет мир!</h2>

    <!-- Дополнительный JavaScript; выберите один из двух! -->

    <!-- Вариант 1: Bootstrap в связке с Popper -->
    <script src="https://cdn.
  jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Вариант 2: Bootstrap JS отдельно от Popper
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh41eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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

Тип текущего документа

Bootstrap требует использования doctype HTML5. Без него у вас возникнут некоторые проблемы со стилями, но его включение не должно вызывать каких-либо серьезных сбоев.

<!doctype html>
<html lang="ru">
  ...
</html>

Мета-теги для адаптивной вёрстки

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

в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Вы можете увидеть пример этого в действии в стартовом шаблоне.

Размер ширины и высоты элемента (Box-sizing)

Для большей простоты масштабирования в 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 с помощью этих ресурсов:

Читайте и подписывайтесь на Официальный блог Bootstrap.
Присоединиться к официальной комнате Slack.
Общайтесь с другими Bootstrappers в IRC. На сервере irc.freenode.net, в канале ##bootstrap.
Справку по реализации можно найти на сайте Stack Overflow (с тегом bootstrap-5).
Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или расширяют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной узнаваемости.

Вы также можете присоединиться к @getbootstrap on Twitter, чтобы следить за последними слухами и потрясающими музыкальными клипами.

Вступление. Начало работы · Bootstrap v5.2.3

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

Начните с включения готовых CSS и JavaScript Bootstrap через CDN без каких-либо шагов по сборке. Посмотрите это на практике с помощью этой демонстрации Bootstrap CodePen.

Создайте новый файл index.html в корне вашего проекта. Включите также тег <meta name="viewport> для правильного отзывчивого поведения на мобильных устройствах.
```
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Демо Bootstrap</title>
  </head>
  <body>
    <h2>Привет мир!</h2>
  </body>
</html>
```
Включите CSS и JS Bootstrap. Поместите тег <link> в <head> для нашего CSS и тег <script> для нашего пакета JavaScript (включая Popper для позиционирования раскрывающихся списков, всплывающие сообщения и всплывающие подсказки) перед закрывающим </body>. Узнайте больше о наших ссылках CDN.
```
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>
    <h2>Hello, world!</h2>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h555rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>
```
Вы также можете включить Popper и наш JS отдельно. Если вы не планируете использовать раскрывающиеся списки, всплывающие окна или всплывающие подсказки, сэкономьте несколько килобайт, не включая Popper.
```
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
```
Привет мир! Откройте страницу в выбранном вами браузере, чтобы увидеть страницу с начальной загрузкой. Теперь вы можете начать сборку с помощью Bootstrap, создав свой собственный макет, добавив десятки компонентов и используя наши официальные примеры.

В качестве справки, вот наши основные ссылки CDN.

Описание	URL-адрес
CSS	`https://cdn.jsdelivr.net/npm/bootstrap@5. 2.3/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Вы также можете использовать CDN для получения любой из наших дополнительных сборок, перечисленных на странице Содержание.

Следующие шаги

Узнайте больше о некоторых важных глобальных настройках среды, которые использует Bootstrap.
Прочитайте о том, что включено в Bootstrap, в нашем разделе содержания и списке компонентов, для которых требуется JavaScript ниже.
Нужно немного больше энергии? Рассмотрите возможность сборки с помощью Bootstrap, включив исходные файлы с помощью диспетчера пакетов.
Хотите использовать Bootstrap в качестве модуля с <script type="module">? Пожалуйста, обратитесь к нашему разделу использование Bootstrap как модуля.

JS компоненты

Любопытно, какие компоненты явно требуют нашего JavaScript и Popper? Щелкните ссылку «Показать компоненты» ниже. Если вы совсем не уверены в общей структуре страницы, продолжайте читать пример шаблона страницы.

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

Уведомления (Alerts) для отклонений
Кнопки (Buttons) для переключения состояний и функциональности флажка/радио
Карусель (Carousel) для всех режимов слайдов, элементов управления и индикаторов
Коллапс (Collapse) для переключения видимости содержимого
Выпадающие списки (Dropdowns) для отображения и позиционирования (также требуется Popper)
Модальные окна (Modals) для отображения, позиционирования и поведения прокрутки
Панель навигации (Navbar) для расширения наших плагинов Collapse и Offcanvas для реализации адаптивного поведения
Навигация (Navs) с плагином Tab для переключения панелей содержимого
Offcanvases для отображения, позиционирования и поведения прокрутки
Отслеживание прокрутки (Scrollspy) для поведения прокрутки и обновлений навигации
Тосты (Toasts) для отображения и отклонения
Всплывающие подсказки (Tooltips) и Всплывающие окна (Popovers) для отображения и позиционирования (также требуется Popper)

Важные глобальные переменные

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

Тип текущего документа

Bootstrap требует использования типа документа HTML5. Без него вы увидите причудливый и незавершенный стиль.

<!doctype html>
<html lang="ru">
  ...
</html>

Мета-теги для адаптивной вёрстки

Bootstrap разработан сначала для мобильных устройств, стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости, используя медиа-запросы CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра в свой <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Вы можете увидеть пример этого в действии в быстром старте.

Размеры ширины и высоты элемента (Box-sizing)

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

В редких случаях вам нужно переопределить его, используйте что-то вроде следующего:

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

В приведенном выше фрагменте вложенные элементы, включая сгенерированный контент с помощью ::before и ::after, будут наследовать указанный box-sizing для этого .selector-for-some-widget.

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

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

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

Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

Прочтите и подпишитесь на Официальный блог Bootstrap.
Присоединяйтесь к официальной комнате Slack.
Общайтесь с другими загрузчиками в IRC. На сервере irc.libera.chat, в канале #bootstrap.
Справку по реализации можно найти в Stack Overflow (с тегом bootstrap-5).
Разработчики должны использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальная обнаруживаемости.

Вы также можете подписаться на @getbootstrap в Twitter, чтобы быть в курсе последних сплетен и потрясающих музыкальных клипов.

Содержимое · Bootstrap

Предварительно скомпилированный Bootstrap
файлы CSS
JS-файлы
Исходный код начальной загрузки

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

Предварительно скомпилированный загрузчик

После загрузки разархивируйте сжатую папку, и вы увидите что-то вроде этого:

 бутстрап/
├── 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

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

CSS-файлы

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

Файлы CSS Макет Содержание Компоненты Коммунальные услуги

Файлы CSS	Макет	Содержание	Компоненты	Коммунальные услуги
`bootstrap.css` `bootstrap.min.css`	В комплекте	В комплекте	В комплекте	В комплекте
`bootstrap-grid. css` `бутстрап-сетка.min.css`	Только система сетки	Не включено	Не включено	Только гибкие утилиты
`бутстрап-перезагрузка.css` `бутстрап-перезагрузка.min.css`	Не включено	Только перезагрузка	Не включено	Не включено

bootstrap.css

bootstrap.min.css

В комплекте

bootstrap-grid. css

бутстрап-сетка.min.css

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

Не включено

Только гибкие утилиты

бутстрап-перезагрузка.css

бутстрап-перезагрузка.min.css

Не включено

Только перезагрузка

Не включено

JS-файлы

Точно так же у нас есть опции для включения части или всего нашего скомпилированного кода JavaScript.

JS-файлы Поппер jQuery

JS-файлы	Поппер	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 включает предварительно скомпилированные ресурсы CSS и JavaScript, а также исходный код Sass, JavaScript и документацию. В частности, он включает в себя следующее и многое другое:

 бутстрап/
├── расст/
│ ├── css/
│ └── js/
├── документы/
│ └── примеры/
├── js/
└── scss/

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

JavaScript · Bootstrap

Оживите Bootstrap с помощью наших дополнительных подключаемых модулей JavaScript, созданных на основе jQuery. Узнайте о каждом подключаемом модуле, наших данных и параметрах программного API и многом другом.

Отдельный или составной

Плагины

можно включать по отдельности (используя отдельный Bootstrap js/dist/*.js ) или все сразу, используя bootstrap.js или уменьшенный bootstrap.min.js (не включайте оба).

Если вы используете сборщик (Webpack, Rollup…), вы можете использовать файлы /js/dist/*.js , которые готовы к UMD.

Зависимости

Некоторые подключаемые модули и компоненты CSS зависят от других подключаемых модулей. Если вы включаете плагины по отдельности, обязательно проверьте наличие этих зависимостей в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен до файлов плагинов). Обратитесь к нашему package.json , чтобы узнать, какие версии jQuery поддерживаются.

Наши раскрывающиеся списки, всплывающие окна и всплывающие подсказки также зависят от Popper.js.

Атрибуты данных

Почти все подключаемые модули Bootstrap можно включить и настроить только через HTML с атрибутами данных (наш предпочтительный способ использования функций JavaScript). Убедитесь, что использует только один набор атрибутов данных для одного элемента (например, вы не можете вызвать всплывающую подсказку и модальное окно с одной и той же кнопки).

Однако в некоторых случаях может потребоваться отключить эту функцию. Чтобы отключить API атрибутов данных, отмените привязку всех событий в документе с пространством имен 9. 0021 data-api вот так:

 $(document).off('.data-api')

В качестве альтернативы, чтобы настроить таргетинг на конкретный подключаемый модуль, просто включите имя подключаемого модуля в качестве пространства имен вместе с пространством имен data-api, например:

 $(document).off('.alert.data-api')

Экранирование селекторов

При использовании специальных селекторов, например: через jQuery.

События

Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме инфинитива и причастия прошедшего времени, где инфинитив (например, показать ) запускается в начале события, а его форма причастия прошедшего времени (например, показан ) запускается при завершении действия.

Все инфинитивные события обеспечивают функциональность preventDefault() . Это дает возможность остановить выполнение действия до его начала. Возврат false из обработчика событий также автоматически вызовет preventDefault() .

 $('#myModal').on('show.bs.modal', функция (е) {
  if (!data) return e.preventDefault() // останавливает показ модального окна
})

Программный API

Мы также считаем, что вы должны иметь возможность использовать все плагины Bootstrap исключительно через API JavaScript. Все общедоступные API-интерфейсы представляют собой отдельные методы с возможностью цепочки и возвращают коллекцию, над которой действуют.

 $('.btn.danger').button('toggle').addClass('fat')

Все методы должны принимать необязательный объект параметров, строку, предназначенную для определенного метода, или ничего (что инициирует плагин с поведением по умолчанию):

 $('#myModal').modal() // инициализировано по умолчанию
$('#myModal').modal({ keyboard: false }) // инициализируется без клавиатуры
$('#myModal').modal('show') // инициализирует и немедленно вызывает шоу

Каждый подключаемый модуль также предоставляет свой необработанный конструктор в свойстве Constructor : $. fn.popover.Constructor . Если вы хотите получить определенный экземпляр плагина, извлеките его непосредственно из элемента: $('[rel="popover"]').data('popover') .

Асинхронные функции и переходы

Все программные методы API являются асинхронными и возвращаются вызывающей стороне после начала перехода, но до его завершения .

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

 $('#myCollapse').on('show.bs.collapse', function (e) {
  // Действие, выполняемое после расширения сворачиваемой области
})

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

 $('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Перейдет к слайду 2, как только завершится переход к слайду 1
})
$('#myCarousel').carousel('1') // Начнет переход к слайду 1 и вернется к вызывающей стороне
$('#myCarousel'). carousel('2') // !! Будет проигнорирован, т.к. переход на слайд 1 не закончен!!

Настройки по умолчанию

Вы можете изменить настройки по умолчанию для подключаемого модуля, изменив объект Constructor.Default подключаемого модуля:

 $.fn.modal.Constructor.Default.keyboard = false // изменяет значение по умолчанию для параметра «клавиатура» модального плагина на false

Нет конфликта

Иногда необходимо использовать плагины Bootstrap с другими фреймворками пользовательского интерфейса. В этих обстоятельствах иногда могут возникать конфликты пространств имен. Если это произойдет, вы можете позвонить .noConflict для плагина, для которого вы хотите восстановить значение.

 var bootstrapButton = $.fn.button.noConflict() // вернуть $.fn.button к ранее присвоенному значению
$.fn.bootstrapBtn = bootstrapButton // дать $().bootstrapBtn функциональность Bootstrap

Номера версий

Доступ к версии каждого плагина Bootstrap jQuery можно получить через свойство VERSION конструктора плагина. Например, для плагина всплывающей подсказки:

 $.fn.tooltip.Constructor.VERSION // => "4.1.3"

Никаких специальных откатов при отключенном JavaScript

Плагины Bootstrap не очень изящно отступают, когда JavaScript отключен. Если вас волнует пользовательский опыт в этом случае, используйте

Вступление. Начало работы · Bootstrap v5.1.3

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

CSS

JS

Пакетное подключение

Раздельное подключение

Модули

Компоненты

Стартовый шаблон

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

Тип текущего документа

Мета-теги для адаптивной вёрстки

Размер ширины и высоты элемента (Box-sizing)

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

Вступление. Начало работы · Bootstrap v5.2.3

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

Следующие шаги

JS компоненты

Важные глобальные переменные

Тип текущего документа

Мета-теги для адаптивной вёрстки

Размеры ширины и высоты элемента (Box-sizing)

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

Содержимое · Bootstrap

Предварительно скомпилированный загрузчик

CSS-файлы

JS-файлы

Исходный код начальной загрузки

JavaScript · Bootstrap

Отдельный или составной

Зависимости

Атрибуты данных

Экранирование селекторов

События

Программный API

Асинхронные функции и переходы

Настройки по умолчанию

Нет конфликта

Номера версий

Никаких специальных откатов при отключенном JavaScript

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

Рубрики

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