Bootstrap 3 · Документация на русском языке

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

Готовые CSS, JS и шрифты

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

Загрузить Bootstrap 3.1.1

Дополнительные загрузки

Загрузить последнюю версию исходного кода

Скачать свежие версии всех исходных файлов CSS и JavaScript прямо с GitHub.

Сделайте копию или форк с помощью GitHub

Скопируйте проект целиком или создайте форк Bootstrap, посетив GitHub.

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

Установите приложение и работайте с исходными файлами CSS и JavaScript, а также локальными копиями документов с помощью Bower.

$ bower install bootstrap

Bootstrap и CDN

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

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

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

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

Компиляция с помощью LESS

Когда вы загрузите исходные файлы, нужно будет скомпилировать файлы LESS в пригодные для использования файлы CSS. Это можно сделать с помощью Recess, утилиту сборки CSS от Twitter, построенную на платформе less.js. Это единственная официально рекомендуемая Bootstrap утилита.

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

После загрузки распакуйте архив и проверьте состояние (скомпилированного) Bootstrap. Вы увидите приблизительно следующее:

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.

Требуется jQuery

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

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

Чтобы начать новый проект с шаблоном Bootstrap, скопируйте код HTML, приведенный ниже.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://getbootstrap.com/docs-assets/js/html5shiv.js"></script>
      <script src="http://getbootstrap.com/docs-assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

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

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

Для начинающих

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

Сетка

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

Jumbotron

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

Узкий Jumbotron

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

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

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

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

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

Неподвижное меню

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

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

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

Футер

Футер прижатый к низу экрана, когда содержимое окна слишком короткое.

Футер и меню

Футер прижатый к низу экрана, плюс неподвижная панель навигации сверху.

Выровненное меню

Дополнение к обычной панели навигации, с выровненными ссылками.

Панель навигации сбоку

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

Карусель

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

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

Простое отключение адаптивности Bootstrap согласно документации.

Тема Bootstrap

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

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

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

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

Удалите (или не добавляйте) окно <meta>, упомянутое в документах для CSS
Удалите max-width в .container всех уровней сетки с max-width: none !important; и установите обычную ширину width: 970px;;. Убедитесь, что эти строки идут после стандартных файлов Bootstrap CSS. Вы также можете пропустить пункт !important с помощью медиазапросов или какого-либо selector-fu.
При использовании навигационных панелей отмените сворачивание или разворачивание панели (процесс слишком длинный, чтобы описывать его здесь, см. пример).
Для сетки используйте классы .col-xs-* одновременно со средними/большими или вместо них. Не переживайте, с помощью сетки для очень маленьких устройств можно увеличивать масштаб и подгонять его для любых разрешений, так что все в порядке.

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

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

В следующем примере выполнены все инструкции, приведенные выше. Просмотрите исходный код и найдите отдельные изменения.

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

Те, кто хочет обновиться до версии v3, должны следовать инструкциям данного раздела. Мы выделили некоторые основные изменения и показали их в таблицах. Для беглого обзора читайте анонс в блоге.

Основные изменения классов

Таблица различий между классами в v2.x и v3.0.

Bootstrap 2.x	Bootstrap 3.0
`.container-fluid`	`.container`
`.row-fluid`	`.row`
`.span*`	`.col-md-*`
`.offset*`	`.col-md-offset-*`
`.brand`	`.navbar-brand`
`.nav-collapse`	`.navbar-collapse`
`.nav-toggle`	`.navbar-toggle`
`.btn-navbar`	`.navbar-btn`
`.hero-unit`	`.jumbotron`
`.icon-*`	`.glyphicon .glyphicon-*`
`.btn`	`.btn .btn-default`
`.btn-mini`	`.btn-xs`
`.btn-small`	`.btn-sm`
`.btn-large`	`.btn-lg`
`.visible-phone`	`.visible-sm`
`.visible-tablet`	`.visible-md`
`.visible-desktop`	`.visible-lg`
`.hidden-phone`	`.hidden-sm`
`.hidden-tablet`	`.hidden-md`
`.hidden-desktop`	`.hidden-lg`
`.input-small`	`.input-sm`
`.input-large`	`.input-lg`
`.checkbox.inline` `.radio.inline`	`.checkbox-inline` `.radio-inline`
`.input-prepend` `.input-append`	`.input-group`
`.add-on`	`.input-group-addon`
`.thumbnail`	`.img-thumbnail`
`ul.unstyled`	`.list-unstyled`
`ul.inline`	`.list-inline`

