З чого почати - введення · twitter bootstrap російською
Завантажити готовий проект
Швидкий спосіб почати: завантажити скомпільовані і мініфіцірованние файли CSS, JS, і картинок.
завантажити вихідні
Після скачування Ви побачите наступну структуру і файли, Логічно сгрупірование і надані в скомпільованому і мініфіцірованном вигляді.
Розпакувати завантажений архів (скомпільованої) Bootstrap'а. Ви побачите наступну структуру:
Це основний вид Bootstrap'а: скомпільовані файли для початку швидкої роботи, просто завантажте на сервер і Ви готові до роботи. Ми надали скомпільовані CSS і JS (bootstrap. *), Поряд зі скомпільованими і мініфіцірованнимі CSS і JS (bootstrap.min. *) Файлами. Картинки були стиснуті через ImageOptim. додаток для Mac, що дозволяє стискати PNG-файли.
Bootstrap заряджений порцією високоякісного HTML, CSS, і JS для будь-якого типу веб-розробки.
документація
Глобальні стилі для елемента body. зміна background'а, посилання на стилі, сітка шаблону і два простих макета.
Стилі основних HTML елементів, оформлення і шрифти, код, таблиці, форми і кнопки. Включаючи Glyphicons - набір іконок.
Основні стилі компонентів інтерфейсу: вкладки і навігаційні кнопки, навігаційний бар (navbar), повідомлення, заголовки сторінок і т.п.
список компонентів
- Групи кнопок
- Кнопки з випадають списками
- Елементи навігації: вкладки, кнопки і списки
- Навігаційний бар (Navbar)
- етикетки
- бейджи
- Заголовки сторінок і елемент hero
- мініатюри
- повідомлення
- Індикатори процесу (прогресу)
- Вспливаючі вікна
- випадають списки
- підказки
- спливаючий контент
- стек вкладок
- каруселька
- Допоміжне меню input елемента (Typeahead)
У майбутніх оглядах, ми розглянемо ці компоненти окремо більш детально. А поки, подивіться на кожну з них в документації для отримання інформації про те, як їх використовувати.
Замість читання барвистих описів Bootstrap'a, ми пропонуємо Вам почати його використовувати. Для початку створіть базовий HTML шаблон, який буде включати в себе все що написано в Файлової структурі.
Потім зверніть увагу на стандартний HTML-файл:
Що б Забутстреппіть цю сторінку, просто додайте лінк на CSS і JS файли:
Все готово! Завдяки цим файлам, ви можете почати розробляти ваш сайт або додаток на Bootstrap'е.
Для продовження зверніть увагу на стандартні макети сторінок. Використовуйте ці приклади для початку роботи над своїм проектом, змінюйте їх і створюйте щось унікальне.
Основний сайт. Маркетинг.
Основний "Hero" елемент і три доповнюють колонки з інформацією.
плаваюча розмітка
Даний приклад використовує всі переваги динамічного дизайну з плаваючою шириною.
Стартаперскій шаблон
Повнофункціональний шаблон, який включає в себе всі фічі (HTML / CSS / LESS / JS) від Bootstrap.
Класичний для продукту
Простий, легкий маркетинговий шаблон для проектів і команд.
Вхід (Логін)
Класична форма входу.
Підвал прив'язаний до низу сторінки.
Каруселька "jumbotron"
Інтерактивний, приємний і веселий шаблон, підійде як для продукту так і для команди.
Вивчайте документацію, приклади та приклади коду, або ж поринете в розробку з метою зміни початкових кодів Bootstrap'а для ваших проектів.