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

来源：互联网发布：留学生落户北京知乎编辑：程序博客网时间：2024/05/21 10:28

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：

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"我也不知道，可以试下；后续知道补充。

1 0