Bootstrap — это фронт-энд фреймворк, который разработчики используют для создания различных видов веб-сайтов для различных устройств. Этот проект с открытым исходным кодом предлагает разнообразные шаблоны дизайна, основанные на таких языках, как HTML, CSS и дополнительных расширениях JavaScript. Изначально Twitter планировал использовать Bootstrap в качестве внутреннего инструмента для унификации дизайна. Затем социальная сеть решила опубликовать фреймворк на платформе открытого хостинга GitHub, где он быстро превратился в один из самых популярных проектов, породив тысячи форков.
Что делает Bootstrap таким интересным?
Благодаря шаблонам HTML и CSS разработчикам с интересными идеями для новых веб-сайтов больше не нужно начинать с нуля. Контент берется прямо из наборов инструментов и добавляется в HTML-документы, избавляя от необходимости утомительных CSS-конфигураций. Вот некоторые вещи, которые входят в комплект:
- Кнопки
- Навигационные элементы
- Обзорные миниатюры
- Выпадающие меню
- Предупреждающие сообщения
- Прогресс бары
- Отзывчивое встраивание видео
Еще одним важным аспектом является сетчатая верстка Bootstrap. Разделяя макеты на 12 колонок, эта система компоновки облегчает пользователям точное определение расстояний и расположение отдельных элементов сайта. Будь то настольные компьютеры, мобильные устройства или ПК с небольшими мониторами, пользователи могут выбирать между различными размерами экрана при расположении элементов в сетках макета. Такая гибкость делает Bootstrap хорошо приспособленным для отзывчивого веб-дизайна.
С помощью дополнительных JavaScript-плагинов на основе JavaScript-фреймворка jQuery разработчики могут добавлять дополнительные пользовательские интерфейсы (например, подсказки или диалоговые окна) или расширять функциональность существующих элементов управления, например, функцию автозаполнения для полей ввода. Добавьте библиотеку jQuery в HTML-документ, чтобы использовать Bootstrap с помощью JavaScript.
Bootstrap: загрузка и первые шаги
Bootstrap был опубликован компанией Twitter как бесплатный фреймворк, поэтому его можно скачать и использовать бесплатно. Благодаря свободно распространяемому программному коду более опытные разработчики могут адаптировать фреймворк под свои нужды. В следующем руководстве изложены шаги, которые необходимо выполнить перед использованием шаблонов Bootstrap CSS и JavaScript.
1. Посетите официальный сайт getbootstrap.com. Скачайте пакет Bootstrap. Он содержит файлы CSS и JavaScript (один в стандартном виде, другой в свернутом), а также шрифты и дополнительную тему Bootstrap.
2. Распакуйте файл и перетащите папку Bootstrap в нужную директорию проекта.
3. Папка содержит папки ‘css’, ‘fonts’ и ‘js’. В папке ‘font’ вы найдете более 250 иконок из шрифта Glyphicons Halflings, который был предоставлен Bootstrap бесплатно. Файлы в папках ‘css’ и ‘js’ описаны ниже по отдельности:
bootstrap.css: CSS-код в читабельном виде
bootstrap.min.css: минимизированный CSS-код. Содержимое, не имеющее значения для интерпретации кода, например, пробелы, было удалено
bootstrap.css.map: содержит карты источников CSS, которые помогут вам при разработке найти исходные данные в формате LESS
bootstrap-theme.css: CSS-файл опциональной готовой темы
bootstrap-theme.min.css: минимизированный код темы
bootstrap-theme.css.map: карта исходных данных темы
bootstrap.js: JavaScript-код в читабельном виде
bootstrap.min.js: минимизированный код JavaScript
4. Если вы хотите использовать элементы JavaScript, загрузите дополнительную библиотеку JavaScript, jQuery на jquery.com.
5. Когда все компоненты присутствуют и знакомы, можно приступать к настоящей работе. Для наглядности мы создали HTML-страницу приветствия, которую затем превратим в шаблон Bootstrap.
6. Откройте удобный для вас редактор кода, например Notepad++, и добавьте следующий код в пустой документ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hallo, this is my first Bootstrap-Template!</h1>
</body>
</html>Мета-тег ‘viewpoint’ в области head обеспечивает оптимальное отображение сайта на мобильных устройствах.
7. Сохраните проект под именем ‘basic.html’ на рабочем столе.
8. Внесите файлы Bootstrap JavaScript и CSS в HTML-код, чтобы из обычного HTML-документа получился Bootstrap-шаблон. Для этого укажите, в какой директории находятся папки. Рекомендуется добавлять JavaScript в тело документа в самом конце, так как в противном случае это может увеличить время загрузки вашей веб-страницы. Вот как должен выглядеть ваш код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css">
</head>
<body>
<h1>Hello, this is my first Bootstrap-Template!</h1>
<script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>9. В завершение сохраните документ под именем ‘bootstrap-template.html’. Двойным щелчком мыши вы можете открыть Bootstrap HTML в выбранном вами браузере, где вы должны увидеть сообщение, указанное в заголовке (h1).
10. Теперь вы можете свободно проектировать свой шаблон. Различные коды для типографики, кнопок, системы сетки Bootstrap и т.д. можно найти на официальном сайте.
Знание HTML/CSS является важным требованием
Хотя Bootstrap предоставляет пользователям готовый контент, без предварительных знаний HTML и CSS вы не сможете далеко продвинуться с этим фреймворком. Опытным разработчикам также рекомендуется потратить некоторое время, чтобы освоить фреймворк, и зачастую это стоит того. Существует множество шаблонов, доступных для загрузки (некоторые бесплатно), которые были разработаны с использованием Bootstrap, и они могут избавить вас от многих хлопот. Те, кто регулярно работает с HTML, CSS и JavaScript, быстро оценят преимущества Bootstrap. Вот самые важные из них:
- Экономит много времени
- Очень хорошая основа для отзывчивого веб-дизайна
- Регулярные обновления и огромное сообщество, к которому вы можете обратиться
- Первоклассная документация
В сочетании с тем, что это проект с открытым исходным кодом, вышеперечисленные факторы еще раз доказывают, почему Bootstrap является одним из самых популярных фреймворков для веб-дизайна.