Bootstrap

Починаємо

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

1. Завантажити

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

Завантажити складено

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

Завантажити Bootstrap

Джерело завантаження

Отримайте оригінальні файли для всіх CSS і Javasript, а також локальну копію документів, завантаживши останню версію безпосередньо з GitHub.

Завантажте джерело Bootstrap

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

У завантаженому файлі ви знайдете наведену нижче структуру та вміст файлу, логічно групуючи загальні ресурси та надаючи як скомпільовані, так і скорочені варіанти.

Після завантаження розархівуйте стиснуту папку, щоб побачити структуру (скомпільованого) Bootstrap. Ви побачите щось на зразок цього:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── завантажувальна програма . хв . css
   ├── js / │ ├── завантажувальна програма . js
   │ ├── завантажувальна програма . хв . js
   ├── img / │ ├── гліфікони - піврослики . png
   │ ├── гліфікони - піврослі - білий . png
  
  
        
        
        └── README . md

Це найпростіша форма 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.   </head>
  5.   <тіло>
  6.     <h1> Привіт, світе! </h1>
  7.   </body>
  8. </html>

Щоб зробити це шаблоном Bootstrapped , просто додайте відповідні файли CSS і JS:

  1. <html>
  2.   <голова>
  3.     <title> Шаблон Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <тіло>
  8.     <h1> Привіт, світе! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </body>
  11. </html>

І все готово! Додавши ці два файли, ви можете розпочати розробку будь-якого сайту чи програми за допомогою Bootstrap.

5. Приклади

Вийдіть за межі базового шаблону за допомогою кількох прикладів макетів. Ми заохочуємо людей повторювати ці приклади, а не просто використовувати їх як кінцевий результат.

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

    Містить герой для основного повідомлення та три допоміжні елементи.

  • Гнучкий макет

    Використовує нашу нову адаптивну систему плавної сітки для створення безперебійного рідкого макета.

  • Початковий шаблон

    Barebone HTML-документ із усіма компонентами CSS Bootstrap і JavaScript.

Що далі?

Зверніться до документів, щоб отримати інформацію, приклади та фрагменти коду, або зробіть наступний крок і налаштуйте Bootstrap для будь-якого майбутнього проекту.

Відвідайте документацію Bootstrap Налаштуйте Bootstrap