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` 初始化该插件。
![](/uploads/images/20211230/29efa97f8222ec7245fc639b64d70ddd.png)
```html
<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>
```
```javascript
$('.selectpicker').selectpicker();
```

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

当你的 `select` 选项非常多的时候，可以 `data-live-search="true"` 设置开启搜索功能。
![](/uploads/images/20211230/148f52939727642e57acc1a1dc2844e2.png)
```html
<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>依然范特西</option>
  <option>我很忙</option>
</select>
```

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

涉及的文件：
- `lyear_js_select.html`
- `js/bootstrap-select/bootstrap-select.css`
- `js/bootstrap-select/bootstrap-select.min.js`
- `js/bootstrap-select/i18n/defaults-zh_CN.min.js`