Bootstrap documentation: Download · Bootstrap

Leave a Comment / Разное / By /

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

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

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

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

CSS

Вставьте эту часть кода в <head>, перед всеми прочими файлами CSS, для загрузки Bootstrap.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Многие из наших компонентов требуют использования JavaScript.

Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>. Сперва jQuery , потом Popper.js, потом наши.

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

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

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

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

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.
  jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

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

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

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

HTML5 doctype

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

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

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

Bootstrap разрабатывался как mobile first

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Введение

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

Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставляемый ребятами из StackPath.

Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

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

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

JS

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.
  0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

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

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

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

Показать компоненты, требующие JavaScript
  • Оповещения об увольнении (Alerts)
  • Кнопки для переключения состояний и функции флажка / радио
  • Карусель для любого поведения слайдов, элементов управления и индикаторов
  • Свернуть для переключения видимости содержимого (Collapse)
  • Выпадающие списки (Dropdowns) для отображения и позиционирования (также требуется Popper. js)
  • Модальные окна для отображения, позиционирования и прокрутки
  • Navbar для расширения нашего плагина Collapse для реализации адаптивного поведения
  • Всплывающие подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper.js)
  • 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-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Необязательный JavaScript; выберите один из двух! -->

    <!-- Вариант 1: пакет Bootstrap с Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Вариант 2: отдельные JS для Popper и Bootstrap -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn. jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

Важные глобалы

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

HTML5 doctype

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 и Система пользовательского поиска Google.

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

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

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

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

Reboot (перезагрузка)

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

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

  • Следуйте @getbootstrap on Twitter.
  • Прочтите и подпишитесь на The Official Bootstrap Blog.
  • Join the official Slack room.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Справку по реализации можно найти на сайте Stack Overflow (с тегами bootstrap-4).
  • Разработчики должны использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаружимости.

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

Оповещения

· Bootstrap v4.6

Посмотреть на GitHub

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

Примеры

Оповещения

доступны для любой длины текста, а также для дополнительной кнопки закрытия. Для правильной стилизации используйте один из восьми обязательных контекстных классов (например, .alert-success ). Для встроенного отключения используйте плагин оповещений jQuery.

Простое основное оповещение — проверьте!

Простое вторичное оповещение — проверьте!

Простое предупреждение об успехе — проверьте!

Простое предупреждение об опасности — проверьте!

Простое предупреждение — проверьте!

Простое информационное оповещение — проверьте!

Простое световое оповещение — проверьте!

Простое предупреждение о темноте — проверьте!

 <роль div="предупреждение">
  Простое основное оповещение — проверьте!
Простое вторичное оповещение — проверьте!
Простое предупреждение об успехе — проверьте!
Простое предупреждение об опасности — проверьте!
Простое предупреждение — проверьте!
Простое информационное оповещение — проверьте!
Простое световое оповещение — проверьте!
Простое темное оповещение — проверьте!
Передача значения вспомогательным технологиям

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

Цвет ссылки

Используйте ссылку .alert-link для быстрого предоставления соответствующих цветных ссылок в любом предупреждении.

Простое основное оповещение с примером ссылки. Нажмите на него, если хотите.

Простое вторичное оповещение с примером ссылки. Нажмите на него, если хотите.

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

Простое предупреждение об опасности с примером ссылки. Нажмите на него, если хотите.

Простое предупреждение с примером ссылки. Нажмите на него, если хотите.

Простое информационное оповещение с примером ссылки. Нажмите на него, если хотите.

Простое световое оповещение с примером ссылки. Нажмите на него, если хотите.

Простое темное оповещение с примером ссылки. Нажмите на него, если хотите.

 <роль div="предупреждение">
  Простое основное оповещение с примером ссылки. Нажмите на него, если хотите.
Простое вторичное оповещение с примером ссылки. Нажмите на него, если хотите.
Простое уведомление об успешном завершении с примером ссылки. Нажмите на него, если хотите.
Простое предупреждение об опасности с примером ссылки. Нажмите на него, если хотите.
Простое предупреждение с примером ссылки. Нажмите на него, если хотите.
Простое информационное оповещение с примером ссылки. Нажмите на него, если хотите.
Простое световое оповещение с примером ссылки. Нажмите на него, если хотите.
Простое темное оповещение с примером ссылки. Нажмите на него, если хотите.

Дополнительный контент

