<nav class="navbar navbar-default navbar-fixed-top front-nav">
    <div class="container">
        <div>
            <!-- 左侧栏移动端触发:可选  -->
            <img class="nav-toggle-left" id="front-nav-toggle-left" alt="SidebarToggle"/>
            <!-- -->
            <!-- 品牌图片大小为150 * 30:宽度不定,高度固定30px -->
            <div class="nav-brand"><a href="#"><img src="dev/img/logo.png" alt="brand" class="img-responsive"/></a></div>
            <!-- -->
        </div>
        <!-- 导航栏菜单 -->
        <div class="nav-collapse collapse" id="nav-collapse-demo">
            <ul class="nav navbar-nav">
                <li class="front-active"><a href="#">菜单1</a></li> <!-- 激活菜单 -->
                <li><a href="#">菜单2</a></li>
                <!-- 下拉菜单 -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">菜单3<span class="caret"></span></a>
                    <ul class="dropdown-menu nav-dropdown">
                        <li><a href="#">下拉菜单1</a></li>
                        <li><a href="#">下拉菜单2</a></li>
                        <li><a href="#">下拉菜单3</a></li>
                        <li><a href="#">下拉菜单4</a></li>
                    </ul>
                </li>
                <!-- end 下拉菜单 -->
            </ul>
        </div>
        <!-- end 导航栏横向菜单 -->
        <!-- 导航栏右侧区域 -->
        <div class="nav-right">
            <!-- 搜索图标:可选 -->
            <div class="area area-media"><span class="glyphicon glyphicon-search nav-search-icon"></span></div>
            <!-- -->
            <!-- 产品导航菜单按钮 -->
            <div class="area area-media"><span class="glyphicon glyphicon-th nav-toggle-pro" data-gen="nav-pro" data-toggle="front-popover-bottom" data-target="#nav-pro-demo"></span></div>
            <!-- -->
            <!-- 导航栏用户头像 -->
            <div class="area area-avatar area-media"><img src="dev/img/avatar-demo.jpg" class="img-circle nav-avatar" alt="avatar" data-toggle="front-popover-bottom" data-target="#nav-user-demo"/></div>
            <!-- -->
            <!-- 横向导航栏移动端触发:可选 -->
            <div class="area visible-sm nav-toggle-down" data-toggle="collapse" data-target="#nav-collapse-demo"><span class="glyphicon glyphicon-menu-hamburger" id="front-nav-toggle-down-demo"></span></div>
            <!-- -->
            <!-- 产品导航菜单 -->
            <div id="nav-pro-demo" data-pro="5"></div>
            <!-- 用户菜单 -->
            <div id="nav-user-demo" class="bottom nav-popover nav-popover-media nav-avatar-menu">
                <div class="arrow"></div>
                <ul>
                    <li class="text-center">
                        <a href="#">
                            <!-- 用户头像 -->
                            <img src="dev/img/avatar-demo.jpg" alt="avatar" class="img-circle img-lg-avatar"/>
                            <!-- end 用户头像 -->
                        </a>
                        <div>用户昵称</div>
                        <div><small>用户邮箱</small></div>
                    </li>
                    <li class="divider"></li> <!-- 分界线 -->
                    <li class="clearfix">
                        <div class="col-xs-4 text-center">信息1</div>
                        <div class="col-xs-4 text-center">信息2</div>
                        <div class="col-xs-4 text-center">信息3</div>
                    </li>
                    <li class="divider"></li> <!-- 分界线 -->
                    <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;退出</a></li>
                </ul>
            </div>
            <!-- end 用户菜单 -->
        </div>
        <!-- end 导航栏右侧区域 -->
    </div>
</nav>