Загрузка
Загрузите Bootstrap, чтобы получить скомпилированный CSS и JavaScript исходный код или включите его с вашими любимыми менеджерами пакетов, такими как npm, Bower, RubyGems и другие.
Компилированные CSS и JS
Загружайте компилированный, готовый к использованию код Bootstrap v4.0.0 (для легкого внедрения в ваш проект), включающие:
Сюда не входит документация, исходники или сторонние JS-«зависимости» Зависимости передаются (внедряются) сервису в момент его создания (jQuery или Popper.js). Зависимости передаются (внедряются) сервису в момент его создания.
Исходные файлы
Компилируйте Bootstrap со своим «файлопроводом», загружая наши исходники Sass, JS и файлы документации. Это потребует некоторого дополнительного инструментария:
Инструменты сборки также могут понадобиться при работе с Bootstrap, но все-таки они не совсем подходят для ваших целей.
Bootstrap CDN
Пользуйтесь кэшированной версией Bootstrap для «облегчения» страницы и ускорения загрузки.
Если вы пользуетесь нашим компилированным JS, не забудьте подключить наши CDN версии jQuery и Popper.js перед вашими JS-файлами.
Системы управления пакетами (Хождение по сайтам библиотек, скачивание и распаковка архивов, копирование файлов в проект — всё это заменяется парой команд в терминале)
Используйте исходники Bootstrap в любом проекте с помощью популярных систем управления пакетами. С любой системой управления пакетами Bootstrap потребует компилятор Sass (препроцессор) и постпроцессор для правильной установки наших компилированных версий.
Устанавливайте Bootstrap в вашем приложении на движке Node с помощью пакета npm:
require(‘bootstrap’) ) загрузит все плагины JS Bootstrap в объект jQuery. Модуль bootstrap сам не экспортирует ничего. Вы можете вручную загрузить плагины JS Bootstrap, загружая файлы /js/*.js в корневую папку пакета.
пакет.json Bootstrap содержит некоторые дополнительные метаданные со следующими ключами:
RubyGems
Устанавливайте Bootstrap в ваши приложения на Ruby с помощью Bundler (рекомендовано) и системы управления пакетами «RubyGems», просто добавив следующую строку в ваш Gemfile :
Еще один способ – если вы не используете Bundler, вы можете установить gem-файл такой командой:
Composer
Вы также можете устанавливать и управлять Sass и JS в Bootstrap c помощью пакетного менеджера уровня приложений для языка программирования PHP:
NuGet
Bootstrap Начало работы
Что такое Bootstrap?
Что такое Адаптивный веб-дизайн?
Отзывчивый веб-дизайн о создании веб-сайтов, которые автоматически настроить себя хорошо выглядеть на всех устройствах, от небольших телефонов до больших настольных компьютеров.
История начальной загрузки
Bootstrap была разработана Марком Отто и Джейкобом Торнтоном в Твиттере и выпущена в качестве продукта с открытым исходным кодом в августе 2011 на GitHub.
В июне 2014 Bootstrap был проектом No1 на GitHub!
Зачем использовать Bootstrap?
Где получить Bootstrap?
Существует два способа начать использование Bootstrap на собственном веб-узле.
Загрузка начальной загрузки
Если вы хотите скачать и хост Bootstrap самостоятельно, перейдите на getbootstrap.com, и следуйте инструкциям там.
Bootstrap CDN
Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете включить его в CDN (сеть доставки контента).
Макскдн предоставляет поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить JQuery:
MaxCDN:
Одно из преимуществ использования Bootstrap CDN:
Многие пользователи уже скачали Bootstrap из макскдн при посещении другого сайта. В результате, он будет загружен из кэша, когда они посещают ваш сайт, что приводит к более быстрому времени загрузки. Кроме того, большинство CDN будет убедиться, что после того, как пользователь запрашивает файл из него, он будет обслуживаться от ближайшего к ним сервера, что также приводит к более быстрой загрузке времени.
Jquery
Bootstrap использует jQuery для плагинов JavaScript (например, модальные, подсказки и т.д.). Однако, если вы просто используете CSS часть Bootstrap, вам не нужно jQuery.
Создание первой веб-страницы с помощью Bootstrap
1. Добавление документа HTML5
Bootstrap использует HTML-элементы и свойства CSS, для которых требуется документ HTML5.
Всегда включайте в начало страницы тег документа HTML5 вместе с атрибутом lang и правильным набором символов:
2. Bootstrap 3-первый мобильный
Bootstrap 3 предназначен для реагирования на мобильные устройства. Стили мобильных устройств являются частью базовой платформы.
Чтобы обеспечить правильную визуализацию и масштабирование касания, добавьте следующий тег внутри элемента:
width=device-width деталь устанавливает ширину страницы для того чтобы последовать за шириной экрана прибора (которая будет меняться в зависимости от прибора).
initial-scale=1 деталь задает начальный уровень масштабирования при первой загрузке страницы обозревателем.
3. контейнеры
Bootstrap также требуется содержащий элемент для переноса содержимого сайта.
Есть два контейнера классов на выбор:
Вступление
Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с jsDelivr и шаблонами страниц.
Быстрый старт
Хотите использовать Бутстрап в своем проекте? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Нужна система управления пакетами или исходники Bootstrap? Перейдите на страницу загрузки.
Чтобы узнать о следующих шагах, посетите раздел Система сеток или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Bootstrap включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
Тип текущего документа
Bootstrap требует использования doctype HTML5. Без него у вас возникнут некоторые проблемы со стилями, но его включение не должно вызывать каких-либо серьезных сбоев.
Мета-теги для адаптивной вёрстки
Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в :
Вы можете увидеть пример этого в действии в стартовом шаблоне.
Размер ширины и высоты элемента (Box-sizing)
В том редком случае, когда вам понадобится переопределить его, делайте так:
Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.
«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)
Для улучшенной кроссбраузерной визуализации мы используем «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.
Сообщество
Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:
Вы также можете присоединиться к @getbootstrap on Twitter, чтобы следить за последними слухами и потрясающими музыкальными клипами.
Подключение фреймворка Bootstrap к сайту
В этой статье мы разберём как скачать и подключить фреймворк Bootstrap (3, 4 и 5 версию) к сайту.
Минимальный набор инструментов для разработки на Bootstrap
Перед подключением Bootstrap и создании на его основе дизайна сайтов и веб-приложений необходимо иметь следующий минимальный набор программ:
Варианты установки Bootstrap
Создание дизайна веб-проекта, в основу которого положен Bootstrap всегда начинается с его установки.
Подключить Bootstrap к сайту можно разными способами, например:
Какой способ выбрать зависит конечно от вашей конкретной задачи, знаний и опыта.
Сборка из исходных кодов
Вариант с самостоятельной сборкой из исходных кодов в основном применяется, когда нужно детально настроить Bootstrap под свой проект, а также исключить из него все не нужные компоненты и плагины.
Этот вариант является предпочтительным, хотя и более сложным. Но, он позволяет кастомизировать фреймворк под свою конкретную задачу.
При этом загрузить исходные файлы Bootstrap можно как вручную с GitHub, так и с помощью пакетного менеджера (npm, yarn, RubyGems, Composer или NuGet).
Для загрузки исходных кодов Bootstrap с помощью npm нужно ввести следующую команду в консоль:
Подробная инструкция по сборке проекта из исходных кодов Bootstrap v4 с помощью Gulp приведена на этой странице.
Подключение Bootstrap через CDN
Подключение через CDN — это самый простой вариант установки Bootstrap. Здесь скачивать ничего не нужно. Необходимо лишь вставить в HTML ссылки на файлы, размещенные на CDN серверах.
Подключение Bootstrap 5:
Пример подключения Bootstrap 4 с помощью CDN:
Подключение Bootstrap 3 к странице:
Локальная установка Bootstrap
Для локальной установки Bootstrap (с настройками по умолчанию) необходимо:
1. Скачивание готовой сборки Bootstrap
Скачать дефолтную готовую к использованию сборку Bootstrap можно по следующим ссылкам (загрузка осуществляется с GitHub):
Эти сборки содержат скомпилированные и готовые к использованию файлы CSS и JavaScript.
Этот вариант сборки в основном используют для вёрстки прототипов, изучения и в проектах, дизайн которых может быть выполнен в стилях, заложенных авторами Bootstrap по умолчанию или с незначительными их изменениями.
2. Распаковка загруженного архива
После скачивания архива его необходимо распаковать.
Содержание архива Bootstrap v5.1.3:
В каталоге css находятся стили фреймворка Bootstrap, а в js – плагины необходимые для работы различных компонентов.
Плагины начиная с Bootstrap 5 написаны без использования библиотеки jQuery. Если вы используете фреймворк Bootstrap v3 или v4, то для работы его JavaScript файла необходима библиотека jQuery. Её нужно подключить перед Bootstrap JS.
В большинстве случаев из архива нам нужны только эти 2 файла: «bootstrap.min.css» и «bootstrap.bundle.min.js»
Зачем другие файлы?
Минимизированные файлы
Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, с суффиксом min и без него. Версия файла с min ничем ни отличается от без min, она просто минимизирована (сжата).
В продакшене (на рабочем сайте) лучше использовать минимизированные версии файлов. Эти файлы имеют меньший размер, и, следовательно, обеспечивают более быструю загрузку страниц сайта.
Не минимизированные версии более удобно использовать при разработке, а также для изучения.
CSS файлы Bootstrap
Файлы «bootstrap.css», «bootstrap.rtl.css» и их минимизированные версии – это полные версии. Они включают в себя все стили фреймворка.
Остальные используются, когда вы хотите использовать не целый CSS фреймворк, а только какую-то его часть:
JavaScript файлы Bootstrap
«bootstrap.bundle.min.js» – это версия, которая включает в себя «bootstrap.min.js» и библиотеку «popper.min.js».
«bootstrap.min.js» – это версия без библиотеки «popper.min.js», от которой он зависит.
В случае использования «bootstrap.min.js» необходимо «popper.min.js» подключить самостоятельно:
Поддержка RTL-языков в Bootstrap
Файлы, содержащие rtl предназначены для разработки сайтов, заточенных под RTL-языки, т.е. языки, которые пишутся и читаются справа налево.
Исходные карты файлов в Bootstrap
Файлы с map – это исходные карты, содержащие данные в JSON формате, которые нужны для связывания css и js файлов с их исходными файлами. Они используются для того, чтобы можно было вживую выполнять отладку исходных файлов прямо в веб-браузере.
Использования Bootstrap 5 в качестве модуля
В Bootstrap 5 добавлен скрипт, построенный как ESM («bootstrap.esm.js» и «bootstrap.esm.min.js»). Он позволяет использовать этот фреймворк в качестве модуля:
Иконочный шрифт Glyphicons в Bootstrap
В Bootstrap 3, кроме CSS и JavaScript файлов, содержится ещё иконочный шрифт «Glyphicons». Шрифт «Glyphicons» насчитывает более 250 иконок из набора «Glyphicon Halflings». Этот шрифт представлен в архиве посредством 4 файлов: «glyphicons-halflings-regular.eot», «glyphicons-halflings-regular.svg», «glyphicons-halflings-regular.ttf», «glyphicons-halflings-regular.woff».
Такое разнообразие форматов одного и того же шрифта необходимо для того, чтобы обеспечить его отображение в разных браузерах.
Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье.
В Bootstrap v4 и v5 не содержится иконочный шрифт. Если он нужен, то его нужно подключить самостоятельно.
Например, вместо него можно использовать FontAwesome, Octicons, IcoMoon или любой другой иконочный шрифт.
Если же нужен Glyphicons, то его можно взять из архива Bootstrap 3, а стили с GitHub.
Иконки SVG с открытым исходным кодом сейчас имеются от самих разработчиков Bootstrap. Можно воспользоваться ими. Официальная страница Bootstrap Icons: https://icons.getbootstrap.com/
Если нужен шрифт, состоящий из определённого количества иконок, то можете создать свой. Как это сделать описано в этой статье.
Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье.
Отличия содержимого архива Bootstrap v3 и v4
Архив фреймворка Bootstrap v4 от v3 отличается тем, что:
Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть.
3. Копирование файлов в проект и подключение их к странице
После распаковки загруженного архива скопируйте нужные файлы в проект.
Для Bootstrap v3 и v4 дополнительно загрузите библиотеку jQuery.
Пример локального подключения Bootstrap 4 к странице:
Пример локального подключения Bootstrap 5 к странице:
C чего начать
Обзор Бутстрап, как загружать и пользоваться, базовые шаблоны, примеры и другое.
Загрузка
Bootstrap (текущая v3.3.7) есть несколько простых способов быстро приступить к работе, каждый из которых привлекателен для разного уровня квалификации и целью применения. Читайте ниже, чтобы увидеть, что соответствует вашим потребностям.
Bootstrap
Компилированый и минимизированный CSS, JavaScript, и шрифты. Нет документов или оригинальные исходные файлы не включены.
Исходный код
Исходный Less, JavaScript, и файлы шрифтов, вместе с нашими документами. Требуется компилятор Less и другие настройки.
Bootstrap перенесен из Less в Sass для легкого включения в Rails, Compass, или проекты Sass-only.
Bootstrap CDN
Сотрудники MaxCDN любезно предоставили поддержку CDN для Bootstrap CSS и JavaScript. Просто используйте эти ссылки Bootstrap CDN.
Установка с помощью Bower
Вы также можете установить и управлять Bootstrap’ы Less, CSS, JavaScript, и шрифты, используя Bower:
Установить с помощью npm
Вы также можете установить Bootstrap используя npm:
require(‘bootstrap’) загрузит все Bootstrap’ы jQuery плагины на объект jQuery. На bootstrap сам модуль ничего не экспортирует. Вы можете вручную загрузить Bootstrap’ы jQuery плагины индивидуально загрузки /js/*.js файлы верхнего уровня пакета каталог.
Bootstrap’ы package.json содержит некоторые дополнительные метаданные в следующих разделах:
Установить с помощью Composer
Вы также можете установить и управлять Bootstrap Less, CSS, JavaScript, и шрифты, используя Composer:
Autoprefixer необходимых для Less/Sass
Bootstrap использует Autoprefixer заниматься CSS вендорных префиксов. Если вы компилируете Bootstrap от Less/Sass источник а не через наш Gruntfile, Вам необходимо интегрировать Autoprefixer в процессе построения себя. Если вы используете предварительно скомпилированные Bootstrap или через наш Gruntfile, вам не нужно беспокоиться об этом, потому что Autoprefixer уже интегрированы в Gruntfile.
Что включено
Bootstrap доступен в двух формах, в которых вы найдете логично сгруппированные каталоги и файлы, представленные в собранном и минимизированном варианте.
Требуется jQuery
Обратите внимание, что все JavaScript плагины требуют jQuery должны быть подключены, как показано на стартовом шаблоне. Обратитесь в наш bower.json чтобы посмотреть какие версии jQuery поддерживаются.
Сборник кода Bootstrap 3
После загрузки, разархивируйте сжатые каталоги. Вы должны увидеть нечто похожее на это:
Исходный код Bootstrap
Исходный код Bootstrap включает прекомпелированный CSS, JavaScript, и средства шрифтов, вместе с исходным Less, JavaScript, и документацией. Более конкретно, оно включает в себя следующее и более:
Компиляция CSS и JavaScript
Bootstrap использует Grunt для сборки его системы, с удобными методами работы в рамках. Так мы собираем наш код, запускаем тесты, и многое другое.
Установка Grunt
Чтобы установить Grunt, необходимо сначала загрузить и установить node.js (которая включает в себя npm). npm расшифровывается для узлов упакованных модулей и это способ управления зависимостями развития посредством node.js.
После завершения, у вас будет возможность запускать различные Grunt команды, предлагаемые из командной строки.
Доступные команды Grunt
grunt dist (Просто собрать CSS и JavaScript)
grunt watch (Счетчик)
Часы уменьшают исходные файлы и автоматически перекомпилирует их в CSS при каждом сохранении изменений.
grunt test (Выполнить тесты)
Запуск У jshint и the Помощью qunit тестов (автоматически) в Помощи phantomjs.
grunt docs (сборка и проверка документов активов)
grunt (Построить абсолютно все и запустить тесты)
Компиляции and минифайлы CSS and JavaScript, строит сайт документаций, запускает HTML5 валидатор против документов, восстанавливает активы настройщика, и многое другое. Требует Jekyll. Обычно это необходимо, только если вы взломали сам загрузчик Bootstrap.
Поиск и устранение неисправностей
Базовый шаблон
Начните с базовым HTML шаблоном, или измените эти примеры. Мы надеемся, что вы настроите наши шаблоны и примеры, адаптируя их для своих нужд.
Ниже приведен HTML-код, который использует минимизированную версию Bootstrap-документа.
Примеры шаблонов
На шаблоне, что представлен выше, Bootstrap создает множество компонентов. Мы рекомендуем Вам настроить и адаптировать Bootstrap в соответствии с потребностями Вашего индивидуального проекта.
Получить исходный код для каждого примера ниже загрузив Bootstrap хранилище. Примеры можно найти в docs/examples/ каталога.
Использование фреймворка
Стартовый шаблон
Ничего кроме базового: сборник CSS, JavaScript, и использован контейнер.
Темы Bootstrap
Настройте темы Bootstrap чтобы разнообразить вид страниц.
Разметки
Несколько примеров макетов разметки со всеми четырьмя уровнями вложенности и прочее.
Jumbotron
Создание вокруг большого экрана навигационной панели и нескольких колонок, используя базовую систему разметки.
Узкий Jumbotron
Создание более персонализированных страниц через сужение контейнера по умолчанию и большого экрана.
Navbars в действии
Навигационное меню
Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.
Статическое навигационное меню
Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.
Фиксированное навигационное меню
Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.
Пользовательские компоненты
Крышка
Одностраничный шаблон для построения простых и красивых домашних страниц.
Карусель
Сочетание в шаблоне нав. меню и карусели, с добавлением некоторых новых компонентов.
Простой блог в две колонки с пользовательской навигацией, заголовком, и видом.
Панель приборов
Базовая структура для администратора приборная панель с фиксированным боковым меню и панели навигации.
Страница входа
Шаблон пользовательской формы настроен для простого входа на сайт.
Выровненное нав. меню
Создание компонованого нав. меню с выровненными ссылками. Внимание! Не очень дружит с Safari.
Фиксированный Нижний колонтитул
Закрепление колонтитула в нижней части браузера для случая, когда высота контента сама собой не делает этого.
Липкий Нижний колонтитул навигации
Прикреплено колонтитул в нижнюю часть браузера, с нав. меню в верхней части.
Эксперименты
Неадаптивный Bootstrap
Легко отключить адаптивность Bootstrap согласно нашим документам.
Off-холст
Создание навигационного off-canvas меню с возможностью переключения для Bootstrap.
Инструменты
Bootlint
Сообщество
Оставайтесь в курсе развития Bootstrap и обратитесь к сообществу за полезными ресурсами.
Вы также можете перейти на @getbootstrap на Twitter к последним сплетням и удивительным музыкальным клипам.
Отключение адаптивности
Bootstrap автоматически адаптирует страницы для различных размеров экрана. Вот как можно отключить эту функцию и страница работает как этом нечувствительном шаблоне.
Шаги для блокировки адаптивного просмотра
Вам еще нужно Respond.js для IE8 (так как наш медиа запросы еще есть и должны быть обработаны). Это отключает «мобильный сайт» аспекта Bootstrap.
Шаблон Bootstrap с заблокированной адаптивностью
Эти шаги мы применили для примера. Просмотрите исходный код, чтобы увидеть специфические отличия.
Миграция с версии v2.х v3.х
Хотите перенести из старой версии Bootstrap v3.х? Проверьте наши руководство по миграции.
Браузер и поддержка устройств
Bootstrap спроектирован для лучшей работы в новых браузерах, то есть старые браузеры не всегда могут правильно отображать стили, хотя полностью функциональны в визуализации определенных компонентов
Поддержка браузерами
В частности, мы поддерживаем последние версии из следующих браузеров и платформ.
Альтернативные браузеры, которые используют последнюю версию WebKit, blink, или Гекко, будь то напрямую или через веб-платформы просмотреть API, явно не поддерживается. Однако, Bootstrap должна (в большинстве случаев) дисплей и работает в этих браузерах, а также. Более конкретные сведения приводятся ниже.
Мобильных устройств
Вообще говоря, Bootstrap поддерживает последние версии браузеров каждой крупной платформы по умолчанию. Обратите внимание, что прокси-браузеры (такие как Опера Мини, Турбо-режим в Opera мобильный, браузер, Амазонки шелк) не поддерживаются.
| Chrome | В Firefox | Safari | |
|---|---|---|---|
| Android | Supported | Supported | N/A |
| iOS | Supported | Supported | Supported |
Браузеры для ПК
Аналогично, последние версии самых десктопные браузеры поддерживаются.
| Chrome | В Firefox | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|
| Mac | Supported | Supported | N/A | Supported | Supported |
| Windows | Supported | Supported | Supported | Supported | Not supported |
В 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 и file://
Через правила безопасности браузера, Respond.js не работает при просмотре через протокол file:// (например, когда вы открываете HTML файл локально). Чтобы протестировать настройки чувствительности в IE8, просматривайте ваши страницы через HTTP(S). Ознакомьтесь с документацией Respond.js для уточнений.
Respond.js и @import
Internet Explorer 8 и box-sizing
Internet Explorer 8 и @font-face
Режим совместимости с IE
Bootstrap не поддерживает режим совместимости в старых версиях Internet Explorer. Чтобы быть уверенным, что вы используете последнюю версию такого режима для IE, просмотрите включен соответствующий тег на вашей странице:
Подтвердите режим документа, открыв средства отладки: нажмите F12 и проверьте «Document Mode».
Этот тег входит в состав всех Bootstrap документациий и примеров для обеспечения лучшей визуализации возможных в каждой поддерживаемой версии Internet Explorer.
Internet Explorer 10 на Windows 8 и Windows Phone 8
Интернет Эксплорер 10 не отличает ширину устройства с шириной окна просмотра, и, следовательно, неправильно применяет медиа запросы в CSS Bootstrap. Как правило, вы могли бы просто добавить быстрый фрагмент CSS чтобы исправить это:
Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.
Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.
Один за одним, мы включаем это в документацию и примеры Bootstrap в качестве демонстрации.
Процентное округления в Safari
Модули, navbars, и виртуальные клавиатуры
Переполнение и прокрутка
Поддержка overflow: hidden на элемент весьма ограничен в iOS и Android. С этой целью, когда вы прокрутите мимо верхней или нижней части модального в любом из браузеров этих устройств, в контент начнет прокручиваться. Смотрите Хром ошибка № 175502 (исправлено в Chrome и V40) и В WebKit ошибка #153852.
текстовых полей iOS и прокрутки
Начиная с iOS 9.3, в то время как модальные открыт, если начальное касание прокрутки жест в пределах границы текста или
В содержание под модальным будет прокручиваться вместо модальных себя. Смотрите В WebKit ошибка № 153856.
Виртуальная клавиатура
Меню Навигации
Браузерное масштабирование
При изменении размера страницы, неизбежно оказывается некорректное отображение некоторых элементов: это касается и Bootstrap, и остальных веб-документов. В зависимости от конкретного случая, мы можем исправить это (при необходимости вы можете открыть соответствующий запрос, но сначала необходимо поискать нет ли аналогичных запросов). Но как правило мы игнорируем их, поскольку они часто не имеют решения, кроме создания обходных путей в виде хаков (hacky).
Липкий :hover / :focus на мобильном
Хотя реальное зависание не возможно на большинстве сенсорных экранов, мобильные браузеры эмулируют поддержку зависания и делают :hover «Липким». Другими словами, :hover стили начинают применяться после нажатия элемента и прекращают применение только после того, как пользователь нажимает какие-либо другие элементы. Поэтому :hover из Bootstrap’а может привести к нежелательному «залипанию» на таких браузерах. Некоторые мобильные браузеры также делают :focus липкий. Пока что нет простого решения таких вопросов, помимо полного удаления таких стилей.
Печать
Даже в некоторых современных браузерах, для обеспечения печати приходится изловчиться.
В частности, в Chrome версии 32 независимо от параметров отступов и размеров полей, Chrome при печати использует значительно более узкую область просмотра, чем физический размер бумаги при отображении медиа запросов. Это может привести к тому, при печати Bootstrap неожиданно активирует очень мелкую сетку. Смотри подробности в Ошибке #12078 и Ошибке Chrome #273306. Рекомендуемые обходные пути:
Заводские Android браузеры
Из коробки, Android 4.1 (и даже некоторые новые версии) ставят приложение Браузера в качестве веб-браузера по умолчанию(в отличие от Chrome). К сожалению, стандартные браузеры имеют множество ошибок и несоответствий с CSS в целом.
Меню выбора
Валидаторы
Для того, чтобы обеспечить наилучшие впечатления для старый и глючит браузеры, 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).
Доступность
Пропуск навигации
Кроме того, может потребоваться явно подавляет видимый фокусировки на мишени (в частности, хром в настоящее время также устанавливает фокус на элементах с tabindex=»-1″ при щелчке мышкой) с #content:focus < outline: none; >.
Обратите внимание, что эта ошибка также влияет на другие ссылки вашего сайта могут использовать, делая их бесполезными для пользователей клавиатуры. Вы можете рассмотреть вопрос о включении аналогичного затычка исправить все другие именованные анкеры / идентификаторы фрагментов, которые выступают в качестве цели ссылки.
Вложенные заголовки
При вложении заголовков (
), ваш основное заглавие документа должен быть
. Следующие заголовки должны логически вибудовуватись используя
, чтобы программа, которая считывает заголовки, могла сконструировать содержание страницы.
Цветовой контраст
Дополнительные ресурсы
Лицензия FAQs
Bootstrap выпущено под лицензией MIT и имеет авторское право 2016 Twitter. Сведена к меньшим частям, и может быть описана следующими условиями.
Она требует:
Она позволяет:
Она запрещает:
Она не требует:
Полная версия лицензии Bootstrap размещена в проекте репозитория более подробно.
Переводы
Члены сообщества перевели документацию Bootstrap на различные языки. Никто официально не поддерживается и они не всегда могут быть в курсе событий.
Мы не помогаем организовывать перевод, мы просто даем на них ссылки.
Перевели новый или есть перевод лучше? Откройте запрос, чтобы добавить его в наш список.
Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.
