Содержание

Навигация. Компоненты · 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">&times;</span>
  </button>
</div>


«Поведение» JavaScript


Триггеры


Включите закрытие уведомления через JavaScript:


$(".alert").alert()

Или сделайте это с помощью атрибутов data на кнопке внутри уведомления, как показано ниже:


<button type="button" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</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 для облегчения страницы и ускорения загрузки.

   Системы управления пакетами 

Используйте исходники 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 и наши собственные плагины. Для активации плагинов разместите следующий кусок кода