Bootstrap教程(21)--响应式导航栏详解

简介: 本文目录1. 概述2. 响应式导航栏3. 可折叠导航栏4. 深色导航栏5. 顶部固定菜导航栏6. 导航栏添加下拉菜单和表单控件7. 小结

1. 概述

在很长的一段时间里,我都很羡慕一个一些大神的个人网站。这些网站有一个共同特点,同时支持PC端显示和手机端显示。


当使用手机打开时,导航栏会自动折叠为一个按钮,效果棒极了。


后来学会了Bootstrap才知道,偶买噶,Bootstrap提供的导航栏原来天生就带这效果。厉害!


2. 响应式导航栏

导航栏的创建还是比较复杂的,但是不要担心,我们来一步步分析创建过程。


第1步,创建一个导航栏navbar。

<nav class="navbar navbar-default">
</nav>
第2步,添加.container-fluid类的容器,这样可以让导航栏内容按容器规则显示。
<nav class="navbar navbar-default">
  <div class="container-fluid">
  </div>
</nav>
第3步,添加导航栏头部navbar-header,并在头部放置品牌栏navbar-brand,品牌蓝内放置网站图标和标题文字。
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class='navbar-brand'>
            <span class="glyphicon glyphicon-leaf"></span> 响应式导航栏
          </a>
      </div>
  </div>
</nav>
第4步,添加导航菜单栏,使用nav navbar-nav类设置。
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class='navbar-brand'>
                    <span class="glyphicon glyphicon-leaf"></span> 我的博客
                </a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">菜单1</a></li>
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
            </ul>
        </div>
    </nav>

image.png

3. 可折叠导航栏

虽然上面创建的导航栏,已经可以实现在手机等小屏幕设备上完整展示菜单了。


但是菜单占用的地方比较大,会遮住内容部分,此时就可以考虑使用可折叠导航栏了,当容器宽度不足时,菜单栏会折叠为一个按钮,当点击按钮时才弹出完整菜单。


首先,在导航栏的头部添加一个折叠按钮,代码如下。

    <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#collapsed-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class='navbar-brand'>
                    <span class="glyphicon glyphicon-leaf"></span> 可折叠导航栏
                </a>
            </div>
解释下,class="navbar-toggle collapsed"用来设置折叠样式,data-toggle="collapse"是通过JavaScript实现折叠效果,data-target="#collapsed-nav"则指向折叠的容器元素。
然后,我们将菜单部分修为:
      <div class="collapse navbar-collapse" id="collapsed-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                </ul>
            </div>
1
2
3
4
5
6
解释下,class="collapse navbar-collapse"设置了容器折叠样式,id="collapsed-nav"呼应按钮指向的id。
如此一来,当容器宽度不足时,菜单部分就折叠为一个按钮,点击按钮时弹出折叠的菜单,效果如下:

image.png

4. 深色导航栏

深色导航栏就比较简单了,直接添加navbar-inverse类即可。

  <nav class="navbar navbar-default navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#collapsed-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class='navbar-brand'>
                    <span class="glyphicon glyphicon-leaf"></span> 深色导航栏
                </a>
            </div>
            <div class="collapse navbar-collapse" id="collapsed-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                </ul>
            </div>
        </div>
    </nav>

5. 顶部固定菜导航栏

有时候网页内容较多,当我们浏览完内容想要点击导航栏时,需要回到顶部,比较麻烦。

有一种效果是将导航栏固定到顶部,就算网页向下滑动,导航栏一直显示在顶部。

实现也相当简单,添加navbar-fixed-top类即可,代码如下:

  <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#collapsed-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class='navbar-brand'>
                    <span class="glyphicon glyphicon-leaf"></span> 顶部固定导航栏
                </a>
            </div>
            <div class="collapse navbar-collapse" id="collapsed-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                </ul>
            </div>
        </div>
    </nav>

效果如下,当页面滑动时,导航栏固定不动。

image.png

6. 导航栏添加下拉菜单和表单控件

