页面效果：



<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap -->

    <link href="bootstrap.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="jquery-1.11.3.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body style="background-color: aliceblue">

<!--最外层的布局容器-->

<div class="container">

    <!--导航栏部分-->

    <nav class="navbar navbar-inverse" style="background-color: aliceblue">

        <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">

                    <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" href="#">首页</a>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->

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

                <ul class="nav navbar-nav">

                    <li>

                        <a th:href="@{/logout}">注销<span class="sr-only">(current)</span></a>

                    </li>

                    <li>

                        <a th:href="@{/shop/status}">订单状态</a>

                    </li>

                    <li>

                        <a th:href="@{/book/bookList}">书籍商城</a>

                    </li>

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >钱包管理 <span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li >

                                <a th:href="@{/customer/wallet}">余额查询</a>

                            </li>

                            <li >

                                <a th:href="@{/customer/torecharge}">充值</a>

                            </li>

                            <li >

                                <a th:href="@{/customer/paylog}">充值记录</a>

                            </li>

                        </ul>

                    </li>

                </ul>

            </div>

            <!-- /.navbar-collapse -->

        </div>

        <!-- /.container-fluid -->

    </nav>

        <div class="row" >

            <div class="col-md-1"></div>

            <div class="col-sm-6 col-md-4" >

                <div class="thumbnail" style="background-color: aliceblue">

                    <img src="../img/info/people.jpg" alt="...">

                    <div class="caption" >

                        <h3 >个人信息展示</h3>

                        <p>

                            <a class="btn btn-default" role="button" th:href="@{/customer/info}">信息查询</a>

                            <a th:href="@{/customer/paylog}" class="btn btn-default" role="button">充值记录</a>

                            <a  th:href="@{/cusomer/toUpdatePwd}" class="btn btn-default" role="button">修改密码</a>

                        </p>

                    </div>

                </div>

            </div>

            <div class="col-md-1"></div>

            <div class="col-sm-6 col-md-4" style="background-color: aliceblue">

                <div class="thumbnail" style="background-color: aliceblue">

                    <img src="../img/info/cart.jpg" alt="...">

                    <div class="caption" style="align-content: center">

                        <h3 >管理购物车</h3>

                        <p>

                            <a th:href="@{/shop/shopList}"class="btn btn-default" role="button" >购物车</a>

                            <a th:href="@{/shop/buylog}" class="btn btn-default" role="button" >购买记录</a>

                            <a th:href="@{/shop/goodsList}" class="btn btn-default" role="button" >当前订单</a></p>

                    </div>

                </div>

            </div>

        </div>

    <div class="row" style="background-color: aliceblue">

        <div class="col-sm-6 col-md-4">

            <div class="thumbnail" style="background-color: aliceblue">

                <img src="../img/info/money.jpg" alt="...">

                <div class="caption" style="align-content: center">

                    <h3 >钱包管理</h3>

                    <p>

                        <a th:href="@{/customer/wallet}" class="btn btn-default" role="button">余额查询</a>

                        <a th:href="@{/customer/torecharge}" class="btn btn-default" role="button">充值</a>

                        <a th:href="@{/customer/paylog}" class="btn btn-default" role="button">充值记录</a>

                </div>

            </div>

        </div>

        <div class="col-md-3"></div>

        <div class="col-sm-6 col-md-4">

            <div class="thumbnail" style="background-color: aliceblue">

                <img src="../img/info/address.jpg" alt="...">

                <div class="caption" style="align-content: center">

                    <h3 >地址管理</h3>

                    <p>

                        <a th:href="@{/customer/address}" class="btn btn-default" role="button">收货地址</a>

                        <a th:href="@{/customer/toAddAddress}" class="btn btn-default" role="button">新增地址</a>

                        <a th:href="@{/shop/status}" class="btn btn-default">订单状态</a>

                </div>

            </div>

        </div>

    </div>

    </div>

</body>

</html>

这里是图片
从淘宝上找的图片–又使用美图秀秀压缩尺寸。直接把原图放在前台就大的离谱。


springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面的更多相关文章

  1. python：页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. 使用Vue写一个登陆页面并在管理页面查看和修改

    注册页面代码如下html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. SpringBoot thymeleaf模板页面没提示，SpringBoot thymeleaf模板插件安装

    SpringBoot thymeleaf模板插件安装 SpringBoot thymeleaf模板Html页面没提示 SpringBoot  thymeleaf模板页面没提示 SpringBoot t ...

  4. 【SpringBoot】转载 springboot使用thymeleaf完成数据的页面展示

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_36380516/artic ...

  5. SpringBoot页面展示Thymeleaf

    https://www.jianshu.com/p/a842e5b5012e 开发传统Java WEB工程时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用了.Spring ...

  6. springboot+thymeleaf简单使用

    关于springboot想必很多人都在使用,由于公司项目一直使用的是SpringMVC,所以自己抽空体验了一下springboot的简单使用. 环境搭建 springbooot的环境搭建可以说很灵活, ...

  7. 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...

  8. springboot 与 shiro 整合 （简洁版）

    前言: 网上有很多springboot 与 shiro 整合的资料,有些确实写得很好, 对学习shiro和springboot 都有很大的帮助. 有些朋友比较省事, 直接转发或者复制粘贴.但是没有经过 ...

  9. org.springframework.expression.spel.SpelEvaluationException: EL1004E: Method call: Method service() cannot be found on com.my.blog.springboot.thymeleaf.util.MethodTest type

    前言 本文中提到的解决方案,源码地址在:springboot-thymeleaf,希望可以帮你解决问题. 至于为什么已经写了一篇文章thymeleaf模板引擎调用java类中的方法,又多此一举的单独整 ...

随机推荐

  1. GTID主从和lamp架构运行原理

    目录 GTID主从 GTID概念介绍 GTID工作原理 GTID主从配置 lamp lamp简介 web服务器工作流程 cgi与fastcgi http协议 是什么? lamp架构运行的原理 Apac ...

  2. mysql-shell for GreatSQL 8.0.27编译安装及使用

    目录 0. 前言 1. 修改说明 2. 编译mysql-shell 2.1 环境准备 2.2 开始编译mysql & mysql-shell 2.3 利用patchelf修改mysqlsh二进 ...

  3. 使用.NET简单实现一个Redis的高性能克隆版（六）

    译者注 该原文是Ayende Rahien大佬业余自己在使用C# 和 .NET构建一个简单.高性能兼容Redis协议的数据库的经历. 首先这个"Redis"是非常简单的实现,但是他 ...

  4. AI+医疗：使用神经网络进行医学影像识别分析 ⛵

    作者:韩信子@ShowMeAI 计算机视觉实战系列:https://www.showmeai.tech/tutorials/46 行业名企应用系列:https://www.showmeai.tech/ ...

  5. 744. 寻找比目标字母大的最小字母--LeetCode

    来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/find-smallest-letter-greater-than-target 著作权归领扣网络所有. ...

  6. Excel 统计函数（五）：MINIFS 和 MAXIFS

    MINIFS [语法]MINIFS(min_range, criteria_range1, criteria1, [criteria_range2, criteria2], ...) [参数] min ...

  7. HTML创建访问加密代码

    在</head>前面加入即可 普通方式 此方法屏蔽F12查看源码但是屏蔽不了Ctrl+U查看源码 解决方式加密html即可注意!解密比较繁琐切记要记住自己设置的密码 <SCRIPT ...

  8. 1.3_HTML基础知识

    打开记事本,输入 <html> <hand> <title>我要自学网</title> </hand> <body> <h ...

  9. AI听曲识歌！哼曲、口哨吹，都能秒识！ ⛵

    作者:韩信子@ShowMeAI 深度学习实战系列:https://www.showmeai.tech/tutorials/42 自然语言处理实战系列:https://www.showmeai.tech ...

  10. 可别小看了XSS漏洞

    可别小看了XSS漏洞 ​ 对于初了解xss漏洞的人来说,XSS漏洞的危害就是获取受害者的cookie,来进行 'cookie劫持'. ​ 今天就总结一下XSS漏洞的危害性,望安全人员不要轻视,开发人员 ...