Уроки по фреймворку Bootstrap 4

Автор учебного курса: Саакян Артак Арамович, студент гр. ИТк-401 ФГАОУ ВО «РГППУ.

Скачать Notepad++ Portable
Скачать материалы к учебному курсу - папка kurs_bootstrap.zip (1 Мб)

Урок 2. Компоненты. 1 часть

Предварительно изучите теорию 2. Компоненты

Bootstrap 4 предоставляет девять предопределённых стилей для кнопок, каждый из этих стилей служит разным семантическим целям. Для стилизации кнопки используйте класс .btn, а затем нужный стиль. Например, class="btn btn-primary" приводит к главной кнопке.

1. Пропишете код, используемой для всех стилилзацией простой кнопки с приминением класса btn-primary (рисунок 1).

<button type="button" class="btn btn-primary">Кнопка</button>

Кнопка применила стиль от Bootstrap.

Можно также задать другой цвет кнопок, нужно просто прописать нужный класс.

2. Напишите две кнопки с названием «Успешно» зеленый цвет и «Ошибка» с красным цветом (рисунок 2).

<button type="button" class="btn btn-success">Успешно</button>
<button type="button" class="btn btn-danger">Ошибка</button>

Контурные кнопки

Для контурных кнопок, нужно использовать классы .btn-outline-* для добавления семантического цвета только к контуру.

3. Пропишете код, который использует контурный стиль кнопоки. Кнопка должна быть с классом info (рисунок 3).

<button type="button" class="btn btn-outline-info">Информация</button>

При наведении курсора мыши на кнопку она примет стиль как у обычной кнопки.

Большие кнопки

Чтобы изменить размеры кнопок, достаточно прописать класс кнопки .btn-lg.

4. Создайте большую кнопку с серым цветом кнопки, написав нужный класс (рисунок 4).

<button type="button" class="btn btn-secondary btn-lg">Большая кнопка</button>

Также можно уменьшить размеры кнопок, прописав класс .btn-sm.

5. Создайте маленькую желтую кнопку с названием «Предупреждение» (рисунок 5).

<button type="button" class="btn btn-warning btn-sm">Предупреждение</button>

Можно создать кнопки блочного уровня – которые занимают полную ширину родительского элемента – добавлением класса .btn-block.

6. Для этого создайте кнопку с названием «Темная кнопка» с приминением класса dark (рисунок 6).

<button type="button" class="btn btn-dark btn-lg btn-block">Темная кнопка</button>

Мы рассмотрели все классы кнопок у Bootstrap.

7. Самостоятельно напишите 5 кнопок, должно получится как на рисунке 7 (рисунок 7).

Хлебные крошки

Bootstrap предлагает класс .breadcrumb, который оформляет список в виде хлебных крошек.

Для создания хлебных крошек:

1. Добавьте class="breadcrumb" к элементу <ul> для отображения хлебных крошек.

2. Добавьте внутри созданного класса 3 элемента <li> с классом class="breadcrumb-item".

3. Добавьте к последнему элементу <li> класс active.

4. Внутри двух первых элементов <li> напишите тег <a>. Для первого тега <a> напишите «Главная», для второго тега «Фрукты», а внутри элемента <li> напишите «Груши». Для последнего элемента <li> мы не прописываем тег <a>, потому что он является активным.

Окончательный код должен выглядеть так:

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Главная</a></li>
  <li class="breadcrumb-item"><a href="#">Фрукты</a></li>
  <li class="breadcrumb-item active">Груши</li>
</ul>

Bootstrap автоматический добавляет разделители через псевдоэлементы before и content (рисунок 8).

5. Самостоятельно создайте хлебную крошку, должно получится как на рисунке 9.

Выпадающие списки

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>.

Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки.

Напишите следующий код выпадающего списка:

1. Добавьте блок с классом .dropdown.

2. Внутри блока добавьте кнопку с классами .btn, .btn-secondary и .dropdown-toggle. Также добавьте атрибут data-toggle="dropdown" для кнопки. Внутри кнопки напишите «О нас».

