bootstrap收集系列

From:http://www.jqpress.com/post/354.aspx

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

 

bootstrap收集系列_第1张图片

 

  Bootstrap 的口号是 Designed for everyone, everywhere.(适用于任何场景,适用于每一个人),主要有以下特色:支持所有主流浏览器、12列栅格布局、响应式设计、样式化的文档以及常用的定制的 jQuery 插件等等。Bootstrap 已经足够强大,能够实现各种形式的Web 界面。为了能够充分利用 Bootstrap 的强大功能,下面向打击推荐12款各种各样工具和资源来配合 Bootstrap 使用。

 

jQuery UI Bootstrap

这个 jQuery UI 主题,对于 jQuery 的使用者来说是个非常好的资源,能够把 Bootstrap 的清爽界面组件引入到 jQuery UI 中。

 

bootstrap收集系列_第2张图片

 

Bootstrap Image Gallery

Bootstrap Image Gallery 是 Bootstrap 模态对话框的一个扩展,用于实现相册浏览功能,支持按键导航,幻灯片展示以及全屏浏览。

 

bootstrap收集系列_第3张图片

 

jQuery Mobile Bootstrap Theme

和 jQuery UI 主题类似,这是一个基于 Twitter Bootstrap 的 jQuery Mobile 主题,让你的移动应用用上 Bootstrap 界面。

 

bootstrap收集系列_第4张图片

  

Colorpicker and Datepicker for Bootstrap

Twitter Bootstrap 有非常多的内置 jQuery 插件,但是没有颜色选择器和日期选择器,这个插件是个非常好的补充。

 

bootstrap收集系列_第5张图片

 

StyleBootstrap.info

Twitter Bootstrap 提供了定义好的几种界面风格,如果你想有更多更个性化的配色的话,这个工具可以帮上你的大忙。bootstrap收集系列_第6张图片

 


 

Beautiful Buttons for Bootstrappers

清爽漂亮的按钮是 Twitter Bootstrap 最吸引人的特色之一,这个在线的按钮设计工具可以帮助你制作更多风格的按钮样式。

 

bootstrap收集系列_第7张图片

 

Bootswatch

Twitter Bootstrap 的默认主题已经非常漂亮了,但是如果你想有一个与众不同的外观,那么这个主题选择工具可以帮助到你。

 

bootstrap收集系列_第8张图片

 

Fbootsrapp

相当于 Twitter Bootstrap的一个 Facebook 主题,包含表单、按钮、表格、导航等等 Facebook 风格的界面组件。

 

bootstrap收集系列_第9张图片


Bootstrap Fireworks

对于使用 Fireworks 进行界面设计朋友,Bootstrap Fireworks 非常有用,它提供了一组矢量图形。

 

bootstrap收集系列_第10张图片

 

Django Bootstrap Toolkit

这个一个把 Django 和 Twitter Bootstrap 集合起来使用的工具包,相信 Django 的粉丝们会喜欢。

 

bootstrap收集系列_第11张图片

 

Bootstrap PSD

这个设计套件包含 Twitter Bootstrap 所有的基本组件的 PSD 源文件,包括字体、按钮、网格和导航等等。

 

bootstrap收集系列_第12张图片

 

BootstrapWP

如果你的 WordPress 博客也想换上 Twitter Bootstrap 界面的话,这个 WordPress 主题就是你需要的。

 

bootstrap收集系列_第13张图片

 

下面列出了更多基于 Twitter Bootstrap 的 WordPress 主题:

  • Roots Theme
  • Bootstrap
  • Bootstrap for WordPress
  • Bootstrap for WP
  • StrapPress
  • WPBS

 

1. Fuel UX

bootstrap收集系列_第14张图片

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

2. BootMetro

bootstrap收集系列_第15张图片

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

3. WYSIHTML5

bootstrap收集系列_第16张图片

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

4. jqBootstrap Validation

bootstrap收集系列_第17张图片

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

5. ColorPicker

bootstrap收集系列_第18张图片

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

6. DatePicker

bootstrap收集系列_第19张图片

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

7. TimePicker

bootstrap收集系列_第20张图片

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

8. DateRange Picker

bootstrap收集系列_第21张图片

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

9. Bootbox JS

bootstrap收集系列_第22张图片

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

10. jQuery UI Bootstrap

bootstrap收集系列_第23张图片

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

11. jQuery File Upload

bootstrap收集系列_第24张图片

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

12. DataTables

bootstrap收集系列_第25张图片

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

13. Bootsnipp

bootstrap收集系列_第26张图片

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

 

ASP.NET MVC4主题

http://nuget.org/packages/twitter.bootstrap.mvc4

bootstrap中文站:

http://www.bootcss.com/

你可能感兴趣的:(前台,bootstrap)