<!--

    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>