Bootstrap-select

jQuery插件通过直观的select,搜索等功能将select元素带入21世纪。现在支持Bootstrap 4。

下载 (v1.13.9)

入门


快速开始

Bootstrap-select需要jQuery v1.9.1 +,Bootstrap的dropdown.js组件和Bootstrap的CSS。如果您尚未在项目中使用Bootstrap,则可以在此处下载Bootstrap v3.3.7最低要求的预编译版本。如果在Bootstrap v4 +中使用bootstrap-select,你还需要Popper.js。有关Bootstrap v4的所有要求,请参阅入门。预期版本的需求将在即将发布的bootstrap-select版本中提供。

有几种快速启动选项:

<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
    
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-*.min.js"></script>
    
发布后,CDN会更新,这意味着发布版本及其在CDN上的可用性之间存在延迟。

用法


Bootstrap 4仅适用于bootstrap-select v1.13.0 +。默认情况下,bootstrap-select会自动检测正在使用的Bootstrap版本。但是,在某些情况下,版本检测将不起作用。有关更多信息,请参阅文档

通过selectpicker课程

selectpicker类添加到select元素以自动初始化bootstrap-select。

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

通过JavaScript

// To style only selects with the my-select class
    $('.my-select').selectpicker();
    

// To style all selects
    $('select').selectpicker();
    

如果通过JavaScript调用bootstrap-select,则需要将代码包装在一个.ready()块中或将其放在页面的底部(在bootstrap-select的最后一个实例之后)。

$(function () {
        $('select').selectpicker();
    });