что такое бутстрап и как им пользоваться

Что такое Bootstrap и как он работает

Разработка веб-страницы с точки зрения верстальщика — непрерывный процесс доработки и создания новых блоков. Чем больше проект, тем чаще происходит итерация «идея — функционал — вёрстка». Решая задачи бизнеса, стадии должны решаться быстро и качественно. И если качество вёрстки напрямую зависит от верстальщика, то скорость — фактор, который зависит от команды.

Для решения проблемы скорости разработчики постоянно придумывают новые инструменты. В среде верстальщиков таким инструментом стали CSS-фреймворки — набор готовых блоков, классов и внутренних функций, которые обеспечивают быструю и удобную разработку.

В 2010 году в недрах компании Twitter появился проект Twitter Blueprint. Его задачей было создание системы для разработки новых компонентов внутри компании. Twitter Blueprint имел набор базовых блоков с готовым дизайном, который использовался в компании. Это решение обрело популярность внутри компании благодаря своей простоте, так как любой сотрудник, имея минимальный опыт разработки, мог сделать новый концепт блока и предложить его для дальнейшей разработки.

В этом же году на Twitter Hack Week проект обрёл первую популярность. Его заметили не только внутри компании, но и за её пределами. Такое решение не могло оставаться внутренней разработкой и уже в 2011 году проект вышел в открытый доступ под названием Bootstrap. С тех пор Bootstrap удерживает лидерство среди инструментов по созданию сайтов. По разным статистикам, фреймворк используют от 17 до 30% всех сайтов в интернете. Код Bootstrap можно найти на сайтах таких проектов, как:

Это далеко не весь список, который можно привести. Таким образом Bootstrap не является библиотекой для создания админок и прототипов, как о нём говорят.

Bootstrap как набор готовых элементов

Одной из сторон Bootstrap является то, что его можно использовать исключительно как набор уже готовых элементов. Для это не требуется серьёзных знаний HTML и CSS — достаточно уметь создавать самые простые страницы и прочитать документацию. Например, для создания кнопки используется два класса, один из которых отвечает за структуру кнопки, а другой за оформление. Такой подход называется OOCSS — Object Oriented CSS или объектно-ориентированный CSS. Про объектно-ориентированный подход CSS в блоге Hexlet есть отдельная статья.

Второй подход, который используется в Bootstrap — Atomic CSS. На нём построены утилиты во фреймворке. Atomic CSS — подход, при котором один класс использует одно свойство.

В этом примере тег получит два свойства:

Использование утилит предполагает более углублённые знания в CSS, так как это будет похоже на использование правил. Только вместо записи в CSS-файле используются классы.

Компоненты и утилиты позволяют очень быстро создать проект различной сложности. Единственное, в чём вы будете ограничены — выбор дизайна. Если не заниматься переписыванием компонентов, то страница будет выглядеть в точности, как в документации. Это не минус, так как Bootstrap современный фреймворк и его дизайн не пугает при первом взгляде. Многие небольшие компании используют такой подход.

Плюсы использования Bootstrap, как набора готовых элементов

Скорость

Процесс разработки сопровождается непрерывной работой по добавлению или удалению функционала на странице. Чем крупнее проект, тем чаще происходят эти процессы и скорость реализации не в последнюю очередь зависит от того, как скоро функционал «обрастёт» внешним видом. Используя готовые компоненты и утилиты Bootstrap можно быстро ввести новый функционал на сайт и дать его пользователям. Таким образом это решает одну из проблем цикла «идея — функционал — вёрстка».

Кроссбраузерность

В веб пространстве множество различных браузеров: Chrome, Firefox, Edge, Opera, Safari и т.д. Они предоставляют пользователям комфортный веб-сёрфинг. Но каждый из этих браузеров может обрабатывать HTML и CSS немного по своему, из-за чего верстальщикам необходимо приводить стандартные элементы к единому виду. Такая задача требует скрупулёзного подхода и знание частых проблем и отличий браузеров между собой. Компоненты Bootstrap учитывают различия браузеров и оптимизированы таким образом, чтобы минимизировать различия между ними.

