Загрузка

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

Bootstrap CDN

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

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

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

<!-- Последняя компиляция и сжатый JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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 (Выполнить тесты)

Запуск У jshint и the Помощью qunit тестов (автоматически) в Помощи phantomjs.

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 Мета-теги ** должны прийти в первую очередь в голове; любой другой руководитель контент *после* эти теги -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- Предупреждение: 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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Включают все скомпилированные плагины (ниже), или включать отдельные файлы по мере необходимости -->
    <script src="js/bootstrap.min.js"></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 на 1 инструмент. Он автоматически проверяет для нескольких распространенных ошибок HTML на веб-страницах, использующих Bootstrap в достаточно "ванильным" образом. Ванильный Bootstrap - х компонентов/виджетов требуют от своих частей DOM соответствуют определенные структуры. Bootlint проверяет экземпляры Bootstrap компоненты правильно структурированный HTML. Попробуйте добавить Bootlint на Bootstrap веб-разработки компиляторов, так что ни одна из распространенных ошибок, замедлить развитие проекта.

Сообщество

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

• Прочитайте и подпишитесь на Официальный Bootstrap Блог.
• Общайтесь с другими Bootstrapperами с помощью IRC в irc.freenode.net сервере irc.freenode.net.
• Для получения справки по использованию 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">

Подтвердите режим документа, открыв средства отладки: нажмите Ф12 и проверьте "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 версий старше, поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого "phone" view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

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

// Авторских 2014-2015 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 стили начать применять после нажатия элемента и прекратить применять только после того, как пользователь нажимает некоторые другие элементы. Это может привести к Bootstrap'ы :hover состояния стать чрезмерно "застрял" на таких браузерах. Некоторые мобильные браузеры также сделать :focus аналогично липкий. В настоящее время нет простого решения таких вопросов, помимо удаления полностью такие стили.

Печать

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

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

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

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

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

Android stock браузер

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

Select меню

На <select> элементе, в Android браузере не будет отображаться элементы управления если есть border-radius и/or border. (Смотри эти вопросы на StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать <select> элемент без стиля на Android браузере. Агент пользователя фырканье предотвращает помехи с Chrome, Safari, and 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 следует общим веб-стандартам, и—при минимальных дополнительных усилиях—может быть использован для создания сайтов, доступных через В.

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

Если ваши навигации содержит множество ссылок и доходит до основного Контента в 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 и имеет авторское право 2016 Twitter. Сведена к меньшим частям, и может быть описана следующими условиями.

Она требует:

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

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

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

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

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

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

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

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

Переводы

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

• Bootstrap 中文文档 (Китайский)
• Bootstrap på Dansk (Датский)
• Bootstrap auf Deutsch (Немецкий)
• Bootstrap в Italiano (Итальянский)
• Bootstrap 한국어 (Корейский)
• Bootstrap em Português do Brasil (Бразильский Португальский)
• Bootstrap in English (English)
• Bootstrap bằng tiếng Việt (вьетнамский)

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

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