超棒的 15 款 Bootstrap UI 编辑器

自从 2011 年 Mark Otto 和 Jacob Thornton 开发了 Bootstrap,我们第一次接触并熟知了 Bootstrap 。这些都归功于 Twitter!从那以后,它就非常流行并且成为了最好的响应式框架之一。Bootstrap 帮助开发者快速高效的开启大量新的 web 项目,受到了广大开发者们的青睐。

为了照顾那些不是很熟悉 Bootstrap 但是又想继续深入了解的开发者,我们在这里简单的介绍一下。Bootstrap 是一个 pre-styled 组件的扩展库,有着大量的附件和非常好用的插件,可以帮助开发者们快速的开始他们的新项目。

好了,回归今天的主题,这里介绍的是 15 款最好的 Bootstrap 设计工具和资源,也可以说是 UI 编辑器或者是在线编辑工具。这些超棒的 Bootstrap UI 编辑器允许开发者们自定义设计框架,实现他们心中每个关于 web 的设想。

下面的列表就是精心挑选好的超棒 Bootstrap UI 编辑器,分享给所有的开发者和喜爱 Bootstrap 的朋友,不用再为找不到合适的 Bootstrap 设计工具而烦恼,也不用在众多 Bootstrap 设计工具中徘徊迷茫了!好好阅读下面的列表,找到适合你的那一款 Bootstrap UI 编辑器吧:)

http://static.oschina.net/uploads/img/201401/22215705_PEMm.jpg" >

  1. Bootstrap Magic

这是一个 Bootstrap 主题生成器,使用最新的 Bootstrap 3 版本和 Angular JS 版本,提供一个鲜活的用户修改预览。它包括了各种各样的导入,一个颜色选择器和智能的预先输入。更神奇的是,Bootstrap 会根据用户的每个选择来重新简历框架,方便用户的下载和使用。

http://static.oschina.net/uploads/img/201401/22215710_yitT.jpg" >

  1. BootSwatchr

BootSwatchr 是由 Drew Strickiand 独立开发和维护的,是唯一支持从右到左语言显示的 Bootstrap 自定义构建工具,这也是它的特色之一。BootSwatchr 是个可视化的工具,可以从底层开始创建 Bootstrap 主题。

http://static.oschina.net/uploads/img/201401/22215711_y5FZ.jpg" >

  1. Bootstrap Live Editor

Bootstrap Live Editor 是个所见即所得的构建 Bootstrap 的编辑器。在 Bootstrap 准备好的内容和代码片段的基础上提供一个又好又优雅的方法来编辑和美化 html,也因此它是个明智的选择。除此之外,它还包括高级的选项比如按钮配置,自定义标签和为用户做最明智最有益的选择。

  1. Fancy Boot

Fancyboot 是个非常有用的 Bootstrap 自定义工具,允许用户编辑 Bootstrap 的配置,自动预览他们的修改结果。通过滑动菜单可以选择需要使用的插件和组件。当用户做好了相应的修改,可以下载一个包含用户所使用的 jQuery 插件的编译好的和简化后的 CSS 文件。

  1. Style Bootstrap

Style Bootstrap 是个非常棒的内置浏览器的 GUI 实用工具,帮助用户自定义 Twitter Bootstrap 外观。它非常容易进行自定义操作。从 body 风格,字体排版,按钮,导航,格式,通知提示和其他用户很容易根据自己的意愿自定义的元素。除了强大的自定义功能,它还可以很容易生成可下载的 CSS 文件。

http://static.oschina.net/uploads/img/201401/22215713_gq0E.jpg" >

  1. Lavish

Lavish 是个帮助用户从一个图像中定制自己喜欢的 Bootstrap 配色方案。用户可以从图像中选择各种颜色用在 body 背景,链接,头部,菜单,标签,文本,下拉菜单等等元素上。一旦你确定了 Bootstrap 配色方案,就可以很方便的下载相应的 Boostrap.css 文件。

http://static.oschina.net/uploads/img/201401/22215714_JqIF.jpg" >

  1. Bootstrap ThemeRoller

Bootstrap ThemeRoller 是个直观的 web 应用程序, 提供一个可视化的界面让用户按照自己的风格创建属于自己的 Bootstrap 主题。有了这个工具,用户可以自定义颜色,大小,字体,格式,表,按钮,警告信息,导航条,菜单等等元素。

