Bootstrap导航条

川长思鸟来 2022-06-17 10:17 255阅读 0赞

**一、默认的导航条**  
在制作一个基础导航条时，主要分以下几步：  
1、在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”；  
2、向 （div） 元素添加一个标题 class “navbar-header”，内部包含了带有 class “navbar-brand” 的 （a） 元素。这会让文本看起来更大一号。  
3、向导航栏添加链接，只需要添加带有 class “nav”、”navbar-nav” 的无序列表即可。

<div class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">LOGO</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JAVASCRIPT</a></li>
            </ul>
        </div>

![这里写图片描述][SouthEast]  
**二、反色的导航条**  
bootstrap导航条的可选页面, 有两种(可自己写css定义), 第一种默认的.navbar-default, 效果是:白色的背景黑色的字, 第二种是.navbar-inverse, 效果是:黑色的背景加上白色的字。  
![这里写图片描述][SouthEast 1]  
**三、固定的导航条**  
很多情况下，我们希望导航条固定在浏览器顶部或底部。  
（1） .navbar-fixed-top：导航条固定在浏览器窗口顶部  
（2） .navbar-fixed-bottom：导航条固定在浏览器窗口底部  
使用方法很简单，只要在制作导航条最外部容器navbar上追加对应的类名即可。  
**四、带表单的导航条**  
在Bootstrap框架中提供了一个“navbar-form”，只要在navbar容器中放置一个带有navbar-form类名的表单。  
“navbar-left”让表单左浮动，“navbar-right”样式，让元素在导航条靠右对齐。

<div class="navbar navbar-default" role="navigation">
      　<div class="navbar-header">
      　    <a href="##" class="navbar-brand">LOGO</a>
      　</div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">HTML</a></li>
            <li><a href="##">CSS</a></li>
            <li><a href="##">JAVASCRIPT</a></li>
        </ul>
        <form action="##" class="navbar-form navbar-left">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入关键词" />
                <button type="submit" class="btn btn-default">搜索</button>
            </div>
        </form>
    </div>

![这里写图片描述][SouthEast 2]

**五、响应式导航条**  
1、在.navbar-header的（div）里面添加一个class为“navbar-toggle”的（button）,增加data-toggle和data-target属性；  
2、将链接ul的无序列表放在一个class为”collapse“、“ navbar-collapse”、“ navbar-responsive-collapse”的（div）里面，并给这个（div）设置一个ID；

<div class="container">
            <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="navbar-header">
                
                
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    
                    <a class="navbar-brand" href="#">LOGO</a>
                </div>
                 
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-responsive-collapser">
                        <li class="active"><a href="#">HTML</a></li>
                        <li><a href="#about">CSS</a></li>
                        <li><a href="#contact">JAVASCRIPT</a></li>
                    </ul>
                </div>
            </div>
        </div>

![这里写图片描述][SouthEast 3]  
注意：  
1、导航条样式的开始. 这里需要注意一点: 为了增强可访问性(和浏览器的兼容性)，务必给每个导航条加上 role=”navigation” 属性。方便bootstrap中js处理导航条的显示样式.  
2、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。  
3、为button添加data-target=”.类名/\#id名”；这个“类名/\#id名”即折叠内容所在的那个（div）的”类名/\#id名“；

[SouthEast]: /images/20220617/1664ed76cb3e4602a4865eb91f877276.png
[SouthEast 1]: /images/20220617/4e7bda541e8543279b819bc991627677.png
[SouthEast 2]: /images/20220617/60892100d4ed4c7884561559a1b2ce96.png
[SouthEast 3]: /images/20220617/c8bf473415e648a9bf6cb4b1ba4be4d1.png