Bootstrap学习笔记--下拉菜单，折叠，菜单，标签，Pills

下拉菜单：
下拉菜单是比较常见的

直接看源码：
.dropdown表示下拉框
按钮和下拉框都要放在dropdown类的div下
要打开下拉菜单，请使用按钮或具有属性的类.dropdown-toggle和 属性data-toggle="dropdown"
span+.caret类可以创建一个插入箭头图标
.dropdown-menu类添加到<ul>元素中 变成下拉框元素

<div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 哈哈 
            <span class="caret"></scan></button>
            <ul class="dropdown-menu">
                <li><a href="#">html</a></li>
                <li><a href="#">html</a></li>
                <li><a href="#">html</a></li>
            </ul>
        </div>

效果图：

点击就会出现三个下拉框。

divider类

<li class="divider"></li>

在下拉框元素中加入这一行 会出现一条横线 算是分割线吧 效果就是一条灰色的实线
举例：

<ul class="dropdown-menu">
                <li><a href="#">html</a></li>
                <li class="divider"></li>
                <li><a href="#">css</a></li>
                <li><a href="#">js</a></li>
            </ul>

电脑无法截屏……大家自己demo试试

dropdown-header类：
是添加下拉框标题 效果是：无法点击的 颜色较浅，字体变小的内容
举个栗子：

<ul class="dropdown-menu">
                <li class="dropdown-header">表头</li>
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">js</a></li>
            </ul>

.disabled类：
这个类很常见的
增添了一个无法点击的一行
举个栗子：

<ul class="dropdown-menu">
                <li class="disabled"><a href="#">无法点击</a></li>
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">js</a></li>
            </ul>

.dropdown-menu-right类：
让下拉框右对齐：
举个栗子：

<ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">js</a></li>
            </ul>

效果图：

下拉框内容居然出现在了右边 不过看起来好别扭哦

dropup类：
要是你不喜欢下拉 你也可以把它变成上拉框

很简单 就是将class =“dropdown”的<div>元素更改为"dropup"

举个栗子：

    <div class="dropup">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 哈哈 
            <span class="caret"></scan></button>
            <ul class="dropdown-menu">
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">js</a></li>
            </ul>
        </div>

效果图：

要是按钮在底部的话 可以这样做
注意：要是下拉框按钮在顶部的话 这么做 下拉框内容就会被覆盖掉 因为超出了窗体的边界

下拉辅助功能
为了帮助改善使用屏幕阅读器的人员的可访问性，创建下拉菜单时应包含以下内容role和aria-*属性：

举个栗子：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
  <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
    <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
    <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
  </ul>
</div>

不过讲真的 ……我试了一下……感觉没啥区别呀

折叠:
当您想要隐藏和显示大量内容时 就需要折叠了
.collapse类表示一个可折叠的元素; 这是通过单击将显示或隐藏的内容。

要控制（显示/隐藏）可折叠内容，请将该data-toggle=”collapse”属性添加到<a>或<button>元素。然后添加data-target=”#id”属性以将按钮与可折叠内容 连接起来。

单词扫盲：
target 目标；
toggle 触发器；
collapse 折叠；

  <button type="button" class="btn btn-info" data-toggle="collapse"   
  data-target="#demo">点击</button>
  <div id="demo" class="collapse">
    内容
  </div>

效果图：

单击后：

对于<a>元素，您可以使用href属性来代替data-target 属性

  <a href="#demo" data-toggle="collapse">点我</a>
    <div id="demo" class="collapse">
    内容
    </div>

效果图：

单击后：

.in类：
默认是显示内容的：
举个栗子：

  <a href="#demo" data-toggle="collapse">点我</a>
    <div id="demo" class="collapse in">
    内容
    </div>

打开网页就是

而不需要点击 自动已经出来了。

折叠还可以应用于面板：
举个栗子：

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">点我</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">内容</div>
      <div class="panel-footer">页脚</div>
    </div>
  </div>
</div>

效果图：

这样是不是让折叠更美观了 还增加了面板的应用

折叠还可以应用于列表：
举个栗子：

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>

效果图：

还可以折叠组： 多个面板一起 当单击一个的时候 显示其隐藏内容 而其他的面板隐藏内容：

使用该data-parent属性可确保在显示其中一个可折叠项目时，指定父项下的所有可折叠元素都将被关闭

举个栗子：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        点击1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">内容1</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        点击2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">内容2</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        点击3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">内容3</div>
    </div>
  </div>
</div>

效果图：

水平菜单：
.list-inline该类添加 到<ul>
举个栗子：

<ul class="list-inline">
  <li><a href="#">选项一</a></li>
  <li><a href="#">选项二</a></li>
  <li><a href="#">选项三</a></li>
  <li><a href="#">选项四</a></li>
</ul>

效果图：

制表符:

<ul class="nav nav-tabs">   //制表符

<li class="active">   表示标记当前页面

举个栗子：

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

效果图：

有下拉框的标签：

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
</ul>

效果图：

Pills：

<ul class="nav nav-pills">

举个栗子：

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href<ul class="nav nav-pills">="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

效果图：

也可以垂直显示。只需添加.nav-stacked该类

举个栗子：

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href<ul class="nav nav-pills">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

效果图：

还可以动态的哦
举个栗子：

<div class="col-md-3">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

效果图：
大屏：

小屏：

还可以往一个菜单栏里面添加一列菜单栏：
举个栗子：

<div class="container">
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li> 
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>
</div>

效果图：

要中心/对齐标签和Pills，请使用.nav-justified该类。
请注意，在小于768px的屏幕上，列表项目将被堆叠（内容将保持居中）：
举个栗子：

<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

大屏：

小屏：

可切换/动态标签：
三块内容 点击一块显示其内容
举个栗子：

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

效果图：

Pills也可以动态：
举个栗子：

<ul class="nav nav-pills">
  <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
  <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

效果图：

其实标签和Pills区别不是很大看着