Введение. Документация Bootstrap 2.3.2

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

Скачать готовый проект

Быстрый способ начать: скачать скомпилированные и минифицированные файлы CSS, JS, и картинок.

Скачать Bootstrap

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

Оригинальные файлы CSS и JavaScript, с текущей версией Bootstrap можно скачать через 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.*), наряду со скомпилированными и минифицированными CSS и JS (bootstrap.min.*) файлами. Картинки были сжаты через ImageOptim, приложение для Mac, позволяющее сжимать PNG-файлы.

Учитывайте что все JavaScript-плагины основаны на jQuery.

Bootstrap заряжен порцией высококачественного HTML, CSS, и JS для любого типа веб-разработки.

Документация

Шаблон

Глобальные стили для элемента body: изменение background'а, ссылки на стили, сетка шаблона и два простых макета.

CSS

Стили основных HTML элементов, оформление и шрифты, код, таблицы, формы и кнопки. Включая Glyphicons - набор иконок.

Компоненты

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

Javascript-плагины

Схоже с компонентами, Javascript-плагины оживляют ваш веб-проект, и Компоненты такие как всплывающие подсказки (tooltips), всплывающий контент (popovers), всплывающие окна (modals) и много других вкусностей.

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

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

Группы кнопок
Кнопки с выпадающими списками
Элементы навигации: вкладки, кнопки и списки
Навигационный бар (Navbar)
Этикетки
Бейджи
Заголовки страниц и элемент hero
Миниатюры
Сообщения
Индикаторы процесса (прогресса)
Всплывающие окна
Выпадающие списки
Всплывающие подсказки
Всплывающий контент
Стек вкладок
Каруселька
Вспомогательное меню input элемента (Typeahead)

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

Вместо чтения красочных описаний Bootstrap'a, мы предлагаем Вам начать его использовать. Для начала создайте базовый 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="http://code.jquery.com/jquery.js"></script>
  </body>
</html>

To make this a Bootstrapped template, just include the appropriate CSS and JS files:

<!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="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Все готово! Благодаря этим файлам, вы можете начать разрабатывать ваш сайт или приложение на Bootstrap'е.

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

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

Базовый HTML-документ со всеми с CSS-загрузчиком и JavaScript.
Основной сайт. Маркетинг

Основной "Hero" элемент и три дополняющие колонки с информацией.
Стартаперский шаблон

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

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

Страница с навигационными ссылками равной ширины в навигационной панелью.
Вход (Логин)

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

Подвал привязанный к низу страницы.
Каруселька "jumbotron"

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