Обновления

Мы добавили несколько новых элементов и изменили некоторые из уже существующих. Вот их новые или обновленные классы.

Элемент	Описание
Панели	`.panel .panel-default` `.panel-body` `.panel-title` `.panel-heading` `.panel-footer` `.panel-collapse`
Список групп	`.list-group` `.list-group-item` `.list-group-item-text` `.list-group-item-heading`
Glyphicons	`.glyphicon`
Jumbotron	`.jumbotron`
Очень маленькая сетка (<768 px)	`.col-xs-*`
Маленькая сетка (>768 px)	`.col-sm-*`
Средняя сетка (>992 px)	`.col-md-*`
Большая сетка (>1200 px)	`.col-lg-*`
Отступ	`.col-sm-offset-` `.col-md-offset-` `.col-lg-offset-*`
Нажатие	`.col-sm-push-` `.col-md-push-` `.col-lg-push-*`
Извлечение	`.col-sm-pull-` `.col-md-pull-` `.col-lg-pull-*`
Вводные группы	`.input-group` `.input-group-addon` `.input-group-btn`
Элементы управления	`.form-control` `.form-group`
Размеры кнопок	`.btn-group-xs` `.btn-group-sm` `.btn-group-lg`
Текст навигатора	`.navbar-text`
Шапка навигатора	`.navbar-header`
Выравненные таблицы / ячейки	`.nav-justified`
Чувствительные изображения	`.img-responsive`
Контекстные табличные строки	`.success` `.danger` `.warning` `.active`
Контекстные панели	`.panel-success` `.panel-danger` `.panel-warning` `.panel-info`
Модаль	`.modal-dialog` `.modal-content`
Миниатюрное изображение	`.img-thumbnail`
Хорошие размеры	`.well-sm` `.well-lg`
Оповещающие ссылки	`.alert-link`

Что убрано

Следующие элементы в версии v3 были убраны или изменены.

Элемент	Удаленные из 2.х	3.0 Эквивалент
Действия формы	`.form-actions`	Не прим.
Поисковая форма	`.form-search`	Не прим.
Текучая среда	`.container-fluid`	`.container` не более фиксированной сетки
Текучая батарея	`.row-fluid`	`.row` не более фиксированной сетки
Внутренний навигатор	`.navbar-inner`	Не прим.
Выпадающее подменю	`.dropdown-submenu`	Не прим.
Табуляция выравниваний	`.tabs-left` `.tabs-right` `.tabs-below`	Не прим.

Дополнительные изменения

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

Текстовые элементы управления в настоящее время 100 ширины. Соедините входы внутрь <div class="col-*"></div> для контроля ширины входа.
.badge больше не имеет контекстные (-success, -primary, и т.д..) классы.
.btn должен также использовать .btn-default для получения кнопки "по умолчанию".
.container и .row в настоящее время текущее тело (на основе процента).
Изображения уже не реагируют по умолчанию. Использовать .img-responsive для текущего <img> размера.
Иконки, сейчас .glyphicon, на шрифтовой основе. Им также необходимы базовый и класс иконки (например, .glyphicon .glyphicon-asterisk).
Буфер клавиатуры был удален, в пользу использования Twitter Typeahead.
Модальные разметки существенно изменились. .modal-header, .modal-body, и .modal-footer секции теперь завернули в .modal-content и .modal-dialog для улучшенного мобильного стиля и поведения.
'show.bs.modal' события в пространстве имен. Например, для обработки модальной "шоу" события, использовать 'shown.bs.tab'. Для вкладки "показатель" использовать JavaScript, и т.д.

