Русский

Учебник Bootstrap

Макеты Bootstrap

Содержание Bootstrap

Компоненты Bootstrap

Bootstrap Формы

Поддержка Bootstrap

Утилиты Bootstrap

Демо Bootstrap

Bootstrap - Проверка_demo

Обзор

Здравствуйте, будущие веб-разработчики! Сегодня мы отправимся в увлекательное путешествие по созданию страницы проверки с использованием Bootstrap. Как ваш доброжелательный邻居-учитель информатики, я с радостью провожу вас через этот процесс. Не волнуйтесь, если вы новички в программировании - мы будем идти шаг за шагом, и в конце вы получите профессионально выглядящее окно проверки, которым вы сможете гордиться!

Bootstrap-Checkout Demo

Что такое Bootstrap?

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

Настройка нашего проекта

Шаг 1: Включение Bootstrap

Сначала нам нужно включить Bootstrap в наш проект. Это как собирать ящик инструментов перед началом работы. Добавьте следующие строки в <head> вашего HTML-файла:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Эти строки загружают стили и скрипты Bootstrap из Интернета, так что нам не нужно ничего скачивать.

Шаг 2: Основная структура HTML

Теперь давайте настроим нашу основную структуру HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Форма проверки</h1>
<!-- Наша форма будет здесь -->
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Эта структура создает базовую веб-страницу с заголовком и контейнером для нашей формы. Класс container centrирует наш контент и добавляет ему немного отступов.

Создание формы проверки

Шаг 3: Создание формы

Теперь добавим нашу форму внутрь контейнера:

<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Имя</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Фамилия</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>

<div class="mb-3">
<label for="email" class="form-label">Электронная почта</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
</div>

<div class="mb-3">
<label for="address" class="form-label">Адрес</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
</div>

<button class="btn btn-primary btn-lg" type="submit">Разместить заказ</button>
</form>

Давайте разберем это:

  1. Мы используем сетку Bootstrap с row и col-md-6 для создания двух столбцов для имени и фамилии.
  2. Класс mb-3 добавляет отступ снизу для каждого форм-группы.
  3. form-label и form-control - это классы Bootstrap, которые стилизуют наши метки и входы.
  4. Классы btn стилизуют нашу кнопку отправки.

Шаг 4: Добавление информации о платеже

Давайте добавим раздел для информации о платеже:

<h4 class="mb-3">Платеж</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">Кредитная карта</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">Дебетовая карта</label>
</div>
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">Имя на карте</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">Номер кредитной карты</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">Срок действия</label>
<input type="text" class="form-control" id="cc-expiration" required>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

Здесь мы добавили radio buttons для выбора способа оплаты и поля для деталей карты. Класс gy-3 добавляет вертикыальные отступы между строками.

Улучшение пользовательского опыта

Шаг 5: Добавление обратной связи для��алидации

Bootstrap предоставляет классы для обратной связи по��алидации форм. Давайте добавим их к нашему вводу имени:

<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Имя</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">
Выглядит хорошо!
</div>
<div class="invalid-feedback">
Пожалуйста, введите ваше имя.
</div>
</div>

Чтобы это работало, нам нужно добавить немного JavaScript:

<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

Этот скрипт добавляет класс was-validated к форме при отправке, что активирует отображение обратной связи по��алидации.

Заключение

Поздравляю! Вы только что создали профессионально выглядящую форму проверки с использованием Bootstrap. Давайте подведем итог, что мы узнали:

  1. Как включить Bootstrap в наш проект
  2. Использование сетки Bootstrap для макета
  3. Стилизация элементов формы с помощью классов Bootstrap
  4. Добавление обратной связи по��алидации

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

Вот таблица основных классов Bootstrap, которые мы использовали:

Класс Назначение
container Центрирует контент и добавляет отступы
row Создает горизонтальную группу столбцов
col-md-6 Создает столбец, который occupies 50% ширины на средних экранах и выше
form-label Стилизует метки форм
form-control Стилизует вводы форм
btn Основной стиль кнопки
btn-primary Даёт кнопке синий цвет
btn-lg Делает кнопку больше
form-check Стилизует флажки и radio buttons
valid-feedback Показывает обратную связь для correct ввода
invalid-feedback Показывает обратную связь для incorrect ввода

Счастливо кодируйте, и помните - каждый expert был когда-то новичком. Continue practicing, and you'll be amazed at what you can create!

Credits: Image by storyset

Предыдущий учебник:
Демо ценообразования Bootstrap
Следующий учебник:
Демонстрация продукта Bootstrap