Скачивание

Bootstrap (в настоящее время v3.3.7) имеет несколько простых способов быстрого начала работы, каждый из которых призван удовлетворить разные уровни навыков и потребности. Прочитайте, чтобы узнать, что подходит для ваших конкретных нужд.

CDN Bootstrap

Люди из MaxCDN с благодарностью предоставляют поддержку CDN для CSS и JavaScript Bootstrap. Просто используйте эти Bootstrap CDN ссылки.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Установка с Bower

Вы также можете установить и управлять Bootstrap's Less, CSS, JavaScript и шрифтами с помощью Bower:

$ bower install bootstrap

Установка с npm

Вы также можете установить Bootstrap с помощью npm:

$ npm install bootstrap@3

require('bootstrap') загрузит все jQuery плагины Bootstrap на объект jQuery. Сам модуль bootstrap не экспортирует ничего. Вы можете загрузить jQuery плагины Bootstrap индивидуально, загрузив файлы /js/*.js под директорией пакета.

Bootstrap's package.json содержит некоторые дополнительные метаданные по следующим ключам:

• less - путь к основному файлу Less Bootstrap
• style - путь к неминифицированному CSS Bootstrap, которое было предварительно скомпилировано с использованием стандартных настроек (без настройки)

Установка с Composer

Вы также можете установить и управлять Bootstrap's Less, CSS, JavaScript и шрифтами с помощью Composer:

$ composer require twbs/bootstrap

Autoprefixer требуется для Less/Sass

Bootstrap использует Autoprefixer для обработки CSS префиксов. Если вы компилируете Bootstrap из его исходного Less/Sass и не используете наш Gruntfile, вам нужно будет интегрировать Autoprefixer в свой процесс сборки. Если вы используете предварительно скомпилированный Bootstrap или наш Gruntfile, вам не нужно беспокоиться об этом, так как Autoprefixer уже интегрирован в наш Gruntfile.

Что включено

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

Скомпилированный Bootstrap

После скачивания распакуйте сжатую папку, чтобы увидеть структуру (скомпилированного) Bootstrap. Вы увидите что-то вроде этого:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

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

Исходный код Bootstrap

Исходный код загрузки Bootstrap включает предварительно скомпилированные CSS, JavaScript и ассеты шрифтов, а также исходные Less, JavaScript и документацию. Более конкретно, он включает следующее и многое другое:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Папка less/, js/ и fonts/ являются исходным кодом для нашего CSS, JS и иконки шрифтов (соответственно). Папка dist/ включает все, что перечислено в разделе предварительно скомпилированной загрузки выше. Папка docs/ включает исходный код для нашей документации, а examples/ использования Bootstrap. Кроме того, любой другой включенный файл предоставляет поддержку пакетов, информацию о лицензии и разработку.

Компиляция CSS и JavaScript

Bootstrap использует Grunt для своей системы сборки, с удобными методами для работы с фреймворком. Это как мы компилируем наш код, запускаем тесты и многое другое.

Установка Grunt

Чтобы установить Grunt, вы должны сначала скачать и установить node.js (который включает npm). npm означает node packaged modules и является способом управления зависимостями разработки через node.js.

1. Установите grunt-cli глобально с npm install -g grunt-cli.
2. Перейдите в корневую директорию /bootstrap/, затем запустите npm install. npm прочитает файл package.json и автоматически установит необходимые локальные зависимости, указанные там.

После завершения вы сможете запускать различные команды Grunt из командной строки.

Доступные команды Grunt

grunt dist (Только компиляция CSS и JavaScript)

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

grunt watch (Наблюдение)

Отслеживает Less исходные файлы и автоматически перекомпилирует их в CSS при каждом сохранении изменений.

grunt test (Запуск тестов)

Запускает JSHint и запускает QUnit тесты в headless режиме в PhantomJS.

grunt docs (Сборка и тестирование документации)

Сборка и тестирование CSS, JavaScript и других активов, которые используются при локальном запуске документации через bundle exec jekyll serve.

grunt (Сборка абсолютно всего и запуск тестов)

Компилирует и минифицирует CSS и JavaScript, собирает веб-сайт документации, запускает HTML5 валидатор для документов, перегенерирует активы Customizer и многое другое. Требует Jekyll. Обычно необходимо только если вы модифицируете Bootstrap напрямую.

Устранение неполадок

Если вы столкнетесь с проблемами при установке зависимостей или запуске команд Grunt, сначала удалите директорию /node_modules/, сгенерированную npm. Затем, запустите npm install снова.

Базовый шаблон

Начните с этого базового HTML шаблона, или модифицируйте эти примеры. Мы надеемся, что вы настроите наши шаблоны и примеры, адаптируя их к вашим потребностям.

Скопируйте HTML ниже, чтобы начать работу с минимальным документом Bootstrap.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Привет, мир!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Примеры

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

Получите исходный код для каждого примера ниже, скачав репозиторий Bootstrap. Примеры находятся в директории docs/examples/.

Использование фреймворка

Шаблон запуска

Всего лишь компилированные CSS и JavaScript, а также контейнер.

Тема Bootstrap

Загрузите опциональную тему Bootstrap для улучшенного визуального опыта.

Сетки

Множество примеров расположения сеток с четырьмя уровнями, вложенностью и многое другое.

Джумботрон

Создайте джумботрон с навигационной панелью и несколькими базовыми колонками сетки.

Узкий джумботрон

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

Навигационные панели в действии

Навигационная панель

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

Статическая навигационная панель сверху

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

Фиксированная навигационная панель

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

Пользовательские компоненты

Обложка

Одностраничный шаблон для создания простых и красивых домашних страниц.

Карусель

Настройте навигационную панель и карусель, а затем добавьте несколько новых компонентов.

Блог

Простой двухколоночный макет блога с кастомной навигацией, заголовком и типом.

Панель администратора

Базовая структура для административной панели с фиксированной боковой панелью и навигационной панелью.

Страница входа

Кастомное форматирование и дизайн для простого формы входа.

Обоснованная навигация

Создайте кастомную навигационную панель с обоснованными ссылками. Внимание! Не очень дружелюбно к Safari.

Липкий подвал

Прикрепите подвал к нижней части видимой области, когда содержимое короче.

Липкий подвал с навигационной панелью

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

Эксперименты

Неадаптивный Bootstrap

Легко отключите адаптивность Bootstrap согласно нашим документам.

Навигация вне экрана

Создайте переключаемую меню навигации вне экрана для использования с Bootstrap.

Инструменты

Bootlint

Bootlint является официальным инструментом проверки HTML Bootstrap linter. Он автоматически проверяет несколько распространенных ошибок HTML в веб-страницах, которые используют Bootstrap в достаточно "чистом" виде. Компоненты Vanilla Bootstrap требуют, чтобы их части DOM соответствовали определенным структурам. Bootlint проверяет, что экземпляры компонентов Bootstrap имеют правильно структурированный HTML. Рассмотрите добавление Bootlint в ваш инструмент разработки Bootstrap, чтобы ни одна из распространенных ошибок не замедляла разработку вашего проекта.

Сообщество

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

• Читайте и подписывайтесь на Официальный блог Bootstrap.
• Общайтесь с единомышленниками в IRC на сервере irc.freenode.net, в канале ##bootstrap.
• Для помощи в использовании Bootstrap, задайте вопрос на StackOverflow с тегом twitter-bootstrap-3.
• Разработчикам рекомендуется использовать ключевое слово bootstrap при распространении пакетов, которые модифицируют или добавляют функциональность Bootstrap при доставке через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.
• Найдите вдохновляющие примеры людей, создающих с помощью Bootstrap на Bootstrap Expo.

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

Отключение адаптивности

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

Шаги для отключения адаптивности страницы

1. Опустите <meta> с упоминанием вида, упомянутого в документации по CSS
2. Переопределите width на .container для каждого уровня сетки с одним шириной, например width: 970px !important; Убедитесь, что это происходит после стандартного CSS Bootstrap. Вы можете опционально избежать !important с помощью медиа-запросов или некоторых селекторов.
3. Если используете навигационные панели, удалите все поведение сворачивания и раскрытия навигационных панелей.
4. Для сетки макетов используйте классы .col-xs-* в дополнение к или вместо средних/больших. Не беспокойтесь, сетка дополнительного маленького устройства масштабируется до всех разрешений.

Вам все еще понадобится Respond.js для IE8 (так как наши медиа-запросы все еще там и должны быть обработаны). Это отключает "мобильный сайт" аспекты Bootstrap.

Шаблон Bootstrap с отключенной адаптивной функцией

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

Просмотр неадаптивного примера

Поддержка браузеров и устройств

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

Поддерживаемые браузеры

В частности, мы поддерживаем последние версии следующих браузеров и платформ.

Альтернативные браузеры, которые используют последнюю версию WebKit, Blink или Gecko, независимо от того, напрямую или через API веб-представления платформы, явно не поддерживаются. Однако Bootstrap должен (в большинстве случаев) корректно отображаться и функционировать в этих браузерах. Более конкретная информация о поддержке приведена ниже.

Мобильные устройства

В целом, Bootstrap поддерживает последние версии браузеров по умолчанию для каждой основной платформы. Обратите внимание, что прокси-браузеры (например, Opera Mini, Turbo-режим Opera Mobile, UC Browser Mini, Amazon Silk) не поддерживаются.

Настольные браузеры

Аналогично, поддерживаются последние версии большинства настольных браузеров.

На Windows, мы поддерживаем Internet Explorer 8-11.

Для Firefox, кроме последней стабильной версии, мы также поддерживаем последнюю Расширенную поддержку версию (ESR) Firefox.

Неофициально, Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux, а также Internet Explorer 7, а также Microsoft Edge, хотя они не поддерживаются официально.

Для списка некоторых из браузерных багов, с которыми Bootstrap сталкивается, см. нашу Стена браузерных багов.

Internet Explorer 8 и 9

Internet Explorer 8 и 9 также поддерживаются, однако, пожалуйста, обратите внимание, что некоторые CSS3 свойства и HTML5 элементы не полностью поддерживаются этими браузерами. Кроме того, Internet Explorer 8 требует использования Respond.js для поддержки медиа-запросов.

Посетите Can I use... для деталей поддержки браузеров CSS3 и HTML5.

Internet Explorer 8 и Respond.js

Будьте осторожны с следующими предостережениями при использовании Respond.js в вашей разработке и производственной среде для Internet Explorer 8.

Respond.js и CSS, размещенные на разных (под)доменах

Использование Respond.js с CSS, размещенным на другом (под)домене (например, на CDN) требует некоторых дополнительных настроек. См. документацию Respond.js для деталей.

Respond.js и file://

Из-за правил безопасности браузера Respond.js не работает с страницами, просмотренными через протокол file:// (например, при открытии локального HTML-файла). Чтобы протестировать отзывчивые функции в IE8, просматривайте ваши страницы через HTTP(S). См. документацию Respond.js для деталей.

Respond.js и @import

Respond.js не работает с CSS, которое ссылается через @import. В частности, некоторые конфигурации Drupal используют @import. См. документацию Respond.js для деталей.

Internet Explorer 8 и box-sizing

IE8 не полностью поддерживает box-sizing: border-box; при комбинации с min-width, max-width, min-height или max-height. По этой причине, начиная с v3.0.1, мы больше не используем max-width на .containers.

Internet Explorer 8 и @font-face

IE8 имеет некоторые проблемы с @font-face при комбинации с :before. Bootstrap использует эту комбинацию с его Glyphicons. Если страница кэшируется, и загружается без наведения мыши над окном (т.е. нажмите кнопку обновления или загрузите что-то в iframe), то страница отображается до загрузки шрифта. Наведение мышью над страницей (тело) покажет некоторые из икон, а наведение мышью над оставшимися иконками покажет их. См. проблему #13863 для деталей.

Режимы совместимости IE

Bootstrap не поддерживается в старых режимах совместимости Internet Explorer. Чтобы убедиться, что вы используете последний режим рендеринга для IE, рассмотрите включение соответствующего тега <meta> на ваших страницах:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Подтвердите режим документа: откройте инструменты отладки: нажмите F12 и проверьте "Режим документа".

Этот тег включен во все документы Bootstrap и примеры, чтобы обеспечить наилучшее возможное отображение в каждой поддерживаемой версии Internet Explorer.

См. этот вопрос StackOverflow для дополнительной информации.

Internet Explorer 10 в Windows 8 и Windows Phone 8

Internet Explorer 10 не различает ширину устройства от ширины виртуального окна просмотра, и поэтому не применяет медиа-запросы в CSS Bootstrap корректно. Обычно вам просто нужно добавить небольшой фрагмент CSS для исправления этой ошибки:

@-ms-viewport       { width: device-width; }

Однако это не работает для устройств, работающих на Windows Phone 8 версий старше Обновление 3 (a.k.a. GDR3), так как это вызывает такие устройства для отображения в основном десктопном режиме вместо узкого "телефонного" режима. Чтобы решить эту проблему, вам потребуется включить следующий CSS и JavaScript для обхода ошибки.

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Для получения дополнительной информации и руководства по использованию, прочитайте Windows Phone 8 и Device-Width.

В качестве предупреждения, мы включаем это во все документы Bootstrap и примеры в качестве демонстрации.

Округление процентов в Safari

Рендеринг движка версий Safari, предшествующих v7.1 для OS X и Safari для iOS v8.0, имел некоторые проблемы с количеством десятичных знаков, используемых в наших классах сетки .col-*-1. Таким образом, если у вас было 12 отдельных столбцов сетки, вы заметите, что они оказались короче, чем в других строках столбцов. Помимо обновления Safari/iOS, у вас есть несколько вариантов для обходных решений:

• Добавьте .pull-right к последнему столбцу сетки, чтобы получить жесткое правовыравнивание
• Тюнинг ваших процентов вручную, чтобы получить идеальное округление для Safari (более сложно, чем первый вариант)

Модальные окна, навигационные панели и виртуальные клавиатуры

Переполнение и прокрутка

Поддержка overflow: hidden на элементе <body> довольно ограничена в iOS и Android. В связи с этим, когда вы прокручиваете за верх или низ модального окна в любом из этих браузеров, содержимое <body> начнет прокручиваться. См. Chrome bug #175502 (исправлено в Chrome v40) и WebKit bug #153852.

iOS текстовые поля и прокрутка

Начиная с iOS 9.3, когда модальное окно открыто, если первый тач скролла находится в пределах границ текстового <input> или <textarea>, содержимое под модальным окном будет прокручиваться вместо самого модального окна. См. WebKit bug #153856.

Виртуальные клавиатуры

Кроме того, следует отметить, что если вы используете фиксированную навигационную панель или используете поля ввода в модальном окне, iOS имеет рендеринг ошибку, которая не обновляет положение фиксированных элементов при активации виртуальной клавиатуры. Несколько обходных решений для этого включают преобразование ваших элементов в position: absolute или вызов таймера на фокус, чтобы попытаться исправить позиционирование вручную. Это не обрабатывается Bootstrap, поэтому вам придется решить, какое решение лучше всего подходит для вашего приложения.

Выпадающие меню навигационной панели

Элемент .dropdown-backdrop не используется в навигационной панели на iOS из-за сложности z-индексации. Таким образом, чтобы закрыть выпадающие меню в навигационных панелях, вы должны напрямую кликнуть по элементу выпадающего меню (или любом другом элементе, который активирует событие клика в iOS).

Масштабирование страницы

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

Фиксированный :hover/:focus на мобильных устройствах

Хотя настоящее наведение на большинстве сенсорных экранов невозможно, большинство мобильных браузеров эмулируют поддержку наведения и делают :hover "фиксированным". Другими словами, :hover стили начинают применяться после тапа по элементу, и только останавливаются после того, как пользователь тапает по другому элементу. Это может привести к тому, что состояния :hover Bootstrap становятся нежелательными "застрявшими" на таких браузерах. Некоторые мобильные браузеры также делают :focus аналогично "фиксированным". На данный момент нет простого обходного решения для этих проблем, кроме как полностью удалить такие стили.

Печать

Даже в некоторых современных браузерах печать может быть капризной.

В частности, начиная с Chrome v32 и независимо от настроек полей, Chrome использует значительно более узкую ширину виртуального окна при разрешении медиа-запросов при печати веб-страницы, что может привести к неожиданному активации дополнительной сетки в Bootstrap при печати. См. проблему #12078 и Chrome bug #273306 для некоторых деталей. Предлагаемые обходные пути:

• Прими эту дополнительную сетку и убедитесь, что ваша страница выглядит приемлемо под ней.
• Настройте значения переменных Less @screen-*, чтобы считать ваш принтерный лист больше, чем дополнительная сетка.
• Добавьте пользовательские медиа-запросы для изменения размеров сетки только для печати.

Кроме того, начиная с Safari v8.0, фиксированные ширины .container могут вызывать удивительно маленький размер шрифта при печати в Safari. См. #14868 и WebKit bug #138192 для более подробной информации. Один потенциальный обход этой проблемы включает следующий CSS:

@media print {
  .container {
    width: auto;
  }
}

Android браузер по умолчанию

Из коробки, Android 4.1 (и даже некоторые более новые выпуски, похоже, поставляются с браузером по умолчанию в качестве веб-браузера выбора (в отличие от Chrome). К сожалению, браузер по умолчанию имеет много багов и несоответствий с CSS в целом.

Элементы выбора

На <select> элементах, браузер по умолчанию Android не будет отображать боковые элементы управления, если применены border-radius и/или border. (См. этот вопрос StackOverflow для деталей.) Используйте следующий фрагмент кода, чтобы удалить нежелательный CSS и отобразить <select> как нестилизованный элемент на браузере по умолчанию Android. Пользовательская агентская переопределяет взаимодействие с Chrome, Safari и Mozilla браузерами.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Хотите увидеть пример? Проверьте этот JS Bin демо.

Валидаторы

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

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

Наши HTML документы также имеют некоторые тривиальные и бессмысленные предупреждения валидации HTML из-за включения обходного пути для определенной ошибки Firefox.

Поддержка сторонних плагинов

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

Box-sizing

Некоторые сторонние программы, включая Google Maps и Google Custom Search Engine, конфликтуют с Bootstrap из-за * { box-sizing: border-box; }, правила, которое делает так, что padding не влияет на конечную вычисленную ширину элемента. Узнайте больше о модели коробки и размере на CSS Tricks.

В зависимости от контекста, вы можете переопределить по мере необходимости (Опция 1) или сбросить box-sizing для всех регионов (Опция 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Доступность

Bootstrap следует общепринятым веб-стандартам и — с минимальными дополнительными усилиями — может использоваться для создания сайтов, доступных для пользователей ВТ.

Пропуск навигации

Если ваша навигация содержит много ссылок и располагается перед основным контентом в DOM, добавьте ссылку Перейти к основному содержимому перед навигацией (подробнее см. статью A11Y Project о ссылках для пропуска навигации). Использование класса .sr-only скроет ссылку визуально, а класс .sr-only-focusable обеспечит её видимость при фокусе (для пользователей клавиатуры).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Перейти к основному содержимому</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- Основное содержимое страницы -->
  </div>
</body>

Вложенные заголовки

При вложении заголовков (<h1> - <h6>) основной заголовок документа должен быть <h1>. Последующие заголовки должны логически использовать <h2> - <h6>, чтобы скринридеры могли построить оглавление для ваших страниц.

Подробнее: HTML CodeSniffer и AccessAbility от Penn State.

Контрастность цветов

В настоящее время некоторые стандартные цветовые сочетания в Bootstrap (например, различные стили кнопок, некоторые цвета подсветки кода для базовых блоков кода, вспомогательный класс .bg-primary для контекстного фона и цвет ссылок по умолчанию на белом фоне) имеют низкий коэффициент контрастности (ниже рекомендуемого значения 4.5:1). Это может создавать проблемы для пользователей с нарушением зрения или дальтонизмом. Эти цвета по умолчанию, возможно, потребуется изменить для повышения контрастности и читаемости.

Дополнительные ресурсы

• Букмарклет "HTML Codesniffer" для выявления проблем с доступностью
• Расширение Chrome Accessibility Developer Tools
• Анализатор контрастности цветов
• Проект A11Y
• Документация по доступности на MDN

Вопросы по лицензии

Bootstrap выпущена под лицензией MIT и является авторским правом 2025 Twitter. Упрощенно она может быть описана следующими условиями.

Она требует:

• Сохранение лицензии и уведомления об авторском праве в файлах CSS и JavaScript Bootstrap при использовании их в ваших работах

Она разрешает:

• Бесплатное скачивание и использование Bootstrap, полностью или частично, для личных, частных, корпоративных или коммерческих целей
• Использование Bootstrap в пакетах или распределениях, которые вы создаете
• Модификация исходного кода
• Предоставление сублицензии для модификации и распространения Bootstrap третьим лицам, не включенным в лицензию

Она запрещает:

• Ответственность перед авторами и владельцами лицензий за ущерб, так как Bootstrap предоставляется без гарантии
• Ответственность перед создателями или правообладателями Bootstrap
• Распространение любой части Bootstrap без надлежащего упоминания
• Использование любых знаков, принадлежащих Twitter, любым способом, который может указывать или подразумевать, что Twitter одобряет ваше распространение
• Использование любых знаков, принадлежащих Twitter, любым способом, который может указывать или подразумевать, что вы создали программное обеспечение Twitter в вопросе

Она не требует:

• Включение исходного кода Bootstrap или любых модификаций, которые вы можете вносить в него, в любое собранное вами распределение, которое включает его
• Представление изменений, которые вы вносите в Bootstrap обратно в проект Bootstrap (хотя такой отзыв полезен)

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

Переводы

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

• Bootstrap по-русски (Russian)
• Bootstrap 中文文档 (Chinese)
• Bootstrap 3 中文手冊 (Chinese (Traditional))
• Bootstrap på Dansk (Danish)
• Bootstrap en Français (French)
• Bootstrap auf Deutsch (German)
• Bootstrap in Italiano (Italian)
• Bootstrap 한국어 (Korean)
• Bootstrap em Português do Brasil (Brazilian Portuguese)
• Bootstrap en Español (Spanish)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukrainian)
• Bootstrap bằng tiếng Việt (Vietnamese)

Мы не помогаем организовывать или размещать переводы, мы просто ссылаемся на них.

Завершил новый или более качественный перевод? Откройте запрос на изменение, чтобы добавить его в наш список.