Bootstrap导航条

最新推荐文章于 2025-05-14 17:19:36 发布

原创最新推荐文章于 2025-05-14 17:19:36 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #导航

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Bootstrap框架创建不同类型的导航条，包括默认导航条、反色导航条、固定导航条、带表单的导航条及响应式导航条。详细说明了每种导航条的实现方法和关键代码。

一、默认的导航条
在制作一个基础导航条时，主要分以下几步：
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>

这里写图片描述
二、反色的导航条
bootstrap导航条的可选页面, 有两种(可自己写css定义), 第一种默认的.navbar-default, 效果是:白色的背景黑色的字, 第二种是.navbar-inverse, 效果是:黑色的背景加上白色的字。

三、固定的导航条
很多情况下，我们希望导航条固定在浏览器顶部或底部。
（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>

这里写图片描述

五、响应式导航条
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">
            <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
            <!-- 保证在窄屏时要显示的图标样式（固定写法）-->
                <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>
                <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
                <a class="navbar-brand" href="#">LOGO</a>
            </div>
             <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
            <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>

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