twitter-bootstrap bootstrap 4 样式选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41573624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 4 styled select
提问by Jan Oechsler
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?
我想显示一个下拉列表/选择作为引导程序 4 的输入。到目前为止，我在文档中找到的唯一选择就是这个。它有效，但看起来不太像引导程序，并且不支持图标、分组分隔符和其他东西。有什么方法可以使选择具有引导程序的下拉功能？
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?
有没有人有想法？
回答by Zim
The ability to style/format the selectelement is limited in general, not just in Bootstrap. That's why there are 3rd party plugins such as https://github.com/silviomoreto/bootstrap-selectwhich utilize jQuery to convert an existing select element to "style and bring additional functionality to standard select elements".
select元素样式/格式的能力通常是有限的，不仅仅是在 Bootstrap 中。这就是为什么有 3rd 方插件，例如https://github.com/silviomoreto/bootstrap-select，它们利用 jQuery 将现有的选择元素转换为“样式并为标准选择元素带来附加功能”。
You can also add some simple jQuery to make the Bootstrap dropdown behave like a select element: http://www.codeply.com/go/ganazCDXB5
您还可以添加一些简单的 jQuery 来使 Bootstrap 下拉菜单表现得像一个选择元素：http: //www.codeply.com/go/ganazCDXB5
Update 2019 - Bootstap 4
2019 年更新 - Bootstap 4
Dropdown as Select: https://www.codeply.com/go/8bAECfv46k
下拉选择：https: //www.codeply.com/go/8bAECfv46k
SelectPicker plugin: https://www.codeply.com/go/zpZOlpB4GS
SelectPicker 插件：https: //www.codeply.com/go/zpZOlpB4GS
回答by Sumit Kumar Gupta
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
如果您使用的是 Bootstrap 4，那么您应该知道 bootstrap 4 删除了选择搜索框。现在，您可以使用帮助 bootstrap-select.min.css 文件添加此功能。链接在下面
firstly you add the following css and javascript file.
首先，您添加以下 css 和 javascript 文件。
<!-- 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
现在你必须添加javascript代码
<script>
$('.selectpicker').selectpicker();
</script>
