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

   2016-07-13 0

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

  这就是Bootstrap 编辑器的用武之地。

  Bootstrap 编辑器和生成器使得画界面原型、测试、搭建响应式网站变得简单。 尽管每一个编辑器都不同,但是它们都利用Bootstrap 庞大的组件库实现了拖入和移除组件功能。

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

 Bootply

Bootply - Bootstrap Editor & Playground

  Bootply被称为是Bootstrap的活动平台。它不但是一个Bootstrap的编辑器和生成器,同时也拥有非常广泛的代码库。该编辑器可以让你拖拽Bootstrap组件并可以编辑你自己的代码。

  Bootply 同时也整合了其他流行的Bootstrap插件,微型代码库和框架。你也可以借助其他工具的使用像Font Awesome, jQuery + jQuery UI, Bootstrap Select, FuelUX, AngularJS, Google Maps 等等。

  价格:免费 / 每个月$4可下载源代码。

 Brix.io

Brix.io - Bootstrap Builder

  Brix 是一个强大而且时尚的在线Bootstrap生成器,它能够帮助你快速的制作响应式界面和网站。

  Brix可生成易于阅读,格式良好的HTML,CSS和JS为所有托管服务器或其他编辑器使用。

  Brix可以让你和任何地方的团队成员同时开发项目。

  同时开发和讨论可以使工作更加的简单,方便和高效。

  价格:每个月$14.90-$49.90

 Jetstrap

Jetstrap - Bootstrap Interface Builder

  Jetstrap是 Bootstrap 3的一个优质的基于web的界面生成工具,它帮助开发者和设计师提高网站的运行速度。你可以在任何地方任何设备上展开你的工作。

  Jetstrap 允许你拖拽 Bootstrap组件到生成器并可用代码进行编辑。标记清晰的代码用法以及复杂组件的快速应用,可以让你不用深究开发文档。

  价格:每个月$16-$99

 Divshot

Divshot - Bootstrap Builder

  Divshot 不仅仅是一款可视化的Bootstrap编辑器,同时也为开发者提供一个应用级托管环境。

  Bootstrap 生成器能够让你自己编写的高质量代码合适的嵌套在每一个新的组件上。同时,也支持添加其他流行的CSS框架像Foundation and Racthet。

  价格:免费 / 每个月$100托管

 Pinegrow

  Pinegrow 是一个桌面应用,它支持苹果、Windows、Linus操作系统,利用多页面编辑功能、CSS、LESS 样式、Bootstrap 、Foundation和其它框架灵活的组件,它可以帮助你更快地画出页面原型、设计页面。样式表编辑器允许你拖入、拖出、重复、重新排序样式。

  Pinegrow 不会去试着管理你的工作流程。 然而,它是一个可以节省工作量和时间的工具,这一点是有意义的。

  价格 :一次性个人许可证$49.95。

 LayouIt

Layoutit - Interface Builder for Bootstrap

  LayoutIt 是一个简单但是高效的Bootstrap界面生成器,它可以让你的前端开发更简单。你可以从零开始或者使用基本的模板开始。

  可以简单的把Bootstrap元素拖拽到面板上并可下载HTML。之后,你可以添加你自己的样式并且可以将它整合到其他编程语言中。

  价格:免费

 Pingendo

Pingendo - Web Authoring With Comfort

  Pingendo 是一个可视化的桌面应用程序,它能够帮助你在Bootstrap的基础上开发响应式网页的原型。

  像大多数的Bootstrap的生成器一样,你可以从丰富的集合中添加使用Bootstrap元素到内容。你可以从一个空的面板开始或者使用已经在集合中准备好的布局开始。之后,你可以拖拽,拉伸和定制你自己的内容。

  价格:免费

 总结

  现在你已经了解了8个快速开发响应式网站的Bootstrap编辑器。

  如果你正在使用其中一种编辑器,或者还有其他的编辑器没有在以上的列表中,请你在留言板里面留言告诉我们。

  原文地址:http://bootstrapbay.com/blog/bootstrap-editors/

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Bootstrap基础:选择器
    1.CSS属性选择器[arrt=value]   该属性有指定的确切值[arrt~=value]  该属性值必须是多个空格隔开的值,比如,class=“title featured home”,而且这些值中的一个必须是指定的值“value”[arrt|=value]  属性的值就是“value”或者以“value”开始并立即
    03-16
  • bootstrap模态框手动开启关闭与设置点击外部不关闭
    bootstrap模态框手动开启关闭与设置点击外部不
    完整的参考菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html1.手动开启与关闭模态框的方法  按钮开启与JS函数开启(2种)!DOCTYPE htmlhtmlheadmeta charset="utf-8"titleBootstrap 实例 - 模态框(Modal)插件/titlelink rel="styleshe
    03-16
  • Bootstrap.css 中请求googleapis.com/css?famil
    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");     国内访问不稳定,页面反应慢解决:将请求结果保存下来,放到本地,重新声明请求1.请求http:
    03-16
  • 基于.NET6、FreeSql、若依UI、LayUI、Bootstrap
    近几年,.net生态日益强大,特别是跨平台技术,性能提升,那真的是强大无比。为了日常能够快速开发,笔者基于基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS,请大家多提意见建议。在此,要感谢若依CMS的作者,借用了皮肤框架。懒的发文字描述
    03-16
  • 纯css写一个switch开关 bootstrap switch开关
    纯css写一个switch开关 bootstrap switch开关
    这样的简单的开关效果1、htmldiv class="switch-box"div class="bg_con"input id="checked_1" type="checkbox" class="switch"value="0" /label for="checked_1"/label/div/div2、css.switch-box{width:42px;} .s
    03-08
  • mean(bootstrap,angular,express,node,mongodb)
    学习node,我这个毫无美感的程序员在bootstrap与node的感染下,向着“全栈工程师”迈进,呵呵!最终选择如题的技术方案,这些东东都算比较新的,网上的资料比较少,参考了不少github程序及自己的努力,终于有一些感觉了,于是开贴记录一些感悟,供自己与同道
    03-08
  • angular-ui-bootstrap插件API - Pagination
    angular-ui-bootstrap插件API - Pagination
    案例!DOCTYPE htmlhtml lang="en" ng-app="myApp"headmeta charset="UTF-8"titleTitle/titlelink rel="stylesheet" href='../node_modules/bootstrap/dist/css/bootstrap.css'link rel="stylesheet" href='.
    03-08
  • angular-ui-bootstrap插件API - Tabs
    angular-ui-bootstrap插件API - Tabs
    案例!DOCTYPE htmlhtml lang="en" ng-app="myApp"headmeta charset="UTF-8"titleTitle/titlelink rel="stylesheet" href='../node_modules/bootstrap/dist/css/bootstrap.css'link rel="stylesheet" href='.
    03-08
  • angular-ui-bootstrap插件API - Pager
    angular-ui-bootstrap插件API - Pager
    案例!DOCTYPE htmlhtml lang="en" ng-app="myApp"headmeta charset="UTF-8"titleTitle/titlelink rel="stylesheet" href='../node_modules/bootstrap/dist/css/bootstrap.css'link rel="stylesheet" href='.
    03-08
  • angular-cli 项目如何引入jQuery 或者bootstrap
    1. 首先确保你的node_module中安装了jquery 或者 bootstrap,如果没有    执行以下命令npm install jquery --save-dev2. 打开angular-cli.json文件夹,在scripts:[]属性中添加如下代码//jQuery 文件或者 bootstrap 文件路径"../node_modules/jquery/dist/jqu
    03-08
点击排行