Bootstrap - Плавающие метки: Полное руководство для начинающих

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

Что такое плавающие метки?

Прежде чем мы углубимся, давайте поймем, что такое плавающие метки. Представьте, что вы заполняете форму, и метка для каждого поля магическим образом поднимается над полем, когда вы начинаете печатать. Вот суть плавающих меток! Они предоставляют чистый, интуитивно понятный интерфейс пользователя, который экономит место и looks pretty cool too.

Пример

Давайте начнем с простого примера, чтобы окунуться в воду:

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>

Что происходит здесь? Давайте разберем это:

1. Мы оборачиваем наше поле ввода и метку в div с классом form-floating.
2. input стоит перед label (этот порядок важен!).
3. Мы добавляем placeholder к полю ввода, который Bootstrap будет использовать для определения размера метки.

Когда вы фокусируете внимание на поле ввода или начинаете печатать, метка аккуратно поднимется над полем ввода. Это как магия, но это просто умный CSS!

Текстовые области

Плавающие метки не только для простых полей ввода. Они также хорошо работают с текстовыми областями:

<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>

Этот пример работает так же, как наш базовый пример, но с textarea вместо input. Идеально для случаев, когда вам нужно, чтобы пользователи вводили более длинный текст!

Выпадающие списки

Что насчет выпадающих списков? Bootstrap также позаботился об этом:

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>

Плавающая метка появится, когда выберется опция. Это отличной способ сделать ваши формы выглядящими единообразно для разных типов ввода.

Отключенные поля

Иногда вам может потребоваться отключить поле ввода. Вот как это можно сделать, сохраняя при этом плавающую метку:

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">Email address (disabled)</label>
</div>

Просто добавьте атрибут disabled к вашему полю ввода, и Bootstrap стилизует его соответствующим образом.

Прочитываемый текст

Что, если вы хотите отображать информацию, которая не может быть изменена? Введите читаемый текст:

<div class="form-floating mb-3">
<input type="email" class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]" readonly>
<label for="floatingEmptyPlaintextInput">Empty input</label>
</div>

Это создает неудаляемое поле, которое все равно受益 от стиля плавающей метки.

Группы ввода

Плавающие метки также можно использовать с группами ввода для более сложных layouts forms:

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
<label for="floatingInputGroup1">Amount</label>
</div>
</div>

Этот пример combine une groupe de saisie (le préfixe du signe dollar) avec un champ de saisie à étiquette flottante.

Разметка

Наконец, давайте посмотрим, как мы можем arranging ces champs d'entrée avec des étiquettes flottantes dans une grille réactive:

<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]">
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>

Это создает двухколоночный макет, который будет сворачиваться вертикально на более小的 экранах.

Объединение всего

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

<form class="container mt-5">
<h2>Contact Us</h2>
<div class="row g-3">
<div class="col-md-6">
<div class="form-floating">
<input type="text" class="form-control" id="floatingName" placeholder="John Doe">
<label for="floatingName">Full Name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
<label for="floatingEmail">Email address</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<select class="form-select" id="floatingSelect">
<option selected>Choose a topic</option>
<option value="1">General Inquiry</option>
<option value="2">Technical Support</option>
<option value="3">Feedback</option>
</select>
<label for="floatingSelect">Topic</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</div>
</form>

Эта форма combine все элементы, о которых мы говорили: поля ввода, выпадающие списки и текстовые области, все с плавающими метками, arranger dans une grille de layout réactive.

Заключение

И вот мы и подошли к концу,folks! Мы рассмотрели все аспекты плавающих меток Bootstrap. От простых полей ввода до сложных макетов, теперь у вас есть инструменты для создания стильных, удобных форм, которые impressionneront vos utilisateurs et feront ressortir vos sites Web.

Помните, практика makes perfect. Попробуйте experimenting с этими примерами, mix and match разные элементы и посмотрите, что вы можете создать. Before you know it, вы будете работать с плавающими метками, как опытный веб-разработчик!

Счастливо кодируйте, и пусть ваши метки всегда float gracefully!

Credits: Image by storyset