Bootstrap5 Выпадающие меню
Выпадающие списки могут быть выпадающими меню с одиночным выбором или выпадающими меню с множественным выбором.
Выпадающий список с одиночным выбором:
Выпадающий список с множественным выбором:
В Bootstrap5 элементы<select>выпадающего меню могут использовать класс.form-selectдля отображения:
Пример
<select class="form-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Попробуйте сами »
Выпадающие меню могут использовать класс.form-select-lgили.form-select-smдля изменения размера:
Пример
<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">
Попробуйте сами »
Эффект показан ниже:
disabledАтрибут может запретить выбор выпадающего списка:
Пример
<select class="form-select" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Попробуйте сами »
Список данных
Bootstrap также может использовать тег datalist, чтобы задать раскрывающееся меню для элементов <input>:
В следующем примере выбирается веб-сайт из списка:
Пример
<label for="browser" class="form-label">Выберите свой любимый веб-сайт:</label>
<input class="form-control" list="sites" name="site" id="site">
<datalist id="sites">
<option value="Google">
<option value="Example">
<option value="Taobao">
<option value="Wiki">
<option value="Zhihu">
</datalist>
Попробуйте сами »
Эффект показан ниже:
