Начало работы | Bootstrap по-русски

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

Загрузка компилированных файлов

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

Скачать bootstrap-3.3.7

Загрузка исходника

Получите оригинальные файлы для всех 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
  L-- README.md

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

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

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

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

Поддерживаемые элементы

Общие стили для тела (body) для сброса типа и фона, стилей ссылок, сетки шаблонов и двух простых элементов разметки.

Стили CSS

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

Компоненты

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

Плагины Javascript

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

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

Все вместе компоненты и плагины Javascript содержат следующие элементы интерфейса:

Группы кнопок
Выпадающие списки кнопок
Навигационные вкладки, кнопки и списки
Панель навигации
Ярлыки
Бейджи
Заголовки страниц и элемент hero
Миниатюры
Сообщения
Индикаторы процесса
Модальные элементы
Выпадающие списки
Всплывающие подсказки
Информационные блоки
Элемент «Гармошка»
Элемент «Карусель»
Опережающий ввод с клавиатуры

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Шаблон Bootstrap 101</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <title>Шаблон Bootstrap 101</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

И все настроено! Добавив эти два файла, вы можете с помощью Bootstrap разрабатывать сайт или приложение.

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

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

Полнофункциональный документ HTML, включающий в себя все функции Bootstrap, CSS и javascript.
Основной маркетинговый сайт

Основной элемент Hero и три дополнительных элемента с информацией..
Плавающая разметка

Использует все преимущества динамического дизайна с плавающей разметкой.
Классический

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

Ррекламный шаблон с моноширными ссылками в навигационном баре.
Форма авторизации

Полнофункциональная форма авторизации с контролами.
Модель футера

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

Интерактивный, «няшный» и веселый шаблон, подойдет как для рекламы, так и для команды.