β

推荐50个很实用的Bootstrap插件

程序开发者博客 2578 阅读

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。

本文向你推荐 50 个 Bootstrap 的插件,可以考虑在你下一个项目中使用它们。

1. Bootstrap Multiselect

Bootstrap Multiselect

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.

2. Bootstrap Dialog

BootstrapDialog

Bootstrap Dialog is a flexible modal for Bootstrap 3 using pure javascript. It has many options and methods to customize.

3. Bootstrap Confirmation

Bootstrap Confirmation

Bootstrap Confirmation is a jQuery plugin for Bootstrap that uses Bootstrap Popovers as confirmation dialogs. It’s simple and easy.

4. Bootstrap Tag Input

Bootstrap Tags Input

Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

5. Bootstrap File Input

bootstrap-file-input

An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. This plugin is inspired by this blog article and Jasny’s File Input plugin. The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input. It offers support for previewing a wide variety of files i.e. images, text, html, video, audio, flash, and objects.

6. Bootstrap WYSIWYG

Bootstrap WYSIWYG

This tiny (5KB, less than 200 lines) jQuery Bootstrap plugin turns any DIV into a WYSIWYG rich-content editor, inspired by CLEditor and bootstrap-wysihtml5, it automatically binds standard hotkeys for common operations on Mac and Windows, drag and drop files to insert images, support image upload (also taking photos on mobile devices) .

7. Bootstrap Select

Bootstrap select

Bootstrap Select is a custom select / multiselect for Bootstrapusing button dropdown, designed to behave like regular Bootstrap selects.

8. pNotify

PNotify

PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. PNotify provides desktop notifications based on the Web Notifications Draft. If desktop notifications are not available or not allowed, PNotify will fall back to displaying the notice as a regular, in-browser notice.

9. Bootstrap Forms Helper

bootstrap form helpers

Bootstrap Form Helpers is a collection of jQuery plugins to help you build better forms. The plugins can be used individually but some of them work together like Countries and States.

10. Pongstagr.am

ponstagram

Pongstagr.am is a jQuery plugin that lets display your instagram media to your website using Bootstrap Front-end styles and modal-plugin.

11. X-editables

X-editable

X-editable supports in-place editing with Twitter Bootstrap, jQuery UI or pure jQuery. This library allows you to create editable elements on your page. It includes both popup and inline modes. It’s new life of bootstrap-editable plugin that was strongly refactored and improved.

12. Bootstrap Lightbox Plugin

Bootstrap-Lightbox

A simple lightbox plugin based on the bootstrap modal plugin.

13. Editable Table

editable table widget

Editable Table is a tiny jQuery plugin turns any table into an editable spreadsheet. It supports validation and change events (so you can warn about invalid input or prevent invalid changes) and works well with Bootstrap.

14. Timepicker

Timepicker

A simple timepicker component for Twitter Bootstrap. A widget to easily select a time for a text input using your mouse or arrow keys.

15. ClockPicker

colorpicker

A clock-style timepicker for Bootstrap a jquery plugin.Both desktop and mobile device are supported. It also works great in touch screen device.All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8.

16. Bootstrap Video Player

bootstrap video player

A customizable HTML5 video player plugin for jQuery based onBootstrap UI.

17. Bootstrap Progressbar

bootstrap-progressbar

Bootstrap-progressbar is a jQuery plugin which extends the basic twitter-bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.

18. jQuery Sortable

jQuery Sortable

jQuery Sortable is a flexible, opinionated sorting plugin. It enables items in a list (or table etc.) to be sorted horizontally and vertically using the mouse. Supports nested lists and pure drag/drop containers.

19. Bootstrap Star Rating

Bootstrap Star Rating

A simple yet powerful JQuery star rating plugin for Bootstrap which supports advanced features like fractional star fill and RTL input support. Developed with a focus on utlizing pure CSS-3 styling to render the control.

20. Bootstrap Growl

Bootstrap-growl

Pretty simple jQuery plugin that turns standard Bootstrap alerts into hovering “Growl-like” notifications. It has number of features such as it uses standard Twitter Bootstrap alerts which provides ‘info’, ‘error’, and ‘success’ styles, and multiple growls called consecutively are stacked up one after another in a list.

21. Feedback Me

feedbackme

Feedback Me is a jQuery plugin allows user to easily add an animatable UI widget with a feedback form which slides from the side of the screen.

22. Bootstrap Image Gallery

Bootstrap Image Gallery

Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and customizable image & video gallery. It displays images and videos in the modal dialog of the Bootstrap framework, features swipe, mouse and keyboard navigation, transition effects, fullscreen support and on-demand content loading and can be extended to display additional content types.

23. jQuery Pagination Plugin

jQuery-Pagination-plugin

This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes:.pagination (you change this one), .active and .disabled.

24. Tokenfield

Tokenfield for Bootstrap

Advanced tagging/tokenizing plugin for jQuery and Twitter Bootstrap with a focus on keyboard and copy-paste support.

25. Context.js

ContextJS

context.js is a lightweight solution for contextual menus. Currently, there are two versions. The first is to be used with Twitter Bootstrap (bootstrap.css specifically). If you do not use or want to use bootstrap.css, there is a standalone stylesheet to give the menu it’s base styles.

26. MetisMenu

metisMenu

