Загрузка

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

Bootstrap CDN

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

<!-- Последняя компиляция и сжатый CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Дополнение к теме -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

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

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

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

bower install bootstrap

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

Вы также можете установить Bootstrap используя $ npm:

npm install bootstrap@3

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

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

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

Установить с помощью 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 3

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

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.*), а также ее минимизированный вариант (bootstrap.min.*). CSS карты источника (bootstrap.*.map) are available for use with certain browsers' developer tools. Как дополнительные опции тем Bootstrap - также предоставляются шрифты с Glyphicons.

Исходный код 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.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 (Счетчик)

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

grunt test (Run тесты)

Запуск JSHint и запуск QUnit тесты в реальных браузерах, благодаря Karma.

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

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

grunt (Построить абсолютно все и запустить тесты)

Компиляции and минифайлы CSS and 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 мета-тега *должны* быть указаны в первую очередь в head; любой другой контент в head должен быть указан *после* этих тегов -->
    <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 -->
    <!-- Предупреждение: Respond.js не работает при просмотре страницы через файл:// -->
    <!--[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 (необходим для Bootstrap - х JavaScript плагины) -->
    <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

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

Navbars в действии

Навигационное меню

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

Статическое навигационное меню

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

Фиксированное навигационное меню

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

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

Крышка

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

Карусель

Сочетание в шаблоне нав. меню и карусели, с добавлением некоторых новых компонентов.

Блог

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

Панель приборов

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

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

Шаблон пользовательской формы настроен для простого входа на сайт.

Выровненное нав. меню

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

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

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

Липкий Нижний колонтитул навигации

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

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

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

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

Off-холст

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

Инструменты

Bootlint

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

Сообщество

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

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

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

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

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

Шаги для блокировки адаптивного просмотра

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

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

Шаблон Bootstrap с заблокированной адаптивностью

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

Просмотреть пример неадаптивного шаблона

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

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

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

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

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

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

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

Браузеры для ПК

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

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

Для Firefox, в дополнение к последней нормальной стабильной версии, мы также поддерживаем последний Выпуск с расширенной поддержкой (СОЭ) версия браузера Firefox.

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

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

Internet Explorer 8 и 9

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

Посетите Могу ли я использовать... для более детального ознакомления, какие свойства 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 использует эту комбинацию с его символичной иконкой. Если страница кэшируется, и загружается без мыши по окну (т.е. нажать кнопку обновления или загрузки в встроенном кадре), то страница вынесена до загрузки шрифтов. При наведении курсора на страницу (тело) покажет некоторые значки и зависший над остальными иконами покажет также. Смотреть выпуск #13863 для деталей.

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

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

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

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

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

Просмотрите эти вопросы на StackOverflow для уточнений.

Internet Explorer 10 на Windows 8 и Windows Phone 8

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

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

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

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

// Авторских 2014-2019 Twitter, Вкл.
// Лицензированных в соответствии с 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 В8.0 были некоторые проблемы с количеством десятичных знаков, используемых в нашем .col-*-1 грид классов. Так что если у вас 12 индивидуальный грид столбцы, Вы заметите, что они придумали короткие по сравнению с другими рядами колонн. Помимо обновления сафари на iOS, у вас есть несколько вариантов решений:

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

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

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

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

текстовых полей iOS и прокрутки

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

Виртуальная клавиатура

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

Меню Навигации

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

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

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

Липкий :hover/:focus на мобильном

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

Печать

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

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

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

Также, как Сафари и v8.0, фиксированной ширины .container может вызвать Сафари использовать необычайно маленький размер шрифта при печати. См. #14868 и В WebKit ошибка #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 demo.

Валидаторы

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

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

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

Поддержка третьих сторон

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

Размерность блоков

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

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

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

/* Вариант 1А: Переопределить модель одного элемента поле через CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

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

/* Вариант 2А: сброс всего региона через 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;
}

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

Доступность

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

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

Если ваши навигации содержит множество ссылок и доходит до основного Контента в DOM, добавить Skip to main content ссылка до навигации (для простого объяснения, увидеть это Статья A11Y проект пропустить навигационные ссылки). С помощью .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">
    <!-- Основное содержание страницы -->
  </div>
</body>

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

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

Узнайте больше о HTML-код CodeSniffer и Penn state's AccessAbility.

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

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

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

• "HTML-код Codesniffer" букмарклет для выявления проблем доступности
• Расширение доступности разработчика в Chrome инструменты
• Цветовой Контраст Анализатор
• Проект A11Y
• МДН документации доступности

Лицензия FAQs

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

Она требует:

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

Она позволяет:

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

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

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

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

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

Полная версия лицензии Bootstrap размещена в проекте репозитория более подробно.

Переводы

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

• Bootstrap 中文文档 (Китайский)
• Bootstrap 3 中文手冊 (Китайский (традиционный))
• Bootstrap på Dansk (Датский)
• Bootstrap en Français (Французкий)
• Bootstrap auf Deutsch (Немецкий)
• Bootstrap в Italiano (Итальянский)
• Bootstrap 한국어 (Корейский)
• Bootstrap em Português do Brasil (Бразильский Португальский)
• Bootstrap in English (English)
• Bootstrap en Español (Испанский)
• Türkçe Bootstrap (Турецкая)
• Bootstrap українською (украинский)
• Bootstrap bằng tiếng Việt (вьетнамский)

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

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