Загрузка

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

Текущая версия v3.3.2.

Bootstrap CDN

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

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

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

Для управления исходными файлами Bootstrap's Less, CSS, JavaScript, шрифтов и локальными копиями документов используйте Bower.

$ bower install bootstrap

Что включено

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

Файловая структура Bootstrap 3

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

            bootstrap/
+-- css/
¦   +-- bootstrap.css
¦   +-- bootstrap.min.css
¦   +-- bootstrap-theme.css
¦   L-- bootstrap-theme.min.css
+-- js/
¦   +-- bootstrap.js
¦   L-- bootstrap.min.js
L-- fonts/
    +-- glyphicons-halflings-regular.eot
    +-- glyphicons-halflings-regular.svg
    +-- glyphicons-halflings-regular.ttf
    L-- glyphicons-halflings-regular.woff
            
        

Это основная форма Bootstrap: скомпилированные файлы готовы для быстрого использования в любом веб-проекте. Предоставлены сборки CSS и JS (bootstrap.*) и минимизированный вариант (bootstrap.min.*). В качестве дополнительной опции для Bootstrap включены шрифты Glyphicons.

Исходный код Bootstrap 3

Исходный код Bootstrap включает предкомпилированные CSS, JavaScript и шрифты, вместе с исходным Less, JavaScript и документацией. Для наглядности посмотрите приведенный пример ниже.

            bootstrap/
+-- less/
+-- js/
+-- fonts/
+-- dist/
¦   +-- css/
¦   +-- js/
¦   L-- fonts/
L-- docs/
    L-- examples/
            
        

less/, js/, шрифты/ с иконками . Папкаdist/ включает в себя все перечисленные скомпилированные файлы, указанные в разделе выше. Папка docs/ содержит документацию и примеры/ использования Bootstrap. Кроме того, находится информация о лицензиях и развитии предыдущих версий.

Сообщество

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

Блокировка адаптивности

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

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

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

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

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

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

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

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

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

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

В частности, мы поддерживаем последние версии из следующих браузеров и платформ. На платформе Windows, мы поддерживаем Internet Explorer 8-11. Более конкретная информация поддержки предоставлена ниже.

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

Internet Explorer 8 и 9

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

Посетите 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> на вашей странице:

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

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

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

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

Internet Explorer 10 на Windows 8 и Windows Phone 8

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

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

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

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

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)
}

Процентное округления в 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.

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

Хотите увидеть пример? Проверьте это JS Bin demo.

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

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

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

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

В зависимости от контекста, вы можете переопределить box-sizing только там, где это необходимо (Вариант 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, добавьте линк Перейти к главному содержимому непосредственно после тега <body>. (прочитайте почему)

<body>
  <a href="#content" class="sr-only">Skip to main content</a>
  <div class="container" id="content">
    The main page content.
  </div>
</body>

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

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

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

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

• "HTML Codesniffer" bookmarklet for identifying accessibility issues
• The A11Y Project
• MDN accessibility documentation

Лицензия 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).

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

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

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

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

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

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

<button type="button" class="btn btn-ttc">Сохранить изменения</button>

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

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

/* Custom button
-------------------------------------------------- */

/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #007da7;
}

/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ttc {
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
  ...
}

/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ttc:hover {
  background-position: 0 -15px;
}

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

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

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

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

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

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

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

Переводы

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

• Bootstrap in English
• Bootstrap (Chinese)
• Bootstrap auf Deutsch (German)