web-dev-qa-db-fra.com

bootstrap 4 styled select

je voudrais afficher une liste déroulante/select en tant qu'entrée avec bootstrap 4. Jusqu'à présent, la seule chose sélectionnée dans la documentation est: this . qui fonctionne, mais ne ressemble pas vraiment à un bootstrap et ne supporte pas les icônes, les diviseurs de groupes et tout le reste. y a-t-il un moyen d'adapter une sélection à la fonctionnalité d'un menu déroulant à partir de bootstrap?

quelque chose comme ceci, mais seulement comme entrée de formulaire de sorte:

<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>

est-ce que quelqu'un a une idée?

twitter-bootstrapbootstrap-4twitter-bootstrap-4
5
Jan Oechsler

La possibilité de styler/formater l'élément select est généralement limitée, pas seulement dans Bootstrap. C'est pourquoi il existe des plugins tiers tels que https://github.com/silviomoreto/bootstrap-select qui utilisent jQuery pour convertir un élément select existant en "style et apporter des fonctionnalités supplémentaires aux éléments select standard". 

Vous pouvez également ajouter quelques jQuery simples pour que la liste déroulante Bootstrap se comporte comme un élément select: http://www.codeply.com/go/ganazCDXB5

Mise à jour 2018 - Bootstap 4.0.0 (stable)

Dropdown as Select: https://www.codeply.com/go/8bAECfv46k

Plugin SelectPicker : https://www.codeply.com/go/zpZOlpB4GS

Plugin Multiselect : https://www.codeply.com/go/UeqqALYwsT

6
Zim

Si vous utilisez Bootstrap 4, sachez que bootstrap 4 supprime le champ de recherche. Vous pouvez désormais ajouter ces fonctionnalités à l'aide du fichier d'aide bootstrap-select.min.css. le lien est en dessous

tout d'abord, vous ajoutez les fichiers css et javascript suivants.

    <!-- 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>

après cela, ajoutez le code suivant pour la zone de sélection

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

maintenant vous devez ajouter le code javascript

<script>
$('.selectpicker').selectpicker();
</script>
0
Sumit Kumar Gupta