Руководства, Инструкции, Бланки

руководство Bootstrap img-1

руководство Bootstrap

Категория: Руководства

Описание

Слайдер бутстрап – пошаговая инструкция по созданию карусели

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

Доброго времени суток всем желающим выучить что-то новенькое из элементов фреймворка Bootstrap. Сегодняшней темой станет слайдер Бутстрап типа «Карусель». Это популярный элемент, который присутствует практически на каждом веб-сайте.

Поэтому я расскажу вам, как создать слайдер «Карусель», какие для этого понадобятся встроенные инструменты, как можно производить настройку параметров, а в конце статьи покажу реализацию конкретного примера. А теперь вперед за дело!

Все об инструментах Bootstrap Carousel Plugin

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

Стоит сразу заметить, что описываемый элемент должным образом не поддерживается в браузере Internet Explorer 9 и более ранних версиях. Однако прекрасно работает в CMS (для WordPress, Joomla! и других движков выполнить подключение фреймворка достаточно просто).

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

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

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

Для начала, создание самого блока «Карусели» требует объявления id="myCarousel" для корректного функционирования последней.

В этом же div-е нужно прописать атрибут data-ride="carousel". который указывает, что загрузка анимации должна происходить сразу же вместе с загрузкой страницы.

Теперь перейдем к индикаторам. В каждом теге li стоит прописать парочку атрибутов: data-target. который указывает на идентификатор конкретной «Карусели», и data-slide-to. определяющий к какому номеру кадра стоит прейти.

Что касается кнопок, переключающих изображения вперед или назад, то для их реализации стоит прописать атрибут data-slide с ключевым словом либо «prev», либо «next».

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

Альтернативные механизмы управления

Помимо использования встроенных классов в Bootstrap можно обратиться за помощью к JavaScript. Так, существует множество методов и опций в JS, которые реализуют все те же действия, только через инструмент $.carousel (). Среди них можно перечислить такие, как:

Можно определить дополнительные опции, к примеру, время переключения кадров (interval), возможность остановки анимации при наведении курсора на изображение (pause) и опцию бесконечного прокручивания слайдов (wrap).

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

Контрольный по знаниям

Ну а теперь пришло время проверить, как вы усвоили материал, и закрепить полученные знания. Для этого я опишу каждое действие, которое вам нужно будет совершить на пути к созданию «Карусели».

