Уроки по фреймворку Bootstrap 4
Автор учебного курса: Саакян Артак Арамович, студент гр. ИТк-401 ФГАОУ ВО «РГППУ.
Скачать Notepad++ Portable
Скачать материалы к учебному курсу - папка kurs_bootstrap.zip (1 Мб)
Теория 2. Компоненты
После прочтения темы перейдите к выполнению урока 2 и урока 3
Кнопки (Buttons)
Кнопка – это элемент интерфейса, представляющий собой прямоугольник, нажатие на который приводит к выполнению некоторого действия.
Кнопки используются в HTML-формах, диалоговых окнах, меню и других частях веб-страниц.
Создание кнопки в Bootstrap 4 осуществляется посредством добавления классов btn и btn-{theme} к элементу a или button. Вместо {theme} необходимо указать название темы (рисунок 1).
Для создания кнопки классы btn и btn-{theme} можно конечно добавить и к другому HTML элементу, но в большинстве случаев используются именно a и button.
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
Outline кнопки
Для создания кнопки с контуром (без фона), необходимо использовать классы btn и btn-outline-{theme} (рисунок 2).
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>
Хлебные крошки (Breadcrumbs)
Хлебные крошки (навигационные цепочки, breadcrumbs) – это элемент интерфейса, предназначенный для создания дополнительной навигации по сайту.
Их основное назначение – это показать текущее местоположение пользователя в иерархической структуре сайта и обеспечить навигацию по ней.
Например, в интернет-магазине с помощью хлебных крошек можно очень наглядно показать в каком сейчас разделе находится посетитель, а также в какие более крупные секции этот раздел входит. При необходимости пользователь с помощью хлебных крошек может очень просто перейти в секцию, которая, например, на один или два уровня выше по иерархии чем текущая и посмотреть, из чего она состоит и что в ней есть. Это очень удобно.
Таким образом, хлебные крошки – это ещё один вариант навигации, который помогает пользователям ориентироваться в структуре сайта и перемещаться по его страницам.
В фреймворке Bootstrap создание хлебных крошек осуществляется с помощью компонента Breadcrumb. По сути этот компонент – это просто набор стилей, которые нужно добавить к определённой HTML разметке через классы (рисунок 3).
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Главная</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Главная</a></li>
<li class="breadcrumb-item active" aria-current="page">Библиотека</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Главная</a></li>
<li class="breadcrumb-item"><a href="#">Библиотека</a></li>
<li class="breadcrumb-item active" aria-current="page">Данные</li>
</ol>
</nav>
Выпадающие списки (Dropdowns)
Выпадающий список – это элемент интерфейса, обычно представляющий собой некоторое меню, которое показывается только после того, как пользователь нажал на некоторый элемент или навёл на него курсор. В большинстве случаев в качестве такого элемента выступает кнопка или пункт меню. Для того чтобы указать что этот элемент имеет dropdown меню, обычно рядом с его содержимым отображается стрелка, направленная вниз.
Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js. (рисунок 4)
В Bootstrap создание кнопки или ссылки с выпадающим меню начинается с создания обёртки (элемента div с классом dropdown).
Класс dropdown используется для установки этому элементу относительного позиционирования (position: relative).
Следующий шаг сводится в добавление в эту обёртку двух элементов: кнопки или ссылки, и блока меню.
После этого к кнопке нужно добавить атрибут data-toggle со значением dropdown.
Пример HTML кода для создания кнопки с выпадающим меню на Bootstrap 4 (рисунок 5):
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Кнопка выпадающего списка
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще здесь</a>
</div>
</div>
Выпадающие списки для кнопок через разделитель
На следующем примере показана возможность добавления выпадающего списка к кнопке c помощью дополнительной кнопки со стрелочкой, которая отделена от предыдущей кнопки с помощью разделителя. Для группирования (объединения) двух этих кнопок используется класс .btn-group (группа кнопок) (рисунок 6).
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще здесь</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Отдельная ссылка</a>
</div>
</div>
Уведомления (Alerts)
Уведомления (alerts) предназначены для выделения на веб-странице некоторой информации с целью привлечения к ней внимания пользователя. Наиболее часто данный компонент используют для отображения ошибок и предупреждений при валидации форм обратной связи на сайтах, а также для сигнализации об успехе её отправки.
Но применения компонента можно найти не только для информирования пользователя о его результатах взаимодействия с сайтом, но и, например, для того, чтобы просто выделить некоторый контент на сайте и тем самым привлечь его внимание к нему.
Цветовая гамма уведомлений (alerts) в Bootstrap:
- alert-success (сообщения об успешном выполнении какого-либо действия);
- alert-info (информационные сообщения);
- alert-warning (предупреждающие сообщения);
- alert-danger (сообщения об ошибки).
Кроме этих сообщений в Bootstrap 4 доступны ещё следующие: alert-primary, alert-secondary, alert-light и alert-dark.
Создание сообщения осуществляется посредством оборачивания необходимого текста, например, в элемент div и добавления двух классов. Первый класс (базовый) должен иметь название alert, а второй - alert-theme. Вместо слова theme во втором классе необходимо указать тему (цветовую гамму) сообщению.
Примеры уведомлений (рисунок 7):
<div class="alert alert-primary" role="alert"> Простое primary оповещение - проверьте! </div> <div class="alert alert-secondary" role="alert"> Простое secondary оповещение - проверьте! </div> <div class="alert alert-success" role="alert"> Простое success оповещение - проверьте! </div> <div class="alert alert-danger" role="alert"> Простое danger оповещение - проверьте! </div> <div class="alert alert-warning" role="alert"> Простое warning оповещение - проверьте! </div> <div class="alert alert-info" role="alert"> Простое info оповещение - проверьте! </div> <div class="alert alert-light" role="alert"> Простое light оповещение - проверьте! </div> <div class="alert alert-dark" role="alert"> Простое dark оповещение - проверьте! </div>
Закрытие (удаление) уведомлений
Для добавления к сообщению кнопки со значком «крестика» необходимо:
- добавить к классам alert и alert-theme ещё класс alert-dismissible;
- в контент контейнера сообщения добавить кнопку (button) с атрибутами class="close" и data-dismiss="alert".
Закрытие сообщения в Bootstrap 3 и 4 реализуется с помощью JavaScript. Поэтому данный функционал требует наличие подключённого к странице js-скрипта этого фреймворка или его части (в Bootstrap 4 он содержится в файле util.js)
Класс alert-dismissible предназначен для позиционирования кнопки внутри сообщения и добавления к ней дополнительного отступа справа. Атрибут data-dismiss="alert" используется в качестве ключа, с помощью которого JavaScript добавляет к кнопке необходимый функционал.
Плагин jQuery и Bootstrap JS должны быть подключены, иначе при нажатии на кнопку крестик, уведомление закрываться не будет.
Сообщение с кнопкой "Закрыть" (рисунок 8):
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Внимание!</strong> Вам следует проверить некоторые из этих полей.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Аккордеон (Collapse)
Аккордеон обычно применяется для создания на сайте меню или навигации, в которые необходимо поместить много контента и навигационные списки.
Плагин jQuery и Bootstrap JS должны быть подключены, иначе при нажатии на аккордеон, панель не будет разворачиваться и сворачиваться.
Следующий пример покажет вам, как создать аккордеон, используя компонент collapse (сворачивание) (рисунок 9):
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Сворачиваемый групповой элемент #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Некоторый заполнитель для первой панели аккордеона. Эта панель отображается по умолчанию благодаря классу <code>.show</code>.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Сворачиваемый групповой элемент #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Некоторый заполнитель для второй панели аккордеона. По умолчанию эта панель скрыта.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Сворачиваемый групповой элемент #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
И, наконец, заполнитель для третьей и последней панели аккордеона. По умолчанию эта панель скрыта.
</div>
</div>
</div>
</div>
Атрибут data-toggle="collapse" необходимо добавить к элементу управления (например, кнопка или ссылка, нажав на которую вы хотите свернуть другой элемент, содержащий контент). А также необходимо указать какой именно элемент вы хотите свернуть, для этого необходимо добавить к элементу управления атрибутом data-target (для кнопки) или href (для ссылки) со значением идентификатора того элемента, который необходимо свернуть. И ещё не забудьте добавить класс .collapse к сворачиваемому элементу.
Jumbotron
Компонент Jumbotron предназначен для создания контента или информации на веб-сайте, который занимает всю ширину контейнера куда он помещен и является очень большим, чтобы пользователи обратили на него внимание.
Для создания Jumbotron необходимо заключить подготовленное содержимое в блочный элемент <div>...</div> и применить к нему класс .jumbotron (рисунок 10).
<div class="jumbotron"> <h1 class="display-4">Привет, мир!</h1> <p class="lead">Это простой компонент в стиле jumbotron для привлечения дополнительного внимания к избранному контенту или информации.</p> <hr class="my-4"> <p>Он использует служебные классы для типографики и интервалов для размещения содержимого в более крупном контейнере.</p> <a class="btn btn-primary btn-lg" href="#" role="button">Узнать больше</a> </div>
Чтобы сделать jumbotron во всю ширину и без закругленных углов, добавьте класс-модификатор .jumbotron-fluid и добавьте внутрь .container или .container-fluid (рисунок 11).
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Jumbotron на всю ширину</h1>
<p class="lead">Это модифицированный jumbotron, который занимает все горизонтальное пространство своего родителя.</p>
</div>
</div>
Навигация (Navs)
Навигационные панели (navs) в Twitter Bootstrap реализованы в виде вкладок (tabs) и кнопок (pills). Создание навигационной панели начинается с создания маркированного списка (<ul></ul>) к которому добавляется базовый класс .nav. После этого переходят к созданию пунктов (<li></li>), которые будут являться вкладками (tabs) или кнопками (pills).
Чтобы добавить ссылки внутри навигационной области, используйте
- элемент с class="nav". Затем добавьте
- элементы с .nav-item классом за которым следует элемент с .nav-link классом: (рисунок 12)
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Активная</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</li>
</ul>
Навигационная панель (Navbar)
Создание горизонтального адаптивного меню для сайта в Bootstrap осуществляется с помощью компонента Navbar.
Navbar имеет 2 режима отображения:
- десктопный (обычный) – выводятся все элементы меню (рисунок 13);
- мобильный (свёрнутый) – по умолчанию отображается бренд и кнопка «Гамбургер» (для открытия основного содержимого меню) (рисунок 14 и 15).
Режим отображения меню зависит от ширины viewport браузера. По умолчанию меню Navbar имеет мобильный вид при ширине viewport меньше 768px.
HTML-структура Bootstrap меню Navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Панель навигации</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадающий список
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Что-то еще здесь</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенный</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Поиск" aria-label="Поиск">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Поиск</button>
</form>
</div>
</nav>
Кнопка «Гамбургер» отображается только в мобильной версии и предназначена для открытия основной части меню. Указание элемента (основной части) осуществляется посредством атрибута data-target.
Кроме атрибута data-target и связанным с ним id, в меню Navbar используются и много других сущностей. Они играют роль селекторов, с помощью которых к элементам меню добавляются стили (CSS) и логика (JavaScript).
Например, у кнопки «Гамбургер» атрибут data-toggle="collapse" предназначен для того, чтобы JavaScript его инициализировал как Collapse. После инициализации эта кнопка может переключать видимость элемента, указанного в data-target.
Нумерация страниц (Pagination)
Класс .pagination в Bootstrap делает нумерацию страниц. Разбиение на страницы обычно происходит, когда у вас есть навигация со ссылками на разные страницы в серии. К примеру, результаты поиска возвращают много страниц с нумерацией, которая позволяет пользователю переходить к следующей странице или даже на несколько страниц вперёд.
Чтобы создать нумерацию страниц по умолчанию, добавьте class="pagination" к элементу <ul>, который представляет список страниц. Также добавьте .page-item к каждому элементу <li> и .page-link к каждому элементу <a> (рисунок 16).
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Неактивные и активные состояния
Ссылки в нумерации страниц можно настраивать под разные обстоятельства. Используйте класс .disabled для ссылок, которые должны выглядеть некликабельными, и .active - для обозначения текущей страницы.
Добавьте класс .active к элементу <li>, который представляет текущую страницу (страницу, на которой сейчас находится пользователь).
Добавьте класс .disabled к элементу <li>, чтобы отключить данный пункт (рисунок 17).
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Предыдущая</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Следующая</a>
</li>
</ul>
</nav>
Значки (Badges)
Значки в Bootstrap - это прямоугольник, который содержит внутри себя текст. Бейдж является строчным элементом (display: inline). Его можно поместить в любую часть текстового контента сайта.
Создание значка осуществляется посредством помещения некоторого текста в элемент, например span и добавления к этому элементу двух классов (badge и). (рисунок 18)
<h1>Пример заголовка <span class="badge">Новый</span></h1> <h2>Пример заголовка <span class="badge">Новый</span></h2> <h3>Пример заголовка <span class="badge">Новый</span></h3> <h3>Пример заголовка <span class="badge">Новый</span></h3> <h5>Пример заголовка <span class="badge">Новый</span></h5> <h6>Пример заголовка <span class="badge">Новый</span></h6>
Изменение цвета значка
В Bootstrap 4 изменение цвета бейджа выполняется с помощью класса badge-{theme}. Вместо {theme} необходимо указать название темы (например, danger). (рисунок 19)
<span class="badge badge-primary">Primary</span> <span class="badge">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span>
Значки со скруглёнными углами
Для того чтобы сделать бейдж с более большим радиусом скругления углов добавьте дополнительно к badge и badge-{theme} класс badge-pill (рисунок 20).
<span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill">Secondary</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-light">Light</span> <span class="badge badge-pill badge-dark">Dark</span>
Значки для отображения количества сообщений и уведомлений
Значки также можно использовать для вывода такой информации как количество полученных сообщений, товаров в корзине, запросов в друзья и т.п.
В этом виде значки используются как часть ссылки или кнопки (рисунок 21).
<button type="button" class="btn btn-primary"> Уведомления <span class="badge badge-light">4</span> </button>
Спиннеры (Spinners)
Bootstrap Spinners – это компонент фреймворка Bootstrap 4, предназначенный для создания на веб-проектах загрузочной анимации, которая в основном используется для индикации на сайте не очень длительных по времени процессов (в среднем выполняющихся в пределах от 1 до 4 секунд). Например, для представления процесса загрузки всей страницы или некоторой её части.
Спиннеры в Bootstrap построены только с использованием HTML и CSS (без JavaScript). Однако при их реальном применении на веб-проектах без JavaScript всё равно не обойтись. Его нужно будет использовать, например, когда нужно будет переключить видимость спиннера.
Поддержка вспомогательных технологий в компоненте Spinners обеспечивается с помощью атрибута role="status" и элемента <span class="sr-only">Загрузка...</span>.
Border spinner (Граница спиннера)
Граница спиннера – это первый вид спиннера, который построен на основе CSS-свойства border и анимации вращения (функции rotate свойства transform) (рисунок 22).
<div class="spinner-border" role="status"> <span class="sr-only">Загрузка...</span> </div>
Border spinner использует ключевое слово currentColor для указания цвета в CSS-свойстве border. Это решение позволяет установить цвет спиннеру посредством утилитных классов Bootstrap 4, предназначенных для изменения цвета (рисунок 23).
<div class="spinner-border text-primary" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-border text-secondary" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-border text-success" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-border text-danger" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-border text-warning" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-border text-info" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-border text-light" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-border text-dark" role="status"> <span class="sr-only">Загрузка...</span> </div>
Почему для установления цвета не используются утилитные классы border-{color}? Всё дело в том, что данные классы устанавливают границы для всех четырёх сторон. А у border спиннеров одна граница (правая) имеет прозрачный цвет, и в случае его использования, он попросту её переопределит.
Growing spinner (Увеличивающийся спиннер)
Увеличивающийся спиннер – это второй вид спиннера, который построен на изменение прозрачности (opacity) и масштабировании (функции scale свойства transform) (рисунок 24).
<div class="spinner-grow" role="status"> <span class="sr-only">Загрузка...</span> </div>
Growing spinner так же как и border spinner использует ключевое слово currentColor, но в этом спиннере оно используется для указания цвета фону. Благодаря этой особенности цвет growing спиннеру можно установить аналогичным образом (рисунок 25).
<div class="spinner-grow text-primary" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-grow text-secondary" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-grow text-success" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-grow text-danger" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-grow text-warning" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-grow text-info" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-grow text-light" role="status"> <span class="sr-only">Загрузка...</span> </div> <div class="spinner-grow text-dark" role="status"> <span class="sr-only">Загрузка...</span> </div>
Контрольные вопросы
- Как сделать синую кнопку?
- Что такое хлебные крошки?
- Для чего нужно подключать jquery, poper, bootstrap скрипты?
- Какой класс нужно прописать для выпадающего списка?
- Должны ли быть подключены jQuery и Bootstrap скрипты для аккордеона?
- Для чего предназначен Jumbotron?
- Навигация и навигационная панель это одно и тоже?
- Что такое пагинация?
- Какой класс используют для значков?
- Как сделать увеличивающий спиннер?
После прочтения темы перейдите к выполнению урока 2 и урока 3