架構師之前端架構bootstrap(二)

WindySky 2016-05-17

展開全文

1.前言.
如題.
2.代碼.

Java代碼

<!DOCTYPE html>
<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可視化布局系統(tǒng)">
<meta name="description" content="可拖放排序在線編輯的Bootstrap可視化布局系統(tǒng)">
<meta name="keywords" content="可視化,布局,系統(tǒng)">
<title>Bootstrap 可視化布局系統(tǒng)</title>
<link href="http://www./try/bootstrap/layoutit/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://www./try/bootstrap/layoutit/css/layoutit.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://apps./libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="./Bootstrap 可視化布局系統(tǒng)_files/favicon.png">
<script type="text/javascript" src="./Bootstrap 可視化布局系統(tǒng)_files/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://apps./libs/jquery/1.9.1/jquery.min.js"></script>
<![endif]-->
<script type="text/javascript" src="./Bootstrap 可視化布局系統(tǒng)_files/bootstrap.min.js"></script>
<script type="text/javascript" src="./Bootstrap 可視化布局系統(tǒng)_files/jquery-ui.min.js"></script>
<script type="text/javascript" src="./Bootstrap 可視化布局系統(tǒng)_files/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="./Bootstrap 可視化布局系統(tǒng)_files/jquery.htmlClean.js"></script>
<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>