Bootstrap — это среда CSS, которая предлагает множество компонентов, таких как кнопки, карточки или навигация. Вы можете использовать его для простого проектирования графического интерфейса для веб-приложения. Если вы хотите познакомиться и попробовать некоторые из этих компонентов, следуйте за мной в небольшом туре: используя HTML, CSS и немного Javascript, мы создадим простую викторину по теме общего образования и включим как можно больше бутстрапов. компонентов как можно больше!
Мы будем работать с актуальной версией Bootstrap 4.5. В конце статьи я кратко объясню, какие новые возможности появятся в будущем при использовании Bootstrap 5.
Разработка пользовательского интерфейса викторины
Базовая структура
Если вы хотите начать с пустой HTML-страницы, я рекомендую Стартовый шаблон на вводной странице getbootstrap.com. Там вы найдете информацию о том, как подключить необходимые CSS-файлы и скрипты. Обратите внимание, что для Bootstrap 4.5 также необходимо подключить библиотеки jQuery и Popper.js. Для примеров в этой статье я использую онлайн-редактор CodePen. Здесь я импортирую скрипты для jQuery, Popper.js и Bootstrap (в таком порядке!) просто через настройки пера. В следующих примерах вы увидите только HTML-код, который обычно появляется между тегами body HTML-страницы.
Базовая структура каждой HTML-страницы с Bootstrap — это контейнер, определяемый подходящим классом контейнера. Я выбираю «жидкий контейнер», который гибко подстраивается под ширину страницы:
<div class="container-fluid"></div>
Джамботрон приветствует вас
Первым компонентом, который мы хотим изучить, является Джамботрон. Он будет использоваться для приветствия пользователя на нашем сайте викторины:
<div class="container-fluid"><div class="jumbotron"><h3>The big knowledge test!</h3> <p>How good is your general knowledge?</p></div></div>
Результат выглядит следующим образом:
https://codepen.io/blaustern_fotografie/pen/WNwQZJq
Использование карты в качестве контейнера для вопросов викторины
Вот как должен выглядеть вопрос викторины в конце:
С карточным компонентом мы можем быстро применить макет на практике. Нам нужна карта с заголовком карты и телом карты. Версия по умолчанию без дополнительных настроек цвета определяется следующим образом:
<div class="card"><div class="card-header">Question 1</div><div class="card-body">...</div></div>
Теперь мы можем задавать цвета текста, фона и границ для каждой части карты отдельно. Для этой цели фреймворк bootstrap предлагает нам ряд цветовых классов, которые мы можем комбинировать по своему вкусу. Для нашего шаблона на картинке выше я использую классы border-info, bg-info и text-white:
<div class="card border-info"><div class="card-header bg-info text-white">Question 1</div><div class="card-body">...</div></div>
Я вставляю радиокнопки для ответов с несколькими вариантами ответов внутрь тела карточки, как и в загрузочной документации для форм. Не забудьте присвоить переключателям для каждого вопроса общее имя. Это гарантирует, что пользователь может выбрать только один ответ.
<p>Philology is the</p><div class="form-check"><input class="form-check-input" type="radio" name="q1" id="q1_r1" value="r2"><label class="form-check-label" for="q1_r1">study of bones</label></div><div class="form-check"><input class="form-check-input" type="radio" name="q1" id="q1_r2" value="r2"><label class="form-check-label" for="q1_r2">study of muscles</label></div><div class="form-check"><input class="form-check-input" type="radio" name="q1" id="q1_r3" value="r3"><label class="form-check-label" for="q1_r3">study of architecture</label></div><div class="form-check"><input class="form-check-input" type="radio" name="q1" id="q1_r3" value="r3"><label class="form-check-label" for="q1_r3">science of languages</label></div>
Следуя той же процедуре, теперь мы можем создать любое количество вопросов викторины:
https://codepen.io/blaustern_fotografie/pen/dyMMRgq?editors=1100
Вы могли заметить класс «mb-4», который я добавил к каждой карте.
<div class="card border-info mb-4">
Это один из служебных классов Bootstrap, который можно использовать для увеличения или уменьшения расстояния между компонентами относительно настроек по умолчанию. Аббревиатура mb расшифровывается как margin-bottom, значение 4 управляет расстоянием. О том, как составлять имена классов для других служебных классов, вы можете прочитать в документации по интервалам.
Чтобы иметь возможность разворачивать и сворачивать вопросы, нам нужна кнопка в заголовке каждой карточки. На примере вопроса 1 я покажу вам, как я редизайн шапки карты:
<div class="d-flex justify-content-between align-items-center card-header bg-info text-white"><span>Question 1</span><button type="button" class="btn btn-outline-light"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" /></svg></button></div>
Я выбираю кнопочный компонент в стиле контур-свет. Чтобы разработать метку кнопки, я взглянул на Новую библиотеку иконок Bootstrap, которая все еще предлагается в виде альфа-версии. Здесь я выбрал иконку с названием шеврон-вниз и скопировал нужный исходный код из документации.
Класс начальной загрузки «d-flex» гарантирует, что метка «Вопрос 1» и кнопка расположены на одной строке, при этом два элемента размещаются слева и справа соответственно («выравнивание содержимого между») и по центру по вертикали. («выравнивание элементов по центру»).
Чтобы вопрос можно было свернуть и развернуть через кнопку, я добавляю необходимые атрибуты плагина Свернуть:
<div class="d-flex justify-content-between align-items-center card-header bg-info text-white" id="h1"><span>Question 1</span><button type="button" data-toggle="collapse" data-target="#q1" aria-expanded="false" aria-controls="q1" class="btn btn-outline-light"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" /></svg></button></div><div id="q1" class="collapse" aria-labelledby="h1"><div class="card-body">...</div></div>
Первый вопрос уже должен быть развернут, когда пользователь открывает страницу. Для этого добавляю класс show:
<div id="q1" class="collapse show" aria-labelledby="h1">
Здесь вы можете проверить текущее состояние прогресса:
https://codepen.io/blaustern_fotografie/pen/zYqqzmE?editors=1100
Раздел для оценки викторины
Секция оценивания викторины содержит компонент ProgressBar:
<h3>Result</h3><div class="card"><div class="card-body"><p id="result">No result.</p><div class="progress mb-2"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div><button type="button" class="btn btn-success">Update</button></div></div>
Вы можете найти результат здесь:
https://codepen.io/blaustern_fotografie/pen/vYGGJKq
Наконец, я хотел бы познакомить вас с навигационным компонентом, который позволяет создавать всевозможные меню. Я хочу использовать его для создания двух вкладок: одной вкладки для вопросов викторины и одной вкладки для подсчета очков. На странице вы можете переключаться между двумя вкладками. Необходимые шаги описаны в разделе Поведение JavaScript.
Сначала создаем меню с пунктами «Викторина» и «Результат»:
<ul class="nav nav-tabs mb-4" id="myTab" role="tablist"><li class="nav-item" role="presentation"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#quiz" role="tab" aria-controls="quiz" aria-selected="true">Quiz</a></li><li class="nav-item" role="presentation"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#result" role="tab" aria-controls="results" aria-selected="false">Result</a></li></ul>
После этого создаем div, куда потом будет вставляться содержимое вкладок:
<div class="tab-content" id="quiz"><div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="quiz-tab">...</div><div class="tab-pane fade" id="result" role="tabpanel" aria-labelledby="result-tab">...</div></div>
Вместо … теперь мы вставляем HTML-код 5 карточек викторины на первой вкладке и HTML-код раздела оценки на второй вкладке. Здесь вы можете попробовать вкладки:
https://codepen.io/blaustern_fotografie/pen/abNNyXx
Программирование взаимодействия пользователя с викториной с помощью JavaScript
Я добавляю простую функцию JavaScript update() для проверки решения пользователя. В HTML-коде мы должны убедиться, что функция вызывается, как только пользователь нажимает кнопку с надписью «Обновить»:
<button type="button" onclick="update()" class="btn btn-success">Update</button>Вы можете взглянуть на код JavaScript в моей ручке и, конечно же, вы также можете пройти там тест!
https://codepen.io/blaustern_fotografie/pen/MWyyqdB
Функция update() подсчитывает правильные ответы пользователя. Процент правильных ответов отображается на индикаторе выполнения. В зависимости от того, насколько успешен пользователь, имя класса для индикатора выполнения: «bg-success» (зеленая полоса), «bg-warning» (желтая полоса) или «bg-danger» (красная полоса).
Кроме того, каждый правильный ответ выделен зеленым и жирным шрифтом. Таким образом, пользователь может снова проверить отдельные вопросы после оценки. Для ответов, не отмеченных зеленым цветом, пользователь может сделать еще одну попытку.
Заключение и взгляд на Bootstrap 5
Платформа начальной загрузки предоставляет вам множество компонентов для создания сложного структурированного и интерактивного пользовательского интерфейса. Начать работу с фреймворком очень просто, потому что в основном вы можете просто скопировать необходимый код для каждого компонента из официальной документации и настроить его под свои нужды. Как видно из нашего примера, вам не нужно писать ни строчки CSS-кода, если вы действительно этого не хотите.
Если вы хотите продолжить работу с Bootstrap, вам также следует взглянуть на систему сетки, мощную систему компоновки Bootstrap для адаптивных макетов страниц с несколькими столбцами.
Альфа-версия его преемника Bootstrap 5 уже доступна по адресу https://v5.getbootstrap.com/. Вы можете узнать о новых функциях в Блоге Bootstrap. Новая версия начальной загрузки больше не зависит от jQuery API. Он также предлагает вам еще лучшие возможности для создания индивидуальных тем для вашей начальной страницы. Вся информация о настройке форматирования каждого компонента собрана в отдельном разделе Настройка официальной документации. Там даже можно найти инструкции по разработке собственных компонентов! Вы также можете взглянуть на новый Utilities API, который позволяет вам легко определять свои собственные вспомогательные классы для форматирования.
