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>

效果图：