bootstrap-下拉菜单

<!--
1.给父级添加class为dropdown，或者给父级添加定位属性
2.给button添加data-toggle="dropdown"属性,并添加dropdown-toggle类
3.ul需要添加一个dropdown-menu的class
-->
<!--
下拉菜单的样式：
open            默认菜单是展开的 给dropdown添加
dropup            菜单弹出往上
dropdown-header    菜单里的标题，给li添加
text-center        让内容居中
divider            分割线 li class="divider"

-->
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="dropdown open">
<button class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown">
学院课程 <span class="caret"></span>
</button>

<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">html</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
</div>

<div class="col-lg-4" style="margin-top:150px">
<div class="dropup open">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
学院课程 <span class="caret"></span>
</button>

<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
</div>

<div class="col-lg-4">
<div class="dropdown open">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
学院课程 <span class="caret"></span>
</button>

<ul class="dropdown-menu">
<li class="dropdown-header text-center"><a href="#">前端</a></li>
<li><a href="#">html</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">bootstrap</a></li>
<li class="divider"></li>
<li class="dropdown-header text-center"><a href="#">后端</a></li>
<li><a href="#">php</a></li>
<li class="disabled"><a href="#">java</a></li>
</ul>
</div>
</div>
</div>
</div>