Для начала вам необходимо подключить требуемые скрипты и стили. Я предпочитаю способ подключения через хранилища CDN. но вы можете загрузить фреймворк на официальном сайте ( http://getbootstrap.com/ ) и поместить скачанные файлы в корень каталога с проектом.

Если вы со мной солидарны, то в шапке документа прописываем:

Если же вы сторонник второго способа, то вместо первой части ссылки вам нужно вставить путь к файлу.

Теперь осталось внедрить в сайт слайдер. Для этого используйте свои полученные знания и прописывайте нужные куски кода по порядку:

  1. открытие общего блока, отвечающего за описываемый инструмент;
  2. блок для указания индикаторов управления;
  3. блок для самих слайдов;
  4. реализация боковых кнопок.

Исключаться из этого перечня может только второй и последний div-ы.

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

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

С уважением, Роман Чуешов

Ух, ты! Еще статьи по этой теме

Другие статьи

Установка bootstrap

Установка bootstrap

Как же установить bootstrap? Для начало нам нужно заполучить дистрибутив на официальном сайте бутсрап. На странице руководства будет предложено несколько вариантов установки:

Скачать версию production (конечный продукт который можно использовать) и версию development (содержит все исходники)

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

Добавлю, что версию для разработки можно установить с помощью пакетных менеджеров, таких как: bower или composer, а версию для production - при помощи CDN.

После того, как мы скачали нужный нам дистрибутив и распаковали его, в нашем случае это production версия, рассмотрим структуру приложения. И так у нас есть три каталога: css, js, и fonts.

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

bootstrap.css - это основной файл, в нем можно найти всё что делает bootstrap таким крутым и популярным css фреймвороком.

bootstrap-theme.css - это небольшая тема, которая переопределяет стили основного файла и добавляет новое отображение для некоторых компонентов (хорошей практикой считается не затрагивать исходный код библиотек и фреймворков, это позволит избежать массы проблем, если вдруг мы решим обновиться) так что bootstrap-theme.css можно использовать как хорошую базу.

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

Теперь можно приступить непосредственно к подключению файлов bootstrap. Создадим в корне нашего приложения index.html и зададим базовую разметку, добавив в неё наши файлы:

Перед закрывающимся тегом </head> добавим стили: bootstrap.min.css и bootstrap-theme.min.css (важно! файл со стилями, который будет переопределять стили другого файла, нужно размещать последним, поэтому файл bootstrap-theme.min.css расположен именно в конце).

Что касается скриптов: если вы заметили, добавлена библиотека jQuery, так как у bootstrap есть жесткая зависимость, и плагины просто не смогут функционировать. Порядок подключения будет следующим: jquery.min.js, bootstrap.min.js Почему именно в таком порядке? Все просто: плагины нуждаются в jquery, как машины в топливе, поэтому сначала нужно заправить авто. Последний нюанс, подключать скрипты лучше всего в конце документа, перед закрывающим тегом </body>, чтобы браузер не тратил время на загрузку и выполнение, а быстро отрисовывал документ.

Вот собственно и все, осталось лишь наполнить сайт и добавить необходимые компоненты, для это используйте руководство bootstrap по css.

Сайты для людей

Bootstrap 3 - Основы Bootstrap, как загрузить Bootstrap, поддерживаемые браузеры и устройства

Основы Bootstrap Что включено Сообщество Блокировка адаптивности Браузеры и поддержка устройств

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

Internet Explorer 8 и 9

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

Internet Explorer 8

Internet Explorer 9

Поддерживается с префиксом -ms

Посетите Can I use. для более детального ознакомления, какие свойства 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 .

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

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

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

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

Internet Explorer 10 на Windows 8 и Windows Phone 8

Internet Explorer 10 не отличает ширину устройстваширины окна просмотра. и таким образом не правильно применяет медіазапити в Bootstrap CSS. Как правило, это можно быстро починить добавив следующий код CSS:

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

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

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

Процентное округления в Safari

В версиях Safari v6.1 для OS X и Safari для iOS v7.0.1, при использовании класса разметки .col-*-1. движок Safari имеет некоторые проблемы с количеством десятичных знаков. То есть если вы имеете 12 отдельных колонок разметки, вы заметите, что они будут более короткими по сравнению с другими рядами колонок. Здесь можно немного изменить (просмотрите #9282 ), но у вас есть несколько вариантов:

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

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

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

Поддержка overflow: hidden для элемента <body> достаточно ограничена в iOS и Android. В браузере этих устройств, при прокруткі за пределы верхней или нижней модальной части, начинает прокручиваться содержание в <body> .

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

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

Navbar Dropdowns

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

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

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

Выводы на принтер

Даже в некоторых современных браузерах, печать может быть изворотливой. В частности, по состоянию на Chrome v32 и независимо от настройки полей, Chrome значительно использует ширину окна просмотра уже, чем физический размер бумаги при разрешении запросов СМИ во время печати веб-страницы. Это может привести к неожиданно активирующейся при печати экстра-малых разметки Bootstrap. Смотрите #12078. Предлагаемые методы обхода:

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

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select меню

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

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

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

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

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

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

Доступность

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

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

Если ваше навигационное меню имеет много линков и находится перед главным содержанием в DOM, добавьте линк Перейти к главному содержимому непосредственно после тега <body>. (прочитайте почему)

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

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

Дополнительные ресурсы Лицензия FAQs

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

Она требует:
  • Включите лицензию и уведомление об авторских правах в ваших работах
Она позволяет:
  • Свободно скачивать и использовать Bootstrap, полностью или частично, для личного, частного, внутренних или коммерческих целях компании
  • Использовать Bootstrap в пакетах или в дистрибуции, которую вы сами создаете
  • Измените исходный код
  • Грант сублицензии изменять и распространять Bootstrap третьим лицам, не включенных в лицензии
Она запрещает:
  • Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
  • Держите создателей или владельцев авторских прав к ответственности Bootstrap
  • Распространять любую часть Bootstrap без ссылки на источник
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал, что Twitter одобряет ваш дистрибутив
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал будто вы создаете программное обеспечение по запросу Twitter
Она не требует:
  • Включать исходный код Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Предоставлять изменения, которые вы внесли в Bootstrap для демонстрации в проекте Bootstrap (хотя обратная связь приветствуется)

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

Настройка Bootstrap

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

После того как вы скачали и подключили стили и скрипты Bootstrap, вы можете настроить их компоненты. Чтобы это сделать, просто создайте новую таблицу стилей (LESS, если желаете, или просто CSS).

Простую сборку или минимизированную?

Если вы не планируете читать CSS, выбирайте их минимизированную версию. Это тот же код, просто компактнее. Минимизированы таблицы стилей используют меньшую ширину канала, что есть хорошо, особенно в рабочем (production) среде.

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

Настройка составных

Вы можете настраивать компоненты в разной степени, но в большинстве выделяются две категории: легкая настройка и полная перестройка. Есть много разных примеров от третьих сторон, которые позволяют реализовать обе категории.

Мы определяем легкая настройка как поверхностные изменения, например, изменение цвета и шрифта для существующих компонентов Bootstrap. Примером легкой настройки является Twitter Translation Center (написан @mdo ). Давайте посмотрим, как реализуется настройка кнопки .btn-ttc на этом сайте.

Для создания основы кнопки Bootstrap необходимо только один класс .btn. Теперь мы будем расширять стиль .btn новым модифицированным классом .btn-ttc. который позже создадим. Это позволяет изменять вид при минимальном усилии.

Наша кнопка, которую мы настраиваем, будет иметь примерно такой код:

Заметьте как .btn-ttc добавляется к стандартному класса .btn .

Чтобы завершить настройку, добавьте следующий пользовательский код стилей CSS:

В кратце: Посмотрите источник стиля и продублируйте селекторы для модификации.

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

  • Найдите код в сборнике CSS Bootstrap для каждого элемента, который хотите настроить.
  • Скопируйте компоненты селектора и стиле и вставьте их в ваших стилей, которые настраиваете. Например, чтобы настроить фон навигационного меню, просто скопируйте описание стиля .navbar .
  • В ваших стилях, которые настраиваете, редактировать CSS, которые вы только что скопировали с Bootstrap. Не нужно дописывать дополнительные классы, добавлять в конце !important. Просто сохраните их.
  • Посмотрите что у вас получилось и при необходимости повторите предыдущие шаги.

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

Альтернативные методы настройки

Хотя не рекомендуется для пользователей, плохо знакомых с Bootstrap, все же вы можете использовать один из двух альтернативных методов для настройки. Первый заключается в изменении кода файла .less (супер-усложняет апгрейд), второй - создание маппинга между Less кодом и вашими собственными классами через mixins. На данный момент, ни один из этих методов здесь пока не документировано.

Удаление ненужного кода

Не нужно для каждого сайта все делать с помощью Bootstrap, особенно в производственном (production) среде, где нужно оптимизировать пропускную способность. Мы рекомендуем удалbть все лишнее используя нашу Настройку .

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

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

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

Комментарии

C чего начать - Bootstrap на русском

C чего начать Что включено Компиляция CSS и JavaScript Базовый шаблон Примеры шаблонов Инструменты Сообщество Блокировка адаптивности Браузер и поддержка устройств

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

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

Internet Explorer 8 и 9

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

Internet Explorer 8

Internet Explorer 9

Поддерживается с префиксом -ms

Посетите Can I use. для более детального ознакомления, какие свойства 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> на вашей странице:

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

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

Internet Explorer 10 на Windows 8 и Windows Phone 8

Internet Explorer 10 не отличает ширину устройстваширины окна просмотра. и таким образом не правильно применяет медіазапити в Bootstrap CSS. Как правило, это можно быстро починить добавив следующий код CSS:

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

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

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

Процентное округления в Safari

The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our .col-*-1 grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:

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

Поддержка overflow: hidden для элемента <body> достаточно ограничена в iOS и Android. В браузере этих устройств, при прокруткі за пределы верхней или нижней модальной части, начинает прокручиваться содержание в <body> .

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

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

Navbar Dropdowns

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

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

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

Even in some modern browsers, printing can be quirky.

In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See #12078 for some details. Suggested workarounds:

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

Also, as of Safari v8.0, fixed-width .container s can cause Safari to use an unusually small font size when printing. See #14868 for more details. One potential workaround for this is adding the following CSS:

Android stock браузер

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

Select меню

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

Валидаторы

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for a certain Firefox bug .

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

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

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

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

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

Доступность

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

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

Если ваше навигационное меню имеет много линков и находится перед главным содержанием в DOM, добавьте линк Перейти к главному содержимому непосредственно после тега <body>. (прочитайте почему)

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

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

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

Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks. the .bg-primary contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1 ). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.

Дополнительные ресурсы Лицензия FAQs

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

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

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

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

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

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