Адаптивность

Bootstrap имеет готовую 12-колоночную сетку, по которой можно располагать компоненты. Сетка является самым популярным компонентом бутстрап и её используют даже те, кто скептически относится к фреймворку. Сетка использует подход, при котором возможно сразу настроить адаптивность. Используя готовые компоненты можно быть уверенным в том, что они будут хорошо отображаться на разных устройствах.

Доступность

Низкий порог вхождения

Создание страницы по компонентам не требует экспертного знания HTML и CSS. Это позволяет создавать новые блоки не только верстальщику, но и любому работнику компании, который знает базовые основы вёрстки. Таким образом разработчики могут оснастить новое решение готовой вёрсткой с использованием фреймворка. Bootstrap также может пригодиться небольшим компаниям, которые не готовы потратить большие деньги на разработку веб-сайта. В качестве промежуточного решения Bootstrap будет незаменим. В последствии возможно и остановиться на нём, как мы и сделали на Хекслете.

Минусы использования Bootstrap, как набора готовых элементов

Вес проекта

Фреймворк Bootstrap даёт не только набор классов, но и интерактивные компоненты. Для их работы используется несколько JavaScript библиотек, которые увеличивают вес подключаемых файлов на странице. В Bootstrap 4 вместе со библиотеками JavaScript весит

300кб. Это может стать критичной точкой при разработке мобильных приложений, ориентированных на использование при слабом интернет соединении. В качестве таких приложений могут быть материалы для оказания экстренной помощи, вызова спасательных служб и так далее.

Дизайн

Стандартные компоненты накладывают ограничения на дизайн. Эти рамки выражены в том, что компоненты возможно расширять только вглубь, вставляя одни компоненты внутрь других. Модификация компонентов потребует знаний в вёрстке, так как даже незначительные изменения необходимо проверить в браузерах и на разных разрешениях. При этом дизайн стандартных компонентов Bootstrap лаконичен и является примером для дизайнера. При своей простоте они функциональны и помогают правильно подать информацию. Даже в таких ограничениях создаются красивые и удобные сайты засчёт грамотной работы с UI.

Функционал

Как и в случае с дизайном, функционал блоков определён заранее и изменение приводит к существенным доработкам. Это касается и интерактивных элементов, которые используют JavaScript код. Разработчики для таких элементов внесли классы, которые помогают немного изменить поведение, но этого не всегда бывает достаточно.

Bootstrap как фреймворк

Помимо средств разработки, таких как набор компонентов и утилит, Bootstrap предлагает широкие возможности по созданию пользовательских компонентов. Это достигается засчёт большой кодовой базы в исходниках.

Что же такое фреймворк? Можно представить это как каркас будущего приложения. Своеобразным фундаментом, на котором мы возведём стены, установим окна и заставим мебелью. Таким фундаментом и является Bootstrap. В нём находится десятки функций и миксинов, которые позволят верстальщику создать свою собственную дизайн-систему. Этот функционал является самым недооценённым среди разработчиков и по этой причине о Bootstrap сформировалось неправильное мнение.

Представьте себе новый компонент, который разработчик добавляет на страницу. Используя бутстрап, зачастую разработка ведётся следующим образом:

При таком подходе, даже получив необходимые блоки, разработчик решит только ближайшую задачу, но может испытать трудности на дистанции. Все они связаны с отсутствием взаимодействия между компонентом и фреймворком:

Создание утилит, начиная с Bootstrap 5, решается добавлением нового массива, который передаётся в обработчик, отдавая на выходе новые классы. А как создаётся новый компонент? В большинстве случаев достаточно внимательно пройтись по файлу _variables.scss

Что там можно обнаружить? Например, цвета, которые используются в качестве цветовой схемы:

Цветов в файле _variables.scss намного больше, но именно эти формируют базовую цветовую схему проекта. Вы можете добавить новые цвета, определить их в качестве базовых и после компиляции все компоненты и утилиты получат новые значения. Именно такое поведение отличает фреймворк от простого набора готовых компонентов.

