Загрузка

Bootstrap (currently v3.2.0) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

Bootstrap

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

Загрузить Bootstrap

Исходный код

Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.

Загрузить исходные файлы

Sass

Bootstrap с Less, адаптированный для Sass, что обеспечивает простую интеграцию в проекты Rails, Compass, или Sass.

Загрузить Sass

Bootstrap CDN

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

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

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

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

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

Установите и работайте с Less, CSS, JavaScript и шрифтами Bootstrap с помощью Bower.

$ bower install bootstrap

Что входит в пакет загрузки

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

Требуется jQuery

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

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

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

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

Исходный код 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. Помимо этого, все прочие файлы, входящие в пакет, обеспечивают поддержку, обновление и содержат лицензионную информацию.

Compiling CSS and JavaScript

Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

Installing Grunt

To install Grunt, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.

Then, from the command line:
  1. Install grunt-cli globally with npm install -g grunt-cli.
  2. Navigate to the root /bootstrap/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there.

When completed, you'll be able to run the various Grunt commands provided from the command line.

Available Grunt commands

grunt dist (Just compile CSS and JavaScript)

Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.

grunt watch (Watch)

Watches the Less source files and automatically recompiles them to CSS whenever you save a change.

grunt test (Run tests)

Runs JSHint and runs the QUnit tests headlessly in PhantomJS.

grunt (Build absolutely everything and run tests)

Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Usually only necessary if you're hacking on Bootstrap itself.

Troubleshooting

Should you encounter problems with installing dependencies or running Grunt commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.

Основной шаблон

Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.

Скопируйте 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">
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 Shim and Respond.js 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://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Примеры

Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.

Using the framework

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

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

Тема Bootstrap

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

Сетка

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

Jumbotron

Основу макета составляет Jumbotron с панелью навигации и основными столбцами сетки.

Узкий Jumbotron

Необычная страница: в основе более узкий контейнер и Jumbotron.

Панели навигации в работе

Панель навигации

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

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

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

Неподвижная панель навигации

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

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

Покрытие

Шаблон для одной страницы: подойдет для простого и изящного оформления домашних страниц.

Карусель

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

Блог

Простой шаблон блога с двумя колонками, настраиваемой навигацией, шапкой и типом.

Панель управления

Основной шаблон для панели управления администратора с неподвижной боковой панелью и панелью навигации.

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

Индивидуальный макет для простой страницы входа.

Выровненные панели навигации

Create a custom navbar with justified links. Heads up! Not too Safari friendly.

Липкий футер

Добавьте футер в нижней части экрана, когда содержимое окна слишком короткое.

Липкий футер и панель навигации

В нижней части экрана отображается футер, в верхней — панель навигации.

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

Неадаптивный Bootstrap

Easily disable the responsiveness of Bootstrap per our docs.

Боковое меню

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

Сообщество

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

Вы также можете подписаться на @twbootstrap в Twitter, чтобы получать самые свежие новости и смотреть замечательные видеоклипы.

Отключение адаптивности

Bootstrap automatically adapts your pages for various screen sizes. Here's how to disable this feature so your page works like in this non-responsive example.

Как отключить адаптирование страниц

  1. Omit the viewport <meta> mentioned in the CSS docs
  2. Перепишите width (ширину) в .container (контейнере); для каждого уровня решетки укажите одно значение, например width: 970px !important; Убедитесь, что этот сегмент идет после основного Bootstrap CSS. Вы также можете избежать !important с помощью медиазапросов или selector-fu.
  3. Отключите сворачивание/восстановление навигационных панелей, если они используются.
  4. В шаблонах сетки можно использовать классы .col-xs-* в дополнение или вместо средних/больших. Не волнуйтесь, очень маленькая сетка масштабируется для любого разрешения.

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

Шаблон Bootstrap с отключенным режимом адаптации

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

Посмотреть пример

Миграция с версии 2.x на 3.x

Looking to migrate from an older version of Bootstrap to v3.x? Check out our migration guide.

Поддерживаемые устройства и интернет-браузеры

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

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

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

Chrome Firefox Internet Explorer Opera Safari
Android Поддерживается Поддерживается - Не поддерживается -
iOS Поддерживается - Не поддерживается Поддерживается
Mac OS X Поддерживается Поддерживается Поддерживается Поддерживается
Windows Поддерживается Поддерживается Поддерживается Поддерживается Не поддерживается

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

For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.

Internet Explorer 8 и 9

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

Функция Internet Explorer 8 Internet Explorer 9
border-radius Не поддерживается Поддерживается
box-shadow Не поддерживается Поддерживается
transform Не поддерживается Поддерживается, с префиксом -ms
transition Не поддерживается
placeholder Не поддерживается

Посетите страницу «Можно ли использовать...», чтобы узнать о поддержке функций CSS3 и HTML5 интернет-браузерами.

Internet Explorer 8 и Respond.js

При использовании Respond.js в разработке и создании сред для Internet Explorer 8 важно помнить о следующих моментах.

Respond.js и междоменный CSS

Для использования Respond.js с CSS, размещенном на другом (суб)домене (например на домене CDN), требуется установить некоторые дополнительные компоненты. См. документы для Respond.js для получения более подробной информации.

Respond.js and file://

Из-за правил безопасности интернет-браузера Respond.js не работает со страницами, просматриваемыми через протокол file:// (как при открытии локального файла HTML). Чтобы проверить функцию адаптации в IE8, нужно просматривать свои страницы через HTTP(S). См. документы для Respond.js для получения более подробной информации.

Respond.js и @import

Respond.js не работает с CSS, который получен через @import. В частности, некоторые конфигурации Drupal используют @import. См. документы для Respond.js для получения более подробной информации.

Internet Explorer 8 и размеры окна

IE8 не поддерживает в полной мере box-sizing: border-box; при совместной работе с min-width, max-width, min-height или max-height. Поэтому начиная с версии 3.0.1, мы не используем max-width в .containers.

Internet Explorer 8 and @font-face

IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

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

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

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

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

This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of 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.

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

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

As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.

Округление процентных показателей в Safari

As of Safari v7.0.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our .col-*-1 grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (see #9282) but you do have some options:

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

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

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

Длинный текст и прокрутка

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

Виртуальные клавиатуры

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

Выпадающие меню в панели навигации

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

Масштабирование в интернет-браузерах

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

Окно печати

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

  • Задайте очень маленькую сетку и убедитесь, что страница приемлемо выглядит с ней.
  • Настройте значения @screen-* переменных Less, чтобы загруженная в принтер бумага воспринималась системой как более крупный формат.
  • Добавьте свои запросы мультимедиа, чтобы изменить контрольные точки размера сетки только для распечатываемого содержимого.

Интернет-браузер Android

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

Выбор меню

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. (See this StackOverflow question for details.) 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>
$(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.

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

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

Box-sizing

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

<body>
  <a href="#content" class="sr-only sr-only-focusable">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.

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

FAQ по лицензиям

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

От вас требуется:

  • Необходим включать информацию о лицензии и авторских правах в свои проекты

Вам позволяется:

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

Вам запрещается:

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

От вас не требуется:

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

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

Переводы

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

We don't help organize or host translations, we just link to them.

Finished a new or better translation? Open a pull request to add it to our list.