выбор в стиле bootstrap 4

я хотел бы отобразить раскрывающийся список/выбрать в качестве ввода с начальной загрузкой 4. Пока единственная вещь, которую я нашел в документации, это это. который работает, но не очень похож на бутстрап и не поддерживает значки, групповые разделители и прочее. Есть ли способ подобрать для выбора функциональность раскрывающегося списка из бутстрапа?

что-то вроде этого, но только как своего рода ввод формы:

<div class="btn-group">
    <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
        Large button
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

у кого-нибудь есть идея?


twitter-bootstrap bootstrap-4 twitter-bootstrap-4
person Jan Oechsler    schedule 10.01.2017    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Возможность стилизовать/форматировать элемент select в целом ограничена, а не только в Bootstrap. Вот почему существуют сторонние плагины, такие как https://github.com/silviomoreto/bootstrap-select, которые используют jQuery для преобразования существующего элемента выбора в «стиль и добавления дополнительных функций к стандартным элементам выбора».

Вы также можете добавить простой jQuery, чтобы раскрывающийся список Bootstrap вел себя как элемент выбора: http://www.codeply.com/go/ganazCDXB5

Обновление 2019 – Bootstap 4

Выпадающий список для выбора: https://www.codeply.com/go/8bAECfv46k

плагин SelectPicker: https://www.codeply.com/go/zpZOlpB4GS

Плагин Multiselect: https://www.codeply.com/go/UeqqALYwsT

person Zim    schedule 10.01.2017

arrow_upward
1
arrow_downward

Если вы используете Bootstrap 4, вы должны знать, что bootstrap 4 удаляет поле выбора поиска. Теперь вы можете добавить эти функции с помощью файла bootstrap-select.min.css. ссылка ниже

сначала вы добавляете следующий файл css и javascript.

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

после этого добавьте следующий код для поля выбора

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

теперь вам нужно добавить код javascript

<script>
$('.selectpicker').selectpicker();
</script>
person Sumit Kumar Gupta    schedule 23.10.2018