架構(gòu)師之前端架構(gòu)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=#]網(wǎng)站名[/url]
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">
[url=#]主頁(yè)[/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=#]下拉導(dǎo)航1[/url]
</li>
<li>
[url=#]下拉導(dǎo)航2[/url]
</li>
<li>
[url=#]其他[/url]
</li>
<li class="divider">
</li>
<li class="nav-header">
標(biāo)簽
</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=#]下拉導(dǎo)航1[/url]
</li>
<li>
[url=#]下拉導(dǎo)航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.完整代碼,請(qǐng)看附件下載.
3.可視化編輯地址
http://www./try/bootstrap/layoutit/

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： WindySky > 《bootstrap》

舉報(bào)/認(rèn)領(lǐng)