iBootstrap3离线布局工具

一款iBootstrap3离线布局工具，很强大很实用，实现了页面的可视化布局，里面基本上包含了所有常用的元素，样式也是比较丰富，可以自由拖拽来实现自己想要的排版布局，增加删除任意元素也是自然不在话下啊，布局好了点击下载即可获得完整的代码，这样就不用再写代码了，是不是很棒呢！

分类：其它特效 > bootstrap 难易：中级

查看演示下载资源下载积分： 60 积分

虽然功能很强大，但页面的引用也并不多，页面的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>