Скачать

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

BootstrapCDN

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

<!-- Последний скомпилированный и минимизированный CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Необязательная тема -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Последний скомпилированный и минифицированный JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Установить с помощью Bower

Вы также можете установить и управлять Bootstrap 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 - путь к основному исходному файлу Bootstrap Less
• style - путь к неминифицированному CSS Bootstrap, который был предварительно скомпилирован с использованием настроек по умолчанию (без настройки)

Установить с помощью Composer

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

composer require twbs/bootstrap

Для Less/Sass требуется автопрефиксер

Bootstrap использует Автопрефиксер для работы префиксы поставщиков 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 в реальном браузеры благодаря Karma.

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

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

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

Компилирует и минимизирует CSS и JavaScript, создает веб-сайт документации, запускает валидатор HTML5 для документов, восстанавливает ресурсы настройщика и т. д. Требуется 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">
    <!-- Приведенные выше 3 метатега *должны* быть первыми в голове; любое другое содержимое заголовка должно быть *после* этих тегов -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Примеры

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

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

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

Стартовый шаблон

Ничего, кроме основ: скомпилированные CSS и JavaScript вместе с контейнером.

Bootstrap тема

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

Grids

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

Джамботрон

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

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

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

Навбары в действии

Панель навигации

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

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

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

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

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

Кастомные компоненты

Обложка

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

Карусель

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

Блог

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

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

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

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

Индивидуальный макет и дизайн формы для простой формы входа.

Выровненная навигация

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

Липкий нижний колонтитул

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

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

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

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

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

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

Off-canvas

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

Инструменты

Bootlint

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

Сообщество

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

• Чат @getbootstrap_ru в Телеграм.
• Прочтите и подпишитесь на официальный блог 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; Убедитесь, что что это происходит после стандартного Bootstrap CSS. При желании вы можете избежать !important с помощью медиа-запросов или какого-нибудь селектора.
3. Если вы используете панели навигации, удалите все действия при сворачивании и раскрытии панели навигации.
4. Для макетов сетки используйте классы .col-xs-* в дополнение или вместо средних/больших. Не волнуйтесь, очень маленькая сетка устройства масштабируется для всех разрешений.

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

Шаблон начальной загрузки с отключенной отзывчивостью

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

Посмотреть не отвечающий пример

Браузер и поддержка устройств

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

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

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

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

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

Вообще говоря, Bootstrap поддерживает последние версии браузеров по умолчанию для каждой основной платформы. Обратите внимание, что прокси-браузеры (такие как Opera Mini, режим Opera Mobile Turbo, 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 в .container.

Internet Explorer 8 и @font-face

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

IE Compatibility modes

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

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

Подтвердите режим документа, открыв инструменты отладки: нажмите F12 anи проверьте "Document Mode".

Этот тег включен во всю документацию и примеры 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 (также известное как GDR3), так как оно заставляет такие устройства показывать в основном вид рабочего стола вместо узкого« телефонного »вида. Чтобы решить эту проблему, вам необходимо включить следующие CSS и JavaScript, чтобы обойти ошибку.

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

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/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 #175502 (исправлена в Chrome v40) и ошибку WebKit #153852.

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

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

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

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

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

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

Масштабирование браузера

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

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

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

Печать

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

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

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

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

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

Стандартный Android-браузер

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

Меню выбора

В элементах <select>, стандартный браузер Android не будет отображать боковые элементы управления, если применены border-radius и/илиr 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 и Систему пользовательского поиска Google, конфликтует с Bootstrap из-за * { box-sizing: border-box; }, правило, согласно которому padding не влияет на окончательную вычисленную ширину элемента. Узнайте больше о блочной модели и ее размерах на сайте CSS Tricks.

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

/* Box-sizing resets
 *
 * Сбросьте отдельные элементы или переопределите регионы,
 * чтобы избежать конфликтов из-за настроек глобальной блочной модели Bootstrap.
 * Две опции, индивидуальное переопределение и сброс области,
 * доступны в виде простого CSS и некомпилированного формата Less.
 */

/* Вариант 1A: переопределить блочную модель отдельного элемента с помощью CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Вариант 1B: переопределить блочную модель отдельного элемента с помощью примеси Bootstrap Less */
.element {
  .box-sizing(content-box);
}

/* Вариант 2A: сбросить весь регион с помощью 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;
}

/* Вариант 2B: сбросить весь регион с помощью настраиваемого миксина Less */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Доступность

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

Пропустить навигацию

Если ваша навигация содержит много ссылок и находится перед основным контентом в DOM, добавьте ссылку Перейти к основному контенту перед навигацией (простое объяснение смотрите в этом Статья проекта A11Y о пропуске навигационных ссылок). Использование класса .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 and Доступность штата Пенсильвания.

Цветовой контраст

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

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

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

Часто задаваемые вопросы о лицензиях

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

Это требует от вас:

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

Это позволяет вам:

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

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

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

Это не требует от вас:

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

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

Переводы

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

• Bootstrap documentation (English)
• Bootstrap по-русски (Русский)

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

Вы выполнили новый или лучший перевод? Откройте pull request, чтобы добавить его в наш список.