Bootstrap - Пример входа
Обзор
Здравствуйте,野心勃勃ые веб-разработчики! Сегодня мы отправляемся в увлекательное путешествие по созданию красивой и функциональной страницы входа с использованием Bootstrap. Как ваш доброжелательный соседский учитель компьютера, я здесь, чтобы направить вас через этот процесс шаг за шагом. Не волнуйтесь, если вы никогда не писали ни строчки кода раньше - мы начнем с самых азов и будем продвигаться вверх. К концу этого руководства у вас будет профессионально выглядящая страница входа, которой вы сможете гордиться!
Что такое Bootstrap?
Прежде чем погрузиться в код, давайте поговорим о Bootstrap. Представьте, что вы строите дом. Вы можете сделать каждый кирпич с нуля, или можете использовать готовые материалы, чтобы ускорить процесс. Bootstrap - это как эти готовые материалы для веб-разработки. Это бесплатный и开源 CSS фреймворк, который помогает нам создавать адаптивные и mobile-first веб-сайты быстро и легко.
Настройка нашего проекта
Шаг 1: Создание HTML файла
Для начала давайте создадим наш HTML файл. Откройте ваш любимый текстовый редактор (я лично люблю Visual Studio Code, но Notepad подойдет и для начинающих), и создайте новый файл под названием index.html. Это будет основой нашей страницы входа.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Пример входа</title>
</head>
<body>
</body>
</html>Это наша базовая HTML структура. Представьте ее как скелет нашей веб-страницы. Раздел <head> - это место, где мы будем放置 информацию о нашей странице, а <body> - это место, где будет идти вся видимая содержимая.
Шаг 2: Включение Bootstrap
Теперь давайте добавим немного мышц к нашему скелету, включив Bootstrap. Мы сделаем это, добавив некоторые ссылки в раздел <head> нашего HTML:
<head>
<!-- ... предыдущий код ... -->
<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>
</head>Эти строки resemble giving our webpage a superhero costume. They link to the Bootstrap CSS and JavaScript files, which will give us access to all of Bootstrap's pre-built components and styles.
Создание формы входа
Шаг 1: Базовая структура формы
Давайте начнем строить нашу форму входа. Добавьте следующий код внутри тегов <body>:
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<form>
<h2 class="mb-3">Войти</h2>
<!-- Поле формы будет здесь -->
</form>
</div>
</div>
</div>
</body>Давайте разберем это:
-
container: Этот класс Bootstrap создает адаптивный контейнер с фиксированной шириной. -
mt-5: Добавляет отступ сверху (представьте, что все опускается немного вниз). -
rowиcol-md-6: Эти классы создают центрированный столбец, который occupies half the width on medium-sized screens and larger.
Шаг 2: Добавление полей формы
Теперь давайте добавим наши поля формы. Замените комментарий в форме следующим кодом:
<div class="mb-3">
<label for="email" class="form-label">Электронная почта</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Пароль</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">Запомнить меня</label>
</div>
<button type="submit" class="btn btn-primary">Войти</button>Вот что делает каждая часть:
-
mb-3: Добавляет отступ снизу для расстояния. -
form-label: Форматирует метки для наших вводов. -
form-control: Делает наши вводы красивыми и единообразными. -
form-checkиform-check-input: Форматирует флажки и radio buttons. -
btn btn-primary: Создает красивую синюю кнопку.
Добавление стиля
Давайте сделаем нашу страницу входа еще лучше с помощью少许 собственного CSS. Добавьте это в ваш раздел <head>:
<style>
body {
background-color: #f8f9fa;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
color: #007bff;
}
</style>Этот CSS gives our page a light gray background, adds a white container with a subtle shadow for our form, and colors our heading blue to match the Bootstrap theme.
Финальный штрих: Адаптивный дизайн
Одно из больших преимуществ Bootstrap заключается в том, что он адаптивен по умолчанию. Это означает, что наша страница входа будет хорошо смотреться как на десктопах, так и на мобильных устройствах. Однако добавим еще одну мелочь, чтобы сделать ее идеальной:
<div class="col-md-6 col-sm-8 col-10">Замените col-md-6 в вашем контейнере формы этой строкой. Теперь на малых устройствах форма займет 8 столбцов, а на extra-small устройствах - 10 столбцов, что обеспечит легкость чтения и использования.
Заключение
И вот оно! Вы только что создали красивую, адаптивную страницу входа с использованием Bootstrap. Вот таблица, резюмирующая ключевые классы Bootstrap, которые мы использовали:
| Класс | Назначение |
|---|---|
| container | Создает адаптивный контейнер с фиксированной шириной |
| row | Создает горизонтальную группу столбцов |
| col-* | Определяет ширину столбцов для разных размеров экранов |
| form-control | Форматирует поля формы |
| form-label | Форматирует метки формы |
| form-check | Форматирует флажки и radio buttons |
| btn | Создает кнопку |
| btn-primary | Форматирует кнопку с основным цветом |
| mt-* | Добавляет отступ сверху |
| mb-* | Добавляет отступ снизу |
Помните, веб-разработка - это все о практике и creativitете. Не бойтесь экспериментировать с разными цветами, макетами и компонентами Bootstrap. Кто знает? Ваш следующий проект может стать следующим большим делом в интернете!
Счастливого кодирования, будущие веб-волшебники!
Credits: Image by storyset