Bootstrap实现导航条实例详解-js教程-PHP中文网

首页

web前端

js教程

Bootstrap实现导航条实例详解

PHPz

Jan 13, 2018 pm 05:25 PM

bootstrap 实例详解

本文主要和大家分享Bootstrap实现导航实例详解，在建设一个网站的时候，不同的页面有很多元素是一样的，比如导航条、侧边栏等，我们可以使用模板的继承，避免重复编写html代码。现在我们打算实现一个在网页上方的导航条，并在所有的页面中继承这个导航条。导航条的建立，我们直接使用Bootstrap提供的如下导航条的样式。

相关推荐:《Bootstrap教程》

Bootstrap实现导航条实例详解

但在使用Bootstrap的导航条样式之前，需要先引用Bootstrap所需要的css和js文件以及jQuery，我们在html的header中插入以下代码完成引用：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

登录后复制

这里都是通过链接引用网络上的css和js文件，而不是将其下载下来并从本地引用。之后我们把上图中的所有html代码复制到html的body中，浏览器就能显示和图中一样的导航条了。我们再做一些简单的修改和优化，最终我们的导航条是这样的：

Bootstrap实现导航条实例详解

具体修改的点是，我把原始的Brand替换成了一个图片作为logo，第一个下拉控件Dropdown删掉了，最右侧的下拉控件增加了一个选项，并把文字都替换成了我们想要的。然后建立了一个base.css文件来调整图片大小、控件位置、背景色等等，这一部分都是基础的html/css知识，也就不多说。后续所有的网页都要使用这个导航条，我们将含有导航条这个html命名为base.html，并在其body中，导航条代码的下方增加以下代码：

{% block body_part %}
{% endblock %}

登录后复制

然后新建一个home.html，输入以下内容：

{% extends 'base.html' %}
{% block body_part %}
<p>This is body content under nav-bar</p>
{% endblock %}

登录后复制

渲染home.html并访问，我们可以看到这样的结果：

Bootstrap实现导航条实例详解

因此我们不难理解，在home.html中，{% extends 'base.html' %}表示继承自base.html，home.html中block和endblock区间的代码块会自动替换到base.html同样名为body_part的block区域。block可以使用多个，例如在<title>中也可以使用，以便于不同的页面设置不同的标题。
最终base.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{{ url_for(&#39;static&#39;,filename=&#39;css/base.css&#39;) }}"/>
    <link rel="shortcut icon" href="{{ url_for(&#39;static&#39;, filename=&#39;images/favicon.ico&#39;) }}">
    <title>{% block page_name %}{% endblock %}-HarpQA</title>
</head>
<body>
<nav class="navbar navbar-default">
    <p class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <p class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <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">
              <img class="logo" src="{{ url_for(&#39;static&#39;,filename=&#39;images/logo.png&#39;) }}">
          </a>
        </p>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">发布问答</a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <p class="form-group">
              <input type="text" class="form-control" placeholder="Key Words">
            </p>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
             <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">友情链接<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="mailto:liutao25@baidu.com">联系我</a></li>
                <li><a href="http://flask.pocoo.org" target="_blank">Flask官网</a></li>
                <li><a href="https://www.python.org/">Python官网</a></li>
                <li role="separator" class="pider"></li>
                <li><a href="https://www.baidu.com" target="_blank">百度搜索</a></li>
                <li role="separator" class="pider"></li>
                <li><a href="https://www.google.com.hk" target="_blank">Google Search</a></li>
              </ul>
            </li>
          </ul>
        </p><!-- /.navbar-collapse -->
      </p><!-- /.container-fluid -->
</nav>
{% block body_part %}
{% endblock %}
</body>
</html>

登录后复制

请注意一下base.css和logo图片的引用，我们也使用了url_for函数，第一个参数是static，代表项目文件夹下static文件夹，第二个参数是以static文件夹为基准静态文件的相对路径，我们把js文件/css文件/图片文件等都放在这个文件夹下，所以这个用法以后会经常使用。我们在收藏网页的时候，网页都有一个小图标，我们也可以在header中使用这行html代码来实现：

<link rel="shortcut icon" href="{{ url_for(&#39;static&#39;, filename=&#39;images/favicon.ico&#39;) }}">

登录后复制

把favicon.ico文件放在static/images文件夹即可，我们使用了Flask的图标，效果如下图：

Bootstrap实现导航条实例详解

base.css代码如下：

body{
    background: #F3F3F3;
}

.navbar-brand{
    padding: 0 5px;
    padding-right: 10px;
}

.logo{
    height: 50px;
}

登录后复制

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7503

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

bootstrap垂直居中怎么弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 实现垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 类，将元素置于 flexbox 容器内。align-items-center 类法：对于不支持 flexbox 的浏览器，使用 align-items-center 类，前提是父元素具有已定义的高度。

bootstrap搜索栏怎么获取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 获取搜索栏的值：确定搜索栏的 ID 或名称。使用 JavaScript 获取 DOM 元素。获取元素的值。执行所需的操作。

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。