Я работаю с Bootstrap уже долгое время. Я видел, как хорошо развивался этот фреймворк до сегодняшнего дня. Сейчас Bootstrap 5.2.0 является последней доступной версией.
Почему Bootstrap?
Вы можете спросить, почему именно Bootstrap?
Мой ответ прост: Это быстро и легко!
Bootstrap построен на концепции мобильной веб-разработки. Поэтому не нужно беспокоиться о базовой структуре всего HTML-документа, который уже создан за нас. Нет необходимости беспокоиться обо всех основных функциях, так как они представлены в виде различных компонентов, которые мы можем найти в их документации.
Итак, достаточно объяснений о Bootstrap. Давайте приступим к учебнику!
Первые шаги
Для начала нам нужен HTML-документ. Я знаю, что вы можете знать, но кто знает, кому это может понадобиться? LOL!
Я собираюсь использовать VS Code emmets для автоматизации HTML-шаблона. Для этого вы можете создать новый HTML документ, например index.html и набрать ! (восклицательный знак) и нажать клавишу TAB на клавиатуре. Вуаля, теперь вы можете увидеть HTML-код в вашем документе.
Код выглядит примерно так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>
Теперь мы можем изменить заголовок с <title>Document</title> на что-то вроде этого <title>My Cool Login Page</title>. Откройте документ в браузере или установите плагин в VS Code под названием Live Server. 
Что делает это расширение? Ну, оно помогает нам просматривать изменения в документах в прямом эфире. Это делает мою жизнь проще, не пытаясь обновлять документы много раз, когда я что-то меняю на своем HTML-сайте. После установки вы можете щелкнуть правой кнопкой мыши на редакторе документов и выбрать Open with Live Server, теперь вы можете просматривать свою веб-страницу в браузере.
Подождите! Что-то не так! Вы видите белую страницу? Это потому, что мы ничего не добавили в тело. Что ж, давайте сделаем это сейчас. Давайте добавим заголовок к веб-странице с помощью тега h1. Мы можем сделать это следующим образом <h1>My Cool Webpage</h1>, это добавит заголовок на веб-страницу, и документ будет выглядеть примерно так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool Login Page</title>
</head>
<body>
<h1>My Cool Webpage</h1>
</body>
</html>
Теперь сохраните документ, снова откройте браузер и сразу же увидите сделанные изменения. В браузере заголовок будет выглядеть примерно так:
Добавление Bootstrap CDN в документ
Итак, мы закончили создание нашего HTML-документа. Нам нужно связать его с Bootstrap через CDN-ссылку, которая доставит все CSS bootstrap, размещенные на их хостинге, в наш документ. Для этого нам нужно зайти в Bootstrap Docs.
Я сделаю это проще, добавив ссылку CDN здесь:
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
Теперь вы можете добавить этот тег ссылки в ваш документ ниже тега title, который мы изменили ранее, и это должно выглядеть примерно так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool Login Page</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
</head>
<body>
<h1>My Cool Webpage</h1>
</body>
</html>
Примечание: Этот CDN предназначен для Bootstrap 5.2, и если вы будете просматривать эту статью несколько позже, когда выйдет новый релиз Bootstrap, вы можете не получить последние возможности будущих версий. Вы знаете, что программное обеспечение постоянно развивается и обновляется. Поэтому следите за обновлениями!
Теперь сохраните документ и перейдите в браузер. Видите что-то изменилось? Ну, шрифт изменился, верно? Поэтому в bootstrap есть некоторые настройки по умолчанию, чтобы облегчить нам жизнь и не беспокоиться о базовых вещах. Если шрифт меняется, мы можем сказать, что bootstrap работает.
Ну, а теперь что?
Пришло время начать работу над пользовательским интерфейсом страницы входа в систему с помощью bootstrap. Поскольку все основные настройки для нашего HTML-документа выполнены, теперь мы можем начать творить волшебство с помощью bootstrap.
Мы можем удалить тег заголовка h1, который мы добавили ранее; это было сделано только для того, чтобы проверить, работает ли bootstrap или нет. Теперь мы можем начать нашу страницу входа в систему с пустым тегом <body>.
Нам нужно изменить цвет фона нашего документа. В Bootstrap есть несколько цветов, которые уже написаны для нас. Мы можем просто добавить их сюда.
Я добавлю class="bg-primary" в тело, чтобы сделать весь документ синего цвета. Теперь, чтобы сделать синий цвет светлее, мы можем добавить новый класс bg-opacity-25, он должен быть примерно таким:
<body class="bg-primary bg-opacity-25">
</body>
Мы можем добавить <section> внутри тега body. Просто чтобы сделать его уникальным (это необязательно). Добавьте <div> внутрь секции. <div> должен содержать эти классы d-flex flex-column min-vh-100 justify-content-center.
- d-flex — Помогает создать контейнер flexbox и преобразовать прямые дочерние элементы в элементы flex. Таким образом, мы можем легко разместить наши компоненты в любом месте!
- flex-column — Устанавливает элемент в вертикальном направлении.
- min-vh-100 — Установить минимальную высоту в 100vh(высота области просмотра).
- justify-content-center — Выравнивание всех элементов по центру по горизонтали
<div> должен выглядеть следующим образом:
<div class="d-flex flex-column min-vh-100 justify-content-center">
</div>
Система сетки
Давайте добавим container внутрь div, как <div class="container"></div>. Контейнер — это компонент системы разметки сетки, созданной bootstrap. Внутри этого div мы добавляем row (не что иное, как обертка для всех столбцов, которые мы создадим далее). Внутри строки мы добавим col (колонки, которые помогут нам расположить элементы внутри в системе сетки).
Здесь мы будем использовать некоторые прикольные числа в колонках. Эти числа нужны для того, чтобы ширина столбца оставалась той, которую мы задали, и менялась на auto, когда ничего не задано. Вы можете узнать больше о системе сетки в документации Bootstrap.
Наш первый col, <div class="col-sm-12 col-md-10 mx-auto bg-white rounded shadow">. Этот col-sm-12 будет занимать все 12 мест (что составляет полную ширину устройства в соответствии с системой сетки), когда размер экрана мал, т.е. на наших смартфонах. col-md-10 займет 10 колонок и оставит остальные 2 в покое на устройствах со средним экраном, таких как iPad, планшеты и т.д. mx-auto гарантирует, что элементы внутри этого col поддерживают margin-inline как auto с обеих сторон, что позволяет центрировать элементы. bg-white делает цвет фона белым, а rounded-shadow создает тень для нашего col. Теперь код должен выглядеть примерно так:
<body class="bg-primary bg-opacity-25">
<section>
<div class="d-flex flex-column min-vh-100 justify-content-center">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-10 mx-auto bg-white rounded shadow">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
Теперь мы создали базовый макет нашего раздела входа в систему. Осталось добавить компоненты. Сначала мы создадим новую row и разделим предыдущую col на две половины, чтобы мы могли добавить текстовый ввод, кнопку и т.д. в первой половине и изображение входа во второй половине. Для этого мы создадим два col внутри этой row с помощью md-6, чтобы наш макет выглядел так на средних экранах и автоматически занимал все пространство на маленьких экранах, потому что на маленьких экранах он не будет выглядеть хорошо с таким макетом. Итак, давайте создадим два <div> внутри row с class="col-md-6". Код должен выглядеть следующим образом:
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
Мы добавляем наши элементы входа в первый col. Мы добавляем заголовок на эту страницу следующим образом <div class="m-5 text-center"><h1>Welcome!</h1></div>. Здесь мы просто добавляем div и внутри него добавляем h1, где пишем Welcome! m-5 дает отступ x5 по всем направлениям. text-center заставляет текст оставаться в центре div.
Форма
Мы создаем форму form, чтобы добавить в нее все вводимые данные. Мы добавим к форме отступ x5 m-5, чтобы иметь некоторое пространство для границ. Теперь мы добавим div с классом mb-3, который дает нижнее поле x3. Этот div будет содержать нашу label и input для имени пользователя. У нас есть класс form-label и for="username" для label. У нас есть класс form-control и id="username" для input.
<label class="form-label" for="username">Username</label>
<input class="form-control" type="text" id="username" />
Теперь мы создадим наши первые элементы ввода. Мы можем сделать то же самое для пароля и изменить type на password и for и id на password, после изменений у нас получится примерно такой код:
<label class="form-label" for="password">Password</label>
<input class="form-control" type="password" id="password"/>
Теперь мы добавим новую row с классом mb-3 для флажка Remember Me и ссылки Forgot Password. Разделим эту row на две col как половину. В первом col мы добавим вход checkbox, а во втором col добавим ссылку forgot password. У нас есть form-check-input для checkbox input и form-check-label для checkbox label. Во втором col мы можем просто добавить тег a для Forgot Password.
Код для этого выглядит примерно так:
<div class="row mb-3">
<div class="col-6">
<div class="form-check text-start">
<input
class="form-check-input"
type="checkbox"
id="remember-me"
/>
<label class="form-check-label" for="remember-me"
>Remember Me</label
>
</div>
</div>
<div class="col-6">
<div class="text-end">
<a href="#">Forgot Password?</a>
</div>
</div>
</div>
После добавления всего этого код формы должен выглядеть следующим образом:
<form class="m-5">
<div class="mb-3">
<label class="form-label" for="username">Username</label>
<input class="form-control" type="text" id="username" />
</div>
<div class="mb-3">
<label class="form-label" for="password">Password</label>
<input
class="form-control"
type="password"
id="password"
/>
</div>
<div class="row mb-3">
<div class="col-6">
<div class="form-check text-start">
<input
class="form-check-input"
type="checkbox"
id="remember-me"
/>
<label class="form-check-label" for="remember-me"
>Remember Me</label
>
</div>
</div>
<div class="col-6">
<div class="text-end">
<a href="#">Forgot Password?</a>
</div>
</div>
</div>
<div class="">
<input
type="submit"
class="form-control btn btn-primary mt-3"
/>
</div>
</form>
Вторая половина
Здесь не так много. В этой части мы собираемся добавить изображение. Я загрузил изображение в формате SVG с сайта unDraw. Там есть много красивых векторов, доступных бесплатно.
Итак, теперь в другом col-md-6 мы добавляем новый div, внутри которого мы добавляем наше изображение с этими классами class="img-fluid p-5". Код должен выглядеть примерно так:
<div class="col-md-6">
<div>
<img src="./login.svg" alt="login" class="img-fluid p-5" />
</div>
</div>
Ну, а теперь… Шучу, мы закончили!
Вот как мы можем создать классно выглядящую страницу входа в систему, используя только Bootstrap без пользовательского CSS. Полный код для этого таков:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body class="bg-primary bg-opacity-25">
<section>
<div
class="d-flex flex-column min-vh-100 justify-content-center"
>
<div class="container">
<div class="row" >
<div class="col-sm-12 col-md-10 mx-auto bg-white rounded shadow">
<div class="row">
<div class="col-md-6">
<div class="m-5 text-center"><h1>Welcome!</h1></div>
<form class="m-5">
<div class="mb-3">
<label class="form-label" for="username">Username</label>
<input class="form-control" type="text" id="username" />
</div>
<div class="mb-3">
<label class="form-label" for="password">Password</label>
<input
class="form-control"
type="password"
id="password"
/>
</div>
<div class="row mb-3">
<div class="col-6">
<div class="form-check text-start">
<input
class="form-check-input"
type="checkbox"
id="remember-me"
/>
<label class="form-check-label" for="remember-me"
>Remember Me</label
>
</div>
</div>
<div class="col-6">
<div class="text-end">
<a href="#">Forgot Password?</a>
</div>
</div>
</div>
<div class="">
<input
type="submit"
class="form-control btn btn-primary mt-3"
/>
</div>
</form>
</div>
<div class="col-md-6">
<div>
<img
src="./login.svg"
alt="login"
class="img-fluid p-5"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Если вам нужна демонстрация того же кода, я сделал видео на youtube, которое вы можете посмотреть здесь How to create a Cool Login Page using only Bootstrap.
Спасибо, что дошли до конца!
Это мой первый блог. Надеюсь, он вам понравится! Пожалуйста, дайте мне знать, если есть какие-либо предложения, идеи или вопросы в комментариях ниже. Я обязательно их рассмотрю!
Еще раз спасибо, что читаете!