2019 最新 Spring Boot 项目实战————4、BootStrap实现导航栏

最新推荐文章于 2024-05-14 09:55:02 发布
最新推荐文章于 2024-05-14 09:55:02 发布
阅读量757 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangpailiulanqi8/article/details/96840329
版权

最简单的前端UI框架

全局 CSS 样式 · Bootstrap v3 中文文档    https://v3.bootcss.com/css/

 

 

 

1、下载文件夹

起步 · Bootstrap v3 中文文档  https://v3.bootcss.com/getting-started/

                  

把三个文件夹复制到 IDEA--resources--static

                                         

 

 

2、把样式文件引入index.html

为什么绝对路径，相对路径？？？

script src  后面的type?? 为什么和官网不一致？

 

 

3、修改模板文件

具体的页面功能块，把这一部分放在 index.html 的body里

<body>

<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="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">码匠社区</span>

            </button>
            <a class="navbar-brand" href="#">码匠社区</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索问题">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <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="#">消息中心</a></li>
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">推出登录</a></li>

                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
</body>

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>码匠社区</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="js/bootstrap.min.js" type="application/javascript"></script>

</head>

<!---
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <! Brand and toggle get grouped for better mobile display>
        <div 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">码匠社区</span>
            </button>
            <a class="navbar-brand" href="#">码匠社区</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索问题">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <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="#">消息中心</a></li>
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">退出登录</a></li>

                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
</body>

--->

<body>

<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="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">码匠社区</span>

            </button>
            <a class="navbar-brand" href="#">码匠社区</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索问题">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <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="#">消息中心</a></li>
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">推出登录</a></li>

                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
</body>


</html>










<ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
        </ul>
    </li>
</ul>

 

 

bootstrap  下拉组件没反应？？？

 

                     

 

 

 

 

