Бутстрап 4 на русском: Создавайте быстрые, отзывчивые сайты с помощью Bootstrap

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