Bootstrap – первые шаги

Bootstrap – это интерфейсная платформа, которую разработчики используют для создания различных видов веб-сайтов для различных устройств. Этот проект с открытым исходным кодом предлагает множество шаблонов дизайна, основанных на таких языках, как HTML, CSS и дополнительные расширения JavaScript. Первоначально Twitter планировал Bootstrap для использования в качестве внутреннего инструмента для унификации дизайна. Затем социальная сеть решила опубликовать структуру на платформе хостинга с открытым исходным кодом GitHub, где она быстро превратилась в один из самых популярных проектов, создавая тысячи вилок.

Что делает Bootstrap настолько интересным?

Благодаря шаблонам HTML и CSS разработчикам с интересными идеями для новых веб-сайтов больше не нужно начинать с нуля. Содержимое берется непосредственно из наборов инструментов и добавляется в HTML-документы, избавляя от необходимости утомительных CSS-конфигураций . Вот некоторые из них:

Кнопки
Навигационные элементы
Обзор эскизов
Выпадающие меню
Предупреждающие сообщения
Полосы прогресса
Отзывчивое вложение видео
Другим важным аспектом является компоновка сетки Bootstrap. Разделив макеты на 12 столбцов, эта система компоновки облегчает пользователям точно определять расстояния и размещать отдельные элементы веб-сайта. Независимо от того, используете ли вы настольные компьютеры, мобильные телефоны или ПК с небольшими мониторами, пользователи могут выбирать между различными размерами экрана при компоновке элементов в сетках макета. Эта гибкость делает Bootstrap хорошо подготовленным для гибкого веб-дизайна .
С дополнительными плагинами JavaScript на основе jQuery JavaScript разработчики могут добавлять дополнительные пользовательские интерфейсы (например, подсказки инструментов или диалоговые окна) или расширять функциональность существующих элементов управления, таких как функция автозаполнения для полей ввода. Добавьте библиотеку jQuery в свой HTML-документ, чтобы использовать Bootstrap с JavaScript.

Bootstrap – загрузка и первые шаги

Bootstrap был опубликован Twitter как свободная структура, поэтому его можно скачать и использовать бесплатно. Благодаря свободно доступному программному коду, более опытные разработчики могут адаптировать структуру к своим потребностям. В следующем руководстве описаны шаги, которые необходимо выполнить перед использованием шаблонов CSS и JavaScript для Bootstrap.

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 ++, и добавьте следующий код в пустой документ:

Читайте также:  Как добавить кнопку «наверх» на своем веб-сайте

Метатег «viewport» в области head обеспечивает оптимальное отображение веб-сайта на мобильных устройствах.

7. Сохраните проект как «basic.html» на рабочем столе

8. Внедрите JavaScript-файлы Bootstrap и CSS в код HTML, чтобы сделать шаблон Bootstrap из этого обычного HTML-документа. Для этого укажите каталог, в котором находятся папки. Рекомендуется добавить JavaScript в тело документа в самом конце , так как это в противном случае может увеличить время загрузки вашей веб-страницы. Вот как выглядит ваш код:

9. Чтобы закончить, сохраните документ как «bootstrap-template.html». Двойным щелчком вы можете открыть Bootstrap HTML в своем предпочтительном браузере, где вы должны увидеть сообщение, указанное в заголовке (h1)

10. Теперь вы можете свободно создавать свой шаблон. Различные коды для типографии, кнопок и сетки Bootstrap и т. д. можно найти на официальном сайте.

Несмотря на то, что Bootstrap представляет своих пользователей с предварительно упакованным контентом, вы не сможете зайти далеко за рамки без предшествующих знаний HTML и CSS.  Существует множество шаблонов, доступных для скачивания (некоторые бесплатные), которые были разработаны с помощью Bootstrap, и это может сэкономить вам много работы. Те, кто регулярно работает с HTML, CSS и JavaScript, быстро оценят преимущества Bootstrap. Вот самые важные из них:

  • Экономит много времени
  • Очень хороший фундамент для гибкого веб-дизайна
  • Регулярные обновления и огромное сообщество, которое вы можете задать
  • Первоклассная документация

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


Понравилась статья? Поделись.