架构师之前端架构bootstrap(二)---------(最小系统)最顶部导航栏强制靠边的布局

nannan408

浏览: 1783633 次
性别:
来自: 深圳

最近访客更多访客>>

greatwqs

c332030

hexin1985

yb2008qq

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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/