Начальная загрузка

Начиная

Обзор проекта, его содержания и того, как начать работу с простым шаблоном.

1. Скачать

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

Скачать скомпилированный

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

Скачать Bootstrap

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

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

Загрузите исходный код Bootstrap

2. Структура файла

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

После загрузки разархивируйте сжатую папку, чтобы увидеть структуру (скомпилированного) Bootstrap. Вы увидите что-то вроде этого:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . мин . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . мин . js
   └── img / ├── глификоны - полурослики . png
       └── глификоны - полурослики - белые . png

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

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

3. Что включено

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

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

строительные леса

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

Базовый CSS

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

Составные части

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

Плагины JavaScript

Подобно компонентам, эти плагины JavaScript являются интерактивными компонентами для таких вещей, как всплывающие подсказки, всплывающие окна, модальные окна и многое другое.

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

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

  • Группы кнопок
  • Выпадающие списки кнопок
  • Навигационные вкладки, таблетки и списки
  • Навбар
  • Этикетки
  • Значки
  • Заголовки страниц и главный блок
  • Миниатюры
  • Оповещения
  • Индикаторы выполнения
  • Модальные
  • Выпадающие списки
  • Подсказки
  • Поповеры
  • Аккордеон
  • Карусель
  • Упреждающий ввод

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

4. Базовый HTML-шаблон

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

Теперь взглянем на типичный HTML-файл :

  1. <!ДОКТИП HTML>
  2. <html>
  3.   <голова>
  4.     <title> Шаблон Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.   </голова>
  7.   <тело>
  8.     <h1> Привет, мир! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  10.   </тело>
  11. </html>

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

  1. <!ДОКТИП HTML>
  2. <html>
  3.   <голова>
  4.     <title> Шаблон Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.     <!-- Начальная загрузка -->
  7.     <link href = "css/bootstrap.min.css" rel = "таблица стилей" media = "экран" >   
  8.   </голова>
  9.   <тело>
  10.     <h1> Привет, мир! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </тело>
  14. </html>

Готово! После добавления этих двух файлов вы можете приступить к разработке любого сайта или приложения с помощью Bootstrap.

5. Примеры

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

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

    Простой HTML-документ со всеми включенными Bootstrap CSS и JavaScript.

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

    Включает блок героя для основного сообщения и три вспомогательных элемента.

  • Плавный макет

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

  • Узкий маркетинг

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

  • Обоснованная навигация

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

  • Войти

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

  • Липкий нижний колонтитул

    Закрепите нижний колонтитул фиксированной высоты в нижней части области просмотра пользователя.

  • Карусельный джамботрон

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

Что дальше?

Перейдите к документации для получения информации, примеров и фрагментов кода или сделайте следующий шаг и настройте Bootstrap для любого предстоящего проекта.

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