金沙澳门官网下载app > 摄影 > 40个有用的Bootstrap工具和WEB开发工具,40个实用的

原标题:40个有用的Bootstrap工具和WEB开发工具,40个实用的

浏览次数:194 时间:2019-09-26

Bootstrap的出现可以说让很多程序员相当的兴奋。在漫长的过去,我们看到过很多呆板的原型网页,简单甚至粗暴,毫无设计感和色彩感可言。那是一个个技术大牛们痛苦的拉出的界面。随着网页设计师的出现,慢慢的网站建设开始从单一的程序员一条龙服务开始转变为网页设计师和程序员来共同完成。但是对于很多喜欢自己捣鼓的程序员来说,如果有一条完整统一的样式可以调用,那是多么美好的一件事情。于是,伟大的Bootstrap终于诞生啦。淡然,Bootstrap不仅仅是程序员的福音。很多前端设计师也开始使用起来。因为其高效的架构,通用的维护,甚至可以设计的相当时尚,还有很多插件和扩展可以直接调用。还有什么不爱的理由呢!今天我们要分享出的就是类似这样的一些优秀的Bootstrap扩展和插件。可以让你的网站架构更加高效。赶快来看看吧!

对于现在很多公司在设置网页制作这一部分的时候,已经开始越来越细化其中的工作分类。从几年前的先设计后制作的网页制作职位,到现在的网页艺术设计和WEB前端设计,动画等都已经分工明确起来。网页在这几年迅速发展的同时也催生了很多新的技术分类。这是好事,可以更细化让成品变得更精致,让维护变得更轻松。那么如果你是一名WEB前端人员那么你一定对这两年来很风光的一些前端框架一定不会陌生。比如Bootstrap等。这些属于前端框架,这些框架制定了一套自己的规则。你可以按照这套规则去快速架构出一个前端界面和网站出来。非常便捷。这将是一个非常大的趋势。今天我们要分享的就是这样的一些工具。这些工具可以让你在以后的设计和开发中大大提高效率。让很多不可能变成可能。Twitter Bootstrap WordPress Themes

Bootstraptor

If you think that bootstrap templates are not enough for you, you should go with bootstraptor. You will have a wide range to select from, which automatically gives you a lot of interesting things to work with.

金沙澳门官网下载app 1

前阵子自己用jsp开发个人Blog,思来想去还是Bootstrap用着顺手了,顺便也整理了一些网上有关Bootstrap的一些漂亮插件分享给大家。
使用方法大同小异,下载下来然后指定标签的class属性即可.
eg:

Bootstrap Calendar

Brag Themes provides high quality, unique WordPress themes that utilize the Twitter Bootstrap framework for your business and personal sites.

Brag Themes

Looking for some new themes? Well, Brag Themes is the best option for you if you are looking to give your websites a whole new look. Brag Themes has a lot of features and the themes will are a lot different from the regular bootstrap themes.

金沙澳门官网下载app 2

<input type="textarea" class="wysihtml5"/>

Full view calendar with year, month, week and day views based on templates with Twitter Bootstrap.

金沙澳门官网下载app 3

Bootply

I would call Bootply a playground for programmers where they can experiment with different things while using bootstrap, CSS, JavaScript, and jQuery. This will help you in checking your website’s compatibility with various mobile devices and desktops.

金沙澳门官网下载app 4

1. 可视化编辑器

  1. bootstrap-wysihtml5

    A Javascript plugin that makes it easy to create simple WYSIWYG editors

