layoutit's Introduction

layoutit

基于bootstrap实现可视化布局的layoutit.com离线中文版
新增功能:
html5自动保存, 开启元素立即编辑模式, 增加撤销,重做跟踪操作功能, 加入ckeditor弹出编辑器.
原版程序地址: http://www.layoutit.com/build
demo演示地址: http://dodgepudding.github.io/layoutit

使用说明

先从左侧布局设置选项卡拖动行列布局样式到右侧容器, 然后将基础组件拖到右侧容器内, 通过拖动完成排布, 部分组件通过右上角浮动按钮提供样式切换, 你也可以点击组件内的文字部分启用即时编辑功能, 如果鼠标左键触发了默认事件, 可以用右键点击触发编辑; 对于大篇幅文字内容, 可选择组件右上角的编辑功能启用独立编辑框编辑.
如果你的浏览器支持html5, 每一步操作都会被记录, 不担心浏览器关闭后信息丢失, 下一次打开将恢复上一次的编辑内容, 编辑过程中发现错误, 可通过撤销和重做进行还原. 若是IE等不支持HTML5的用户希望保存临时编辑结果, 可选择顶部源码按钮, 把弹出框内的可再编辑源码复制下来, 自己保存成文件, 下一次只需把文件中的可再编辑源码粘贴回源码弹出框的编辑框内, 点击保存后即可恢复之前的编辑状态.
若然要生成干净的html代码, 可选择顶部的生成按钮功能, 并把生成的干净代码复制到目标文件. 生成的代码并不包含基础css和js, 你还需要引入jquery和bootstrap的css和js基础代码.

详细的样式可参考以下网站:
http://www.bootcss.com bootstrap中文网站
http://twitter.github.io/bootstrap bootstrap源网站
http://jquery.com jquery基础框架

layoutit's People