Bootstrap一些例子使用，持续更新...

1、胶囊型导航菜单的使用：

参考如下html：

<ul id="myTab" class="nav nav-tabs">
   <li class="active">
      <a href="#home" data-toggle="tab">
         W3Cschool Home
      </a>
   </li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschoool菜鸟教程</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发</p>
   </div>
</div>

效果：

2、想做下面这种菜单怎么做呢？胶囊行，nav-pills，鼠标移上去显示子菜单；

用到的js和css：

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-hover-dropdown.min.js"></script>

html代码：

<ul class="nav nav-pills">
    <li role="presentation" class="dropdown">
        <a href="/SJY#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="100" data-close-others="false" aria-expanded="false">工作填报</a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="/SJY/gzsj/index">工作实绩</a></li>
            <li><a href="/SJY/jfqx/index">加分情形</a></li>
            <li><a href="/SJY/kfqx/index">扣分情形</a></li>
        </ul>
    </li>
</ul>

这个只要按这个用就可以实现。具体更详细的需要查阅下Bootstrap胶囊型菜单的用法。

图：

3、全选、操作按钮：

想做出如下效果吗？

html代码：

<div class="btn-group" style="position:absolute; top:160px">
    <button class="btn btn-primary" id="selectAllBtn">全  选</button>
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-success dropdown-toggle" aria-expanded="false">
            操  作
            <span class="caret"></span>
        </button>           
        <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" class="operationLi" id="approval">审批</a></li>
            <li><a href="javascript:void(0)" class="operationLi" id="add">增加</a></li>
            <li><a href="javascript:void(0)" class="operationLi" id="edit">编辑</a></li>
            <li><a href="javascript:void(0)" class="operationLi" id="delete">删除</a></li>
        </ul>
    </div>
</div>

4、Bootstrap pannel的使用：

html代码：

<div class="panel-group" id="aj_list" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default aj-item">
	<div class="panel-heading" role="tab" id="aj0" data-toggle="collapse" data-parent="#aj_list" data-target="#collapse0" aria-controls="collapse0">
	 pannel标题
       </div>
	   <div id="collapse0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="aj0">
			<div class="panel-body">
				<p>
					你好你好后懊悔哦阿訇啊hi送的好是的
					你好你好后懊悔哦阿訇啊hi送的好是的
					你好你好后懊悔哦阿訇啊hi送的好是的
					你好你好后懊悔哦阿訇啊hi送的好是的
				</p>
			</div>
		</div>
	</div>
</div>

其中：

data-parent="#aj_list" 属性让很多的pannel组，展开的时候每次只显示一个；

data-target="#collapse0"属性，让pannel heading点击的时候指明展开的是哪个；

class="panel-collapse collapse in"  in这个class可以默认展开；

aria-multiselectable="true" 、role="tab"、aria-controls="collapse0"、aria-labelledby="aj0"我也不知道，可以试下；后续知道补充。