1、导航制作：在最外层div上应用.navbar，就可以将导航条固定到顶部或者底部
--------------------------------------------------------------------------
最简单的导航条：
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Project</a>
<ul class="nav">
<li class="avtive"><a>java</a></li>
<li><a>java</a></li>
<li><a>java</a></li>
</ul>
</div>
</div>
--------------------------------------------------------------------------
固定到顶部的导航条：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Project</a>
<ul class="nav">
<li class="avtive"><a>java</a></li>
<li><a>java</a></li>
<li><a>java</a></li>
</ul>
</div>
</div>
--------------------------------------------------------------------------
固定到底部的导航条：
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<a class="brand" href="#">Project</a>
<ul class="nav">
<li class="avtive"><a>java</a></li>
<li><a>java</a></li>
<li><a>java</a></li>
</ul>
</div>
</div>
--------------------------------------------------------------------------
导航条展现项目名称 只需要用<a>标签，class设置成brand
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">这里显示项目名称Project</a>
<ul class="nav">
<li class="avtive"><a>java</a></li>
<li><a>java</a></li>
<li><a>java</a></li>
</ul>
</div>
</div>
--------------------------------------------------------------------------
导航条菜单 用ul标签嵌套li标签即可 active表示选中
<ul class="nav">
<li class="active"><a href="#">Java</a></li>
<li><a href="#">Oracle</a></li>
<li><a href="#">Linux</a></li>
</ul>
--------------------------------------------------------------------------
菜单之间增加间隔 可通过 加上 <li class="divider-vertical"></li>
<ul class="nav">
<li class="active"><a href="#">Java</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Oracle</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Linux</a></li>
</ul>
--------------------------------------------------------------------------
导航条里如果要加一个搜索框，或者是登入注册按钮 则在<li>继续加上
pull-left是紧跟菜单也就是居左，pull-right就是靠近最右边栏菜单，居右
<ul class="nav">
<li class="active"><a href="#">Java</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Oracle</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Linux</a></li>
<form class="navbar-form pull-left">
<input type="text" class="span2">
<button type="submit" class="btn">Submit</button>
</form>
</ul>
--------------------------------------------------------------------------
如果是搜索框，form也可以应用navbar-search，输入框应用search-query
<ul class="nav">
<li class="active"><a href="#">Java</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Oracle</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Linux</a></li>
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="请输入搜索内容">
</form>
</ul>
--------------------------------------------------------------------------
导航条中使用下拉菜单：这里在Oracle菜单下加上2个子菜单
<ul class="nav">
<li class="active"><a href="#">Java</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Oracle
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li class="divider"></li>
<li><a href="login.html">Logout</a></li>
</ul>
</li>
<li><a href="#">Linux</a></li>
</ul>
--------------------------------------------------------------------------
导航条颜色反转 变成黑色
<div class="navbar navbar-inverse">
...
</div>
--------------------------------------------------------------------------
导航条例子：http://sandbox.runjs.cn/show/ottllwdi#
--------------------------------------------------------------------------
2、按钮制作：一个简单的按钮
<button class="btn">Hello World!!</button>
--------------------------------------------------------------------------
可以将多个按钮放到一个按钮组中
<div class="btn-group">
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
</div>
--------------------------------------------------------------------------
多个按钮组 也就是工具条 就像编辑器那种 可把多个按钮组放到按钮条中
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
</div>
<div class="btn-group">
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>
<div class="btn-group">
<button class="btn">8</button>
</div>
</div>
--------------------------------------------------------------------------
垂直的按钮组： 默认水平的
<div class="btn-group btn-group-vertical">
<button type="button" class="btn">1</button>
<button type="button" class="btn">2</button>
<button type="button" class="btn">3</button>
<button type="button" class="btn">4</button>
</div>
--------------------------------------------------------------------------
下拉菜单按钮： 其实与之前的下拉菜单类似 把nav改成btn-group就可以了
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">动作 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">其他动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">被间隔的链接</a></li>
</ul>
</div>
--------------------------------------------------------------------------
按钮大小 btn-large btn-small btn-mini
<button class="btn btn-large">Hello World!!</button>
<button class="btn btn-small">Hello World!!</button>
<button class="btn btn-mini">Hello World!!</button>
--------------------------------------------------------------------------
带间隔的下拉按钮：其实就是把之前的一个button拆分成两个button
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">其他动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">被间隔的链接</a></li>
</ul>
</div>
--------------------------------------------------------------------------
上弹按钮：只要在 .dropdown-menu 最近的父标签上应用 .dropup 即可
<div class="btn-group dropup">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">其他动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">被间隔的链接</a></li>
</ul>
</div>
--------------------------------------------------------------------------
按钮例子：http://sandbox.runjs.cn/show/nsz4igvx
--------------------------------------------------------------------------
3、标签页制作： 基本的标签页，与导航条菜单类似 加上nav-tabs
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
胶囊连接 则nav-pills 丑
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
如果要禁用某个标签页：li标签中应用 disabled
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">介绍</a></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
叠放式标签页：默认是水平放置的 需要应用nav-stacked 就能垂直放置
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
标签页创建下拉项： 和之前的类似
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">介绍</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
消息<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>菜单1</li>
<li>菜单2</li>
</ul>
</li>
</ul>
--------------------------------------------------------------------------
导航列表： 应用nav-list
<ul class="nav nav-list">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">介绍</a></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
带图标的导航列表：<i>标签显示图标 使用<li class="divider"></li>会有一个水平间隔
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-book"></i>首页</a></li>
<li class="disabled"><a href="#">介绍</a></li>
<li class="divider"></li>
<li><a href="#">消息</a></li>
</ul>
--------------------------------------------------------------------------
多个标签页之间的切换：用tabbable的div把nav-tabs嵌套起来
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">段 1</a></li>
<li class=""><a href="#2" data-toggle="tab">段 2</a></li>
<li class=""><a href="#3" data-toggle="tab">段 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>这里是段1</p>
</div>
<div class="tab-pane" id="2">
<p>这里是段2</p>
</div>
<div class="tab-pane" id="3">
<p>这里是段3</p>
</div>
</div>
</div>
--------------------------------------------------------------------------
标签页切换 内容在上方：
<div class="tabbable tabs-below">
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>这里是段1</p>
</div>
<div class="tab-pane" id="2">
<p>这里是段2</p>
</div>
<div class="tab-pane" id="3">
<p>这里是段3</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">段 1</a></li>
<li class=""><a href="#2" data-toggle="tab">段 2</a></li>
<li class=""><a href="#3" data-toggle="tab">段 3</a></li>
</ul>
</div>
--------------------------------------------------------------------------
标签页居左 居右 tabs-left tabs-right
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
--------------------------------------------------------------------------
标签页例子：http://sandbox.runjs.cn/show/z1o3z6wp#
--------------------------------------------------------------------------
Bootstrap（一）
猜你喜欢
转载自luan.iteye.com/blog/1748402
今日推荐
周排行