网页基础布局

<div class="container-fluid">
<div class="row-fluid">
<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> <a href="#" class="brand">网站名</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">
<a href="#">主页</a>
</li>
<li>
<a href="#">链接</a>
</li>
<li>
<a href="#">链接</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">下拉导航1</a>
</li>
<li>
<a href="#">下拉导航2</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li class="divider">
</li>
<li class="nav-header">
标签
</li>
<li>
<a href="#">链接1</a>
</li>
<li>
<a href="#">链接2</a>
</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
<a href="#">右边链接</a>
</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>
<a href="#">下拉导航1</a>
</li>
<li>
<a href="#">下拉导航2</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">链接3</a>
</li>
</ul>
</li>
</ul>
</div>

</div>
</div>

</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="tabbable" id="tabs-466579">
<ul class="nav nav-tabs">
<li>
<a href="#panel-676119" data-toggle="tab">第一部分</a>
</li>
<li class="active">
<a href="#panel-74858" data-toggle="tab">第二部分</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="panel-676119">
<p>
第一部分内容.
</p>
</div>
<div class="tab-pane active" id="panel-74858">
<p>
第二部分内容.
</p>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="accordion" id="accordion-587361">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-587361" href="#accordion-element-592183">选项卡 #1</a>
</div>
<div id="accordion-element-592183" class="accordion-body collapse">
<div class="accordion-inner">
功能块...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-587361" href="#accordion-element-942260">选项卡 #2</a>
</div>
<div id="accordion-element-942260" class="accordion-body collapse">
<div class="accordion-inner">
功能块...
</div>
</div>
</div>
</div>
</div>
<div class="span4">
<a id="modal-864394" href="#modal-container-864394" role="button" class="btn" data-toggle="modal">触发遮罩窗体</a>

<div id="modal-container-864394" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">
标题栏
</h3>
</div>
<div class="modal-body">
<p>
显示信息
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button> <button class="btn btn-primary">保存设置</button>
</div>
</div>
</div>
</div>
</div>