1.前言.
如题.
2.代码.
<!DOCTYPE html>
<!-- saved from url=(0123)file:///D:/user/SFIT0601/%E6%A1%8C%E9%9D%A2/Bootstrap%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9F.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Bootstrap可视化布局系统">
<meta name="description" content="可拖放排序在线编辑的Bootstrap可视化布局系统">
<meta name="keywords" content="可视化,布局,系统">
<title>Bootstrap 可视化布局系统</title>
<link href="http://www.w3cschool.cc/try/bootstrap/layoutit/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://www.w3cschool.cc/try/bootstrap/layoutit/css/layoutit.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="./Bootstrap 可视化布局系统_files/favicon.png">
<script type="text/javascript" src="./Bootstrap 可视化布局系统_files/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<![endif]-->
<script type="text/javascript" src="./Bootstrap 可视化布局系统_files/bootstrap.min.js"></script>
<script type="text/javascript" src="./Bootstrap 可视化布局系统_files/jquery-ui.min.js"></script>
<script type="text/javascript" src="./Bootstrap 可视化布局系统_files/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="./Bootstrap 可视化布局系统_files/jquery.htmlClean.js"></script>
<!-- <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/ckeditor.js"></script><style>.cke{visibility:hidden;}</style><style>.cke{visibility:hidden;}</style> -->
<!-- <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/config.js"></script> -->
<!-- <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/scripts.js"></script> -->
<!-- <script type="text/javascript" src="./Bootstrap 可视化布局系统_files/config(1).js"></script><link rel="stylesheet" type="text/css" href="./Bootstrap 可视化布局系统_files/editor.css"><script type="text/javascript" src="./Bootstrap 可视化布局系统_files/zh-cn.js"></script><script type="text/javascript" src="./Bootstrap 可视化布局系统_files/styles.js"></script><script type="text/javascript" src="./Bootstrap 可视化布局系统_files/config(2).js"></script><link rel="stylesheet" type="text/css" href="file:///D:/user/SFIT0601/%E6%A1%8C%E9%9D%A2/Bootstrap%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9F_files/skins/moono/editor.css?t=D3NA"><script type="text/javascript" src="file:///D:/user/SFIT0601/%E6%A1%8C%E9%9D%A2/Bootstrap%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9F_files/plugins/link/dialogs/link.js?t=D3NA"></script><link rel="stylesheet" type="text/css" href="file:///D:/user/SFIT0601/%E6%A1%8C%E9%9D%A2/Bootstrap%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9F_files/skins/moono/dialog.css?t=D3NA"><script type="text/javascript" src="file:///D:/user/SFIT0601/%E6%A1%8C%E9%9D%A2/Bootstrap%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9F_files/plugins/link/dialogs/anchor.js?t=D3NA"></script></head> -->
<body style='width:100%'>
<div class="container-fluid" style='position:fixed; z-index:999; top:0;left:0;'>
<div class="row-fluid" style='position:fixed; z-index:999; top:0;left:0;'>
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> [url=#]网站名[/url]
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">
[url=#]主页[/url]
</li>
<li>
[url=#]链接[/url]
</li>
<li>
[url=#]链接[/url]
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
[url=#]下拉导航1[/url]
</li>
<li>
[url=#]下拉导航2[/url]
</li>
<li>
[url=#]其他[/url]
</li>
<li class="divider">
</li>
<li class="nav-header">
标签
</li>
<li>
[url=#]链接1[/url]
</li>
<li>
[url=#]链接2[/url]
</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
[url=#]右边链接[/url]
</li>
<li class="divider-vertical">
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
[url=#]下拉导航1[/url]
</li>
<li>
[url=#]下拉导航2[/url]
</li>
<li>
[url=#]其他[/url]
</li>
<li class="divider">
</li>
<li>
[url=#]链接3[/url]
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
2.完整代码,请看附件下载.
3.可视化编辑地址
http://www.w3cschool.cc/try/bootstrap/layoutit/
分享到:
相关推荐
赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar; 赠送源代码:swagger-bootstrap-ui-1.9.6-sources.jar; 赠送Maven依赖信息文件:swagger-bootstrap-ui-...
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。
可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...
web前端开发例子,基于Bootstrap样式实现的html渐变顶部固定自适应导航栏,效果很不错!网上搜集,供参考学习。
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
FastAdmin使用bootstrap-table作为前端表格的基础组件库,通常列表交互展示已经够用了,包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也...
Python Flask Web开发入门之Bootstrap介绍使用和Flask-Nav快速导航栏 共10页.pdf
startbootstrap-sb-admin-gh-pages 免费模板 ,可以根据模板搭建自己的页面
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
bootstrap-table-zh-CN.js,有需要就下载吧
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...
压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
用bootstrap4实现侧边导航栏并且带隐藏按钮。效果就是,点击按钮侧边导航栏出现,再点击消失。不用bootstrap也可以实现
赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar; 赠送源代码:swagger-bootstrap-ui-1.9.6-sources.jar; 赠送Maven依赖信息文件:swagger-bootstrap-ui-...
angulr-bootstrap-admin-web-app-with-angularjs 2.0版本来拉。由于最近比较忙所有没有持续更新这个版本。在此特地发一下2.0.1版本的。如果有需要我之前版本的请查看我的资源,移驾之前的资源。绝对官网下载的完整包...
压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
bootstrap最新版资源下载不易。
bootstrap-table样式固定列js插件,在网上看到下载资源比较少,免费提供给大家下载使用,方便开发进度。
twitter-bootstrap-v2.1.1-0-gc52368d.zip