Начало · Bootstrap

Перед скачиванием убедитесь, что у вас есть редактор кода (мы рекомендуем Sublime Text 2) и базовые знания HTML и CSS. Мы не будем подробно рассматривать исходные файлы, но они доступны для загрузки. Здесь мы сосредоточимся на работе с готовыми файлами Bootstrap.

Скачать готовую сборку

Самый быстрый способ начать: получите скомпилированные и минифицированные версии наших CSS, JS и изображений. Без документации и исходных файлов.

Скачать Bootstrap

Скачать исходники

Получите оригинальные файлы CSS и JavaScript, а также локальную копию документации, скачав последнюю версию напрямую с GitHub.

Скачать исходники Bootstrap

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

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

  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

Это самая базовая форма Bootstrap: скомпилированные файлы для быстрого использования практически в любом веб-проекте. Мы предоставляем скомпилированные CSS и JS (bootstrap.*), а также минифицированные версии (bootstrap.min.*). Изображения сжаты с помощью ImageOptim, приложения для Mac для сжатия PNG.

Обратите внимание, что все JavaScript-плагины требуют подключения jQuery.

Bootstrap включает HTML, CSS и JS для множества задач, но их можно свести к нескольким категориям, видимым в верхней части документации Bootstrap.

Разделы документации

Каркас

Глобальные стили для body, сброс типографики и фона, стили ссылок, система сетки и два простых макета.

Базовый CSS

Стили для стандартных HTML-элементов: типографика, код, таблицы, формы и кнопки. Также включает Glyphicons — отличный набор иконок.

Компоненты

Базовые стили для стандартных интерфейсных компонентов: вкладки, навигация, панель навигации, оповещения, заголовки страниц и многое другое.

JavaScript-плагины

Как и компоненты, эти плагины добавляют интерактивность: всплывающие подсказки, popover'ы, модальные окна и многое другое.

Список компонентов

Разделы Компоненты и JavaScript-плагины предоставляют следующие элементы интерфейса:

Button groups
Button dropdowns
Navigational tabs, pills, and lists
Navbar
Labels
Badges
Page headers and hero unit
Thumbnails
Alerts
Progress bars
Modals
Dropdowns
Tooltips
Popovers
Accordion
Carousel
Typeahead

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

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

Вот как выглядит типичный HTML-файл:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://code.jquery.com/jquery.js"></script>
  </body>
</html>

Чтобы сделать это шаблоном с Bootstrap, просто подключите необходимые CSS и JS-файлы:

<!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">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

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

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

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

Минимальный HTML-документ со всеми подключёнными CSS и JavaScript Bootstrap.
Базовый маркетинговый сайт

Содержит hero-блок для основного сообщения и три вспомогательных элемента.
Гибкий макет

Использует новую адаптивную сетку для создания гибкого макета.
Узкий маркетинг

Лёгкий шаблон для небольших проектов или команд.
Выровненная навигация

Маркетинговая страница с навигацией одинаковой ширины в модифицированной панели.
Вход

Минималистичная форма входа с увеличенными элементами управления и гибкой версткой.
Фиксированный футер

Футер фиксированной высоты, закреплённый внизу экрана пользователя.
Карусель

Более интерактивная версия базового маркетингового сайта с заметной каруселью.