Bootstrap 已经使响应式网站开发变得简单很多。 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件、并可以把它们拖拽到画布中,事情会如何呢?
这就是Bootstrap 编辑器的用武之地。

在这篇文章中,我们总结了一些目前市场上最好的 Bootstrap 编辑器和生成器。 每一个编辑器都有它独特的功能集和定价(其中一部分是免费的),因此最好的选择依赖于你独特的使用场景。

Bootply - Bootstrap Editor & Playground
Bootply被称
为是Bootstrap的活动平台。它不但是一个Bootstrap的编辑器和生成器,同时也拥有非常广泛的代码库。该编辑器可以让你拖拽
Bootstrap组件并可以编辑你自己的代码。同时也整合了其他流行的Bootstrap插件,微型代码库和框架。你也可以借助其他工具的使用像
Font Awesome, jQuery + jQuery UI, Bootstrap Select, FuelUX, AngularJS,
Google Maps 等等。
价格:免费 / 每个月$4可下载源代码。
Brix.io - Bootstrap Builder
Brix
是一个强大而且时尚的在线Bootstrap生成器,它能够帮助你快速的制作响应式界面和网站。可生成易于阅读,格式良好的HTML,CSS和JS为所有
托管服务器或其他编辑器使用。可以让你和任何地方的团队成员同时开发项目。同时开发和讨论可以使工作更加的简单,方便和高效。
价格:每个月$14.90-$49.90
Jetstrap - Bootstrap Interface Builder
Jetstrap是
Bootstrap
3的一个优质的基于web的界面生成工具,它帮助开发者和设计师提高网站的运行速度。你可以在任何地方任何设备上展开你的工作。允许你拖拽
Bootstrap组件到生成器并可用代码进行编辑。标记清晰的代码用法以及复杂组件的快速应用,可以让你不用深究开发文档。
价格:每个月$16-$99
Divshot - Bootstrap Builder
Divshot
不仅仅是一款可视化的Bootstrap编辑器,同时也为开发者提供一个应用级托管环境。Bootstrap
生成器能够让你自己编写的高质量代码合适的嵌套在每一个新的组件上。同时,也支持添加其他流行的CSS框架像Foundation and
Racthet。
价格:免费 / 每个月$100托管
Pinegrow
Pinegrow
是一个桌面应用,它支持苹果、Windows、Linus操作系统,利用多页面编辑功能、CSS、LESS 样式、Bootstrap
、Foundation和其它框架灵活的组件,它可以帮助你更快地画出页面原型、设计页面。样式表编辑器允许你拖入、拖出、重复、重新排序样式。不会去试
着管理你的工作流程。 然而,它是一个可以节省工作量和时间的工具,这一点是有意义的。
价格 :一次性个人许可证$49.95。
Layoutit - Interface Builder for Bootstrap
LayoutIt
是一个简单但是高效的Bootstrap界面生成器,它可以让你的前端开发更简单。你可以从零开始或者使用基本的模板开始。可以简单的把
Bootstrap元素拖拽到面板上并可下载HTML。之后,你可以添加你自己的样式并且可以将它整合到其他编程语言中。
价格:免费
Pingendo - Web Authoring With Comfort
Pingendo 是一个可视化的桌面应用程序,它能够帮助你在Bootstrap的基础上开发响应式网页的原型。
像大多数的Bootstrap的生成器一样,你可以从丰富的集合中添加使用Bootstrap元素到内容。你可以从一个空的面板开始或者使用已经在集合中准备好的布局开始。之后,你可以拖拽,拉伸和定制你自己的内容。
价格:免费

Bootstrap在线编辑器简单分享的更多相关文章

  1. 7 个 Bootstrap 在线编辑器用于快速开发响应式网站

    Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...

  2. 超棒的 15 款 Bootstrap UI 编辑器

    自从 2011 年 Mark Otto 和 Jacob Thornton 开发了  Bootstrap,我们第一次接触并熟知了 Bootstrap .这些都归功于  Twitter!从那以后,它就非常 ...

  3. 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  4. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  5. Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  6. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  7. 基于jquery的bootstrap在线文本编辑器插件Summernote (转)

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  8. ueditor在线编辑器的简单使用-上传图片

    由于我的项目个人博客网站需要用到在线编辑器,百度的ueditor编辑器就是一个很好的编辑器.开始比较迷茫的使用,各种百度,没有我满意的答案,明明可以很简单的使用. 1.首先进入ueditor官网下载, ...

  9. 分享一个自己制作的XML在线编辑器

    前言 一年多没更新博客了,原因是疫情期间<骑马与砍杀2>发售,然后去写游戏MOD去了. 用C#大概写了7个月的游戏MOD,每天晚上肝到很晚,然后期间又因为介绍这个游戏MOD,学习了PR,然 ...

随机推荐

  1. [转载]aptitude与apt-get的区别和联系

    转自 http://www.cnblogs.com/yuxc/archive/2012/08/02/2620003.html 命令 下面将要介绍的所有命令都需要sudo!使用时请将“packagena ...

  2. web.config中的profile

    aspnet_regsql命令创建需要的表结构 public class UserProfile:ProfileBase { [SettingsAllowAnonymous(true)] //默认匿名 ...

  3. (转)window.location.search的用法

    location.search是从当前URL的?号开始的字符串如:http://www.51js.com/viewthread.php?tid=22720它的search就是?tid=22720 通过 ...

  4. BestCoder Round #81 (div.2)1001

    Machine Accepts: 580 Submissions: 1890 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65 ...

  5. servlet 中字符集的处理

    Servlet运行的步骤 Servlet作为Web服务器的补充功能在运行时需要受到Servlet容器的管理,其运行的流程如下: 浏览器依据IP建立与容器的连接 浏览器将请求数据打包 容器解析请求数据包 ...

  6. 【Nutch2.2.1源代码分析之5】索引的基本流程

    一.各个主要类之间的关系 SolrIndexerJob extends IndexerJob 1.IndexerJob:主要完成 2.SolrIndexerJob:主要完成 3.IndexUtil:主 ...

  7. 手把手教你如何使用webpack+react

    上一篇随笔讲述了新手入门入门前端 里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具,当时推荐的是webpack+react 今天正好有空,也把自己入门webpack + react 的 ...

  8. CSS Hacks 总结

    CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,我们就需要针对不同的浏览器去写不同的CSS,让他能在不同的浏览器中也能得到我们想要的页面效果. CSS ha ...

  9. 扩展vbox硬盘大小

    1.使用VboxManage list hdds查看所有安装的虚拟机信息   2.找到你要扩展硬盘容量虚拟机的UUID,使用modifyhd命令扩展硬盘大小 VBoxManage modifyhd U ...

  10. 距离顶部估计像素,显示div!

    <html> <head> <title>slide</title> <style type="text/css"> # ...