Bootstrap 3

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

Загрузка

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

BootstrapCDN

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

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

<!-- Optional theme -->
<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">

<!-- Latest compiled and minified 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 package.json содержит дополнительную метаданные по следующим ключам:

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

Установка с Composer

Вы также можете установить и управлять Bootstrap 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 и является способом управления зависимостями разработки через 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 для документации, перегенерирует ресурсы 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 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>Hello, world!</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 для визуально улучшенного опыта.

Сетки

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

Jumbotron

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

Узкий Jumbotron

Создайте более настраиваемый страницу, сузив стандартный контейнер и Jumbotron.

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

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

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

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

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

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

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

Настраиваемые компоненты

Обложка

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

Карусель

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

Блог

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

Панель управления

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

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

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

Выровненное навигационное меню

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

Фиксированный нижний колонтитул

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

Фиксированный нижний колонтитул с навигационным меню

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

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

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

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

Отключенная область

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

Инструменты

Bootlint

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

Сообщество

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

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

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

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

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

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

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

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

Шаблон 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 для поддержки медиа-запросов.

Подробную информацию о поддержке браузерами CSS3 и HTML5 функций можно найти на сайте Can I use....

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

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 (также известное как 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 и Ширина устройства.

Мы включаем это во все документацию и примеры 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 начинают применяться после нажатия на элемент и прекращают применяться только после того, как пользователь нажмёт на какой-либо другой элемент. Это может привести к тому, что состояния :hover Bootstrap будут нежелательно «застревать» в таких браузерах. Некоторые мобильные браузеры также делают :focus аналогичным образом «фиксированными». В настоящее время нет простого решения для этих проблем, кроме полного удаления таких стилей.

Печать

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

В частности, начиная с Chrome v32 и независимо от настроек отступов, Chrome использует ширину области просмотра значительно меньше физического размера бумаги при решении медиазапросов во время печати веб-страницы. Это может привести к неожиданному включению дополнительной сетки Bootstrap при печати. См. проблему #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). К сожалению, приложение Browser имеет много ошибок и несоответствий с 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 не влиять на окончательно вычисленную ширину элемента. Узнайте больше о модели и размерности box-модели на 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 следует общим веб-стандартам и — с минимальными дополнительными усилиями — может использоваться для создания сайтов, доступных для пользователей с использованием AT.

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

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

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

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

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

Узнайте больше на HTML CodeSniffer и в AccessAbility Пенсильванского государственного университета.

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

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

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

• "HTML Codesniffer" закладка для выявления проблем с доступностью
• расширение для Chrome'а, доступности для разработчиков
• Анализатор контрастности цветов
• Проект A11Y
• документация по доступности MDN

Вопросы и ответы о лицензиях

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

Требования:

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

Разрешения:

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

Запреты:

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

Не требуется:

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

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

Переводы

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

• Bootstrap 中文文档 (Chinese)
• 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 по-русски (Russian)
• Bootstrap en Español (Spanish)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukrainian)
• Bootstrap bằng tiếng Việt (Vietnamese)

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

Закончили новый или лучший перевод? Создайте запрос на добавление в список.