Вам действительно не нужно настраивать собственную среду, чтобы начать изучение Bootstrap. Разум очень прост, мы уже настроили среду Bootstrap онлайн, чтобы вы могли одновременно выполнять все доступные примеры онлайн, когда делаете свою теоретическую работу. Это дает вам уверенность в том, что вы читаете, и проверять результат с различными параметрами. Не стесняйтесь изменять любой пример и выполнять его в Интернете.
Попробуйте следующий пример, нажав эту ссылку, и Вы увидите результат нижеприведенного кода кода -
Для большинства из примеров, приведенных в данном руководстве вы найдете Попробуйте это вариант , так что просто использовать его и наслаждаться обучения.
Очень легко настроить и начать использовать Bootstrap. В этой главе рассказывается, как загрузить и установить Bootstrap. Мы также обсудим структуру файла Bootstrap и продемонстрируем его использование на примере.
Загрузка Bootstrap
Вы можете загрузить последнюю версию Bootstrap с сайта http://getbootstrap.com/. Когда вы нажмете на эту ссылку, вы увидите экран, как показано ниже:
Если нажать на кнопку Download, страница будет перенаправлять на другую страницу. Здесь вы можете увидеть три кнопки -
- Загрузите Bootstrap. Нажав на это, вы можете загрузить предварительно скомпилированные и модифицированные версии Bootstrap CSS, JavaScript и шрифтов. Документация или исходные файлы исходного кода не включены.
- Загрузить исходный код - нажав эту кнопку, вы можете получить последний исходный код Bootstrap LESS и JavaScript непосредственно из GitHub.
- Загрузите Sass. Нажав на это, вы можете получить последнюю версию Bootstrap LESS для Sass для легкого включения в проекты Rails, Compass или Sass.
Для лучшего понимания и простоты использования мы будем использовать предварительно скомпилированную версию Bootstrap на протяжении всего цикла статей. По мере выполнения и минимизации файлов вам не придется беспокоиться каждый раз, включая отдельные файлы для отдельных функций. На момент написания этого текста была загружена последняя версия (Bootstrap 3).
Файловая структура
Предварительно скомпилированный Bootstrap
После загрузки скомпилированной версии Bootstrap извлеките ZIP-файл, и вы увидите следующую структуру файлов / каталогов:
Как вы можете видеть, есть скомпилированные CSS и JS (bootstrap.*), А также скомпилированные и мини-CSS и JS (bootstrap.min.*).
Исходный код начальной загрузки
Если вы загрузили исходный код Bootstrap, структура файла будет примерно следующей:
- Файлы в папках
less/
,JS/
, иfonts/
являются исходным кодом для Bootstrap CSS, JS, и значки шрифтов(соответственно). - В папке
dist/
содержится все, что указано в предварительно скомпилированном разделе загрузки выше. Docs-assets/
,examples/
и все * .html- файлы - это документация Bootstrap.
Шаблон HTML
Основной шаблон HTML с использованием Bootstrap будет выглядеть так:
Здесь вы можете увидеть jquery.js
, bootstrap.min.js
и bootstrap.min.css
файлы, которые включены, чтобы сделать нормальный HTML файл Bootstrap шаблона. Просто включите библиотеку jQuery перед включением библиотеки Bootstrap.
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- Бутстрап - Ярлыки - 22/09/2018 17:22
- Бутстрап - Пагинация - разбиение на страницы - 22/09/2018 17:20
- Bootstrap - Breadcrumb - хлебные крошки - 22/09/2018 17:20
- Bootstrap - Navbar - 22/09/2018 17:18
- Бутстрап - Элементы навигации - 22/09/2018 17:17
- Bootstrap - Группы ввода - 22/09/2018 17:17
- Bootstrap - Выпадающие окна и кнопки - 22/09/2018 17:16
- Bootstrap - Группы загрузки - кнопки - 22/09/2018 17:16
- Бутстрап - Выпадающие окна - 22/09/2018 17:15
- Бутстрап - Глификон - 22/09/2018 17:15
- Bootstrap - Отзывчивые утилиты - 22/09/2018 17:14
- Bootstrap - Вспомогательные классы - 22/09/2018 17:14
- Bootstrap - Изображения - 22/09/2018 17:13
- Бутстрап - Кнопки - 22/09/2018 17:13
- Бутстрап - Формы - 22/09/2018 17:12
- Бутстрап - Таблицы - 22/09/2018 17:12
- Бутстрап - Вставка кода - 22/09/2018 17:11
- Бутстрап - Типография - 22/09/2018 17:10
- Bootstrap - Обзор CSS - 22/09/2018 17:10
- Бутстрап - Сетка - 22/09/2018 17:09
Предыдущие статьи
- Bootstrap - Обзор - 22/09/2018 17:08
- Bootstrap 3. Адаптивные изображения, различные типы меню, формы в меню. Часть 3 - 31/12/2017 16:54
- Bootstrap 3. Типография - заголовки, цитаты, списки, работа с текстом. Часть 2 - 23/12/2017 20:44
- Подключение фреймворка Bootstrap 3 к сайту. Основы сетки шаблона. Часть 1 - 15/12/2017 15:47