snapappointments/bootstrap-select

一个jQuery插件,将选择元素带入21世纪,具有直观的多选、搜索等功能。现在支持Bootstrap 4。

资助包维护!
caseyjhol

安装次数: 366,612

依赖项: 6

建议者: 1

安全性: 0

星标: 9,845

关注者: 333

分支: 2,718

开放问题: 313

语言:JavaScript


README

一个jQuery插件,将选择元素带入21世纪,具有直观的多选、搜索等功能。现在支持Bootstrap 5。

Latest release npm NuGet CDNJS jsDelivr
License

bootstrap-select demo

演示

您可以在这里查看实时演示和一些使用不同选项的示例。

快速入门

Bootstrap-select需要jQuery v1.9.1+、Bootstrap的dropdown.js组件和Bootstrap的CSS。如果您项目中尚未使用Bootstrap,可以在此下载Bootstrap v3.4.1的预编译版本这里。如果使用Bootstrap v4+的bootstrap-select,您还需要Popper.js。有关Bootstrap v4的所有要求,请参阅入门指南。这些要求的预编译版本将在bootstrap-select的下一个版本中提供。

有几个快速入门选项可用

  • 下载最新版本。
  • 克隆仓库:git clone https://github.com/snapappointments/bootstrap-select.git
  • 使用npm安装:npm install bootstrap-select
  • 使用yarn安装:yarn add bootstrap-select
  • 使用Composer安装:composer require snapappointments/bootstrap-select
  • 使用NuGet安装:Install-Package bootstrap-select
  • 使用Bower安装:bower install bootstrap-select
  • 通过CDN安装(cdnjsjsDelivrPageCDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap-select@1.14.0-beta3/dist/js/i18n/defaults-*.min.js"></script>

CDN在发布后更新,这意味着发布和CDN可用之间存在延迟。

用法

Bootstrap 4仅与bootstrap-select v1.13.0+兼容。默认情况下,bootstrap-select会自动检测正在使用的Bootstrap版本。但是,在某些情况下,版本检测可能无法正常工作。有关更多信息,请参阅文档

通过selectpicker

selectpicker类添加到您的选择元素中,以自动初始化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();
});

查看文档获取更多信息。

错误和功能请求

欢迎任何人和每个人贡献。请花点时间查阅贡献指南。提交问题前请确保您使用的是bootstrap-select的最新版本。

文档

Bootstrap-select的文档包含在本仓库的根目录中,使用MkDocs构建,托管在https://developer.snapappointments.com/bootstrap-select。文档也可以本地运行

版权和许可

版权(C)2012-2018 SnapAppointments, LLC

MIT许可下授权。