bootstrap 4 个样式 select

Question

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

类似这样的东西，但仅作为各种形式的输入：

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

有人知道吗？

Answer 1

style/format select 元素的能力通常受到限制，而不仅仅是 Bootstrap。这就是为什么有第 3 方插件，例如 https://github.com/silviomoreto/bootstrap-select，它利用 jQuery 将现有的 select 元素转换为 "style and bring additional functionality to standard select elements"。

您还可以添加一些简单的 jQuery 以使 Bootstrap 下拉菜单的行为类似于 select 元素：http://www.codeply.com/go/ganazCDXB5

2019 年更新 - Bootstap 4

下拉列表为 Select：https://www.codeply.com/go/8bAECfv46k

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

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

Answer 2

如果您正在使用 Bootstrap 4，那么您应该知道 bootstrap 4 删除了 select 搜索框。现在，您可以使用帮助 bootstrap-select.min.css 文件添加此功能。 link低于

首先添加以下 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>

之后为 select 框添加以下代码

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

现在您必须添加 javascript 代码

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

bootstrap 4 个样式 select

bootstrap 4 styled select

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4