Bootstrap（一）

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#
--------------------------------------------------------------------------