3. После кнопки добавьте блок с классом .dropdown-menu

4. Внутри созданного блока добавьте 3 тега <a> с классом .dropdown-item и внтури этих тегов запишите «Наша история», «Наши статьи» и «Контакты».

Окончательный код должен выглядеть так (рисунок 10):

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    О нас
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Наша история</a>
    <a class="dropdown-item" href="#">Наша команда</a>
    <a class="dropdown-item" href="#">Контакты</a>
  </div>
</div>

Как мы видим у нас появилась кнопка с выпадающим списком, но при нажатии на кнопку, список не раскрывается, происходит просто клик по кнопке и больше ничего. Чтобы при клике по кнопке выпадал список, нам нужно подключить 3 скрипта.

5. Перейдите по ссылке и нажмите Ctrl + S, чтобы сохранить скрипт. Скачайте все 3 скрипта.

6. Откройте папку с нашими файлами и перейдите в папку js, поместите скачанные скрипты в эту папку.

7. Подключите скрипты перед закрывающимся тегом <body> и обязательно в такой последовательности, если подключить их в произвольном порядке, то некоторые функции скрипта не будут работать.

<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

При нажатии на кнопку будет раскрываться список, это означает, что скрипты были успешно подключены (рисунок 11).

Уведомления

Bootstrap предлагает простой способ создания стилизованного окна с уведомлением через соответствующий компонент.

1. Чтобы создать уведомление, используйте класс .alert вместе с одним из классов .alert-* для указания типа уведомления (рисунок 12).

<div class="alert alert-success">Уведомление об успехе</div>

2. Используйте класс .alert-link для элемента <a>, чтобы сопоставить цвет ссылки с текстом.

3. Также создайте уведомление используя класс .alert вместе с классом .alert-success и внтури этого блока поместите текст со ссылкой. Тегу <a> укажите класс .alert-link, чтобы ссылка применила нужный класс (рисунок 13).

<div class="alert alert-success">
  <strong>Поздравляем!</strong> Вы зарегистрировались на <a href="#" class="alert-link">сайте</a>!
</div>

Дополнительное содержимое

Оповещения также могут содержать дополнительные элементы HTML, такие как заголовки, абзацы и разделители.

4. Напишите тот же код с классом .alert и .alert-success или можете использовать другой стиль, например .alert-warning, .alert-danger и другие классы.

5. Внутри этого блока создайте тег <h4> с классом .alert-heading с текстом «Отлично сработано!»

6. После заголовка пропишите два тега <p> и между ними поставьте тег <hr>

7. Для первого абзаца напишите текст «О да, Вы успешно прочитали это важное предупреждающее сообщение. Этот пример текста будет длиться немного дольше, чтобы Вы могли увидеть, как интервалы в предупреждении работают с этим типом контента.», для второго абзаца напишите «Когда Вам нужно, обязательно используйте маржинальные утилиты, чтобы все было в порядке и порядке.».

Окончательный код должен выглядеть так (рисунок 14):

<div class="alert alert-success">
  <h4 class="alert-heading">Отлично сработано!</h4>
  <p>О да, Вы успешно прочитали это важное предупреждающее сообщение. Этот пример текста будет длиться немного дольше, чтобы Вы могли увидеть, как интервалы в предупреждении работают с этим типом контента.</p>
  <hr>
  <p>Когда Вам нужно, обязательно используйте маржинальные утилиты, чтобы все было в порядке и порядке.</p>
</div>

Уведомление с крестиком

1. Создайте закрывающее уведомление, добавив класс .alert-dismissible вместе с кнопкой «Закрыть». Когда пользователь щёлкает по такой кнопке, уведомление исчезает.

2. Также как и в том предыдущем примере создайте уведомление, только теперь со стилем предупреждения и добавив к ней ещё 3 класса .alert-dismissible .fade .show.

3. Внутри этого уведомления напишите тег <strong> с текстом «Внимание!», а после тега <strong>, напишите текст «Вам следует проверить некоторые из этих полей.».

4. После тега <strong>, напишите тег кнопки с классом .close и data-dismiss="alert".

