Twitter Bootstrap: на Русском

Твитнуть

Перед скачиванием убедитесь что у Вас имеется удобный редактор кода (мы рекомендуем 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
  └── README.md

Это основной вид 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 Шаблон</title>
  </head>
  <body>
    <h1>Привет! Я Bootstrap...</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </body>
</html>

Что бы Забутстреппить эту страничку, просто добавьте линк на CSS и JS файлы:

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

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

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

Основной сайт. Маркетинг.

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

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

Полнофункциональный шаблон, включающий в себя все фичи (HTML/CSS/LESS/JS) от Bootstrap.
Классический для продукта

Простой, легкий маркетинговый шаблон для проектов и команд.
Вход (Логин)

Классическая форма входа.
Подвал

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

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