字号: - o +

15个最好的Bootstrap设计工具推荐

2014-03-05 前端开发 8人评论 41,256次浏览   

子曰:该睡觉就别学习,该学习就别游戏,该游戏就别被虐 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

Bootstrap是由前Twitter设计师Mark Otto和Jacob Thornton开发的前端工具包,其提供了优雅的HTML和CSS规范。Bootstrap不单单是一个框架,更确切的说,它改变了整个游戏规则。该框架使得许多应用和网站的设计开发变得简便许多,而且它将大量的HTML框架普及成了产品。

本文为你带来15款针对Bootstrap框架的开发工具,可以帮助你更轻松地使用Bootstrap来构建想要的应用。

1. Layoutit

Layoutit是一个在线工具, 它可以简单而又快速搭建Bootstrap响应式布局,操作基本是使用拖动方式来完成,很简单,而元素都是基于Bootstrap框架集成的, 所以这工具很适合Web设计师和前端开发人员使用,快捷方便。

Layoutit

2. X-editable

X-editable能够让你在页面上创建可编辑的元素,它能够使用任何引擎,比如Bootstrap、jQuery-UI、jQuery),并且包含弹出式和内联模式。

X-editable

3. Jetstrap

这是一个针对Bootstrap框架的可视化制作工具,Web开发者、设计师直接在网页端拖拽各个组件就可以制作出漂亮的网页。通过Jetstrap制作出来的网页100%符合Bootstrap标准,你只要设计了电脑端的页面,它会自动适配手机端和Pad端(响应式设计)。

Jetstrap

4. Grid Displayer

Grid Displayer是一个可以显示Twitter Bootstrap网格(固定和浮动网格)和Foundation(2.0 和3.0版本)的小工具。可以在Firefox和基于Webkit的浏览器中使用。

Grid Displayer

5. Bootply

通过Bootply可以非常轻松地基于Bootstrap来进行设计、开发原型、扩展和测试等。Bootply可与其他流行的Bootstrap插件、微框架和库进行整合。

Bootply

6. Divshot

Divshot是一个在线网站,允许开发者通过可视化方式进行Web界面的设计,并直接生成HTML和CSS代码。该工具提供常用的Web UI组件,界面基于Bootstrap框架构建,生成的界面也基于Bootstrap框架运行。

Divshot

7. Bootstrap Magic

Bootstrap Magic是一款基于Bootstrap和AngularJS的主题创建工具,开发者可以轻松地创建自己的 Twitter Bootstrap主题,并可以立即看到内容变化。还可以添加来自Google Webfont 的很棒的网页字体。

Bootstrap Magic

8. GetkickStrap

Kickstrap无缝整合了Bootstrap和顶级Web技术,无需一个本地后端即可运行一个已验证的、数据库驱动的Web应用程序。用户还可以使用JSPM.io提供的强大的、基于Require.js构建的前端包依赖管理工具。

GetkickStrap

9. Font Awesome

Font Awesome是一套专为Twitter Bootstrap设计的图标字体,几乎囊括了网页中可能用到的所有图标,这些图标通过Web Font的方式来显示,可以被任意缩放、改变颜色,你可以像修改文字样式那样来修改图标样式。

Font Awesome

10. Bootstrap Button Generator

通过Bootstrap Button Generator,你只需输入你想指定给新按钮的样式的CSS类,并简单调整图标的颜色,即可获得新的图标。

Bootstrap Button Generator

11. Paintstrap

Paintstrap允许你使用Adobe kuler / COLOURlovers颜色方案来生成漂亮的Twitter Bootstrap主题。

Paintstrap

12. Fancyboot

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

Fancyboot

13. Bootstrap Designer

Bootstrap Designer是一个在线设计工具,可以帮你生成漂亮的基于Bootstrap框架的HTML5模板。

Bootstrap Designer

14. Bootsnipp

Bootsnipp是一个针对Web设计师和开发者的前端元素库,任何使用Bootstrap框架的开发者都可以找到所需的Web元素。

Bootsnipp

15. Easel

Easel是一个针对Bootstrap的基于浏览器的设计工具,可以帮助你快速制作出产品原型页面。Easel能够创建元素,如组合文本框、图形或表格等,并且复制和修改也很容易。同时控制台还配备了一套现成的按钮、表单和图标,直接拖拽就能使用。你还可以建立一个自己的常用小工具库,这样使用起来更快捷。
Easel

本文转载自:http://www.admin10000.com/document/3889.html

转载申明:为了给广大网友提供更有价值的内容,我会把我认为优秀的互联网方面的文章转载到W3Cshare。本文为转载文章,不代表本人立场与经历,如果侵犯了您的权益,请联系本人修改文章。

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论8

  1. 好丑

    老董10-29 14:38 回复
  2. 能精通BOOTSTRAP就很不错了。

    老董11-06 11:16 回复
  3. 大神,你是什么人物,我看拉钩网都给你做了友情链接。。。

    东子06-19 16:39 回复
  4. 学习了,最近正在学习bootstrap。主要是学习他们的代码规范性!

  5. 有了这个,人生就会上一个层次!

  6. 确实很不错哦

    心理器材03-25 15:16 回复
  7. 用过X-editable,mark

    氪星人03-16 00:51 回复
  8. 要是能有中文的拖来拖去模块化的功能全一点的设计工具就好,创意很多,动手能力太差啊,英文代码知识等于0

    吴歌博客03-06 12:06 回复

发表我的评论

*

*

取消