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

代码如下

  1. <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
  2. <dependency>
  3. 	<groupId>org.webjars</groupId>
  4. 	<artifactId>bootstrap</artifactId>
  5. 	<version>4.3.1</version>
  6. </dependency>
  7. 	<!-- https://mvnrepository.com/artifact/org.webjars.bower/jquery -->
  8. <dependency>
  9. 	<groupId>org.webjars.bower</groupId>
  10. 	<artifactId>jquery</artifactId>
  11. 	<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前面的部分

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

5.完整代码

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <%@ page language="java" contentType="text/html; charset=UTF-8"
  5.     pageEncoding="UTF-8"%>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>在此处插入标题</title>
  8. <link rel="stylesheet" href="webjars/bootstrap/4.3.1/css/bootstrap.css">
  9. </head>
  10. <body>
  11. <nav class="navbar navbar-expand-xl navbar-dark bg-dark">
  12.   <a class="navbar-brand" href="#">Expand at xl</a>
  13.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
  14.     <span class="navbar-toggler-icon"></span>
  15.   </button>
  16.  
  17.   <div class="collapse navbar-collapse" id="navbarsExample06">
  18.     <ul class="navbar-nav mr-auto">
  19.       <li class="nav-item active">
  20.         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  21.       </li>
  22.       <li class="nav-item">
  23.         <a class="nav-link" href="#">Link</a>
  24.       </li>
  25.       <li class="nav-item">
  26.         <a class="nav-link disabled" href="#">Disabled</a>
  27.       </li>
  28.       <li class="nav-item dropdown">
  29.         <a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  30.         <div class="dropdown-menu" aria-labelledby="dropdown06">
  31.           <a class="dropdown-item" href="#">Action</a>
  32.           <a class="dropdown-item" href="#">Another action</a>
  33.           <a class="dropdown-item" href="#">Something else here</a>
  34.         </div>
  35.       </li>
  36.     </ul>
  37.     <form class="form-inline my-2 my-md-0">
  38.       <input class="form-control" type="text" placeholder="Search">
  39.     </form>
  40.   </div>
  41. </nav>
  42. <script src="webjars/jquery/3.4.1/dist/jquery.min.js"></script>
  43. <script src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  44. </body>
  45. </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. curl查看http请求消息的时长

    1. -X 指定请求方式GET请求curl -X GET http://www.jackyops.com/search?data=123  # -X GET是可选的 POST请求curl -X POS ...

  2. HDU 6071 - Lazy Running | 2017 Multi-University Training Contest 4

    /* HDU 6071 - Lazy Running [ 建模,最短路 ] | 2017 Multi-University Training Contest 4 题意: 四个点的环,给定相邻两点距离, ...

  3. element ui的表格列设置fixed后做动态表格出现表格错乱

    最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...

  4. 51 Nod 1070 Bash游戏v4（斐波那契博弈）

    这题的证明看不太懂,日后再重做... 1070 Bash游戏 V4  基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 有一堆石子共有N个.A B两个 ...

  5. 第67节:Java中的JDBC运用

    第67节:Java中的JDBC运用 https://www.jianshu.com/p/628a9ba1b205

  6. [Shell] 分隔字符串为数组

    #!/bin/bash tmp="test,girl,boy,love" OLD_IFS="$IFS" IFS="," arr=($a) I ...

  7. load加载层

    //eg1 var index = layer.load(); //eg2 var index = layer.load(1); //换了种风格 //eg3 var index = layer.loa ...

  8. caps lock 映射成 esc，右Ctrl映射右移

    xmodmap -e 'clear Lock' -e 'keycode 0x42 = Escape' xmodmap -e 'clear Lock' -e 'keycode 105= Right'

  9. github pr

    github----向开源框架提交pr的过程 https://blog.csdn.net/vim_wj/article/details/78300239github 的 pr 使用方法 https:/ ...

  10. 在业务控制方法中写入模型变量收集参数，且使用@InitBind来解决字符串转日期类型

    1)  在默认情况下,springmvc不能将String类型转成java.util.Date类型,所有我们只能在Action 中自定义类型转换器 <form action="${pa ...