Bootstrap按钮下拉菜单

Bootstrap按钮下拉菜单

---

组合式下拉菜单

1.新建一个web项目ch12，然后将ch11的东西copy过来。

2.打开ch12中的demo01.html

3.设置一个下拉菜单

<hr/>

 <div class="btn-group">

<button  type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

    下拉  //按钮名字

// 注意：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>

 </ul>

  </div>

4.运行效果

5.设置组合式的下拉菜单，我们可以复制三个下拉菜单进行组合。

（同样，我们可以改变它的样式。）

<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">

下拉

<span class="caret"></span>

<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">

下拉

 <span class="caret"></span>

6.运行效果

---

分离式下拉菜单

1.分离式下拉菜单实例

（点按钮是按钮的功能点小三角是小三角的功能，相当于我们要定义两个按钮。）

 <div class="btn-group dropup" >

<button type="button" class="btn btn-default">下拉</button>

//第一个按钮里面有文字“下拉”

    <button  type="button" class="btn btn-default 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>

  </ul>

  </div>

2.运行效果

---

按钮大小

1.设置按钮的大小

 <button  type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">

  下拉

    <span class="caret"></span>

 </button>

2.运行效果

---

向上弹起的菜单

1.向上弹起的菜单只需要在外层容器里加一个“dropup”，例如：

2.运行效果

（这样的话点击向上的小三角，菜单是向上弹起的。默认是向下的。）