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

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

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

1. Layoutit

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

2. X-editable

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

3. Jetstrap

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

4. Grid Displayer

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

5. Bootply

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

6. DivShot

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

7. Bootstrap Magic

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

8. GetkickStrap

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

9. Font Awesome

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

10. Bootstrap Button Generator

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

11. PaintStrap

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

12. Fancyboot

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

13. Bootstrap Designer

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

14. Bootsnipp

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

15. Easel

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

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

ubuntu 15个最佳的屏幕录制工具推荐
前言屏幕播放对于许多人来说是一项重要任务,原因很多,包括制作视频教程,创建演示文稿,编写操作指南或进行软件评审,或者在玩PC游戏时享受流媒体的乐趣. 此外,现在有很多用户通过YouTube,Face ...
MAC电脑8款常用设计工具推荐
1.Sketch 3 Sketch是完全满足我上面4条选择条件的一款UI设计工具,前文第50页已经提到过相关内容. 2.Affinity Designer Affinity Designer是Mac上 ...
五种高效的原型设计工具推荐
软件产品的诞生注定要经历一个过程:需求分析.设计.开发.测试和在线.在设计阶段,原型设计是软件设计和开发的重要保证.与其他工作一样,高效的原型设计需要相应工具的帮助来完成原型设计.在许多原型设计工具中 ...
知乎和Quora高分APP原型设计工具推荐
据数据显示,中国手机App市场应用已经超过402万款,远远高出我们的想象.数据背后的支撑,除了庞大的设计开发团队,还有各式各样的原型设计工具的应用.为了找到一款得心应手的原型工具,设计师们和产品经理们 ...
10款提效的在线设计工具推荐
在效率为王的时代,在线设计是设计的未来,为设计师提供了更节省时间.精力和成本的解决方案. 在线设计工具可以通过打开浏览器使用,大多数操作界面比传统设计工具更简单,入门门槛很低. 在这篇文章中,我们精心 ...
精美的手机界面设计素材和线框图设计工具推荐
在制作界面原型的时候,如果有现成的界面基础元素可以使用的话,设计师就可以非常快速的完成原型的制作,能够节省大量的时间和精力.在这篇文章,我向大家分享45套非常有用的 UI 和 Wireframe 套件 ...
国产设计软件都有哪些，国产设计工具推荐
许多人开始使用 Figma ,是因为 2020 年的疫情导致的居家隔离办公,作为在线设计工具的 Figma 在团队协作方面的出色表现,让它一举超越 Sketch,成为当下最流行的设计软件. 不过,对 ...
效率为王！易用的前端设计工具推荐
如果没有设计基础,怎样才有高效工作?今天就介绍几个易用的前端设计工具,并根据不同的用途,从配色.原型设计.字体.图片.以及切图标注五大方面进行分类介绍. 前端设计配色工具 1.ColorSupplyy ...
15款顶级的开源人工智能工具推荐
转自:http://os.51cto.com/art/201609/517610.htm 人工智能是技术研究领域最炙手可热的领域之一.IBM.谷歌.微软.Facebook和亚马逊等公司正投入巨资进行研 ...

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

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

最新文章

热门文章