bootstrap 4 样式选择 [英] bootstrap 4 styled select

问题描述

我想显示一个下拉列表/选择作为引导程序 4 的输入.到目前为止，我在文档中找到的唯一选择是 这个.它有效，但看起来不太像引导程序，并且不支持图标、分组分隔符和其他东西.有什么方法可以使选择具有引导程序中的下拉菜单的功能?

类似的东西，但只是作为各种形式的输入:

<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">大按钮<div class="下拉菜单"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">分隔链接</a>

有人有想法吗?

解决方案

设置 select 元素的样式/格式的能力通常是有限的，不仅仅是在 Bootstrap 中.这就是为什么有 3rd 方插件，例如 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

多选插件:https://www.codeply.com/go/UeqqALYwsT

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?

解决方案

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

这篇关于bootstrap 4 样式选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！