1.在pom.xml添加两个依赖 Bootstrap 依赖和jQuery依赖

代码如下

<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->

<dependency>

	<groupId>org.webjars</groupId>

	<artifactId>bootstrap</artifactId>

	<version>4.3.1</version>

</dependency>

	<!-- https://mvnrepository.com/artifact/org.webjars.bower/jquery -->

<dependency>

	<groupId>org.webjars.bower</groupId>

	<artifactId>jquery</artifactId>

	<version>3.4.1</version>
</dependency>

2.从https://getbootstrap.com/docs/4.3/examples/navbars/#?tdsourcetag=s_pcqq_aiomsg复制一个导航栏源码，加入到index.jsp的body标签里

3.下载 Bootstrap 源码和jQuery源码

4.然后把bootstrap.css，jquery.min.js，bootstrap.min.js的限定名复制，导入到index.jsp

示例，复制到的路径名如下，需要删掉webjars前面的部分

/META-INF/resources/webjars/bootstrap/4.3.1/css/bootstrap.min.css

5.完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>在此处插入标题</title>

<link rel="stylesheet" href="webjars/bootstrap/4.3.1/css/bootstrap.css">

</head>

<body>

<nav class="navbar navbar-expand-xl navbar-dark bg-dark">

  <a class="navbar-brand" href="#">Expand at xl</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarsExample06">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled</a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

        <div class="dropdown-menu" aria-labelledby="dropdown06">

          <a class="dropdown-item" href="#">Action</a>

          <a class="dropdown-item" href="#">Another action</a>

          <a class="dropdown-item" href="#">Something else here</a>

        </div>

      </li>

    </ul>

    <form class="form-inline my-2 my-md-0">

      <input class="form-control" type="text" placeholder="Search">

    </form>

  </div>

</nav>

<script src="webjars/jquery/3.4.1/dist/jquery.min.js"></script>

<script src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>

</html>

6.运行截图

eclipse Maven Bootstrap 导航栏的更多相关文章

  1. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  2. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  3. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  4. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  5. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  6. eclipse左侧的导航栏不见了怎么调

    点击eclipse上方导航栏的window 然后再点击Reset Perspective 这样左侧的导航栏就出来了

  7. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  8. Bootstrap导航栏

    导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...

  9. bootstrap导航栏的辛酸史

    昨天本来想完成test10的页面内容的,但是给老铁拉出去打麻将呢.不过还好昨天写了一些内容.现在奉上.不作更改. 今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题.) 我 ...

随机推荐

  1. Python数据抓取（2） —简单网络爬虫的撰写

    (一)使用Requests存储网页 Requests 是什么?网络资源(URLs)抓取套件 优点? 改善urllib2的缺点,让使用者以最简单的方式获取网络资源 可以使用REST操作(POST,PUT ...

  2. ZR#710

    雷劈数 题意: 现在给出两个整数,求出位于两个整数之间的所有的"雷劈数. 解法: 因为雷劈数特殊的性质,所以在数据范围中的雷劈数实际很少,直接暴力打表就行. CODE: #include&l ...

  3. linux下通过进程名查看其占用端口

    linux下通过进程名查看其占用端口: 1.先查看进程pid ps -ef | grep 进程名 2.通过pid查看占用端口 netstat -nap | grep 进程pid 例:通过nginx进程 ...

  4. Java并发指南开篇：Java并发编程学习大纲

    Java并发编程一直是Java程序员必须懂但又是很难懂的技术内容. 这里不仅仅是指使用简单的多线程编程,或者使用juc的某个类.当然这些都是并发编程的基本知识,除了使用这些工具以外,Java并发编程中 ...

  5. Python选择指定文件夹的文件然后复制出其中几个文件到新的文件夹

    """ 要求: 1.读取cdm文件的所有子文件夹,然后每个文件夹里面是抽出一个一个mp3后缀的文件. 遍历所有的子文件,然后将这些mp3文件,保存到一个新的文件夹.文件夹 ...

  6. springboot 配置跨越访问

    import org.springframework.stereotype.Component; import javax.servlet.*; import javax.servlet.http.H ...

  7. IntelliJ IDEA 2017.3 创建多Module项目时，右边栏出现多个root模块的问题。如图。

    我新建了一个项目,里面有三个模块(Module),结果建好后,出现了三个root.然后我发现主模块的pom文件,包含这样一段配置 <modules> <module>desig ...

  8. 搭建Django项目虚拟环境（Windows系统下）

    一.安装virtualenv 我们可以使用正式的Python环境中的pip进行安装.进入cmd界面,运行“ pip install virtualenv ”,完成安装后,可以运行“ where vir ...

  9. Android 关于 CountDownTimer onTick() 倒计时不准确问题源码分析

    一.问题 CountDownTimer 使用比较简单,设置 5 秒的倒计时,间隔为 1 秒. final String TAG = "CountDownTimer"; * , ) ...

  10. 阿里云轻应用服务器配置Ubuntu的JDK、Tmocat、Mysql和Redis

    1.与服务器建立连接(达到效果:XShell和Xftp均可连接到服务器)   阿里云管理控制台提供的三种建立服务器连接方式: 使用浏览器发起安全连接(推荐) 客户端使用密钥进行连接 客户端使用账号密码 ...