资讯频道 → Web前端
阅读更多

14顶
0踩

Web前端

原创新闻 15 个最好的 Bootstrap 设计工具推荐

2014-02-14 15:23 by 副主编 wangguo 评论(11) 有90725人浏览
框架 Bootstrap web 前端

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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能够创建元素，如组合文本框、图形或表格等，并且复制和修改也很容易。同时控制台还配备了一套现成的按钮、表单和图标，直接拖拽就能使用。你还可以建立一个自己的常用小工具库，这样使用起来更快捷。



Via designgeekz
  • 大小: 55 KB
  • 大小: 45.5 KB
  • 大小: 44.1 KB
  • 大小: 48 KB
  • 大小: 39 KB
  • 大小: 38.5 KB
  • 大小: 22.9 KB
  • 大小: 29.5 KB
  • 大小: 43 KB
  • 大小: 38.1 KB
  • 大小: 27.3 KB
  • 大小: 31 KB
  • 大小: 39.8 KB
  • 大小: 54.9 KB
  • 大小: 35.1 KB
14
顶
0
踩
评论 共 11 条 请登录后发表评论
11 楼 yya1 2016-09-05 12:11
请问
9 楼 唯一Session 2014-05-22 12:18
去找开源破解的
8 楼 kant 2014-03-17 11:37
就Easel好用点
7 楼 cywhoyi 2014-02-18 16:29
基本都是收费的，Easel挺简便的
6 楼 wangguo 2014-02-17 18:05
dsjt 写道
都是在线的工具吗

