Начало работы с 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:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Шаблон Bootstrap 101</title>
  5. </head>
  6. <body>
  7. <h1>Привет, мир!</h1>
  8. <script src="http://code.jquery.com/jquery-latest.js"></script>
  9. </body>
  10. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Шаблон Bootstrap 101</title>
  5. <!-- Bootstrap -->
  6. <link href="css/bootstrap.min.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <h1>Привет, мир!</h1>
  10. <script src="http://code.jquery.com/jquery-latest.js"></script>
  11. <script src="js/bootstrap.min.js"></script>
  12. </body>
  13. </html>

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

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



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

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



  • Основной маркетинговый сайт

    Основной элемент Hero и три дополнительных элемента с информацией..



  • Плавающая разметка

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



  • Классический

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



  • Justify навигация

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



  • Форма авторизации

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



  • Модель футера

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



  • Карусель jumbotron

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

Переходите к информационным документам, примерам, фрагментам кода.

Посетить страницу документации Bootstrap


Scroll to top