Как подключить бутстрап к html файлу
Bootstrap
Содержание:
Bootstrap (от англ. сущ. «шнуровка» (ботинок) или гл. «добиваться самостоятельно«) — бесплатный фреймворк (набор инструментов) для быстрой вёрстки сайтов и прототипирования интерфейсов веб-приложений. Создан изначально для нужд популярного микроблогингового сервиса Twitter, однако в 2011 году открыт для свободного скачивания всем желающим.
Bootstrap включает в себя готовые шаблоны блоков различной конфигурации, кнопок, таблиц, форм, которые добавляются в Ваш проект простым прописыванием специальных классов. Кроме готовых CSS и HTML-сниппетов, имеется и ряд JavaScript-дополнений, которые реализуют тот или иной специфический функционал.
Всё это в совокупности позволяет довольно быстро создавать прототипы различных пользовательских интерфейсов. Поэтому, если Вам нужно быстро сверстать современный адаптивный сайт, можете воспользоваться средствами Bootstrap, о которых мы Вам расскажем в статье ниже.
Быстрая вёрстка сайта
Используя возможности фреймворка Bootstrap, Вы сможете самостоятельно и быстро верстать современный сайт.
Вёрстка сайта – дело не сказать чтобы очень сложное, но довольно муторное. Помимо того, что нужно оснастить сайт требуемым функционалом, нужно ещё чтобы он был красивым! Такую красоту, обычно, делает дизайнер в Фотошопе. А задача верстальщика при этом сделать так же как на картинке. И вот для этого уже приходится попотеть.
Где-то с год назад я работал в команде с одним дизайнером над созданием сайта. И он после просмотра готового макета задал мне вопрос: «А ты что, не используешь сетку?». В Фотошопе он, оказывается, всё рисовал по направляющим, чтобы было ровно, однако в обычном HTML подобных средств выравнивания нет.
И вот тогда я и решился познакомиться с технологией, которая уже не первый год была у многих на устах – Bootstrap.
Зачем нужен Bootstrap
Чтобы понять, нужен ли Вам Bootstrap, необходимо сначала понять, что это такое и для чего. Кратко отвечая на вопрос, скажу, что Bootstrap – это набор стилей, скриптов (а в 3-й версии ещё и готовых символьных шрифтов), которые можно применять для быстрой вёрстки различных блоков сайта. При этом большинство этих блоков изначально поддерживают адаптивность и прилично выглядят на экранах мобильных устройств без каких-либо дополнительных действий с Вашей стороны.
Чтобы лучше понять, что же может Bootstrap и для чего конкретно его можно применить, предлагаю Вам взглянуть на следующую схему:
Сразу стоит сказать, что, несмотря на довольно хороший функционал, в Bootstrap часто не хватает некоторых популярных средств. Например, в нём нет:
Справедливости ради следует сказать, что недавно вышел Bootstrap 4, который довольно сильно отличается по реализации и функционалу от более распространённой версии Bootstrap 3. Однако, в рамках данной статьи мы рассмотрим именно проверенную временем и стабильную 3-ю версию (последняя на данный момент – 3.3.7).
Установка Bootstrap
Чтобы начать работу с Bootstrap его нужно правильно подключить в Ваш HTML-документ. Сделать это можно несколькими способами.
Внешнее подключение через Bootstrap CDN
Как в своё время было с популярной библиотекой jQuery (кстати, её наличие тоже обязательно), Bootstrap на сегодняшний день тоже обзавёлся собственной системой доставки контента (CDN). Это означает, что Вам можно ничего не качать для его установки – достаточно просто прописать ссылки на нужные Вам компоненты в Вашем HTML-документе.
Минимально необходимым набором компонентов для работы Bootstrap является его таблица стилей и файл скриптов (bootstrap.css и bootstrap.js, соответственно). Стили Бутстрапа нужно подключить в секции перед объявлением своих стилей (style.css), а скрипты можно отправить в «подвал» сайта для ускорения загрузки страницы. Кстати, для этой же цели лучше использовать минифицированные версии файлов, ссылки на которые выглядят так:
Рекомендуется также подключать CSS-файл темы, в котором содержатся уникальные стили оформления Вашей версии Bootstrap (о том, как её сделать речь пойдёт немного ниже). Его следует также поместить перед объявлением Вашей основной таблицы стилей, но после общих стилей Бутстрапа. Ссылка на подключение темы выглядит так:
Вступление
Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с jsDelivr и шаблонами страниц.
Быстрый старт
Хотите использовать Бутстрап в своем проекте? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Нужна система управления пакетами или исходники Bootstrap? Перейдите на страницу загрузки.
Чтобы узнать о следующих шагах, посетите раздел Система сеток или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Bootstrap включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
Тип текущего документа
Bootstrap требует использования doctype HTML5. Без него у вас возникнут некоторые проблемы со стилями, но его включение не должно вызывать каких-либо серьезных сбоев.
Мета-теги для адаптивной вёрстки
Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в :
Вы можете увидеть пример этого в действии в стартовом шаблоне.
Размер ширины и высоты элемента (Box-sizing)
В том редком случае, когда вам понадобится переопределить его, делайте так:
Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.
«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)
Для улучшенной кроссбраузерной визуализации мы используем «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.
Сообщество
Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:
Вы также можете присоединиться к @getbootstrap on Twitter, чтобы следить за последними слухами и потрясающими музыкальными клипами.
Введение
Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с jsDelivr и шаблонами страниц.
Быстрый старт
Хотите использовать Бутстрап в своем проекте? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Нужна система управления пакетами или исходники Bootstrap? Перейдите на страницу загрузки.
Это все, что вам нужно из общих требований к странице. Посетите раздел Система сеток или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
Тип текущего документа
Bootstrap требует использования doctype HTML5. Без него у вас возникнут некоторые проблемы со стилями, но его включение не должно вызывать каких-либо серьезных сбоев.
Мета-теги для адаптивной вёрстки
Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в :
Вы можете увидеть пример этого в действии в Начальном шаблоне страницы.
Размер ширины и высоты элемента (Box-sizing)
В том редком случае, когда вам понадобится переопределить его, делайте так:
Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.
«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)
Для улучшенной кроссбраузерной визуализации мы используем «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.
Сообщество
Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:
Вы также можете присоединиться к @getbootstrap on Twitter, чтобы следить за последними слухами и потрясающими музыкальными клипами.
Как подключить Bootstrap на сайт
Подключить со скачиванием библиотеки
Также Bootstrap станет отличным помощником, если у вас интернет-страница, которая нуждается в апгрейде. Интеграция устаревшего веб-портала с Bootstrap откроет огромные возможности для расширения его функционала, обновления дизайна и улучшения юзабилити.
Как же это осуществить?
1. Скачать фреймворк по этой ссылке.
2. Распаковать папку с файлами на жесткий диск или в корень вашего сайта.
В папке после распаковки вы увидите следующую структуру файлов:
Почему подключаются min- версии файлов? Потому что они меньше весят, т. к. код в них скомпилирован, что положительно скажется на времени загрузки сайта.
В папке Fonts находятся файлы иконочного шрифта FontAwesome, который можно будет подключить позже по мере необходимости, т.к. на работу фреймворка он никак не влияет.
3. После распаковки архива загружаем файлы bootstrap.min.css и bootstrap.min.js в папки CSS и JS вашего веб-проекта. Если у вас на хостинге в корне сайта нет таких папок, их необходимо создать.
4. Для работы плагинов необходимо скачать последнюю версию библиотеки jquery и загрузить её в папку JS.
5. После всех проделанных манипуляций подключаем в разделе сайта файл стилей:
Подключение фреймворка Bootstrap к сайту
В этой статье мы разберём как скачать и подключить фреймворк Bootstrap (3, 4 и 5 версию) к сайту.
Минимальный набор инструментов для разработки на Bootstrap
Перед подключением Bootstrap и создании на его основе дизайна сайтов и веб-приложений необходимо иметь следующий минимальный набор программ:
Варианты установки Bootstrap
Создание дизайна веб-проекта, в основу которого положен Bootstrap всегда начинается с его установки.
Подключить Bootstrap к сайту можно разными способами, например:
Какой способ выбрать зависит конечно от вашей конкретной задачи, знаний и опыта.
Сборка из исходных кодов
Вариант с самостоятельной сборкой из исходных кодов в основном применяется, когда нужно детально настроить Bootstrap под свой проект, а также исключить из него все не нужные компоненты и плагины.
Этот вариант является предпочтительным, хотя и более сложным. Но, он позволяет кастомизировать фреймворк под свою конкретную задачу.
При этом загрузить исходные файлы Bootstrap можно как вручную с GitHub, так и с помощью пакетного менеджера (npm, yarn, RubyGems, Composer или NuGet).
Для загрузки исходных кодов Bootstrap с помощью npm нужно ввести следующую команду в консоль:
Подробная инструкция по сборке проекта из исходных кодов Bootstrap v4 с помощью Gulp приведена на этой странице.
Подключение Bootstrap через CDN
Подключение через CDN — это самый простой вариант установки Bootstrap. Здесь скачивать ничего не нужно. Необходимо лишь вставить в HTML ссылки на файлы, размещенные на CDN серверах.
Подключение Bootstrap 5:
Пример подключения Bootstrap 4 с помощью CDN:
Подключение Bootstrap 3 к странице:
Локальная установка Bootstrap
Для локальной установки Bootstrap (с настройками по умолчанию) необходимо:
1. Скачивание готовой сборки Bootstrap
Скачать дефолтную готовую к использованию сборку Bootstrap можно по следующим ссылкам (загрузка осуществляется с GitHub):
Эти сборки содержат скомпилированные и готовые к использованию файлы CSS и JavaScript.
Этот вариант сборки в основном используют для вёрстки прототипов, изучения и в проектах, дизайн которых может быть выполнен в стилях, заложенных авторами Bootstrap по умолчанию или с незначительными их изменениями.
2. Распаковка загруженного архива
После скачивания архива его необходимо распаковать.
Содержание архива Bootstrap v5.1.3:
В каталоге css находятся стили фреймворка Bootstrap, а в js – плагины необходимые для работы различных компонентов.
Плагины начиная с Bootstrap 5 написаны без использования библиотеки jQuery. Если вы используете фреймворк Bootstrap v3 или v4, то для работы его JavaScript файла необходима библиотека jQuery. Её нужно подключить перед Bootstrap JS.
В большинстве случаев из архива нам нужны только эти 2 файла: «bootstrap.min.css» и «bootstrap.bundle.min.js»
Зачем другие файлы?
Минимизированные файлы
Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, с суффиксом min и без него. Версия файла с min ничем ни отличается от без min, она просто минимизирована (сжата).
В продакшене (на рабочем сайте) лучше использовать минимизированные версии файлов. Эти файлы имеют меньший размер, и, следовательно, обеспечивают более быструю загрузку страниц сайта.
Не минимизированные версии более удобно использовать при разработке, а также для изучения.
CSS файлы Bootstrap
Файлы «bootstrap.css», «bootstrap.rtl.css» и их минимизированные версии – это полные версии. Они включают в себя все стили фреймворка.
Остальные используются, когда вы хотите использовать не целый CSS фреймворк, а только какую-то его часть:
JavaScript файлы Bootstrap
«bootstrap.bundle.min.js» – это версия, которая включает в себя «bootstrap.min.js» и библиотеку «popper.min.js».
«bootstrap.min.js» – это версия без библиотеки «popper.min.js», от которой он зависит.
В случае использования «bootstrap.min.js» необходимо «popper.min.js» подключить самостоятельно:
Поддержка RTL-языков в Bootstrap
Файлы, содержащие rtl предназначены для разработки сайтов, заточенных под RTL-языки, т.е. языки, которые пишутся и читаются справа налево.
Исходные карты файлов в Bootstrap
Файлы с map – это исходные карты, содержащие данные в JSON формате, которые нужны для связывания css и js файлов с их исходными файлами. Они используются для того, чтобы можно было вживую выполнять отладку исходных файлов прямо в веб-браузере.
Использования Bootstrap 5 в качестве модуля
В Bootstrap 5 добавлен скрипт, построенный как ESM («bootstrap.esm.js» и «bootstrap.esm.min.js»). Он позволяет использовать этот фреймворк в качестве модуля:
Иконочный шрифт Glyphicons в Bootstrap
В Bootstrap 3, кроме CSS и JavaScript файлов, содержится ещё иконочный шрифт «Glyphicons». Шрифт «Glyphicons» насчитывает более 250 иконок из набора «Glyphicon Halflings». Этот шрифт представлен в архиве посредством 4 файлов: «glyphicons-halflings-regular.eot», «glyphicons-halflings-regular.svg», «glyphicons-halflings-regular.ttf», «glyphicons-halflings-regular.woff».
Такое разнообразие форматов одного и того же шрифта необходимо для того, чтобы обеспечить его отображение в разных браузерах.
Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье.
В Bootstrap v4 и v5 не содержится иконочный шрифт. Если он нужен, то его нужно подключить самостоятельно.
Например, вместо него можно использовать FontAwesome, Octicons, IcoMoon или любой другой иконочный шрифт.
Если же нужен Glyphicons, то его можно взять из архива Bootstrap 3, а стили с GitHub.
Иконки SVG с открытым исходным кодом сейчас имеются от самих разработчиков Bootstrap. Можно воспользоваться ими. Официальная страница Bootstrap Icons: https://icons.getbootstrap.com/
Если нужен шрифт, состоящий из определённого количества иконок, то можете создать свой. Как это сделать описано в этой статье.
Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье.
Отличия содержимого архива Bootstrap v3 и v4
Архив фреймворка Bootstrap v4 от v3 отличается тем, что:
Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть.
3. Копирование файлов в проект и подключение их к странице
После распаковки загруженного архива скопируйте нужные файлы в проект.
Для Bootstrap v3 и v4 дополнительно загрузите библиотеку jQuery.
Пример локального подключения Bootstrap 4 к странице:
Пример локального подключения Bootstrap 5 к странице: