bootstarp组件

- glyphicon字体图标
- 图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。
- 图标类只能应用在不包含任何文本内容或子元素的元素上。
- 可以这样写：

     <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-log-in"></span>
        login
    </button>

DropDown下拉菜单

<div class="dropdown">
    <button type="button" class="dropdown-toggle btn btn-primary" data-toggle="dropdown" id="username">员工列表
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" >
        <li class="dropdown-header">员工姓名</li>
        <li class="divider"></li>
        <!--分割线-->
        <li><a href="#" class="text-center">王二麻子</a></li>
        <li><a href="#" class="text-center">王尼玛</a></li>
        <li id="name"><a href="#" class="text-center">张全蛋</a></li>
        <li><a href="#" class="text-center">赵铁柱</a></li>
    </ul>
</div>

• 默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
• 下拉菜单可以添加标题/分割线
• 添加disabled类来禁用某个菜单

按钮式下拉菜单

• 把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。
• 给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开

<!--单按钮式-->
    <div class="btn-group">
        <button type="button" class="dropdown-toggle btn btn-warning" data-toggle="dropdown">
            <span>father</span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
        </ul>
    </div>
    <!--分列式按钮菜单-->
    <div class="btn-group">
        <button type="button" class="btn btn-warning" >father</button>
        <button type="button" class="dropdown-toggle btn btn-warning" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-warning"  data-toggle="dropdown">father</button>
        <button type="button" class="dropdown-toggle btn btn-warning" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
        </ul>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <!--向上弹入式菜单-->
    <header class="page-header">
        <h1>向上弹入式菜单</h1>
    </header>

    <div class="btn-group dropup">
        <button type="button" class="btn btn-danger">father</button>
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
            <li class="text-center"><a href="">son</a></li>
        </ul>
    </div>

导航条

<nav class="navbar  navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-brand">导航条</div>
            <button  data-target="#subUl" type="button" class="navbar-toggle" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="subUl">
            <ul class="navbar-nav nav " >
                <li><a href="" class="glyphicon glyphicon-home"> 首页</a></li>
                <li><a href="" class="glyphicon glyphicon-cloud"> 第一页</a></li>
                <li><a href="" class="glyphicon glyphicon-book"> 第二页</a></li>
            </ul>
            <ul class="navbar-nav nav navbar-right">
                <li><a href="" class="glyphicon glyphicon-envelope"> 邮件</a></li>
                <li><a href="" class="glyphicon glyphicon-phone"> 电话</a></li>
                <li>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">111</a></li>
                        <li><a href="#">111</a></li>
                        <li><a href="#">111</a></li>
                        <li><a href="#">111</a></li>
                        <li><a href="#">111</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>


</nav>