Уроки по фреймворку Bootstrap 4
Автор учебного курса: Саакян Артак Арамович, студент гр. ИТк-401 ФГАОУ ВО «РГППУ.
Скачать Notepad++ Portable
Скачать материалы к учебному курсу - папка kurs_bootstrap.zip (1 Мб)
Урок 3. Компоненты. 2 часть
Предварительно изучите теорию 2. Компоненты
Jumbotron
Компонент Jumbotron предназначен для создания контента или информации на веб-сайте, который занимает всю ширину контейнера куда он помещен и является очень большим, чтобы пользователи обратили на него внимание.
1. Чтобы создать Jumbotron, напишите элемент <div> с классом .jumbotron.
2. Внутри этого блока напишите заголовок <h1> с текстом «Справочник начальной загрузки» и абзац <p> «Bootstrap является наиболее популярной платформой HTML, CSS и JS для разработки адаптивных, мобильных первых проектов в Интернете.» (рисунок 1).
<div class="jumbotron"> <h1>Справочник начальной загрузки</h1> <p>Bootstrap является наиболее популярной платформой HTML, CSS и JS для разработки адаптивных, мобильных первых проектов в Интернете.</p> </div>
3. Чтобы сделать Jumbotron во всю ширину и без закругленных углов, добавьте класс-модификатор .jumbotron-fluid и добавьте внутрь .container или .container-fluid.
4. Также добавьте два тега с заголвоком <h1> и абзацем <p>. Для заголовка напишите текст «Jumbotron на всю ширину» и абзаца «Это модифицированный jumbotron, который занимает все горизонтальное пространство своего родителя.».
5. Добавьте класс .display-4 к <h1> и класс .lead к <p>. Классы .display-4 и .lead просто предают типографию (размер шрифта, семейства шрифта и т. д.) (рисунок 2).
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Jumbotron на всю ширину</h1>
<p class="lead">Это модифицированный jumbotron, который занимает все горизонтальное пространство своего родителя.</p>
</div>
</div>
Классы .display-4 и .lead просто предают типографию (размер шрифта, семейства шрифта и т. д.)
Навигация
Класс .nav (и связанные с ним классы) позволяет превратить список во вкладки и навигационные «пилюли».
Однако применение <ul> не является обязательным — мы также можем легко использовать навигацию для других элементов.
1. Напишите тег <ul> с классом .nav.
2. Внутри этого элемента напишите 4 тега <li> с классом .nav-item
3. Внутри каждого элемента <li> напишите тег <a> с классом .nav-link и текстом внутри «HTML», «CSS», «JavaScript», «Просмотр».
Окончательный код должен выглядеть так (рисунок 3):
<ul class="nav"> <li class="nav-item"><a class="nav-link active" href="#">HTML</a></li> <li class="nav-item"><a class="nav-link" href="#">CSS</a></li> <li class="nav-item"><a class="nav-link" href="#">JavaScript</a></li> <li class="nav-item"><a class="nav-link" href="#">Просмотр</a></li> </ul>
4. Самостоятельно напишите код используя элемент <nav>, но только без <ul> и <li>. Результат должен получится тот же.
Навигационная панель
Панель навигации — это простая оболочка для размещения навигации и других элементов в навигационном заголовке.
Вот что надо знать перед использованием navbar:
- поместите всё внутрь элемента <nav> с классами .navbar и .navbar-expand{-sm|-md|-lg|-xl} вместе с цветовой схемой;
- для переключаемого меню на небольших устройствах используйте элемент <button> с классом .navbar-toggler; чтобы отобразить «гамбургер», укажите класс .navbar-toggler-icon для элемента;
- для списка ссылок используйте элемент <ul> с классом .navbar-nav;
- для каждого отдельного пункта списка используйте <li> с классом .nav-item;
- для отдельных ссылок используйте <a> с классом .nav-link.
1. Напишите элемент <nav> с классами .navbar .navbar-expand-sm .navbar-light .bg-light. Можете поменять размер панели навигации .navbar-expand-sm на .navbar-expand-lg, чтобы панель свернулась в мобильную навигацию, когда его размер будет ? 991 пикселей. Также можете поменять цвет панели, указав вместо light на dark.
2. Внутри элемента <nav> напишите тег <a> с классом .navbar-brand с текстом «Логотип».
3. После логотипа создайте тег <button> с классом .navbar-toggler и атрибутами data-toggle="collapse", data-target="#nav-content".
4. Внутри этой кнопки напишите элемент <span> с классом .navbar-toggler-icon.
5. Теперь создайте меню после кнопки, создав элемент <div> с классом .navbar-collapse и идентификатором #nav-content.
6. Внутри этого элемента поместите навигацию, которую мы писали выше, заменив только класс .nav, на .navbar-nav, и замените текст меню на «Главная», «Услуги», «О Нас», «Контакты».
7. После класса .navbar-collapse напишите кнопку «Гамбургег», это кнопка нужна для мобильной версии экрана, чтобы при нажатии на кнопку выходило наше меню.
Окончательный код должен выглядеть так. Результат н рисунках 4 и 5):
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<!-- Логотип -->
<a class="navbar-brand" href="#">Логотип</a>
<!-- Мобильная кнопка -->
<button class="navbar-toggler" data-toggle="collapse" data-target="#nav-content">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Меню -->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Главня</a>
<li class="nav-item"><a class="nav-link" href="#">Услуги</a>
<li class="nav-item"><a class="nav-link" href="#">О Нас</a>
<li class="nav-item"><a class="nav-link" href="#">Контакты</a>
</li>
</ul>
</div>
</nav>
Данная навигационная панель адаптивная и при изменении ширины экрана, меню сворачивается и вместо него появляется кнопка. Если ширина экрана ? 575 пикселей, то меню скрывается, а если ширина экрана ? 576 пикселей, то оно не сворачивается.
Нумерация страниц
Класс .pagination в Bootstrap делает нумерацию страниц. Разбиение на страницы обычно происходит, когда у нас есть навигация со ссылками на разные страницы. К примеру, результаты поиска возвращают много страниц с нумерацией, которая позволяет пользователю переходить к следующей странице или даже на несколько страниц вперёд.
1. Чтобы создать нумерацию страниц, напишите элемент <nav> и добавьте внутри этого элемент <ul> с классом .pagination, который представляет список страниц.
2. Внутри тега <ul> добавьте 9 <li> элементов с классом .page-item, а внутри этих элементов добавьте тег <a> с классом..page-link
3. Для первого и последнего элемента <a> добавьте тег <span>. У первого элемента внутри <span> добавьте символ «, а для последнего добавьте символ ».
4. Со 2-ого по 8-ые элементы у тега <a> добавьте нумерацию от 1 до 7 (рисунок 6).
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">
<span>«</span>
</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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item">
<a class="page-link" href="#">
<span>»</span>
</a>
</li>
</ul>
</nav>
5. Чтобы отключить данный пункт страницы, добавьте класс .disabled к элементу <li> (рисунок 7).
<li class="page-item disabled"><a class="page-link" href="#">4</a></li>
6. Добавьте класс .pagination-lg или .pagination-sm к элементу <ul>, чтобы увеличить или уменьшить размер элементов управления нумерацией (рисунок 8).
<ul class="pagination pagination-lg">
<ul class="pagination pagination-sm">
7. Добавьте класс .active к элементу <ul>, чтобы увеличить или уменьшить размер элементов управления нумерацией (рисунок 9).
<li class="page-item active"><a class="page-link" href="#">1</a></li>
Значки
Классы значков Bootstrap можно использовать для выделения дополнительной информации, которая добавляется к строке текста. Для создания значка применим класс .badge, а также один из классов .badge-* к элементу , представляющему значок.
1. Напишите заголовок <h4> и внутри поместите текст «25 советов при создании сайта Новое».
2. Оберните слово «Новое» в элемент <span> с классами .badge и .badge-primary.
<h4>25 советов при создании сайта <span class="badge badge-primary">Новое</span></h4>
Результат выполнения кода (рисунок 10):
Значки в виде пилюль
3. Чтобы сделать уголки скруглёнными, нужно добавить 3 класс класс .badge-pill (рисунок 11).
<h4>Вам пришло одно <span class="badge badge-pill badge-info">сообщение</span></h4>
4. Самостоятельно создайте кнопку со значком, должно получится как на рисунке 12.
Спиннеры
Bootstrap Spinner можно использовать, чтобы отобразить статус скачивания (loading state) приложения, или любой другой процесс. Bootstrap Spinner построен только с HTML и CSS поэтому нам не понадобится JavaScript для его создания.
Самый простой способ создания спиннер с помощью класса .spinner-border:
1. Чтобы создать спиннер достаточно написать элемент <div> с классом .spinner-border (рисунок 13).
<div class="spinner-border"></div>
2. Создайте цветной спиннер с классами .spinner-border и .text-success (рисунок 14).
<div class="spinner-border text-success"></div>
Вы можете поменять цвет спиннера на другой, достаточно заменить часть класса .text-{}, например на .text-danger или .text-info.
3. Создайте увеличивающий цветной спиннер с помощью класса .spinner-grow и .text-success, можете также использовать другой цвет спиннера, заменив на другой класс .text-{} (рисунок 15):
<div class="spinner-grow text-warning"></div>
Контрольное задание
- Используя библиотеку, реализуйте нумерацию страниц.
- Напишете навигацию для сайта.