Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
645 views
in Technique[技术] by (71.8m points)

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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 2019 - Bootstap 4

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...