Bootstrap - Разметка формы: Путеводитель для начинающих

Здравствуйте, стремящиеся к успеху веб-разработчики! Я рад стать вашим проводником в увлекательное путешествие в мир разметки форм с использованием Bootstrap. Как某人, кто teaches computer science на протяжении более десяти лет, я видел countless students, которые зажигались, когда понимали, насколько мощным и удобным может быть Bootstrap. Так что погружаемся вглубь и.unlock the secrets создания красивых, адаптивных форм!

Bootstrap - Layout

Основы разметки формы

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

Контейнер: Фундамент вашей формы

Каждая великолепная форма начинается с контейнера. В Bootstrap мы используем класс container, чтобы создать адаптивный контейнер с фиксированной шириной. Вот простой пример:

<div class="container">
<form>
<!-- Здесь будут элементы формы -->
</form>
</div>

Этот контейнер действует как участок земли для нашего дома. Он предоставляет нашей форме определенное пространство для существования и помогает с адаптивностью на разных尺寸ах экранов.

Утилиты: Швейцарский армейский нож дизайна форм

Утилиты Bootstrap resemble multi-tools веб-дизайна. Это небольшие, мощные классы, которые могут быстро решать common layout проблемы. Давайте рассмотрим некоторые основные утилиты для разметки форм:

Утилиты для отступов

Утилиты для отступов помогают нам добавлять отступы и отступы к нашим элементам формы. Вот quick reference таблица:

Утилита Класс	Назначение
`m-*`	Добавляет отступ
`p-*`	Добавляет отступ
`mt-`, `mb-`, `ms-`, `me-`	Добавляет отступ сверху, снизу, слева, справа
`pt-`, `pb-`, `ps-`, `pe-`	Добавляет отступ сверху, снизу, слева, справа

Давайте посмотрим, как это работает:

<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
</form>

В этом примере, mb-3 добавляет отступ снизу каждого форм-группы, давая нашим элементам немного места для дыхания.

Сетка формы: Создание структуры

Теперь, когда у нас есть фундамент и инструменты, давайте начнем строить структуру нашей формы с использованием grid system Bootstrap. Системасеток основана на 12-колоночной разметке, которую мы можем использовать для создания адаптивных дизайнов.

Основная сеточная разметка

Вот пример простого двухколоночного формата разметки:

<form>
<div class="row">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>

В этом примере мы используем row для создания горизонтальной группы столбцов, и col-md-6 чтобы указать, что каждый столбец должен занимать половину ширины на средних и больших экранах.

Gutters: Дать вашей форме немного места для дыхания

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

Вот пример с пользовательскими gutters:

<form>
<div class="row g-3">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>

Класс g-3 добавляет размер gutters 3 (1rem) между нашими столбцами, давая форме немного больше места для дыхания.

Горизонтальная форма: Другой视角

Иногда мы хотим, чтобы наши метки были рядом с нашими полями ввода. Это где horizontal forms становятся полезными. Давайте создадим один:

<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password">
</div>
</div>
</form>

В этом примере мы используем col-sm-2 для меток и col-sm-10 для вводов, создавая nice horizontal разметку на маленьких экранах и выше.

Горизонтальное размерение меток: Найдите подходящий размер

Иногда нам нужно отрегулировать размер наших меток в horizontal forms. Bootstrap делает это легко с помощью своих sizing classes. Вот как мы можем создать форму с разными размерами меток:

<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="email">
</div>
</div>
<div class="row mb-3">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name">
</div>
</div>
<div class="row mb-3">
<label for="message" class="col-sm-2 col-form-label col-form-label-lg">Message</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-lg" id="message">
</div>
</div>
</form>

Здесь мы используем col-form-label-sm, col-form-label, и col-form-label-lg чтобы создать small, default, и large размеры меток соответственно.

Размер столбцов: Подгонка вашей формы

Системасеток Bootstrap позволяет нам указывать точные размеры столбцов. Это особенно полезно, когда нам нужно точное управление нашей разметкой формы. Вот пример:

<form>
<div class="row">
<div class="col-2">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col-3">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col-7">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>

В этом примере мы используем col-2, col-3, и col-7 чтобы создать форму, где вводы занимают конкретные части доступной ширины.

Автоматический размер: Пусть Bootstrap сделает математику

Иногда мы хотим, чтобы наши вводы автоматически调节ались в зависимости от их содержимого. Функция auto-sizing Bootstrap делает это возможным. Вот как это работает:

<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">Preference</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

В этом примере, класс col-auto позволяет каждому столбцу调节аться в зависимости от его содержимого. Классы gy-2 и gx-3 добавляют vertical и horizontal gutters, в то время как align-items-center вертик.ально центрирует содержимое в каждом столбце.

Полный пример: Соединение всего вместе

Теперь, когда мы рассмотрели все эти концепции, давайте соединим их в более сложную форму:

<div class="container">
<form class="mt-4">
<div class="row mb-3">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="row mb-3">
<div class="col-md-8">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="col-md-4">
<label for="phone" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address">
</div>
<div class="col-md-3">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control" id="city">
</div>
<div class="col-md-3">
<label for="zip" class="form-label">Zip Code</label>
<input type="text" class="form-control" id="zip">
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>

Этот пример combines многие из концепций, которые мы обсуждали: контейнер, сеточная разметка, gutters, и адаптивный дизайн. Он создает форму, которая выглядит великолепно наboth desktop и мобильных устройствах.

Inline формы: Компактные и эффективные

Для simpler форм или когда место ограничено, inline формы могут быть отличным решением. Вот как создать одну:

<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>

<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>

<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</div>

<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

Эта inline форма использует row-cols-lg-auto чтобы автоматически размерить столбцы на больших экранах, создавая compact, horizontal разметку.

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - Плавающие метки

Следующий учебник:

Bootstrap - Валидация