Навигация. Компоненты · Bootstrap. Версия v4.0.0
Документация и примеры использования навигационных компонентов Bootstrap.
Основы
Навигация в Bootstrap имеет общую для подобного типа элементов разметку, от базового класса .nav
до активных и «выключенных» состояний. Заменяйте классы-модификаторы для переключения между стилями.
Базовый компонент класса .nav
создан на флексбоксе, что обеспечивает хорошую базу для создания всех типов навигационных компонентов. В него входят несколько стилей, которые «перебивают» остальные (для работы со списками), добавлены паддинги ссылок для увеличения «зоны клика», и базовые стили «выключенных» состояний.
В базовый компонент класса .nav
не включено какое-либо состояние .active
. Следующие примеры включают класс, главным образом для демонстрации, что данный конкретный класс не подключает какие-либо специальные стили.
<ul>
<li>
<a href="#">Active</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
Классы используются везде, так что ваша разметка может быть сверх-гибкой. Используйте <ul>
как показано выше, или создайте свои; скажем, на основе элемента <nav>
. Из-за того, что .nav
использует display: flex
, ссылки в навигационной панели ведут себя, как если бы были элементами такой же панели, но с меньшим количеством кода.
<nav>
<a href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Disabled</a>
</nav>
Доступные стили
Изменяйте стиль компонентов .nav
классами-модификаторами и обычными классами. Смешивайте их и настраивайте как надо, или создайте свои.
Горизонтальное выравнивание
Изменяйте горизонтальное выравнивание вашего навигационного элемента с утилитами флексбокса. По умолчанию навигационные панели выровнены по левому краю, но вы можете легко это изменить на центр или правый край.
Центрировано классом .justify-content-center
:
<ul>
<li>
<a href="#">Active</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
По правому краю классом .justify-content-end
:
<ul>
<li>
<a href="#">Active</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
Вертикально
Располагайте вашу навигацию по вертикали, изменяя направление элемента flex классом .flex-column
. Надо расположить ее вертикально лишь на некоторых брейкпойнтах? Используйте отзывчивые версии (например .flex-sm-column
).
<ul>
<li>
<a href="#">Active</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
Как всегда – вертикальная навигация доступна и без <ul>
.
<nav>
<a href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Disabled</a>
</nav>
Вкладки
«Забирает» базовый элемент навигации с верха и добавляет класс .nav-tabs
для создания «вкладочного» интерфейса, Используйте их для создания зоны с поддержкой содержимого в виде вкладок с плагином JavaScript.
<ul>
<li>
<a href="#">Active</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
Подушки
На том же коде HTML, но с используйте класс .nav-pills
:
<ul>
<li>
<a href="#">Active</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
Карточки. Компоненты · Bootstrap. Версия v4.4
Карточки Bootstrap предоставляют собой гибкий и расширяемый контейнер контента с несколькими вариантами и опциями.
О карточках
Карточка – это гибкий и расширяемый контейнер содержимого. Она включает опции заголовков и футеров, широкий спектр контента, контекстуальные цвета бэкграунда и мощные опции отображения. Если вы знакомы с Bootstrap 3, — карты заменили наши старые панели, «колодцы» (закругленная граница вокруг элемента с серой заливкой и паддингом) и маленькие версии изображений — «тамбнейлы». Схожая с этими элементами функциональность доступна для карточек в виде классов-модификаторов.
Пример
Карточки созданы с применением как можно более меньшего количества кода и стилей, но они все же имеют множество инструментов для настройки и контроля. Их легко выравнивать и сочетать с другими компонентами Bootstrap, т.к. они созданы с помощью «флексбокса». По умолчанию они не имеют margin
, поэтому при необходимости используйте утилиты расстояния.
Внизу – пример базовой карточки фиксированной ширины со смешанным содержимым. Карточки не имеют фиксированной ширины по умолчанию, так что они будут автоматически заполнять полную ширину родительского элемента. Этот параметр можно настроить с помощью различных опций размеров.
PlaceholderИзображение
Название карточки
Some quick example text to build on the card title and make up the bulk of the card’s content.
Переход куда-нибудь
<div>
<img src="..." alt="...">
<div>
<h5>Название карточки</h5>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
</div>
Типы содержимого
Карточки поддерживают широкий спектр содержимого, включая изображения, текст, списки, и т.д. Внизу – примеры.
Тело
«Фундамент» карточки – класс .card-body
. Используйте его всегда, когда вам нужна выделенная секция внутри карточки.
This is some text within a card body.
<div>
<div>
This is some text within a card body.
</div>
</div>
Названия, текст и ссылки
Названия карточек создаются добавлением класса .card-title
к тэгу <h*>
. Аналогично, ссылки добавляются и размещаются рядом друг с другом добавлением класса .card-link
в тэг <a>
.
«Подназвания» добавляются классом .card-subtitle
в тэг <h*>
. Если элементы с классами .card-title
и .card-subtitle
размещены в элементе с классом .card-body
, название и «подназвание» карточки выровняются прекрасно.
<div>
<div>
<h5>Название карточки</h5>
<h6>Подзаголовок карты</h6>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#">Ссылка карты</a>
<a href="#">Другая ссылка</a>
</div>
</div>
Изображения
Класс .card-img-top
размещает изображение наверху карточки. Текст может быть добавлен к карточке классом .card-text
. Текст внутри этого класса может быть оформлен стандартными тегами HTML.
PlaceholderИзображение
Some quick example text to build on the card title and make up the bulk of the card’s content.
<div>
<img src="..." alt="...">
<div>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Списки
Создавайте списки содержимого в карточке с помощью «расширенных» списков.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div>
<ul>
<li>Cras justo odio</li>
<li>Dapibus ac facilisis in</li>
<li>Vestibulum at eros</li>
</ul>
</div>
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div>
<div>
Featured
</div>
<ul>
<li>Cras justo odio</li>
<li>Dapibus ac facilisis in</li>
<li>Vestibulum at eros</li>
</ul>
</div>
«Плавильный котел» (в смысле – бросайте все что есть)
Смешивайте и подгоняйте друг под друга разные типы содержимого в карточке. Показанный ниже пример включает стили для изображений, текста, групп списков – и все это обернуто в карточку фиксированной ширины.
PlaceholderИзображение
Название карточки
Some quick example text to build on the card title and make up the bulk of the card’s content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div>
<img src="..." alt="...">
<div>
<h5>Название карточки</h5>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul>
<li>Cras justo odio</li>
<li>Dapibus ac facilisis in</li>
<li>Vestibulum at eros</li>
</ul>
<div>
<a href="#">Card link</a>
<a href="#">Another link</a>
</div>
</div>
Заголовок и «подвал»
Добавьте заголовок и\или подвал к карточке.
<div>
<div>
Featured
</div>
<div>
<h5>Специальный заголовок</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
</div>
Заголовки карточек можно стилизовать добавлением стиля .card-header
к <h*>
.
<div>
<h5>Featured</h5>
<div>
<h5>Специальный заголовок</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div>
<div>
Quote
</div>
<div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
<div>
<div>
Featured
</div>
<div>
<h5>Специальный заголовок</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
<div>
2 days ago
</div>
</div>
Размеры
У карточек нет определенной ширины width
, так что они всегда будут занимать 100% ширины, пока не объявлено иное. Вы можете изменить ширины в CSS, классами сетки, SASS или утилити-классами.
Использование разметки сеток
Используя сетку, оборачивайте карточки в колонки и ряды, если необходимо.
<div>
<div>
<div>
<div>
<h5>Специальный заголовок</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
</div>
</div>
<div>
<div>
<div>
<h5>Специальный заголовок</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
</div>
</div>
</div>
Утилиты
Используйте наши утилиты размеров для быстрой настройки ширины карточки.
Название карточки
With supporting text below as a natural lead-in to additional content.
Кнопка
Название карточки
With supporting text below as a natural lead-in to additional content.
Кнопка
<div>
<div>
<h5>Название карточки</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Кнопка</a>
</div>
</div>
<div>
<div>
<h5>Название карточки</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Кнопка</a>
</div>
</div>
Обычный CSS
Используйте обычный CSS для установки ширины.
<div>
<div>
<h5>Специальный заголовок</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
</div>
Выравнивание текста
Вы можете быстро изменить выравнивание текста любой карточки – в ее частях или в целом – с помощью наших классов выравнивания.
<div>
<div>
<h5>Специальный заголовок</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
</div>
<div>
<div>
<h5>Специальный заголовок</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
</div>
<div>
<div>
<h5>Специальный заголовок</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
</div>
Навигация
Добавляйте элементы навигации в заголовок карточки (или блок) с компонентами навигации Bootstrap.
<div>
<div>
<ul>
<li>
<a href="#">Active</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
</div>
<div>
<h5>Специальный заголовок</h5>
<p>With supporting text below as a natural lead-in to additional content.</p>
<a href="#">Переход куда-нибудь</a>
</div>
</div>
Специальный заголовок
Отступы. Утилиты · Bootstrap. Версия v4.0.0
Bootstrap включает широкий диапазон сокращений откликов и полезных классов для изменения внешнего вида элемента.
Как это устроено
Назначайте «отзывчивые» значения margin
или padding
элементу или поднабору его сторон с помощью удобных классов. Сюда входит поддержка индивидуальных свойств, всех свойств и вертикальных и горизонтальных свойств. Классы созданы дефолтной карте Sass, и варьируются от .25rem
до 3rem
.
Замечание
Утилиты отступов, которые работают на всех брейкпойнтах – от xs
до xl
– не имеют аббревиатуры брейкпойнта в названии. Это сделано потому, что те классы применяются, начиная с min-width: 0
и выше, и т.о. не привязаны к медиа-запросам. Названия остающихся брейкпойнтов, однако, содержит в себе аббревиатуры брейкпойнтов.
Классы названы по формату {property}{sides}-{size}
для xs
и {property}{sides}-{breakpoint}-{size}
для sm
, md
, lg
и xl
.
Где свойство – это одно из:
m
— для классов, которые задаютmargin
p
— для классов, которые задаютpadding
Где свойство – это одно из:
t
— для классов, которые задаютmargin-top
илиpadding-top
b
— для классов, которые задаютmargin-bottom
илиpadding-bottom
l
— для классов, которые задаютmargin-left
илиpadding-left
r
— для классов, которые задаютmargin-right
илиpadding-right
x
— для классов, которые задают и*-left
и*-right
y
— для классов, которые задают и*-top
и*-bottom
- blank — для классов, которые задают
margin
илиpadding
для всех 4-х сторон элемента
Где размер – это один из:
0
— для классов, которые удаляютmargin
илиpadding
назначая его равны0
1
— (по умолчанию) для классов, которые устанавливаютmargin
илиpadding
к значению, равному$spacer * .25
2
— (по умолчанию) для классов, которые устанавливаютmargin
илиpadding
к значению, равному$spacer * .5
3
— (по умолчанию) для классов, которые устанавливаютmargin
илиpadding
к значению, равному$spacer
4
— (по умолчанию) для классов, которые устанавливаютmargin
илиpadding
к значению, равному$spacer * 1.5
5
— (по умолчанию) для классов, которые устанавливаютmargin
илиpadding
к значению, равному$spacer * 3
auto
— для классов, которые устанавливаютmargin
как auto
(Вы можете добавить больше размеров, добавляя разделы в карту Sass $spacers
.)
Примеры
Вот несколько понятных примеров этих классов:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Горизонтальное центрирование
В дополнение, Bootstrap также включает класс .mx-auto
для горизонтального выравнивания блока блока содержимого фиксированной ширины – т.е. контент, которому заданы display: block
и набор width
с помощью установки горизонтальных марджинов как auto
.
Центрированный элемент
<div>
Центрированный элемент
</div>
Уведомления. Компоненты · Bootstrap. Версия v4.4
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений.
Примеры
Уведомления доступны для любой длины как текста, так и опциональной кнопки отмены. Для правильной стилизации используйте один из 8 требуемых контекстуальных классов (например, .alert-success
). Для строчного отклонения используйте плагин уведомлений jQuery.
Это основное уведомление — check it out!
Это дополнительное уведомление — check it out!
Это уведомление об успехе — check it out!
Это уведомление об опасности — check it out!
Это уведомление-предупреждение — check it out!
Это инфо-уведомление — check it out!
Это светлое уведомление — check it out!
Это темное уведомление — check it out!
<div role="alert">
Это основное уведомление — check it out!
</div>
<div role="alert">
Это дополнительное уведомление — check it out!
</div>
<div role="alert">
Это уведомление об успехе — check it out!
</div>
<div role="alert">
Это уведомление об опасности — check it out!
</div>
<div role="alert">
Это уведомление-предупреждение — check it out!
</div>
<div role="alert">
Это инфо-уведомление — check it out!
</div>
<div role="alert">
Это светлое уведомление — check it out!
</div>
<div role="alert">
Это темное уведомление — check it out!
</div>
Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only
текст.
Цвет ссылки
Используйте класс .alert-link
для соответствия цвета ссылок цветам уведомлений.
<div role="alert">
Это основное уведомление с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
Это дополнительное уведомление с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
Это уведомление об успехе с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
Это уведомление об опасности с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
Это уведомление-предупреждение с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
Это инфо-уведомление с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
Это светлое уведомление с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
Это темное уведомление с <a href="#">примером ссылки</a>.
</div>
Дополнительное содержимое
Уведомления также могут содержать элементы HTML – заголовки, параграфы и т.п.
Отличная работа!
Вы успешно прочитали это важное сообщение. Это пример текста немного длиннее, так что вы увидите, как работают отступы в сообщениях уведомлений.
Когда необходимо, используйте марджины для создания необходимых отступов.
<div role="alert">
<h5>Отличная работа!</h5>
<p>Вы успешно прочитали это важное сообщение. Это пример текста немного длиннее, так что вы увидите, как работают отступы в сообщениях уведомлений.</p>
<hr>
<p>Когда необходимо, используйте марджины для создания необходимых отступов.</p>
</div>
Отмена («крестик»)
Использование JS-плагина уведомлений дает возможность закрыть «крестиком» любое строчное уведомление.
- Удостоверьтесь, что подгрузили плагин уведомлений, или компилированный JavaScript из Bootstrap.
- Если вы загружаете JavaScript для уведомлений из файла, это потребует
util.js
. Он есть в компилированной версии. - Добавьте «крестик» отмены и класс
.alert-dismissible
, который создаст дополнительный паддинг справа от сообщения и спозиционирует кнопку класса.close
. - В «крестике» отмены добавьте атрибут
data-dismiss="alert"
, запускающий функциональность JS. Используйте элемент<button>
для правильной работы на всех устройствах. - Для анимации уведомлений при их закрытии добавьте классы
.fade
и.show
.
Вот демо:
Holy guacamole! You should check in on some of those fields below.
×
<div role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
«Поведение» JavaScript
Триггеры
Включите закрытие уведомления через JavaScript:
$(".alert").alert()
Или сделайте это с помощью атрибутов data
на кнопке внутри уведомления, как показано ниже:
<button type="button" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Заметим, что закрытие уведомления удалит его из DOM-структуры документа.
Методы
Метод | Описание |
---|---|
$().alert() | Заставляет уведомление «слушать» события по клику на дочерние элементы с атрибутом data-dismiss="alert" . (Необязательно использовать здесь авто-инициализацию API) |
$().alert('close') | Закрывает уведомление методом удаления его из DOM-структуры. Если в элемент добавлены классы .fade и .show – уведомление исчезнет до того, как удалено. |
$().alert('dispose') | Уничтожает уведомление элемента. |
$(".alert").alert('close')
События
Плагин уведомлений Bootstrap использует несколько событий для связи с функциональностью уведомлений.
Событие | Описание |
---|---|
close.bs.alert | Это событие запускается немедленно при вызове экземпляра метода close . |
closed.bs.alert | Это событие запускается, когда уведомление закрыто (событие будет ждать завершения «переходов» СSS). |
$('#myAlert').on('closed.bs.alert', function () {
// do something…
})
Загрузка · Bootstrap 4 на русском v4.5
Загрузите Bootstrap, чтобы получить скомпилированный исходный код CSS и JavaScript или включить его с вашими любимыми менеджерами пакетов, такими как npm, Bower, RubyGems и другие.
Смотреть на GitHub
Компилированные CSS и JS
Загружайте компилированный, готовый к использованию код Bootstrap v 4.5.2 (для легкого внедрения в ваш проект), включающие:
- Компилированные и облегченные бандлы (Смотрите Сравнение файлов CSS)
- Компилированные и облегченные плагины JS.
Сюда не входит документация, исходники или сторонние JS-зависимости Зависимости передаются (внедряются) сервис в момент его создания (jQuery или Popper.js). Зависимости передаются (внедряются) сервису в момент его создания.
Скачать
Исходные файлы
Компилируйте Bootstrap со своим файловопроводом, загружает наши исходники Sass, JS и файлы документации.Это потребует некоторого дополнительного инструментария:
- Компилятор Sass (поддерживаются: Libsass или Ruby Sass) для компиляции ваших CSS.
- Постпроцессоры для создания своих нестандартных свойств CSS. (-webkit-, -moz-, -o-, и т.д.)
Инструменты сборки также могут пройти при работе с Bootstrap, но все-таки они не совсем подходят для ваших целей.
Скачать исходники
Загрузочный CDN
Пропустите загрузку с помощью BootstrapCDN, чтобы получить кэшированную версию скомпилированных в Bootstrap файлов CSS и JS для облегчения страницы и ускорения загрузки.
%MINIFYHTML1bf7db35fa08f788e992ddaead3603852%
Системы управления пакетами
Используйте исходники Bootstrap в любом проекте с помощью популярных систем управления пакетами.С любой системой управления пакетами Bootstrap потребует компилятор Sass (препроцессор) и постпроцессор для правильной установки наших компилированных версий.
нм
Устанавливайте Bootstrap в вашем приложении на движке Node с помощью пакета npm:
npm install bootstrap
require ('bootstrap')
) загрузит все плагины JS Bootstrap в объект jQuery. Модуль bootstrap сам не экспортирует ничего. Вы можете вручную загрузить плагины JS Bootstrap, загруженные файлы / js / *.js
в корневую папку пакета.
package.json
Bootstrap дополнительные метаданные со следующими ключами:
-
sass
- путь к главному исходникам Sass Bootstrap -
стиль
- путь к полной версии CSS Bootstrap, которая созданием откомпилирована с установок по умолчанию (без)
пряжа
Установите Bootstrap в свои приложения на Node.js с пакетом пряжи:
пряжа добавить бутстрап
RubyGems
Устанавливайте Bootstrap в ваши приложения на Ruby с помощью Bundler ( рекомендовано ) и системы управления пакетами «RubyGems», просто добавив строку в ваш Gemfile
:
gem 'bootstrap', '~> 4.5.2 '
Еще один способ - если вы не используете Bundler, вы можете установить gem-файл такой командой:
gem install bootstrap -v 4.5.2
См. README для gem.
Композитор
Вы также можете установить и управлять Sass и JS в Bootstrap с помощью пакетного менеджера уровня приложений для языка программирования PHP:
композитору требуется twbs / bootstrap: 4.5.2
NuGet
Если вы занимаетесь разработкой в.NET, вы также можете установить и управлять базами CSS, Sass и JS с помощью вашего Bootstrap с NuGet:
Загрузочный пакет установочного пакета
Установочный пакет bootstrap.sass
.
Введение. Начало работы · Bootstrap. Версия v4.0.0
Начните работу с Bootstrap, самым популярным в мире фреймворком для создания быстродействующих сайтов с загрузочным CDN и шаблонами стартовой страницы.
Быстрый старт
Хотите использовать Bootstrap в своем проекте? Bootstrap - библиотека шаблонов CSS, распространяемая команда командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.
CSS
Вставьте этот кусок кода в
, перед всеми прочими файлами CSS, для загрузки Bootstrap.
JS
Многие из наших компонентов требуют использования JavaScript.Точнее - им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода
в конце страниц, прямо перед закрывающим
. Сперва jQuery, потом Popper.js, потом наши.
Мы используем мини-сборку jQuery, но и полную можно использовать.