Именно такая работа с Bootstrap позволит создать нечто большее, чем просто прототип, лендинг или панель администратора. На Hexlet, в качестве третьего проекта по вёрстке Bootstrap используется для создания внешнего вида полноценного чата

Так как Bootstrap является набором функций и миксинов, то это снимает преграды его использования вместе с другими методологиями. Например, c БЭМ. Это распространённое мнение, что использовать бутстрап вместе с БЭМ невозможно. Взгляните на следующие миксины, которые доступны для создания сетки:

Если вы уже работали с Bootstrap, то в этих названиях найдёте привычную схему «Контейнер → строка → колонка». Используя эти миксины можно добавить логику фреймворка в абсолютно любой проект и не привязываться к именованию.

Таким образом можно добавлять не только элементы сетки, но и доступные компоненты и утилиты. При этом после компиляции не будет необходимости нести за собой множество кода, который не используется.

Выводы

Изучение Bootstrap может сильно развить вас как разработчика. Ведь кроме написания кода, можно изучать и чужой, который создан и поддерживается тысячами людьми по всему миру. В коде можно найти интересные решения, грамотное структурирование и множество полезных функций. Благодаря этому Bootstrap можно использовать во множестве сценариев: от создания прототипов, до вёрстки сложных макетов, а возможность использование отдельных частей позволяет добавить частичку Bootstrap в проект без необходимости переделывания структуры.

Источник

Введение

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

Быстрый старт

Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.

Поместите дин из следующих тегов

Отдельно

Если вы решите использовать отдельное решение для сценариев, сначала должен быть Popper.js, а затем наши плагины JavaScript.

Компоненты

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.

Начальный шаблон страницы

Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:

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

Важные глобальные атрибуты

Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.

HTML5 doctype

Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.

«Отзывчивый» мета-тэг

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

Вы можете посмотреть пример этого в действии на странице starter template.

Размер ширины и высоты элемента

В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:

Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.

Сообщество

Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.

Источник

Что такое Bootstrap и зачем он нужен?

В этой статье мы познакомимся с фреймворком Bootstrap. Рассмотрим, что это такое и зачем он нужен. Разберём его основные преимущества и недостатки.

Что такое Bootstrap?

Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений.

Фреймворк Bootstrap используется по всему миру не только независимыми разработчиками, но иногда и целыми компаниями. На Bootstrap создано очень много различных сайтов, посмотреть их можно на странице Bootstrap Expo.

Как он работает? Например, чтобы создать кнопку на странице с помощью Bootstrap, достаточно к ссылке или элементу button добавить всего несколько классов.

Создание кнопки в Bootstrap 5:

Ну как? Сколько на это потребовалось времени? Да, всего несколько секунд.

Всё, вкладки готовы. На это тоже ушли считанные секунды. Правда, потрясающая скорость. В этом сила Bootstrap.

Но, Bootstrap – это не просто набор готовых инструментов (HTML фрагментов, классов, компонентов и плагинов), а хорошо спроектированный фронтенд фреймворк, который довольно просто можно настроить под себя посредством редактирования Sass переменных и использования миксинов.

Из чего состоит Bootstrap

Bootstrap состоит из:

С чего начать изучение Bootstrap

Сначала необходимо изучить сетку и попрактиковаться на ней верстать макеты страниц и создавать разметку блоков. Изучить её можно тут (для тех, кто использует Bootstrap 3) или здесь (для Bootstrap 4).

После того как разберётесь с сеткой нужно изучить компоненты Bootstrap (как они верстаются и настраиваются) и научиться их вставлять в нужные места страницы.

Это минимальные задачи, которые перед собой необходимо поставить, чтобы научиться верстать сайты и веб-приложения на Bootstrap.

Ну если ваша задача не просто использовать Bootstrap, а что-то в нём изменять, переделывать, то без хороших знаний CSS тут конечно уже не обойтись. Некоторые вещи, конечно, можно настроить через изменения SCSS переменных и применения миксинов, а другие – нет. И это касается любых фреймворков.