部分是在线工具
5 楼 dsjt 2014-02-17 17:52
都是在线的工具吗
4 楼 wukele 2014-02-17 14:23
mark！
3 楼 tchqiq 2014-02-17 14:14
mark!
2 楼 yjydmlh 2014-02-17 12:42
mark!
1 楼 qiuzhifeng 2014-02-17 10:21
mark!

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • C语言等边三角形面积a1b1c1是A2B2C2的7倍的证明

    该代码是用于课程设计证明三角形面积a1b1c1是a2b2c2的7倍的

  • 编译原理陈火旺版第三章课后题答案

    编译原理第三版陈火旺第三章课后题答案

  • 请问编译原理中a(a|b)*a和aa*b*a有什么区别，谢谢。

    http://zhidao.baidu.com/question/550242926.html 请问编译原理中a(a|b)*a和aa*b*a有什么区别，谢谢。 2013-05-14 10:15weryk11 | 分类：穿越火线 | 浏览104次 分享到： 2013-05-14 18:13 天天爱答题，20元话费等你拿~

  • 编译原理课后习题答案令A,B和C是任意正规式,证明以下关系成立(A|B)*=(A*B*)*=(A*|B*)*...

    题目： 令A、B和C是任意正规式，证明以下关系成立： A∣A=A (A*)*= A* A*=ε∣A A* (AB)*A=A(BA)* (A∣B)*=(A*B*)*=(A*∣B*)* A=b∣aA当且仅当A=a*b 解答： （1）、A∣A=A L(A∣A)=L(A)∪L(A)=L...

  • 离散数学-数理逻辑

    《离散数学》是计算机专业的一门十分重要的专业基础课。离散数学作为有力的数学工具对计算机的发展、计算机研究起着重大的作用。目前，计算机科学中普通采用离散数学中的一些基本概念、基本思想和基本方法。通过本课程的学习，掌握数理逻辑、集合论、代数和图论等近代数学分支的最基本知识：培养抽象思维能力及逻辑思维能力。 （一） 命题逻辑的等值演算与推理演算 １．命题逻辑的基本概念、命题逻辑联结词与真值表，重言式 ２．简单命题的形式化（简单自然语句的形式化） ３．等值定理、基本等值公式以及等值演算 ４．命题公式与真值表的关

  • 词法分析

    执行词法分析的程序称为词法分析器。本章中，了解词法分析器的功能和输出形式，熟练掌握词法分析器设计的原理和方法，能够以转换图为工具使用某种语言的编写并调试一个扫描器。在正确理解正规表达式与有限自动机的有关概念、理论的基础上，了解词法分析的自动产生原理。词法分析器的功能和设计方法，正规表达式与有限自动机的等价性，有限自动机的确定化和最小化。

  • 编译原理程门立雪再回首时雪拥蓝关

    标题1（30分）证明3.3.1中，关系交换律、结合律等五个关系1、U | V=V | U2、U |（V | W）=（U | V） |W3、U（VW）=（UV）W4、U（V | W）=UV | UW5、U=U=U 1（30分）证明3.3.1中，关系交换律、结合律等五个关系1、U | V=V | U2、U |（V | W）=（U | V） |W3、U（VW）=（UV）W4、U（V | W）=UV | ...

  • ***最直接的题***

    最直接的题 原题链接https://nuoyanli.com/contest/32/problem/H 观察题目我们可以发现，加2减二操作时没有代价，也就是说奇数之间和偶数之间可以随意转化，我们只需要数出奇数的个数和偶数的个数，将数目更小的一个转化为另一个数即可，也就是加一或减一。 #include<algorithm> #include<cmath> #include&l...

  • 近世代数 笔记和题型连载 第六章（子群）

    解析：本题考查共轭子群的定义。可以通过共轭子群判定一个代数系统是另一个代数系统的子群。由于H是G的子群，而M中的元素可以表示为xHx-1，由此可知M是G的共轭子群，所以M是G的子群。

  • 逻辑学探幽 Part1

    本章进一步探讨对逻辑表达式的简化方法, 引入逻辑表达式等价定义和正规化的概念.

  • 线性代数 【基础1】

    线性代数-千

  • 作为练习，是帮别人免费做的一个。做东西不能没有收获，虽然是小东西，且用vb但是尽量想些正规一点

            这是一个进销存的系统。包括：员工管理，供应商管理，客户管理，物资管理，库存管理，财务管理，报表打印。呵呵，看了这么多软件就这个小而全了。私人做事当然什么功能都想要点，同时又不用太复杂。粗略从模块上看功能分得很明确了，便开始写一个《概要设计》。写了些简单的如：员工管理，供应商管理，客户管理，物资管理，便有了问题。猛的一想，库存管理是该单独划分出来还是在业务中实现。其中：合同管理，采购

  • [编译原理]正规式

    正规式 题目： 分解： S->xSx 或者S->y 可以理解：xSx 中又含有S，无限递归，直到S->y。 那么x的n次方yx的n次方 选择D

  • 慕课编译原理(习题集)

    慕课广西大学.编译原理.期末复习.习题汇总0 目录1 引论1.1 什么是编译程序1.2 为什么要学习编译原理1.3 编译过程1.4 编译程序的结构1.5 编译程序的生成1.6 小结1.7 课后作业2 高级程序设计语言概论2.1 常用的高级程序设计语言2.2 程序设计语言的定义2.3 高级程序设计语言的一般特性2.4 小结3 高级程序设计语言的语法描述3.1 上下文无关文法3.2 文法与语言3.3 语法树与二义性3.4 形式语言鸟瞰3.5 小结4 词法分析14.1 词法分析概述4.1 词法分析器的设计 0 目

  • 慕课编译原理(第五章.词法分析作业1)

    慕课国防科技大学.编译原理.第五章.词法分析2.词法分析作业10 目录5 词法分析25.5 词法分析作业15.5.1课堂重点5.5.2测试与作业6 下一章 0 目录 5 词法分析2 5.5 词法分析作业1 5.5.1课堂重点 1（30分）证明3.3.1中，关系交换律、结合律等五个关系 1、U | V=V | U 2、U | （V | W）=（U | V） |W 3、U（VW）=（UV）W 4、U...

  • 【编译原理学习笔记】3：正规式,正规集,确定的/不确定的有穷自动机

    以后*都表示前一个元素的闭包，就当写在了右上角。 正规式和正规集 3型文法(正规文法)所描述的正是终结符集上的正规集，而正规式(正则表达式)就是一种表示正规集的工具。 正规式可以是ε和Φ，对应的正规集是{ε}和{Φ}，还可以是终结符经过有限次闭包、或(要放到括号里)、连接得到的。正规式e表示的正规集记作L(e)。 当两个正规式所表示的正规集相同时，则两个正规式等价。如： (a|b...

  • C习题_围圈报数

    题目： 有n个人围成一圈，顺序排号。从第1个人开始报数（从1到3报数），凡报到3的人退出圈子，问最后留下的是原来第几号的那位。该题跟以下题类似: 一群猴子都有编号，编号分别是1，2，3 ...n ，这群猴子（n个）按照1到n的顺序顺时针围坐一圈，从编号为1的猴子开始顺时针报数，每数到m（m/* 有n个人围成一圈，顺序排号。从第1个人开始报数（从1到3报数） 凡报到3的人退出圈子，问最后留下的是原来

Global site tag (gtag.js) - Google Analytics