关于bootstrap的导航栏

Posted 韩说不白说

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于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>



以上是关于关于bootstrap的导航栏的主要内容,如果未能解决你的问题,请参考以下文章

关于 Bootstrap 4 - 导航栏顶部放置

关于bootstrap--导航栏

Twitter bootstrap 3:导航栏在词缀触发时改变宽度

Bootstrap - 更改断点导航栏?

引导导航栏折叠未在单击时关闭

Bootstrap 3 固定顶部导航栏显示水平滚动