Преимущества и недостатки фреймворка Bootstrap

Преимущества Bootstrap при его использовании для frontend разработки сайтов и интерфейсов админок:

Какую версию Bootstrap выбрать

Что нового в Bootstrap 5:

Третью версию в основном имеет смысл использовать, если нужна поддержка «старых» браузеров (IE8 и IE9).

Основные отличия Bootstrap 4 от Bootstrap 3:

Компоненты Bootstrap 3 в IE8 и некоторых других версиях отображаются без градиентов, теней и закруглённых углов. Это связано с тем, что в них нет поддержки используемых для этих целей CSS3 свойств.

Источник

Bootstrap для новичков, что это и как его установить

У Верстальщиков и фронтендеров, есть блоки кода, которые используют в каждом проекте и поэтому часто задумываются о создании собственного фреймворка. Но обычно начинают пользоваться уже существующими, например bootstrap.

Что такое bootstrap

Это фреймворк из трёх языков HTML/CSS/JS. Благодаря большому функционалу верстать сайты становится легко и быстро, ну конечно если во всем разобраться.

Появился в стенах компании Twitter и назывался «Twitter Bootstrap». Но из-за того что его захотели сделать всемирным пришлось отказаться от слова Twitter в названии. По моему личному опыту в bootstrap есть ряд плюсов:

Как установить bootstrap

Есть два способа его подключения:

Зайдите на официальный сайт выберите компоненты которые вам понадобятся для работы (об этом мы поговорим на следующем уроке) и в самом конце скачайте нажав на кнопку «Compile and Download». Далее распакуйте архив у себя на компьютере.

Но он требует подключение к интернету во время работы с фреймворком.
Для подключения bootstrap.min. css добавьте эту строчку кода в —

Строение фреймворка

Bootstrap насчитывает не малое количество компонентов, которые помогают нам верстать быстрее (да где-то вы это уже слышали). Поэтому давайте посмотрим, что вошло в эти компоненты.

Вы можете подробнее познакомится с этими функциями нажав на заголовок

Сеточная система

Все сайты строятся на блоках, поэтому бутстрап уделил этому отдельное внимание сделав — сетку. Она делит родительский блок (в котором находится) на 12 одинаковых по размерам частей. Также можно объединять между собой эти части, например можем дать одному блоку 3 части, второму 6 и третьему тоже 3.

Но главное ее преимущество в том, что можно менять размер блоков в зависимости от размера экрана гаджета который используется — компьютер или телефон. Так например col-md отвечает за размер экрана шире 970 px, а col-xs за ширину менее 768 px.

Оформление текста

Вам изредка придется менять размер заголовка первого уровня, или размер цитаты. Потому что все вымерено до пикселя.

Также предусмотрена возможность использовать размер h1 заголовка (и других) для обычного текста сделав вот так

Сообщения

Довольна часто приходиться уведомлять пользователя, например при правильной регистрации или неудачной попытки ввести пароль. Поэтому в этом фреймворке мы имеем уведомления четырех типов:

Вот как это выглядит:

А теперь посмотрите сколько кода пришлось наклепать.

Навигация

Навигация — одно из самых сложных мест в верстки, на нее тратится много времени и нервов (тем более когда ее нужно сделать адаптивной). Но bootstrap с этим хорошо справляется, он поможет с боковым и главным меню, вкладками, хлебных крошками и многим другим. Вот например главное меню:

Да и еще одна вещь — переход на другие страницы сайта (постраничная навигация). Ее легко оформить в такой вид:

А вот навигационная панель, ну ли хлебные крошки:

Иконочный шрифт

Теперь вы можете не использовать надоевшие спрайты иконок и хорошо оптимизировать свою работу. Но есть один минус можно применять только один цвет.

Конечно здесь намного меньше иконок чем у font-awesome, но и это радует.

Это только часть всех иконок — полный набор можете найти на официальном сайте.

Формы

Также мы имеем стили для оформления:

При этом ещё можно указать горизонтальное или вертикальное положение элементов и названий, также изменять цвет формы тем самым уведомляя пользователя на возникновении ошибки или предупреждения.