5. Внутри этой кнопки добавьте тег <span> и внутри этого тега напишите ×, что означает ×.

Окончательный код должен выглядеть так (рисунок 15):

<div class="alert alert-warning alert-dismissible fade show">
  <strong>Внимание!</strong> Вам следует проверить некоторые из этих полей.
  <button class="close" data-dismiss="alert">
    <span>&times;</span>
  </button>
</div>

Если у нас не подключены скрипты, то при нажатии на крестик уведомление не закроется. Мы уже подключили эти скрипты, при нажатии на крестик наше уведомление закроется.

Аккордеон

1. Создайте элемент <a>, у которого значение href задано как идентификатор #footwear сворачиваемого содержимого. Обязательно нужно добавить data-toggle="collapse" к кнопке или ссылке, которая указывает на идентификатор содержимого для сворачивания. В контейнер сворачиваемого содержимого добавьте класс .collapse и обязательно задайте для него идентификатор #footwear (рисунок 16).

<a data-toggle="collapse" href="#footwear">Обувь</a>
<div class="collapse" id="footwear">
  <p>Обувь относится к предметам одежды для ног, изначально служит для защиты от 
    неблагоприятных воздействий окружающей среды, обычно в отношении поверхности 
    и температуры.</p>
</div>

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

2. Повторите этот пример только уже по кнопке. Но тут уже нужно вместо href, как это было у ссылки указать атрибут data-target со значением идентификатора #footwear сворачиваемого содержимого, и также пропишете data-toggle="collapse" (рисунок 17).

<button class="btn btn-info" type="button" data-toggle="collapse" data-target="#footwear"
  aria-expanded="false" aria-controls="footwear">Обувь</button>
<div class="collapse" id="footwear">
  <p>Обувь относится к предметам одежды для ног, изначально служит для защиты от 
    неблагоприятных воздействий окружающей среды, обычно в отношении поверхности 
    и температуры.</p>
</div>

Тут также при нажатии на кнопку сворачивается его содержимое.

Аккордеон

Сворачиваемое содержимое часто используется для создания «аккордеона», популярного для часто задаваемых вопросов, обзоров продуктов и др.

3. Напишите элемент <div> с идентификатором #faq.

4. Внутри этого блока напишите блок к классом .card.

5. Внутри класса .card напишите два блока, первый блок с классом .card-header, а второй блок с классами .collapse, .show и идентификатором answerOne.

6. Внутри класса .card-header создайте заголовок <h5> с классом .card-title.

7. Внутри заголовка напишите тег <a> с атрибутами data-toggle="collapse", data-parent="#faq" и идентификатором #answerOne, и поместите текст «Что если ботинки большие для моих ног?».

Атрибут data-parent в элементе <a>, обязательно должен совпасть с идентификатром у самого первого блока <div>, которое прописали выше.

8. Внутри класса .collapse создайте блок с классом .card-body и поместите туда текст «Набейте ботинки газетами или салфетками.».

Класс .show автоматический сворачивает содержимое, если убрать класс .show, то он уже не будет сворачиваться атоматический, а только по клику. Его нужно указывать только один раз в аккордеоне, чтобы пользователь знал, что при клике на текст, сворачивается его содержиое.

Должно получиться вот так:

<div id="faq">
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">
        <a data-toggle="collapse" data-parent="#faq" href="#answerOne">
          Что если ботинки большие для моих ног?
        </a>
     </h5>
    </div>
    <div id="answerOne" class="collapse show">
     <div class="card-body">
       Набейте ботинки газетами или салфетками.
     </div>
    </div>
  </div>
</div>

9. Самостоятельно допишите код, для второго содержимого напишите вопрос «Могу я носить ботинки в помещении?» и ответ «Нет. Твоя мама должна была рассказать об этом.», а для третьего содержимиого напишите вопрос «Что делать, если ботинки скользят при намокании?» и ответ «Храните ботинки в сухости.», должно получится как на рисунке 18:

Контрольное задание

Самостоятельно подключите скрипты и напишите код выпадающего списка
Напишете FAQ для сайта с помощью библиотеки