Bootstrap - Выпадающее меню формы

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

Что такое выпадающее меню формы Bootstrap?

Прежде чем мы перейдем к коду, давайте поймем, что такое выпадающее меню формы Bootstrap. Представьте, что вы на冰淇淋ной станции, и у вас есть меню на выбор. Это меню похоже на элемент select в веб-дизайне. Он позволяет пользователям выбрать один из множества вариантов. Bootstrap, наш верный напарник в веб-разработке, делает эти элементы выпадающего меню好看 и удобными для использования на разных устройствах и браузерах.

Стандартное выпадающее меню Bootstrap

Давайте начнем с最基本的 вида выпадающего меню Bootstrap. Вот как это выглядит:

<select class="form-select" aria-label="Стандартное выпадающее меню пример">
<option selected>Откройте это выпадающее меню</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>

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

1. Мы начинаем с тега <select>, который говорит браузеру, что мы создаем выпадающее меню.
2. Класс class="form-select" - это магия Bootstrap, которая стилизует наше выпадающее меню.
3. aria-label предназначен для доступности, помогая экранным дикторам понять назначение этого элемента.
4. Внутри <select> у нас есть теги <option>. Это Varianty в нашем выпадающем меню.
5. Атрибут selected на первом варианте делает его выбранным по умолчанию.

Когда вы используете этот код, вы увидите стильное выпадающее меню с четырьмя вариантами. Круто, правда?

Пример: любимый язык программирования

Давайте сделаем это интереснее с реальным примером. Представьте, что мы создаем опрос о любимых языках программирования:

<select class="form-select" aria-label="Выберите ваш любимый язык программирования">
<option selected>Выберите ваш любимый язык</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
</select>

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

Изменение размера:做大 или сделать меньше

Иногда вам может понадобиться сделать ваше выпадающее меню больше или меньше. Bootstrap позаботился об этом! Вот три варианта размера:

Пример: большое выпадающее меню

<select class="form-select form-select-lg mb-3" aria-label="Большое выпадающее меню пример">
<option selected>Откройте это выпадающее меню</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>

Класс form-select-lg делает это выпадающее меню больше, чем стандартное.

Пример: стандартное выпадающее меню

<select class="form-select mb-3" aria-label="Стандартное выпадающее меню пример">
<option selected>Откройте это выпадающее меню</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>

Это наш стандартный размер, как мы видели раньшe.

Пример: малое выпадающее меню

<select class="form-select form-select-sm" aria-label="Малое выпадающее меню пример">
<option selected>Откройте это выпадающее меню</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>

Класс form-select-sm создает более малое выпадающее меню.

Представьте это как маленькие, средние и большие напитки в快餐овом ресторане. Вы выбираете размер, который лучше всего подходит вашему дизайну!

Отключение: когда варианты неактивны

Иногда вам может понадобиться предотвратить взаимодействие пользователей с элементом выпадающего меню. Может быть, это неактуально для них, или, возможно, это зависит от другого выбора, который они еще не сделали. Здесь на помощь приходит атрибут disabled.

Пример: отключенное выпадающее меню

<select class="form-select" aria-label="Отключенное выпадающее меню пример" disabled>
<option selected>Откройте это выпадающее меню (но вы не можете!)</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>

Добавление disabled к тегу <select> затемняет все выпадающее меню, предотвращая любое взаимодействие. Это как putting a "Закрыто" sign on the ice cream shop we talked about earlier.

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

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

<form>
<div class="mb-3">
<label for="programmingLanguage" class="form-label">Любимый язык программирования</label>
<select class="form-select form-select-lg" id="programmingLanguage">
<option selected>Выберите ваш любимый язык</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
</select>
</div>

<div class="mb-3">
<label for="experience" class="form-label">Лет опыта</label>
<select class="form-select" id="experience">
<option selected>Выберите ваш опыт</option>
<option value="1">Меньше 1 года</option>
<option value="2">1-3 года</option>
<option value="3">3-5 лет</option>
<option value="4">5+ лет</option>
</select>
</div>

<div class="mb-3">
<label for="futureLanguage" class="form-label">Язык, который вы хотите выучить в следующий раз</label>
<select class="form-select form-select-sm" id="futureLanguage" disabled>
<option selected>Сначала выберите ваш любимый язык</option>
<option value="rust">Rust</option>
<option value="go">Go</option>
<option value="kotlin">Kotlin</option>
<option value="swift">Swift</option>
</select>
</div>
</form>

Эта форма объединяет все, что мы узнали:

• Большое выпадающее меню для выбора любимого языка программирования
• Стандартное выпадающее меню для лет опыта
• Малое, отключенное выпадающее меню дляfuture learning (представьте, что оно становится активным, когда они выбирают свой любимый язык)

Заключение

И вот мы и добрались до конца, друзья! Вы только что узнали, как создавать и настраивать элементы выпадающего меню формы Bootstrap. От базовых выпадающих меню до изменяемых размеров и отключенных вариантов, у вас теперь есть инструменты для создания пользовательских форм, которые выглядят великолепно на любом устройстве.

Не забывайте, что практика делает мастера. Попробуйте создать свои own forms, mix и match разные размеры, и экспериментируйте с отключенными состояниями. Before you know it, вы будете designing forms как профи!

Счастливого кодирования, и пусть ваши выпадающие меню всегда будут стильными и функциональными!

Credits: Image by storyset