Таблицы

Когда мы подробнее рассмотрим, как оформлять таблицы, то вы сможете:

Кнопки

Для создания красивой кнопки понадобится добавить только два класса. Кстати второй отвечает за цвет кнопки, так что можно сделать класс с вашим цветом и подключить его вместо стандартного.

А вот их конструкция.

JavaScript элементы

Bootstrap имеет множество фишек связанных с анимацией:

Все это будет у вас в руках при подключении одного файла bootstrap.js

Вывод

Переходите на следующий урок, если готовы быстро верстать сайты.

Источник

Начинающему веб-мастеру: делаем одностраничник на Bootstrap 4 за полчаса

Фреймворк Bootstrap — это свободный набор инструментов для создания интерфейсов сайтов и веб-приложений. Его возможности ориентированы исключительно на фронтенд-разработку. Bootstrap — проект весьма популярный, о чём, например, говорит то, что он занимает (по состоянию на начало марта 2018-го года) второе место по количеству звёзд на GitHub.

Предварительные требования

Эта материал ориентирован на начинающих веб-разработчиков, владеющих основами HTML, CSS и jQuery.

Вот одностраничный веб-сайт, о создании которого средствами Bootstrap мы будем говорить.

Готовый проект, созданный средствами Bootstrap

Загрузка и установка Bootstrap

Bootstrap можно подключить к странице с использованием сети доставки контента. Для этого надо добавить следующую ссылку в тег :

Свежую версию Bootstrap можно загрузить отсюда и использовать локально.

Структура проекта должна выглядеть так, как показано на следующем рисунке.

О возможностях Bootstrap 4

Первая стабильная версия Bootstrap 4 вышла в конце января сего года. Теперь Bootstrap включает в себя некоторые интересные возможности, которых не было в его предыдущей версии. А именно, если говорить об улучшениях и изменениях, можно отметить следующее:

Система сеток Bootstrap

Сетка разделена на 12 колонок, эта структура, настроенная так, как нужно разработчику, является основой макета страницы.

страницы. При настройке размеров вложенных элементов используют следующие классы (вместо звёздочки в конце имени класса указывается число столбцов базовой 12-колоночной сетки, которое должен занимать конкретный элемент):

Навигационная панель

Теперь создадим файл main.css и подключим его к странице, поместив в тег файла index.html следующее:

Это позволит настраивать стили элементов страницы, размещая в этом файле CSS-правила. Добавим в этот CSS-файл правила, задающие цветовое оформление навигационной панели:

Новая сетка Bootstrap построена на основе flexbox, поэтому для выравнивания содержимого нужно пользоваться соответствующими свойствами. Например, для того, чтобы поместить меню навигационной панели справа, нужно использовать свойство justify-content и установить его значение во flex-end :

Шапка страницы

Для описания шапки страницы применяется тег :

Подготовим макет для шапки страницы. Мы хотим, чтобы она занимала всю высоту окна, поэтому тут нам пригодятся возможности jQuery. Создадим файл main.js и подключим его к index.html перед закрывающим тегом :

В файл main.js добавим следующее:

Нелишним будет поместить в шапку страницы какую-нибудь приятную фоновую картинку. Сделаем это следующим образом:

Вот что у нас в итоге получилось.

Шапка страницы с фоновым изображением

Пока шапка сайта выглядит пустовато, поэтому добавим в неё элемент

Теперь добавим в шапку описание проекта. Его мы поместим в новый элемент

Теперь добавим сюда ещё один элемент

Кнопки

Вот как будет выглядеть шапка страницы после выполнения вышеописанных действий:

Шапка страницы, содержащая описание проекта

Раздел About

Для начала посмотрим на то, что мы хотим создать. Перед вами — раздел страницы со сведениями о веб-разработчике.

Здесь мы воспользуемся возможностями сетки Bootstrap для того, чтобы сформировать макет раздела, состоящий из двух частей. Приступим к работе, добавив к родительскому элементу раздела

