eclipse Maven Bootstrap 导航栏

1创建一个maven web工程

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

 1 <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
 2 <dependency>
 3       <!--bootstrap依赖 -->
 4     <groupId>org.webjars</groupId>
 5     <artifactId>bootstrap</artifactId>
 6     <version>4.3.1</version>
 7 </dependency>
 8     <!-- https://mvnrepository.com/artifact/org.webjars.bower/jquery -->
 9 <dependency>
10  <!--jquery依赖 -->
11     <groupId>org.webjars.bower</groupId>
12     <artifactId>jquery</artifactId>
13     <version>3.4.1</version><br></dependency>

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

 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>

注:复制到的路径名如下,需要删掉webjars前面的部分

样式记得导入进了,否则运行结果如下

正确运行结果如下:

原文地址:https://www.cnblogs.com/hzyhx/p/10958271.html

时间: 2024-10-14 23:04:50

eclipse Maven Bootstrap 导航栏的相关文章

Bootstrap导航栏实例讲解

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 1.默认的导航栏创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 ro

Bootstrap导航栏

Bootstrap中导航栏在应用和网站中作为导航页头的响应式基础组件.导航栏在移动设备视图中是折叠的,随着设备可用视口宽度的增加,导航栏也会水平展开.在Bootstrap中导航栏包含了基本的预定义类和钩子. 一.基本导航栏 创建一个默认导航栏的步骤如下: <nav>元素中添加.navbar .navbar-default; <nav>元素中添加role="navigation",增加可访问性: 向 <div> 元素添加一个标题 .navbar-hea

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

1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="

Bootstrap 导航栏和登陆框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jq

bootstrap 导航栏鼠标悬停显示下拉菜单

在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4

Bootstrap——导航栏编写

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">      <div class="container">        <div class="navbar-header">          <button class="navbar-toggle collapsed"

Bootstrap基础4(导航栏与下拉列表)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Bootstr

Bootstrap&lt;基础十七&gt;导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

Bootstrap入门Demo——制作路径导航栏

今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面,感觉挺好看,然后去官网看了下组件,发现都挺漂亮的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源码看了看. 一,源码文件简介 下载完源码之后,我们肯定是想着先把源码中的Demo先运行下看看,但是,看着这么多英文的东西还是很迷茫,所以,从整体上熟悉下都有什么东西还是很有必要的. 二,如何引入的问题 现在很多UI框架都是基于Jquery的,所以,在使用之前,如果需要,一定要先引入jquery文件,然后