zoukankan      html  css  js  c++  java
  • 关于bootstrap的导航栏

    以下是bootstrap的导航栏

    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">主页</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>
                            <li class="dropdown"><a href="#" class="dropdown-toggle"
                                data-toggle="dropdown" role="button" aria-haspopup="true"
                                aria-expanded="false">Dropdown<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li class="dropdown-header">Nav header</li>
                                    <li><a href="#">Separated link</a></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul></li>
                        </ul>

    其中关键的就是

            <ul class="nav navbar-nav navbar-right">
                             <!-- 设置它的导航栏 -->
                            <li><a href="#" id="username" class="dropdown-toggle"
                                data-toggle="dropdown" role="button" aria-haspopup="true"
                                aria-expanded="false">【注册】</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">个人信息</a></li>
                                    <li><a href="#">修改密码</a></li>
                                    <li><a href="#">设置背景</a></li>
                                </ul></li>
                            
                            <li><a href="/meetings/login">【退出】</a></li>
                        </ul>
                  ul里面有li  

    这个是需要特别注意的     

    您可以切换下拉菜单(Dropdown)插件的隐藏内容:

    通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示:

    <div class="dropdown">
      <a data-toggle="dropdown" href="#">下拉菜单(Dropdown)触发器</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
       
      </ul>



  • 相关阅读:
    微服务配合docker使用
    基于docker部署使用ELK+FileBeat日志管理平台
    Ubuntu开发用新机安装流程
    http 直接从body里传输数据
    005
    003
    004
    001
    002
    谷歌查看、管理cookie
  • 原文地址:https://www.cnblogs.com/carsar/p/5516191.html
Copyright © 2011-2022 走看看