Первая часть макета будет расположена слева, она будет содержать фотографию. Вторая часть, расположенная справа, вместит описание.

Вот как выглядит разметка левой части этого раздела:

А вот что получится после того, как сюда будет добавлено описание правой части макета:

Вот стили для всего этого:

Раздел Portfolio

Займёмся теперь разделом, в котором будет представлено портфолио разработчика. Он будет содержать галерею работ.

При формировании макета этого раздела применяются те же принципы работы с сеткой, которые мы рассматривали выше:

Каждый элемент в нашей галерее, на средних и больших экранах, занимает 4 колонки (напомним — класс col-sm-12 используется для устройств с маленькими экранами, класс col-md-4 используется для средних экранов, col-lg-4 — для устройств с большими экранами). Как результат, на больших и средних экранах на один элемент придётся примерно 33.3% элемента-контейнера, на маленьких устройствах каждый элемент будет занимать весь экран (12 колонок).

Стилизуем галерею работ:

Раздел Blog и работа с карточками

Поговорим о создании раздела, в котором содержатся анонсы материалов из блога, который ведёт наш условный веб-разработчик.

Для создания этого раздела нам понадобятся так называемые карточки (cards в терминологии Bootstrap).

Для того чтобы создать карточку, нужно включить в макет элемент

Вот стили для карточек:

Вот как будет выглядеть наш одностраничник после создания раздела Blog:

Страница после добавления раздела Blog

Раздел Team

В этом разделе будут размещены сведения о команде проекта.

Для формирования этого раздела мы воспользуемся сеткой, поровну разделив имеющееся пространство между изображениями. Каждое изображение (на больших и средних экранах) будет занимать 3 колонки сетки, что составляет 25% общего пространства.

Вот HTML-разметка этого раздела:

Украсим этот раздел анимацией, появляющейся при наведении указателя мыши на изображения. Это должно выглядеть так, как показано на рисунке ниже.

Анимация при наведении указателя мыши на изображение

Для того чтобы достичь такого эффекта, добавим в main.css следующие стили:

Форма обратной связи

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

Форма обратной связи

Добавим в файл index.html следующее:

Вот стили для раздела с формой обратной связи, которые надо поместить в файл main.css :

Шрифты

Стандартные шрифты подходят далеко не всем. Мы, воспользовавшись возможностями Google Font API, применим в нашем проекте шрифт Raleway. Он будет смотреться здесь очень хорошо. Для импорта шрифта добавим в файл main.css следующую директиву:

Затем зададим глобальные стили для различных HTML-тегов:

Эффекты прокрутки

На рисунке ниже показано поведение страницы, которого мы хотим добиться.

Прокрутка страницы при нажатии на ссылки в навигационной панели

Для того, чтобы страница, при щелчках по ссылкам навигационной панели, плавно прокручивалась к нужному разделу, нам понадобится прибегнуть к возможностям jQuery. Если вы не очень хорошо знакомы с этой библиотекой, знайте, что ничего сложного тут нет — просто добавьте нижеприведённый код в файл main.js :

После этого добавьте атрибут data-value к каждой из ссылок в навигационной панели и приведите разметку к следующему виду:

Для того чтобы всё это, наконец, заработало, осталось лишь добавить атрибут id к основному элементу

каждого из разделов страницы. При этом нужно проследить, чтобы его значение было идентично тому, которое задано в атрибуте data-value соответствующей ссылки. Например, вот соответствующий атрибут для раздела About:

На этом наш пример завершён. Вот код этого проекта на GitHub.

Итоги

Bootstrap 4 — это отличный инструмент для создания интерфейсов веб-приложений. Он даёт разработчику высококачественные компоненты, которые легко настраиваются и отлично сочетаются друг с другом. Кроме того, Bootstrap позволяет создавать отзывчивые макеты, которые хорошо выглядят на устройствах с различными экранами.

Уважаемые читатели! Если сегодня состоялось ваше первое практическое знакомство с Bootstrap, скажите, планируете ли вы использовать этот фреймворк в своих проектах?

Источник