bootstrap组件有哪些?bootstrap常用组件推荐

这篇文章主要整理bootstrap中常用的组件，比如：表格、表单验证、文件上传、加载效果、复选下拉框、时间组件、弹出框等。

bootstrap表格组件

由于Bootstrap Table是Bootstrap的一个组件，所以它是依赖Bootstrap的。Bootstrap Table它是开源的，我们直接进到它的源码里面git下来就好了。

Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
Bootstrap Table api：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table

bootstrap表单验证组件

在web开发中，表单验证是最常见的需求，能帮增加页面的用户体验，bootstrapvalidator是bootstrap中常用的表单验证组件，它主要特点是：使用简单，界面友好。

bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api：http://bv.doc.javake.cn/api/

bootstrap复选下拉框组件

推荐2个组件，分别为：multiple-select和bootstrap-multiselect，都属于风格简单、文档全、功能强大的复选下拉框组件，下面是他们的地址：

Multiple-Select源码主页：https://github.com/wenzhixin/multiple-select
Multiple-Select文档、Demo：http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN
bootstrap-multiselect源码主页：https://github.com/davidstutz/bootstrap-multiselect
bootstrap-multiselect文档、Demo：http://davidstutz.github.io/bootstrap-multiselect/

bootstrap文件上传组件

bootstrap-fileinput 这是一个增强的 html5 文件输入控件，是一个 Bootstrap 3.x 的扩展，实现文件上传预览，多文件上传等功能。一般情况下，我们需要引入下面两个文件，插件才能正常使用：

bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js

bootstrap-fileinput的相关地址：

bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API：http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo

bootstrap弹出框组件

bootbox是一个很简单的弹出框组件，弹出提示主要分为三种：弹出框、确定取消提示框、信息提示框。 bootbox 组件特点就是能和bootstrap的风格能够很好的保持一致。

bootbox API：http://bootboxjs.com/documentation.html

下面简单介绍它的使用：

bootbox.alert("弹出框", function () {
         //code   
})
bootbox.prompt("确认取消", function (result) {
        //code   
 })
bootbox.confirm("确认删除", function (result) {
          //code   
})

除了bootbox，还有其他一些比较好的弹出框组件，比如：Messenger、sweetalert 、toastr.js等。它们的地址为：

Messenger Api：http://www.bootcss.com/p/messenger/
Messenger 源码：https://github.com/HubSpot/messenger
sweetalert Api：http://t4t5.github.io/sweetalert/
sweetalert 源码：https://github.com/t4t5/sweetalert
toastr.js Api ：http://www.ithao123.cn/content-2414918.html
toastr.js源码：http://codeseven.github.io/toastr/

bootstrap时间日历组件

bootstrap有两种日历。datepicker和datetimepicker,后者是前者的拓展，其使用和配置方法较为简单，我们一般使用后者，在使用前需要先引用jquery和moment-with-locales.js 这2个文件。

datetimepicker源码：http://eonasdan.github.io/bootstrap-datetimepicker/

bootstrap自增器组件

jquery.spinner.js自增器组件，比如在项目中，需要输入数字，改数字的大小需要微调，使用它可以自动设置最大值、最小值、自增值还是挺方便的，并且可以自动做数字校验。使用它需要引用font-aweaome.min.css。

jquery.spinner.js源码/文档：https://vsn4ik.github.io/jquery.spinner/

使用如下：

<div class="input-group spinner" data-trigger="spinner">
    <input type="text" class="form-control text-center" value="1" data-min="-10" data-max="10" data-step="2" data-rule="quantity">
    <span class="input-group-addon">
        <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
        <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
    </span>
</div>

说明：data-min最小值、data-max最大值、data-step自增值，如果需要进行事件捕捉，改组件提供了两个事件changed、changing，分别对应数值变化中和变化后的事件回调。

$('#id').spinner('changed', function(e, newVal, oldVal) {
});

$('[data-trigger="spinner"]').spinner('changing', function(e, newVal, oldVal) {
});

加载效果组件

页面加载类组件整理有：

1、fakeLoader.js组件，拥有比较扁平化效果，更好的手机、平板设备体验，

fakeLoader.js开源地址：https://github.com/joaopereirawd/fakeLoader.js

2、jquery.shCircleLoader.js组件，对IE10以下版本不支持

jquery.shCircleLoader.js开源地址： https://github.com/sunhater/shCircleLoader

3、spin.js组件，spin.js文件不需要jquery的支持；如果想要使用jQuery，则引用jquery.spin.js文件。

spin.js开源地址： https://github.com/fgnass/spin.js

链接: https://fly63.com/article/detial/720