metisMenu is a jQuery menu plugin for Bootstrap 3. You can create collapsible menu with animated accordion effects and auto collapse support.

27. Bootstrap Tabcordion

Tabcordionjs

A simple jQuery plugin that transforms a set of Bootstrap tabs into a Bootstrap accordion. It can be configured to perform this transformation based on the size of the container or viewport to provide responsive awesomeness to your buzzword-rich UI.

28. jQuery Bootstrap Style Dropdowns

jQuery Bootstrap style Dropdowns

Bootstrap-style dropdowns with some added features and no dependencies.

29. MagicSuggest

MagicSuggest

MagicSuggest is highly flexible auto suggest combo box in the line of Bootstrap themes. It is many configuration options that you can customize.

30. Bootstrap ColorPicker Sliders

Bootstrap-Color-Picker-Sliders

A Bootstrap 3 optimized advanced responsive color selector with color swatches and support for human perceived lightness. Works in all modern browsers and on touch devices.

31. Filterable

Filterable

Filterable is a jQuery plugin that preforms per-column filtering for an HTML table with Bootstrap and X-editable themes.

32. Tag Manager

tag manager

Tag Manager is a jQuery plugin to create tag input fields, which works nicely with Bootstrap.

33. Bootstrap Tour

Bootstrap-Tour

Quick and easy way to build your product tours with Twitter Bootstrap Popovers.This library does not depend on the full Bootstrap package. The only dependencies are the tooltip and popover files.Bootstrap Tour saves the current step and will not display the tour again to users who have already completed it.

34. Bs Grid jQuery Datagrid

bs Datagrid

bs_grid is a jQuery Datagrid plugin, based on Bootstrap. Advanced row selection, sorting, pagination and filtering. Fully customizable, responsive web design, localization.

35. Bootpag

bootpag

Bootpag is a dynamic pagination jQuery plugin. Works well with Twitter Bootstrap or any other html pages.

36. jQuery Bootgrid

jquery bootgrid

jQuery Bootgrid is a nice, sleek and intuitive grid plugin especially designed for Bootstrap.

37. GridManager.js

gridmanagerjs

Gridmanager.js is a way of building rows and grids with built in editable regions; requires jQuery, jQueryUI, Bootstrap 3.x, & optional TinyMCE or CKEditor.

38. Bootstrap Markdown

Bootstrap-Markdown

Simple Markdown editing tools that works. Bootstrap-Markdown designed to be easily integrated with your bootstrap project. It exposes useful API that allow you to fully hook-in into the plugin.

39. Summernote

summernote

Summernote is a simple, clean and flexible WYSIWYG Editor that is built on top of jQuery and Bootstrap. It supports Bootstrap’s both active versions (2 and 3) and has keyboard shortcuts for all major tasks. There is a powerful API which provides lots of customization options in means of design (width, height, active items..) and functionality.

40. Nod

Nod

Nod is a jQuery plugin that gives you frontend validation for forms. While it isn’t strictly Bootstrap dependent, it defaults to the structure that Bootstrap uses for its forms. However it should be flexible enough to accomodate most any structure.

41. Date Range Picker Plugin

data-range-picker-plugin

This date range picker plugin for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates. It was created for the reporting UI at Improvely. If invoked with no options, it will present two calendars to choose a start and end date from.

42. jQDraw BootstrapGrid

jQDrawBootstrapGrid

A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid).

43. Bootstrap Max Length

BootStrap MaxLength

Bootstrap MaxLength plugin integrates by default with Twitter Bootstrap using badges to display the maximum lenght of the field where the user is inserting text. This plugin uses the HTML5 attribute “maxlength” to work.

44. WebUI Popover

WebUI Popover Demo

WebUI Popover is a lightweight jQuery popover plugin that enchance the popover plugin of Bootstrap with some awesome new features. It works well with Bootstrap.

45. jQuery Validation Bootstrap Tooltip

jQuery Validation Bootstrap tooltip

A drop in extension replacing error labels from jQuery Validation plugin with Bootstrap tooltips.

46. Bootstrap Star Rating

Bootstrap Star Rating

Bootstrap Star Rating is a simple yet powerful jQuery star rating plugin with fractional rating support.

47. Bootstrap File Style

bootstrap file style

Bootstrap FileStyle jQuery customization of input html file forBootstrap. It’s a quick and simple plugin to help style your form’s file upload inputs.

48. SCO.js

scojs

sco.js is javascript extensions for Twitter Bootstrap that is created to improve the existing Bootstrap components. All plugins in sco.js can be used on a bootstrap-enabled site but they can be used separately as well. Also, sco.js contains plugins that are not available in bootstrap.

49. Bootstrap Show Password

bootstrap show password

Bootstrap Show Password is a jQuery plugin to show/hide password plugin for Bootstrap.

50. Alpaca

Alpaca  Easy Forms for jQuery

Alpaca is the Easy Forms Engine for jQuery / Bootstrap. It is built around JSON schema to keep things simple. Using Alpaca, you can express your forms object model, types, properties and validation logic.



















Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。

本文向你推荐 50 个 Bootstrap 的插件,可以考虑在你下一个项目中使用它们。

作者:程序开发者博客
Coding is 用智慧开创属于自己的事业!
原文地址:推荐50个很实用的Bootstrap插件, 感谢原作者分享。

发表评论