2.[**Summernote**](https://link.jianshu.com?t=http://hackerwins.github.io/summernote/)  

A simple WYSIWYG editor for Bootstrap

金沙澳门官网下载app 5

Kickstrap

Bootstrap CDN

A programmer who is looking for ways to load their websites a lot faster, well Bootstrap CDN is perfect for them.

金沙澳门官网下载app 6

2. 日期选择器

  1. Datepicker

    A plugin for adding a datepicker field to any element

  2. ClockPicker

    A unique clock-style timepicker for Bootstrap

Bootstrap Modal Carousel

A complete kit for making websites. The first of its kind, Kickstrap is a no-install front-end framework with apps, themes, and extras.

Bootstrap Prompts

As the name suggests, it will help you in replacing notification alerts along with modal information, with the help of Bootstrap application.

金沙澳门官网下载app 7

3.数据分析生成器

  1. Date Range Picker

    This date range picker component creates a drop-down from which you can select a range of dates Extending Bootstrap

A set of plugins to display a carousel into a fullscreen modal box.

金沙澳门官网下载app 8

Pines Notify

Pined Notify is basically to build a notification plugin of Javascript which is easy, malleable and implementable.

金沙澳门官网下载app 9

4.对话框提示框

  1. Bootbox.js

    small JS library that allows you to create programmatic dialog boxes using Bootstraps modals

金沙澳门官网下载app 10

Bootply

prettyCheckable

prettyCheckable replaces inputs of radio and other checkboxes in order to provide them with better positions.

金沙澳门官网下载app 11

5.文件上传插件

  1. jQuery File Upload

    A file upload widget which features multiple file selection, drag & drop, progress bars

Css3 Microsoft Metro Buttons

Bootply makes it easy to use other popular plugins, micro-libraries and frameworks.

Bootstrap Tags

Bootstrap Tags is basically a jQuery Plugin and it helps in extending Userinterface of Bootstrap. It also allows tagging, autosuggests, exclusions, placeholder prompts, filters, and popovers.

金沙澳门官网下载app 12

6.表单验证插件

  1. BootstrapValidator

    [API]() A jQuery plugin for vaildating forms within Bootstrap

  2. jqBootstrapValidation

    jqBootstrapValidation</strong></a> – Another jQuery validation framework for Bootstrap”/></p><br /><p><a target=

My CSS3 library for making Microsoft-metro themed buttons.

金沙澳门官网下载app 13

jQuery File Upload

Since it is a jQuery file upload, it provides users with a platform having multiple options at the same time. You will have preview images, progress bars, and drag & drop feature. It also helps you in backing up resized images, resume process of file uploads and a lot more.

金沙澳门官网下载app 14

7.相册插件

  1. Image Gallery

    plugin shows images and videos in the modal dialog of the Bootstrap

2.[** Bootstrap File
Input**](https://link.jianshu.com?t=http://plugins.krajee.com/file-input)  
[](https://link.jianshu.com?t=https://camo.githubusercontent.com/187b76c156ed53e1e7c29266ee19b164be192ffe/68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f2d334669456d635f6f6b63342f5642775f64324c42414a492f4141414141414141414c382f4b62566a355839447573302f773539362d683435342d6e6f2f46696c65496e7075742e6a7067)
![](https://camo.githubusercontent.com/187b76c156ed53e1e7c29266ee19b164be192ffe/68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f2d334669456d635f6f6b63342f5642775f64324c42414a492f4141414141414141414c382f4b62566a355839447573302f773539362d683435342d6e6f2f46696c65496e7075742e6a7067)
File Input Screenshot

金沙澳门官网下载app 15

Bootstraptor

jQuery Simple Color Picker

Indeed a simple and easy to use plugin. It basically provides you with a list of colors allowing you to select multiple ones. The best part is, it actually complements Bootstrap.

金沙澳门官网下载app 16

8.文字编辑

  1. X-editable

    A library that allows you to create editable elements on your Bootstrap page

  2. Bootstrap Markdown

    A plugin for enabling Markdown editing in Bootstrap

Bootstrap Prompts

Templates KIT & themes pack built with Bootstrap 3.0.v.

Bootstrap wysihtml5

It is basically based in plugin of Javascript and it permits web developers to construct beautiful yet simple wysiwyg editors.

金沙澳门官网下载app 17

9.标签

  1. Bootstrap Tags

    jQuery plugin for adding tagging functionality Bootstrap

  2. Tokenfield

    An advanced tagging jQuery plugin for Bootstrap

BootStrap Alert with modal instead of Browser alert.

金沙澳门官网下载app 18

Bootpag – Dynamic Pagination

Are you looking to create a pagination or HTML page in a vigorous set-up? Bootpag – dynamic pagination is the plugin for you.

金沙澳门官网下载app 19

10.Website Tour(新手指引!)

  1. Bootstrap Tour

    A quick and easy way to build your product tours with Bootstrap Popovers

  2. Bootstro.js

    Bootstro-js

金沙澳门官网下载app 20

Bootstrap Prompts

Bootstrap Modal

Bootsrap Modal is basically an extension of original bootstrap modals and its added feature has a modal manager which helps in handling multiple modals.

金沙澳门官网下载app 21

11.按钮

  1. 社交媒体按钮
    Social Buttons for Bootstrap

    A pure CSS social sign-in button library for bootstrap

先就这么多了,以后遇到更好的再补充。

Pretty Checkable

BootStrap Alert with modal instead of Browser alert.

Bootbox.js

Creation of programmatic dialog boxes just got easier. Bootbox.js is basically a small library, which helps in manaing, creating and removing event handlers of JS and of course rest of the DOM elements.

金沙澳门官网下载app 22

This plugin replaces the default checkboxes and radio inputs for better looking ones.

金沙澳门官网下载app 23

Datepicker for Bootstrap

This will help you in cleansing fields, elements and will help you with all sorts of formatting. It also cleanses component and separators.

金沙澳门官网下载app 24

金沙澳门官网下载app 25

Bootstrap wysihtml5

Bootstrap Video Player

This is an easy way to create a progress bar. You must have seen the progress bars where red bar represents danger/incompletion of something and green bar represents success and of course the orange one displays a warning. So, for all such messages Bootstrap Video Player is for you.

金沙澳门官网下载app 26

Jquery Simplecolorpicker

Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.

Hover Dropdown

I won’t say this to be an official bootstrap plugin however; it does activate hover via bootstrap dropdowns.

金沙澳门官网下载app 27

Yet another jQuery color picker. This plugin is unobtrusive and integrates well with Twitter Bootstrap (it works just fine without).

金沙澳门官网下载app 28

jQuery Form Validation with Styles

This tool has been established to help users while they are waiting for quick feedback. This tool has been built via jQuerya validation plugin.

金沙澳门官网下载app 29

金沙澳门官网下载app 30

Bootstrap Arrows jQuery Plugin

Bootstrap Image Gallery

This basically acts as an assistant or an extension of bootstrap modal dialog during navigations of images within a gallery. Some of the vital features of this tool are full screen mode, mouse, slideshow functionalities, transition effects, and keyboard navigation.

金沙澳门官网下载app 31

Bootstrap Combobox

A simple jQuery plugin and add-on to the popular Twitter Bootstrap framework to include the use of arrows at any angle in your UI designs.

Bootstrap Lightbox

It is formed via modal dialog that simplifies the use and functionality of bootstrap because of its lightbox.

金沙澳门官网下载app 32

A combobox plugin that works with twitter bootstrap.

金沙澳门官网下载app 33

Bootstrap Arrows jQuery Plugin

In case you want to point any arrow at whatsoever angle, within the bootstrap’s design, this is a best plugin for you.

金沙澳门官网下载app 34

金沙澳门官网下载app 35

Tablecloth.js

Tocify – A Bootstrap jQuery Table of Contents Plugin

If you want to create a table of contents this is a good plugin for you since it’s based on the jQuery plugin. Also, it is applicable for animation, styling, scrolling, forward, & back button support, extension of scroll page, and scroll highlighting.

Bootstrap Datepicker

tablecloth.js is a jQuery plugin that helps you easily style HTML tables along with some simple customizations.

CSS3 Microsoft Modern Buttons

If you want to create rich button designs and that too through the support of CSS3 styles, this lightweight tool is for you.

金沙澳门官网下载app 36

金沙澳门官网下载app 37

金沙澳门官网下载app 38

tablecloth.js

As a web designer, you can style HTML tables with this jQuery plugin.

金沙澳门官网下载app 39

A Date Range Picker for Bootstrap

WordPress Twitter Bootstrap CSS

X-Editable

As the name suggests, it allows web developers to create elements that can be edited in the longer directly on the website’s page.

金沙澳门官网下载app 40

金沙澳门官网下载app 41

WordPress Twitter Bootstrap CSS lets you include the latest Twitter Bootstrap CSS and Javascript libraries in your WordPress site.

Sublime Text 2 Bootstrap Snippets

It has great and worthy choices of classified Bootstrap code snippets from a fine text.

Clockpicker

金沙澳门官网下载app 42

Mobile-First Bootstrap Grid

It is basically formed to be when it comes to mobile screens and desktop screens. By default, it has a desktop style and also allows you to change the layout with media queries and it can be done on both mobile and desktop.

A clock-style timepicker for Bootstrap (or jQuery).

Jetstrap – Web-Based Interface Building Tool for Bootstrap

jQuery UI Bootstrap

It basically offers a theme which is compatible in Jquery UI. This particular theme is boosted by the design of Bootstrap. Since it has a bootstrap CSS version, it gets along very well with the theme.

金沙澳门官网下载app 43

Not just a mock-up tool, Jetstrap is the premier interface-building tool for Bootstrap 3.

MooTools for Bootstrap

It definitely gives you a much better functionality that twitter released. However, using its Javascript would be an issue but still it has the required tools and custom plugins that are really compatible with other MooTools.

Bootbox

金沙澳门官网下载app 44

Sass Bootstrap

You can opt for it if you prefer SASS that has CSS flavour than LESS of Bootstrap.

Wrappers for JavaScript alert(), confirm() and other flexible dialogs using Twitters bootstrap framework.

Bootstrap Button Generator

Grid Displayer Bookmarklet for Bootstrap:

Looking for any easy way to display the bootstrap’s grid? This is the best option for you. It definitely works well with the foundation.

金沙澳门官网下载app 45

金沙澳门官网下载app 46

Twitter Bootstrap Button Generator – the easiest way how to set up your buttons based on Twitter Bootstrap in a seconds.

Bootstrap-Ready Font Custom

You can follow a certain command line and create web fonts custom icon with Bootstrap-Ready Font Custom. You can also build styles as per naming conventions of boostrap by including this fontcustom.css.

金沙澳门官网下载app 47

Jquery Gridform

金沙澳门官网下载app 48

WordPress Bootstrap CSS

With this tool, you can work with almost any WordPress theme and that too without having any professional programming expertise.

金沙澳门官网下载app 49

jQuery-Plugin for creating complex forms (table-based) with usage of bootstrap and (optional) Font-Awesome.

Divshot – The Bootstrap Interface Builder for Web Apps

Jetstrap – Web-Based Interface Building Tool for Bootstrap

All you need to do is log into Jetstrap and build Bootstraps. Trust me, you need no programming skills for this as website is quite easy and self-explanatory.

金沙澳门官网下载app 50

As simple as a mockup tool. As powerful as a text editor.

Bootstrap Button Generator

This is probably the fastest tool if you are looking to get customize buttons for your bootstrap development. It’s very easy and simple.

JqBootstrap Validation

金沙澳门官网下载app 51

Divshot – The Bootstrap Interface Builder for Web Apps

You can have everything real quick when it comes to building web apps. All you need to do is combine the simplicity of drag-and-drop designing with complicated HTML and CSS programming.

A JQuery validation framework for bootstrap forms.

Bootstrap Lightbox

Bootstrap ThemeRoller – Customize the Look and Feel of Bootstrap

This tool makes the designing of Twitter Bootstrap way too easy. One click is all you need to change colors, sizes and fonts.

参考:

 


金沙澳门官网下载app 52

A simple lightbox plugin based on the bootstrap modal plugin.

Table clothjs

金沙澳门官网下载app 53

A CSS and JS bootstrap to style and manipulate data tables.

jQuery UI Bootstrap

金沙澳门官网下载app 54

A Bootstrap-themed kickstart for jQuery UI widgets (v0.5).

Bootstrap Navigable Table

金沙澳门官网下载app 55

A Bootstrap plugin for elegant navigating along table inputs.

X-Editable

金沙澳门官网下载app 56

This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes.

Bootstrap Confirmation

金沙澳门官网下载app 57

Javascript plug-in for Twitter bootstrap. Require JQuery and Bootstrap-Tooptip.js to run. This is in Beta state.

jQuery Simple Color Picker

金沙澳门官网下载app 58

Yet another jQuery color picker. This plugin is unobtrusive and integrates well with Twitter Bootstrap (it works just fine without). The source code only requires jQuery and is about 200 lines of JavaScript and 100 lines of CSS.

jQuery File Upload Demo

金沙澳门官网下载app 59

File Upload widget with multiple file selection, drag and drop support, progress bar, validation and preview images, audio and video for jQuery.

jQuery File Upload

金沙澳门官网下载app 60

File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.

Bootstrap Image Gallery

金沙澳门官网下载app 61

Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and customizable image and video gallery.

Pines Notify

金沙澳门官网下载app 62

JavaScript notifications for Bootstrap or jQuery UI.

X-editable

金沙澳门官网下载app 63

In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery.

PrettyCheckable

金沙澳门官网下载app 64

This plugin replaces the default checkboxes and radio inputs for better looking ones.

jQDraw Bootstrap Grid

金沙澳门官网下载app 65

A simple jQuery plugin that draws grid columns to a twitter bootstrap enabled layout.

Bootpag – Dynamic Pagination

金沙澳门官网下载app 66

This is bootpag – dynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone.

Bootstrap Magnify

金沙澳门官网下载app 67

Small bootstrap js plugin to enhance porte-folios and image galleries.

BootTheme

金沙澳门官网下载app 68

Create Themes, Mockups, Websites.

Bootstrap Markdown

金沙澳门官网下载app 69

Bootstrap plugin for markdown editing.

Built With Bootstrap

金沙澳门官网下载app 70

A showcase of sites and apps built with BootstrapSubmit Your Site.

Bootstrap Modal

金沙澳门官网下载app 71

Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Fuel UX

金沙澳门官网下载app 72

Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.

Bootstrap Scroll Modal

金沙澳门官网下载app 73

A modification of the Twitter Bootstrap Modal plugin – allows for any height modal with full page scrolling of said modal.

Grid Displayer Bookmarklet for Bootstrap

金沙澳门官网下载app 74

In-browser web design made easier with this bookmarklet which displays the grid of your favourite front-end framework.

MetisMenu

金沙澳门官网下载app 75

Easy menu jQuery plugin for Twitter Bootstrap 3.

Lavish – Generate your own Bootstrap Color Scheme

金沙澳门官网下载app 76

Generate your own Bootstrap color scheme from an image and customize to your taste.

Bootstrap Contextmenu

金沙澳门官网下载app 77

Context menu plugin for Twitters Bootstrap framework.

BootMetro Tool

金沙澳门官网下载app 78

Simple and flexible web framework to create elegant and modern web applications with the same look & feel of Windows 8.

Jquery Bootpag

金沙澳门官网下载app 79

This jQuery plugin helps you create dynamic pagination with Bootstrap or in any other html pages.

Flat UI Free

金沙澳门官网下载app 80

Flat UI Free is made on the basis of Twitter Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers.

Twbs Pagination

金沙澳门官网下载app 81

金沙澳门官网下载app 82

jQuery-Mobile-Bootstrap-Theme

Bootstrap Social

A jQuery Mobile theme based on Twitter Bootstrap.

Social Buttons made in pure CSS based on Bootstrap and Font Awesome!

金沙澳门官网下载app 83

金沙澳门官网下载app 84

Initializr Bootstrap Tool

Bselect

Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!

The select decorator component that was missing for Twitter Bootstrap.

金沙澳门官网下载app 85

金沙澳门官网下载app 86

Modern WordPress Theme Development

Bootstrap Multiselect

Roots is a WordPress starter theme based on HTML5 Boilerplate & Bootstrap that will help you make better themes.

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present.

金沙澳门官网下载app 87

金沙澳门官网下载app 88

Bootstrap Tags

Bootstrap Multisuggest Plugin

Javascript tagging for Twitter Bootstrap (Written in CoffeeScript)

金沙澳门官网下载app 89

金沙澳门官网下载app 90

Bootstrap Tags

Datepicker for Bootstrap

Bootstrap Tags is a jQuery plugin meant to extend Twitter Bootstrap to include tagging functionality.

Add datepicker picker to field or to any other element.

金沙澳门官网下载app 91

金沙澳门官网下载app 92

Tocify

金沙澳门官网下载app ,Hover Dropdown

A jQuery Table of Contents plugin that can be themed with Twitter Bootstrap or jQueryUI.

An unofficial Twitter Bootstrap plugin to enable Twitter Bootstrap dropdowns to activate on hover and provide a nice user experience.

金沙澳门官网下载app 93

金沙澳门官网下载app 94

Tokenfield

jQuery Form Validation with Styles

金沙澳门官网下载app 95

The jQuery Validate plugin by Jorn Zaefferer is a fantastic tool for providing users with immediate feedback while completing a web form.

Tabcordion

金沙澳门官网下载app 96

A jQuery plugin that transforms Bootstrap tabs to an accordion and vice versa. Useful for responsive mobile sites.

Sublime Text 2 Bootstrap Snippets

金沙澳门官网下载app 97

A bunch of nicely described and categorized Twitter Bootstrap code snippets for Sublime Text editor.

Bootstrap Tabcollapse

金沙澳门官网下载app 98

Bootstrap Tab Collapse plugin. Switches bootstrap tabs component to collapse for small screens.

Bootstrap ThemeRoller – Customize the Look and Feel of Bootstrap

金沙澳门官网下载app 99

A handy and intuitive application that provides a visual interface to customize your favorite Bootstrap from Twitter.

Easy Tree

金沙澳门官网下载app 100

A jquery and bootstrap basic tree view plugin, easily use.

PaintStrap

金沙澳门官网下载app 101

Generate beautiful Twitter Bootstrap themes using the Adobe kuler / COLOURlovers color scheme.

BootstrapTreeNav

金沙澳门官网下载app 102

Tree navigation plugin for Twitter Bootstrap 3.0

Bootstrap Modal

金沙澳门官网下载app 103

Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Bootstrap Tour

金沙澳门官网下载app 104

Quick and easy product tours with Twitter Bootstrap Popovers.

Bootbox.js Bootstrap Tool

金沙澳门官网下载app 105

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitters Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

Read more:

金沙澳门官网下载app 106

Bootswatch

Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.

金沙澳门官网下载app 107

本文由金沙澳门官网下载app发布于摄影,转载请注明出处:40个有用的Bootstrap工具和WEB开发工具,40个实用的

关键词:

上一篇:没有了

下一篇:没有了