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

Начиная

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

1. Скачать

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

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

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

Скачать Bootstrap

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

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

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

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

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

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

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

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

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

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

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

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

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

Базовый CSS

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

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

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

Плагины Javascript

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

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

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

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

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

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

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

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

  1. <html>
  2.   <голова>
  3.     <title> Шаблон Bootstrap 101 </title>
  4.   </голова>
  5.   <тело>
  6.     <h1> Привет, мир! </h1>
  7.   </тело>
  8. </html>

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

  1. <html>
  2.   <голова>
  3.     <title> Шаблон Bootstrap 101 </title>
  4.     <!-- Начальная загрузка -->
  5.     <link href = "css/bootstrap.min.css" rel = "таблица стилей" >  
  6.   </голова>
  7.   <тело>
  8.     <h1> Привет, мир! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </тело>
  11. </html>

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

5. Примеры

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

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

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

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

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

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

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

Что дальше?

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

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