bootstrap 4 styled select

问题:

i would like to display a dropdown / select as an input with bootstrap 4. so far the only select thing i found in the documentation ist this. which works, but does not look very bootstrap like and does not support icons, grouping dividers and stuff. is there any way to fit a select with the functionality of a dropdown from bootstrap?

something like this, but only as form input of sorts:

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

does anyone have an idea?

回答1:

The ability to style/format the select element is limited in general, not just in Bootstrap. That's why there are 3rd party plugins such as https://github.com/silviomoreto/bootstrap-select which utilize jQuery to convert an existing select element to "style and bring additional functionality to standard select elements".

You can also add some simple jQuery to make the Bootstrap dropdown behave like a select element: http://www.codeply.com/go/ganazCDXB5

---

Update 2018 - Bootstap 4.0.0 (stable)

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

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

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

回答2:

If you are using Bootstrap 4 then you should aware that bootstrap 4 removes the select search box. Now, you can add this features with the help bootstrap-select.min.css file. link is below

firstly you add the following css and javascript file.

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

after that add the following code for select box

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

now you have to add the javascript code

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