推荐13款优秀的Twitter Bootstrap JavaScript插件

12 篇文章 0 订阅
9 篇文章 0 订阅

推荐13款优秀的Twitter Bootstrap JavaScript插件

Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有了它,Web开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。

Twitter Boostrap的口号是适用于任何场景,适用于每一个人,如今越来越多的开发者开始积极使用Boostrap,就在几周前,Bootstrap发布了最新版本,改进了许多新特性。Bootstrap是迄今为止最全面的前端框架及真正适用于快速成型和后端/CMS开发工具。本文收集了10款非常不错的Twitter bootstrap JavaScript扩展插件,利用Boostrap开发者可以节省大量的时间修复跨浏览器布局问题,实现各种形式的Web界面。

1. Fuel UX

Fuel UX是Twitter Bootstrap的一款轻量级插件。组件包括ComboBox, Datagrid, Pillbox, Search 和Spinner等一些实用的插件。

2. BootMetro

BootMetro可以将bootstrap转换成Microsoft Metro UI。此外,BootMetro附带的JavaScript插件能够很好的支持Metro性能。

3. WYSIHTML5

WYSIWYG HTML5非常漂亮的一款Web编辑器,拥有比较全面的配置和事件能够满足你的需求。

4. jqBootstrap Validation

我非常喜欢Bootstrap默认的风格。如果你想要个与众不同的主题,那么这个插件可以帮助你。

5. ColorPicker

这个插件允许你添加颜色字段,支持多种色彩风格。

6. DatePicker

Datepicker允许添加文本或者任意元素,它常被用作组件可支持多种日期格式。

7. TimePicker

如果你拥有一款日期选择器,那么你肯定想自定义编辑日期。这款插件只需利用鼠标或者箭头键即可轻松输入文本。

8. DateRange Picker

如果你曾用过Google Analytics(谷歌分析器),这款Javascript插件你肯定会很熟悉。DateRange非常适用于生成报表或者收集预约日期。

9. Bootbox JS

利用Twitter Boostrap现有模式创建编程式对话框。bootbox是一款非常灵活的且强大的JavaScrip对话框。

10. jQuery UI Bootstrap

这款拥有和Twitter Boostrap相似的主题,最重要的是如果你想将bootstrap和jQuery UI集成在一起,这个主题将会使它们看起来更加一致。

11. jQuery File Upload

基于HTML5 Ajax文件上传。基本的实现方式还是不错的,这里还有许多示例演示。

12. DataTables

DataGrid与Fuel UX相似,支持排序,分页,搜索等功能。

13. Bootsnipp

Bootsnipp不同于任何一款JavaScript插件,复制和粘贴布局代码段。它集合了常用的UI,包括登陆屏,窗口模式,表,导航栏等等,你可以获取代码并立即使用。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table 是一个基于 Bootstrap 的可扩展的表格插件,支持多种功能扩展、多种数据源以及自定义格式化等。如果要在 Bootstrap Table 中使用日期控件,可以使用 Bootstrap Datepicker 插件。 下面是一个使用 Bootstrap Table 和 Bootstrap Datepicker 的例子: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Table Demo</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.css"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> </head> <body> <div class="container"> <table id="table" data-toggle="table" data-url="data.json" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="date" data-formatter="dateFormat">Date</th> </tr> </thead> </table> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> <script> function dateFormat(value, row, index) { return value ? moment(value).format('YYYY-MM-DD') : ''; } $(document).ready(function() { $('#table').bootstrapTable(); $('#table').on('editable-save.bs.table', function(e, field, row, oldValue, $el) { if (field === 'date') { row.date = moment(row.date).toISOString(); } }); $('.datepicker').datepicker({ format: 'yyyy-mm-dd', autoclose: true }); }); </script> </body> </html> ``` 在这个例子中,我们首先引入了 BootstrapBootstrap Table 和 Bootstrap Datepicker 的 CSS 和 JavaScript 文件。然后在 HTML 中创建一个表格,并指定了数据源、分页、搜索、刷新、切换列等选项。 表格中的日期列使用了 `data-formatter` 属性来指定自定义格式化函数 `dateFormat`,这个函数使用了 Moment.js 库来将日期格式化成 YYYY-MM-DD 的形式。 在 JavaScript 中,我们使用了 jQuery 的 `$(document).ready()` 函数来初始化 Bootstrap Table,并在表格保存编辑后将日期格式化成 ISO 8601 格式。我们还使用了 Bootstrap Datepicker 来创建一个日期控件,以便用户可以方便地选择日期。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值