Дополнительную информацию об обновлениях и фрагментах кода проверить в сообществе Bootply.

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

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

В частности, мы поддерживаем следующие последние версии:

ChromeMac, Windows , iOS, и Android
SafariMac и iOS только, так как Windows был более или менее приостановлен.
Firefox(Mac, Windows)
Internet Explorer
Опера (Mac, Windows)

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

Internet Explorer 8 и 9

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

Кроме того, Internet Explorer 8 требует использования respond.js для включения поддержки запросов СМИ

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

Bootstrap не поддерживает режим совместимости в старых версиях Internet Explorer. Учитывайте это при использовании тега <meta>:

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

Изучите this StackOverflow question для получения дополнительной информации.

Windows Phone 8 и Internet Explorer 10

Internet Explorer 10 не распознает ширину устройства из ширины видимого окна, и это не правильно применяется к медиа квери в Bootstrap CSS. Указать на это, вы можете опционально включить следующий 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.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}

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

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

см. #9282

В последнем Safari для Mac, отображающий движок имеет небольшие проблемы с большими десятичными числами в нашем .col-*-1 классах сетки, имеется ввиду если вы имеете 12 колонок вы можете заметить они выглядят короче в сравнение с другими рядами в колонках. Здесь мы не много что можем сделать (см. #9282), но у вас все еще есть несколько вариантов:

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

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

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

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

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

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

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

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

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

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

Карта Гугл

Если вы используете Карты Гугл в Бутстрап проекте, у вас могут возникнуть небольшие проблемы с использованием этого кода * { box-sizing: border-box; }. Раньше, у вас могли также возникнуть проблемы с использованием этого кода max-width на изображениях. Последующий отрывок кода должен исправить все эти проблемы.

/* Fix Google Maps canvas
 *
 * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
 * global `box-sizing` changes. You may optionally need to reset the `max-width`
 * on images in case you've applied that anywhere else. (That shouldn't be as
 * necessary with Bootstrap 3 though as that behavior is relegated to the
 * `.img-responsive` class.)
 */

.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }

/* Optional responsive image override */
img { max-width: none; }

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

Пропустить навигацию

Если ваша навигация содержит множество связей и идет перед основным содержанием в DOM, добавьте Skip to content ссылку сразу после открытия <body> тега.(read why)

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

Сцепленные заголовки

Небольшая "фишка" имеет место в том как вы вставляете элементы <header>. Section 508 показывает что ваш самый большой заголовок должен быть h1, и следующий заголовок должен быть <h2>, и так далее. Это очень тяжело достичь на практике, но если самый большой заголовок на вашем сайте меньше чем изначальный Bootstrap 28px, вы должны рассматривать изменения в ваших стилях перед использованием малых элементов заголовка.

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

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

Bootstrap выпущен под лицензией Apache 2 и создан в 2013 Твиттере. Сводя к более мелким участкам, она может быть описана с соблюдением следующих условий.

Она позволяет вам:

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

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

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

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

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

Она не требует:

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

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

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

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

Обычный или сжатый?

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

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

Настройка компонентов

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

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

Взамен использования кнопок Bootstrap, которые только необходим один класс для начала. .btn, мы добавили наш собственный изменненый класс, .btn-ttc. Это даст нам небольшое изменение того как это выглядит с минимальными затратами.

<button type="button" class="btn btn-ttc">Save changes</button>

В пользовательской таблице стилей, добавьте следующие 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;
}

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

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

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

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

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

Не обязательно использовать все возможности

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

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

Описание Bootstrap

Как скачать Bootstrap 3