光年模板说明文档
主题
字号
18px

bootstrap-select下拉选择(v4)

因很多小伙伴会在项目中使用下拉插件，所以v4版本模板就将插件整合进来了，插件使用bootstrap-select 1.13.17。

github地址：https://github.com/snapappointments/bootstrap-select

文档地址：https://www.bootstrapselect.cn/

4.* 版本默认样式为 btn-light，因样式颜色太浅，这个改为 btn-default，另将默认的字体图标设定为 mdi。

在模板中使用下拉插件也是简单的，在引入插件的 js 和 css 后，增加一个通用的 class 名字，然后 js 初始化该插件。 

<select class="form-control selectpicker" name="example-1" id="example-1">
  <option value="1" selected>码奴</option>
  <option value="2">码农</option>
  <option value="3">码匠</option>
  <option value="4">码神</option>
</select>
$('.selectpicker').selectpicker();

你可以将这段js代码放到 main.min.js 中，后面使用时，只需给 select 增加一个 selectpicker 的 class 即可。

当你的 select 选项非常多的时候，可以 data-live-search="true" 设置开启搜索功能。 

<select class="form-control selectpicker" data-live-search="true" name="example-4" id="example-4">
  <option>范特西</option>
  <option>八度空间</option>
  <option>叶惠美</option>
  <option>七里香</option>
  <option data-tokens="夜曲">十一月的肖邦</option><!--option上可使用data-tokens用来提高可搜索性-->
  <option>依然范特西</option>
  <option>我很忙</option>
</select>

其他详细的使用可以参考模板中的示例，或查看官方文档。

涉及的文件：