这个应用还会帮用户创建的每种风格都生成唯一的一个 URL ,这样就可以保存用户所有的设置。更不可思议的是,当用户离开的时候,用户可以停止或者恢复自己定制的页面。

http://static.oschina.net/uploads/img/201401/22215715_Q4F0.jpg" >

  1. LayoutIt!

LayoutIt!拥有拖拽接口的功能,能简单迅速的构建一个 Bootstrap 前端代码。LayoutIt! 兼容任何的编程语言,允许用户下载 HTML ,在这里自由的进行编码设计。

http://static.oschina.net/uploads/img/201401/22215715_C14q.jpg" >

  1. Pingendo

Pingendo 是个可视化的桌面应用程序,允许用户给予流行的 Twitter Bootstrap 框架创建响应式 web 页面原型。Pingendo 还提供大量的现成的布局,拖拽元素的位置,调整大小和自定义的功能。用户可以自行优化他们的页面,插入他们自己的内容。

http://static.oschina.net/uploads/img/201401/22215716_CphP.jpg" >

  1. Kickstrap

Kickstrap 是个 Bootstrap UI 编辑器,使用 Firebase 作为一个后台服务。它无缝的接合了 Bootstrap 和顶级的 web 技术。更厉害的是,它可以运行一个已验证的,不需要本地后台支持,数据库驱动的 web 应用。

http://static.oschina.net/uploads/img/201401/22215718_5aZF.jpg" >

  1. Bootply

Bootply 是一款很棒的 Bootstrap UI 编辑工具,尽可能简单的让用户编辑 Bootstrap 友好的 CSS ,HTML 和 Javascript 。同时也是一个可拖拽的可视化编辑器,用来设计,创建原型和测试 Bootstrap 框架。Bootply 有个代码存储库,里面包括了 Bootstrap 代码片段,示例和模板。除了以上这些,更吸引人的是它有个非常活跃的 Bootply 社区,用户可以很方便的发现,分享和展示相关的代码和片段。

  1. X-editable

X-Editable 是一个扩展库,允许用户创建可编辑的元素,比如页面弹出和内联模式。她提供本地的 Bootstrap,jQuery UI 或者是纯 jQuery 编辑功能。此 Bootstrap UI 编辑器拥有许多很强大的功能,包括客户端,服务端验证,支持键盘,live 事件,可定制的容器空间等等。总而言之,它提供非常快速的开发功能,易于删除字段,一个用来更新数据的简简单后台脚本。

  1. Jetstrap

不要错误的以为 Jetstrap 只是个简单的实体模型工具,它是 100% 基于 web 接口的 Twitter Bootstrap 构建工具。用户不需要下载任何类型的软件就可以使用 Jetstrap。用户只需要登录,然后构建自己的项目,就可以随时随地进行访问了。构建功能主要是提供给开发者和设计者的,用户很容易就可以通过 Jetstrap 生成漂亮的网站,而且运行速度非常快

  1. DivShot

DivShot 是个快速的,可视化的前端开发文本编辑器,跟 mockup 工具一样的简单整洁。包括各种框架需要的各种定制的组件库,这是它提供的最好的工具之一。除此之外还包括了一个主题转换器,允许用户修改主题。试验版本是免费的,过了试验期就需要自己付费维持原来的服务了。

  1. PaintStrap

PaintStrap 使用 Adobe kuler/COLOURlovers 颜色组合来生成漂亮的 Twitter Bootstrap 主题。这个工具特别容易安装,同时很容易下载 CSS 文件并且也很容易替换成另一个标准的文件。

http://static.oschina.net/uploads/img/201401/22215744_BxJa.jpg" >

如果我问你哪个 Bootstrap UI 编辑器是你想要的,你最终选择了哪一个,那么你的答案是什么呢?跟我们分享一下你的选择和你选择的理由吧,顺便可以谈谈你对这些超级棒的 Bootstrap UI 编辑器的看法哦:)
via thedesignblitz.com