Оповещения также могут содержать дополнительные элементы HTML, такие как заголовки, абзацы и разделители.

Молодец!

О да, вы успешно прочитали это важное предупреждающее сообщение. Этот пример текста будет немного длиннее, чтобы вы могли увидеть, как интервалы в предупреждении работают с такого рода контентом.

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

 <роль div="предупреждение">
   
Молодец!
 
  
О, да, вы успешно прочитали это важное предупреждающее сообщение. Этот пример текста будет немного длиннее, чтобы вы могли увидеть, как интервалы в предупреждении работают с таким содержанием.

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

Увольнение

С помощью подключаемого модуля JavaScript для предупреждений можно отклонить любое встроенное предупреждение. Вот как:

  • Убедитесь, что вы загрузили подключаемый модуль оповещения или скомпилированный Bootstrap JavaScript.
  • Если вы собираете наш JavaScript из исходного кода, требуется util.js . Скомпилированная версия включает это.
  • Добавьте кнопку отклонения и класс .alert-dismissible , который добавляет дополнительные отступы справа от предупреждения и позиционирует .закрыть кнопку.
  • К кнопке отклонения добавьте атрибут data-dismiss="alert" , который запускает функции JavaScript. Обязательно используйте с ним элемент
  • Чтобы анимировать оповещения при их отклонении, обязательно добавьте классы .fade и .show .

Вы можете увидеть это в действии на живой демонстрации:

Святое гуакамоле! Вы должны проверить некоторые из этих полей ниже.

 <роль div="предупреждение">
  Святое гуакамоле! Вы должны проверить некоторые из этих полей ниже.

Поведение JavaScript

Триггеры

Включить отклонение оповещения через JavaScript:

 $('.alert').alert()

Или с атрибутами данных на кнопке в предупреждении , как показано выше:

Обратите внимание, что закрытие оповещения удалит его из DOM.

Методы

Метод Описание
$().alert() Заставляет прослушивать оповещения о событиях кликов для дочерних элементов, которые имеют атрибут data-dismiss="alert" . (Не требуется при использовании автоинициализации data-api.)
$().alert('закрыть') Закрывает оповещение, удаляя его из модели DOM. Если в элементе присутствуют классы .fade и .show , предупреждение исчезнет, ​​прежде чем оно будет удалено.
$().alert('удалить') Уничтожает оповещение элемента.
 $('.alert').alert('закрыть')

События

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

Событие Описание
close.bs.alert Это событие возникает немедленно при вызове метода экземпляра close .
закрытое.бс.предупреждение Это событие запускается, когда оповещение закрыто (будет ожидать завершения переходов CSS).
 $('#myAlert').on('closed.bs.alert', функция () {
  // сделай что-нибудь...
})

Бейджи · Bootstrap

  • Пример
  • Контекстные варианты
  • Значки для таблеток
  • Ссылки

Документация и примеры для бейджей, нашего небольшого количества и компонента для маркировки.

Пример

Значки масштабируются в соответствии с размером непосредственного родительского элемента с использованием относительного размера шрифта и эм ед.

Пример заголовка New

Пример заголовка New

Пример заголовка New

Пример заголовка New

Пример заголовка New

Пример заголовка New

  
Пример заголовка 
Новый 
 
Пример заголовка 
Новый 
 
Пример заголовка 
Новый 
 
Пример заголовка 
Новый 
 
Пример заголовка 
Новый 
 
Пример заголовка 
Новый

Значки можно использовать как часть ссылок или кнопок для обеспечения счетчика.

 <тип кнопки="кнопка">
  Уведомления 4

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

Если контекст не ясен (как в примере с «Уведомлениями», где подразумевается, что «4» — это количество уведомлений), рассмотрите возможность включения дополнительного контекста с визуально скрытым фрагментом дополнительного текста.

 <тип кнопки="кнопка">
  Профиль 9
  непрочитанные сообщения

Контекстные варианты

Добавьте любой из перечисленных ниже классов модификаторов, чтобы изменить внешний вид значка.

Первичный Среднее Успех Опасность Предупреждение Информация Свет Темный

 Основной
Вторичное
Успех
Опасность
Предупреждение
Информация
Легкий
Темный
Передача значения вспомогательным технологиям

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

Таблетки-значки

Используйте класс модификатора .badge-pill , чтобы сделать значки более округлыми (с большим радиусом границы и дополнительным горизонтальным отступом ).

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *