页面效果：



<!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. SQL注入 基础学习

    SQL注入学习笔记 注入原理 SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组合,通过执行SQL语句进而执行攻击者所要的操作,其主要原因是程序没有 ...

  2. vue脚手架创建项目后使用路由报错Object(...) is not a function问题

    在这之前我做过的vue项目没有这种问题,今天突然出现这个问题,也检查了很久的代码,最后解决我也不知道我是哪一步做错了 首先我是创建的vue2项目,基本操作跟平常一样,在运用路由跳转的时候遇到这个问题 ...

  3. 10种有用的Linux Bash_Completion 命令示例

    摘要:我们可以对这个 bash 补全进行加速,并使用 complete 命令将其提升到一个新的水平. 本文分享自华为云社区<有用的 Linux Bash_Completion 命令示例(Ster ...

  4. ceph 009 管理定义crushmap 故障域

    管理和自定义crushmap 定义pg到osd的映射关系 通过crush算法使三副本映射到理想的主机或者机架 更改故障域提高可靠性 pg到osd映射由crush实现 下载时需要将对象从osd搜索到,组 ...

  5. CF1442D Sum （动态规划，线段树分治）

    ( 宋 体 字 看 起 来 真 舒 服 ) _{_{(宋体字看起来真舒服)}} (宋体字看起来真舒服)​​ 题 面 ( 洛 谷 翻 译 ) 题面_{_{(洛谷翻译)}} 题面(洛谷翻译)​​ 给定 n ...

  6. 【java】学习路径16-重写Object方法(equals()等)

    在平时开发中,想要比较自定义类对象中的特定成员时,我们需要逐一手动比较,非常不方便. 举个栗子,我们有两个cafe对象,我们想比较两杯咖啡的价格是否一样,一般来说我们使用getter()来比较,但是这 ...

  7. 从零教你使用MindStudio进行Pytorch离线推理全流程

    摘要:MindStudio的是一套基于华为自研昇腾AI处理器开发的AI全栈开发工具平台,该IDE上功能很多,涵盖面广,可以进行包括网络模型训练.移植.应用开发.推理运行及自定义算子开发等多种任务. 本 ...

  8. Linux常用基础命令一

    一.目录操作 进入路径 cd [目录地址] 切换回主目录 cd 返回上一个路径 cd - 打印当前路径 pwd 列出目录下文件 ls ---查看只包含非隐藏文件 ls -a -----查看目录下所有文 ...

  9. C#非托管泄漏中HEAP_ENTRY的Size对不上是怎么回事？

    一:背景 1. 讲故事 前段时间有位朋友在分析他的非托管泄漏时,发现NT堆的_HEAP_ENTRY 的 Size 和 !heap 命令中的 Size 对不上,来咨询是怎么回事? 比如下面这段输出: 0 ...

  10. vue方法同步（顺序）执行：async/await使用

    https://blog.csdn.net/qq_38591756/article/details/90173323 项目中有一个地方需要获取到接口返回值之后根据返回值确定之后执行的步骤,使用asyn ...