一款iBootstrap3离线布局工具,很强大很实用,实现了页面的可视化布局,里面基本上包含了所有常用的元素,样式也是比较丰富,可以自由拖拽来实现自己想要的排版布局,增加删除任意元素也是自然不在话下啊,布局好了点击下载即可获得完整的代码,这样就不用再写代码了,是不是很棒呢!
虽然功能很强大,但页面的引用也并不多,页面的head部分只需引入2个CSS样式、1个jQuery库和5个javascript插件,代码如下:
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/layoutit.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.htmlclean.js"></script>
<script type="text/javascript" src="js/scripts.min.js"></script>
由于用于页面的离线布局,所以,页面body部分的内容比较多,这里就不贴出完整代码了,部分代码如下:
<div class="box box-element">
<a href="#close" class="remove label label-danger">
<i class="glyphicon glyphicon-remove"></i>
删除
</a>
<span class="drag label label-default">
<i class="glyphicon glyphicon-move"></i>
拖动
</span>
<span class="configuration">
<a class="btn btn-xs btn-default" href="#" rel="list-unstyled">无样式</a>
<a class="btn btn-xs btn-default" href="#" rel="list-inline">嵌入</a>
</span>
<div class="preview">无序列表</div>
<div class="view">
<ul contenteditable="true">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
</div>
<div class="box box-element">
<a href="#close" class="remove label label-danger">
<i class="glyphicon glyphicon-remove"></i>
删除
</a>
<span class="drag label label-default">
<i class="glyphicon glyphicon-move"></i>
拖动
</span>
<span class="configuration">
<a class="btn btn-xs btn-default" href="#" rel="list-unstyled">无样式</a>
<a class="btn btn-xs btn-default" href="#" rel="list-inline">嵌入</a>
</span>
<div class="preview">有序列表</div>
<div class="view">
<ol contenteditable="true">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791