Bootstrap导航栏非常灵活,可以添加下拉菜单,同时可以添加使用navbar-form类修饰的表单,代码如下:

  <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#collapsed-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class='navbar-brand'>
                    <span class="glyphicon glyphicon-leaf"></span> 添加子菜单和表单
                </a>
            </div>
            <div class="collapse navbar-collapse" id="collapsed-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">菜单1</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">菜单3 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">子菜单3-1</a></li>
                            <li><a href="#">子菜单3-2</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="搜索">
                    </div>
                    <button type="button" class="btn btn-primary">按钮</button>
                </form>
            </div>
        </div>
    </nav>

7. 小结

Bootstrap提供的导航栏可以说功能非常全面,而且稳定,而且优雅。非常好~

相关文章
|
14天前
|
前端开发 安全 Java
响应式企业网站源码JavaL/PHP带后台管理​:Bootstrap HTML5模板
本指南深度解析基于Java/PHP双引擎与Bootstrap HTML5的响应式企业官网开发全流程,涵盖架构设计、后台管理、数据库规范、安全加固及云原生部署,助力企业实现品牌展示、业务转化与运营闭环,推动数字化转型。
|
11月前
Bootstrap5 导航栏9
导航栏可固定于页面顶部或底部,使用 `.fixed-top` 类将其固定在顶部,如示例所示;而 `.fixed-bottom` 类则用于底部固定。代码片段展示了如何应用这些类以实现固定效果。
|
11月前
|
前端开发
Bootstrap5 导航栏8
使用 `.navbar-text` 类可在导航栏中添加非链接文本,确保文本水平对齐且样式统一。示例代码展示了如何在 Bootstrap 导航栏中加入文本和链接。
|
11月前
Bootstrap5 导航栏1
Bootstrap5 导航栏通常位于页面顶部,使用 `.navbar` 类创建标准导航栏,并通过 `.navbar-expand-xxl|xl|lg|md|sm` 类实现响应式布局(大屏水平、小屏垂直)。导航选项使用 `&lt;ul&gt;` 和 `class=&quot;navbar-nav&quot;`,每个选项用 `&lt;li&gt;` 和 `class=&quot;nav-item&quot;`,链接使用 `&lt;a&gt;` 和 `class=&quot;nav-link&quot;`。
|
11月前
Bootstrap5 导航栏7
导航栏中的表单和按钮通过使用 `class=&quot;form-inline&quot;` 实现水平布局。示例展示了如何在导航栏中嵌入搜索表单和按钮,以及如何使用 `.input-group` 和 `.input-group-prepend` 在输入框前添加标签,如用户名前缀。
|
11月前
Bootstrap5 导航栏6
此示例展示了如何在导航栏中设置下拉菜单。通过添加`&lt;li class=&quot;nav-item dropdown&quot;&gt;`和相应的`&lt;div class=&quot;dropdown-menu&quot;&gt;`,可以实现链接的下拉显示功能。
|
11月前
Bootstrap5 导航栏5
折叠导航栏适用于小屏幕设备,通过点击按钮展开或收起导航选项。实现方法是在按钮上使用 `class=&quot;navbar-toggler&quot;` 和 `data-bs-toggle=&quot;collapse&quot;` 属性,并设置目标 `id` 以匹配包含导航链接的 `div` 元素。示例代码展示了如何构建一个基本的折叠导航栏。
|
11月前
Bootstrap5 导航栏4
`.navbar-brand` 类用于在导航栏中高亮显示品牌或Logo。通过此类,可以轻松地将文本或图片作为品牌标识展示,并确保其在不同屏幕尺寸上自适应显示。例如,使用 `&lt;img&gt;` 标签插入图片Logo,并通过内联样式设置宽度,实现响应式设计。
|
11月前
Bootstrap5 导航栏2
通过移除 .navbar-expand-xxl|xl|lg|md|sm 类,可创建垂直导航栏。示例如下:背景为浅色的导航栏,包含三个链接项。每个链接项均为列表元素,通过 .nav-item 和 .nav-link 类进行样式设置。
|
11月前
Bootstrap5 导航栏4
`.navbar-brand` 类用于在导航栏中高亮显示品牌或Logo,支持文字和图片形式,并可实现图片自适应效果。示例代码展示了如何使用该类设置Logo。