bootstrap-4 Stil wählen

ich würde gerne die Anzeige eines dropdown /select als input mit bootstrap 4. so weit, die nur wählen, was ich in der Dokumentation tritt diese. das funktioniert zwar, sieht aber nicht sehr wie bootstrap und unterstützt keine Symbole, Gruppierung Teiler und so. gibt es eine Möglichkeit, um zu passen ein wählen Sie mit der Funktionalität einer dropdown-von bootstrap?

etwas wie dieses, aber nur als form-input-Art:

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

hat jemand eine Idee?

InformationsquelleAutor Jan Oechsler | 2017-01-10

  1. 6

    Die Fähigkeit, Stil/format der select element beschränkt sich im Allgemeinen, nicht nur in der Bootstrap. Deshalb gibt es 3rd-party-plugins wie https://github.com/silviomoreto/bootstrap-select, die jQuery nutzen, um zu konvertieren ein vorhandenes element select "- Stil und bringen zusätzliche Funktionen zur standard-Elemente auswählen".

    Können Sie auch hinzufügen, einige einfache jQuery, um die Bootstrap-dropdown-Verhalten sich wie ein select-element: http://www.codeply.com/go/ganazCDXB5

    Update 2018 - Bootstap 4.0.0 (stabil)

    Dropdown Auswählen: https://www.codeply.com/go/8bAECfv46k

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

    Multiselect-plugin: https://www.codeply.com/go/UeqqALYwsT

    InformationsquelleAutor Zim

  2. 0

    Wenn Sie mit Bootstrap 4 dann sollten Sie sich bewusst, dass die bootstrap-4 entfernt die search select-box. Nun, Sie können diese Funktionen mit Hilfe der bootstrap-select.min.css-Datei. link ist unten

    Erstens, fügen Sie die folgende css-und javascript-Datei.

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

    danach fügen Sie den folgenden code für die select-box

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

    nun müssen Sie fügen Sie den javascript-code

    <script>
$('.selectpicker').selectpicker();
</script>

    InformationsquelleAutor Sumit Kumar Gupta

Schreibe einen Kommentar