页面效果：



<!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. SmartIDE v1.0.23 一个非常不敏捷的发布

    SmartIDE v1.0版本(CLI Build v1.0.23.4650,Server Build v1.0.23.4646)已经发布,在超过4000 个 Builds 之后,我们终于发布了v1. ...

  2. Jittered采样类定义和测试

    抖动采样算法测试,小图形看不出什么明显区别,还是上代码和测试图吧. 类声明: #pragma once #ifndef __JITTERED_HEADER__ #define __JITTERED_H ...

  3. [NCTF2019]True XML cookbook-1|XXE漏洞

    1.打开题目之后和做的上一道:https://www.cnblogs.com/upfine/p/16534940.html题目界面一样,查看源代码等未发现有用信息,界面如下: 2.那就先按原来那道题的 ...

  4. Linux系列之压缩命令

    前言 Linux 有三个常用的压缩命令:gzip.bzip2和 tar .本文介绍它们的区别和简单用法. 压缩文件 数据压缩是去除数据中冗余部分的过程,需要通过压缩算法完成.这些算法可分为两类: 无损 ...

  5. Synchronized锁升级原理与过程深入剖析

    Synchronized锁升级原理与过程深入剖析 前言 在上篇文章深入学习Synchronized各种使用方法当中我们仔细介绍了在各种情况下该如何使用synchronized关键字.因为在我们写的程序 ...

  6. Go语言Tips

    时间日期格式化 time.Now().Format("2006-01-02") 原生DefaultServeMux支持restful路由 ref: https://towardsd ...

  7. Excelize 发布 2.6.1 版本，支持工作簿加密

    Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库,基于 ECMA-376,ISO/IEC 29500 国际标准.可以使用它来读取.写入由 Microsoft Exc ...

  8. P4035 [JSOI2008]球形空间产生器 （向量，高斯消元）

    题面 有一个 n n n 维球,给定 n + 1 n+1 n+1 个在球面上的点,求球心坐标. n ≤ 10 n\leq 10 n≤10 . 题解 好久以前的题了,昨天首 A . n n n 太小了! ...

  9. [HNOI2011]卡农 （数论计数，DP）

    题面 原题面 众所周知卡农是一种复调音乐的写作技法,小余在听卡农音乐时灵感大发,发明了一种新的音乐谱写规则. 他将声音分成 n n n 个音阶,并将音乐分成若干个片段.音乐的每个片段都是由 1 1 1 ...

  10. 使用STM32控制TMC5160驱动步进电机

    首先先来了解一下TMC5160的3种工作模式 TMC5160通过两个引脚来控制它的工作模式:SD_MODE和SPI_MODE. 1.当SD_MODE接地,SPI_MODE拉高,TMC5160即工作在模 ...