wangpailiulanqi8
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
bootstrap+spring boot实现面包屑导航功能(前端代码)
10-16
主要介绍了bootstrap+spring boot实现面包屑导航，在cms建站时都会有这种面包屑导航功能，文中给出了前端实例代码,需要的朋友可以参考下
Bootstrap导航栏
lin1072368472的博客
01-01 386
Bootstrap学习笔记 导航栏 首先先要有容器 导航栏容器 可选择 网页LOGO或者品牌 <div class="navbar-header">LOGO</div> 接下去可以设置导航栏菜单 导航栏元素 <ul class="nav navbar-nav">导航栏菜单</ul> <li class="navbar-item"&g...
五、Bootstrap之菜单栏和导航栏
最新发布
Itcodewizard的博客
05-14 1239
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
springboot-bootstrap组合demo
12-10
项目的后台框架用的springboot，前端框架用的是bootstrap，jpa的组合，实现前后分离
springboot+bootstrap项目源码
05-31
springboot项目源码，通过thymeleaf、bootstrap实现页面后台交互，菜单展示
springboot导航
旗鼓相当的对手的博客
06-27 642
http://springboot.fun/
spring boot+thymeleaf+bootstrap实现后台管理系统界面
08-28
Spring Boot+Thymeleaf+Bootstrap实现后台管理系统界面 Spring Boot是一款基于Java的开源框架，旨在简化基于Spring的应用程序的开发过程。Thymeleaf是一个modern server-side Java模板引擎，能够将HTML、XML、TEXT...
开发Spring Boot和Bootstrap视频课程下载整理.zip
08-21
在本压缩包“开发Spring Boot和Bootstrap视频课程下载整理.zip”中，包含了关于Spring Boot和Bootstrap的开发课程资源。这两个技术都是现代Web开发中的关键组件，Spring Boot简化了Spring框架的配置，而Bootstrap则...
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面（看评论酌情下载）
12-07
总的来说，这个项目结合了Spring Boot 的便捷性、Thymeleaf 的动态渲染能力和Bootstrap 的前端设计优势，提供了一种快速构建后台管理系统的解决方案。开发者可以根据实际需求，扩展功能，如权限控制、数据展示、表单...
spring boot+bootstrap+thymeleaf
04-10
Spring Boot、Bootstrap和Thymeleaf是现代Web开发中常用的技术栈，它们分别在不同的层面上解决了开发效率和用户体验的问题。下面将详细解释这三个技术及其整合应用。 **Spring Boot** Spring Boot是由Pivotal团队...
spring boot+mybatis+spring mvc+bootstrap+Mysql停车位管理系统源码
06-29
在停车位管理系统中，Bootstrap用于构建用户友好的交互界面，如停车记录表格、搜索表单、导航栏等。 **Mysql**： Mysql是一款开源的关系型数据库管理系统，具有高性能、高可用性和易用性等特点。在本系统中，Mysql...
一个炫酷的 springboot 后台模板,有菜单，权限，用户 管理的基本功能
09-21
一个后台管理系统，包含有菜单管理，比如新增、删除、修改菜单，同理有权限，用户多角色管理，多样报表，饼图，线形图，柱形图等 ，还有登录校验，当天登录次数过多限制，ip登录过多限制。等基本功能。后续可根据业务需求扩展。
基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【八】【完善整个项目】
热门推荐
笨鸟不会飞
12-11 2万+
上一章我们已经完成了菜单模块的开发工作，那么到了本章我们将完成我们角色管理模块的开发工作，在本章开始一个全新的模块进行开发的时候我们需要遵守一定的命名和开发规范如下： 1、我们的Controller的RequestMapping的命名要和我们的文件夹的命名一致，且增加的页面要叫add.html，修改的页面要叫update.html，若不按上述命名则需要大家自己去重写updatePage和addP
bootstrap4 左侧导航栏 优秀 大气_制作动态效果的后台导航栏——左侧导航
weixin_39928648的博客
11-24 1114
怎么制作动态效果的后台导航栏呢，一起来文中看看~先上完成效果：整体的制作过程1. 制作菜单元件分别制作导航菜单中的每个元件，制作好一个以后，就可以复用了，制作步骤如下：使用矩形，制作单个导航菜单的底层使用图片，制作导航菜单的图标使用矩形，设置成三角形，制作导航菜单的二级菜单的显示隐藏标识制作三角形的步骤：选择矩形，右键选择弹出来的菜单中的——变换形状，选择三角形。2. 制作菜单将制作好的菜单元件组...
Vue + Spring Boot 项目实战（七）：导航栏与图书页面设计（学习笔记07）
m0_57619948的博客
10-11 1249
一、导航栏的实现 这个导航栏的要求很简单： 能够在每个页面显示 美观 1.路由配置 为了实现第一个要求，我们需要把导航栏放在其它页面的父页面中（对 Vue 来说就是父组件），之前我们讲过，App.vue 是所有组件的父组件，但把导航栏放进去不合适，因为我们的登录页面中不应该显示导航栏。 为了解决这个问题，我们在 components 目录下直接新建一个组件，命名为 Home.vue，原始代码如下： 打开router/index.js，修改代码如下 2.使用 NavMenu 组件 ..
SpringBoot+LayUI动态展示侧边导航栏
wssc63262的博客
05-05 7406
采用springboot+mybatis+layui搭建一个动态的侧边导航栏 1.动态展示导航栏的数据如下图 json数据 思想：前端使用layui的标签属性获取到数据，用js进行拼接，展示到页面 2.主要页面代码 NavigationController.java package layui.demo.controller; import layui.demo.servi...
SpringBoot+layuimini实现左侧菜单动态展示
m0_46590717的博客
04-22 799
layuimini动态显示左侧菜单
使用bootstrap制作简单的左侧导航栏
qq_36589992的博客
06-24 8790
打开百度，搜索bootstrap菜鸟联盟从左侧菜单中找到导航栏，随便找个案例，点击尝试一下，粘贴以下代码，即可看见效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 默认的导航栏</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-
LayuiMini+spring boot实现动态左侧边栏（不定时更新）
兴趣爱好，努力学习
10-27 2191
自己开发中遇到的问题，仅供参考，有什么不足之处还望指出。layui更新2.7.x版本后动态侧边栏无法使用问题

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值