Скачать

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

jsDelivr

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

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Установить с Бауэром

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

bower install bootstrap

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

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

npm install bootstrap@3

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

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

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

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

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

composer require twbs/bootstrap

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

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

Что включено

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 включает предварительно скомпилированные ресурсы 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, вы должны сначала загрузить и установить 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(Смотреть)

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

grunt test(Выполнить тесты)

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

grunt docs(Создайте и протестируйте активы документации)

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

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

Компилирует и минимизирует CSS и JavaScript, создает веб-сайт документации, запускает средство проверки HTML5 для документов, регенерирует активы Customizer и многое другое. Требуется Джекил . Обычно это необходимо только в том случае, если вы взламываете сам 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://cdn.jsdelivr.net/npm/[email protected]/dist/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://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/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://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Примеры

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

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

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

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

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

Загрузочная тема

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

Сетки

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

Джамботрон

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

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

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

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

Навбар

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

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

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

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

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

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

Покрытие

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

Карусель

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

Блог

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

Приборная доска

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

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

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

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

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

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

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

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

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

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

Неотзывчивый Bootstrap

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

Off-canvas

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

Инструменты

Бутлинт

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

Сообщество

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

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

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

Отключение отзывчивости

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Неофициально 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.

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. По этой причине, начиная с версии 3.0.1, мы больше не используем max-widthв .containers.

Internet Explorer 8 и @font-face

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

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

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

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

Подтвердите режим документа, открыв инструменты отладки: нажмите F12и отметьте «Режим документа».

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

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

Internet Explorer 10 в Windows 8 и Windows Phone 8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Начиная с iOS 9.3, когда модальное окно открыто, если начальное касание жеста прокрутки находится в пределах границ текстового <input>или a <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 (и, по-видимому, даже некоторые более новые версии) поставляются с приложением «Браузер» в качестве веб-браузера по умолчанию (в отличие от Chrome). К сожалению, в браузерном приложении много ошибок и несоответствий с CSS в целом.

Выберите меню

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

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

Хотите увидеть пример? Посмотрите эту демонстрацию JS Bin.

Валидаторы

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

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

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

Сторонняя поддержка

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

Размер коробки

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

В зависимости от контекста вы можете при необходимости переопределить (вариант 1) или сбросить размер блока для целых регионов (вариант 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, добавьте Skip to main contentссылку перед навигацией (простое объяснение см. в этой статье 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 Penn State .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Переводы

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

• Bootstrap 中文文档 (китайский)
• Bootstrap по датскому языку (датский)
• Bootstrap en Français (французский)
• Bootstrap auf Deutsch (немецкий)
• Bootstrap на итальянском языке (итальянский)
• Bootstrap 한국어 (корейский)
• Bootstrap em Português do Brasil (бразильский португальский)
• Bootstrap по-русски (Русский)
• Bootstrap en Español (испанский)
• Türkçe Bootstrap (турецкий)
• Bootstrap українською (украинский)
• Bootstrap bằng tiếng Việt (вьетнамский)

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

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