文章转载自 开源中国社区 [http://www.oschina.net]

时间: 2024-10-23 17:46:17

超棒的 15 款 Bootstrap UI 编辑器的相关文章

超棒的20款javascript工具提示条(tooltips)类库(转)

大家在网站开发和设计过程中,往往需要提示用户某些功能或者相关消息,而HTML自带的title属性又往往不够强大,经常需要我们自己去开发相关的工具提示条功能.为了帮助大家更好的开发相关的工具提示条功能,这里我们收集了一套超棒的javascript和javascript类库,如果你不清楚如何选择这些类库的话,请关注我们的"web前端最佳实践"系列中的tooltip工具条选择.希望大家喜欢! Qtip2  可能大家都听说过Qtip,不过这个jQuery插件已经不再维护和开发,取而代之的是Qt

15款最好的Bootstrap在线编辑器_javascript技巧

以下是 15 款最好的 Bootstrap 编辑器或者是在线编辑工具. 1. Bootstrap Magic 这是一个 Bootstrap 主题生成器,使用最新的 Bootstrap 3 版本和 Angular JS 版本,提供一个鲜活的用户修改预览.它包括了各种各样的导入,一个颜色选择器和智能的预先输入.更神奇的是,Bootstrap 会根据用户的每个选择来重新简历框架,方便用户的下载和使用. 2. BootSwatchr BootSwatchr 是由 Drew Strickiand 独立开发

2014 年 15 款最棒的 HTML&CSS 框架

文本我们将介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架.阅读下面的框架列表,跟我们分享你的看法吧! CSS 框架 1) Toast Toast 是一款让所有设计都尽可能简单的 CSS 框架,但它又一点也不简单.一个全英文响应式网格很容易就构造一个简单的布局,box-sizing 功能允许用户自由的填充网页和网格边界,而不需要改变其他任何一个地方的设计. 2)  Yaml Yaml 是一个模块化的 CSS 框架,可以用来构造灵活,可访问和响应式的页面.YAML 提供

2014 年 15 款最棒的 HTML&CSS 框架

现在,我们来介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架.阅读下面的框架列表,跟我们分享你的看法吧:) CSS 框架 1) Toast Toast 是一款让所有设计都尽可能简单的 CSS 框架,但它又一点也不简单.一个全英文响应式网格很容易就构造一个简单的布局,box-sizing 功能允许用户自由的填充网页和网格边界,而不需要改变其他任何一个地方的设计. 2) Yaml Yaml 是一个模块化的 CSS 框架,可以用来构造灵活,可访问和响应式的页面.YAML 提

另外一款超棒的响应式布局jQuery插件 – Freetile.js

在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage 和 Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合

四款超棒的jQuery数字化签名插件

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在浏览器中,11545.html">我们有很多方式来绘制生成签名效果,并且有很多很棒很智能的jQuery插件.数字化签名是未来的发展方向,正是这个原因我们这里收集并且推荐了四款超棒的jQuery数字化签名插件,希望大家喜欢! 1. jSignature 这个jQuery插件简化了创建数据签名的过程,允许用户使用鼠标,手写板,手

四款超棒的 jQuery 数字化签名插件

在浏览器中,我们有很多方式来绘制生成签名效果,并且有很多很棒很智能的jQuery插件.数字化签名是未来的发展方向,正是这个原因我们这里收集并且推荐了四款超棒的jQuery数字化签名插件,希望大家喜欢! jSignature 这个jQuery插件简化了创建数据签名的过程,允许用户使用鼠标,手写板,手指来绘制签名.这里是演示 Signature Pad 这个jQuery插件可以辅助使用HTML5画布来实现数字签名.它保存签名为JSON,并且可以以后再重新生成,这里是演示 jQuery UI Sign

6款不容错过的超棒倒计时jQuery插件

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 如果你曾经开发过类似限时抢购的网站或者应用的话,或者你需要在发布一款超棒游戏之前添加一些神秘元素的话,一个超棒或者超酷的倒计时页面绝对是非 常有必要的,制作一个倒计时的功能虽然不是非常复杂,但是如果你有现成的代码能够直接使用的话,相信各位也绝对不会拒绝!在今天的这篇文章中,我们收集了 六款超棒的倒计时jQuery插件,能够快速高效的帮助你搭建

推荐7款超棒的单页面网站设计模板 关键是免费!

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 之前我们推荐过Bootstrap的实用开发教程和8款HTML5实现的特效和应用,反映非常强烈,很多前端爱好者纷纷要求多分享些类似的教程和模板.今天我们推荐的这7套单页面网站设计模板不仅带有独立的在线演示,并且全部免费下载!如果你也喜欢我们的素材教程,请加入我们的极客标签吧! 响应式的单页面网站模板 - Brushed Brushed 是一款单