页面效果：



<!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. NC20242 [SCOI2005]最大子矩阵

    题目链接 题目 题目描述 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大. 注意:选出的k个子矩阵 不能相互重叠. 输入描述 第一行为n,m,k(1 ≤ n ≤ 100 ...

  2. TDM 三部曲 (与 Deep Retrieval)

    推荐系统的主要目的是从海量物品库中高效检索用户最感兴趣的物品,既然是"海量",意味着用户基本不可能浏览完所有的物品,所以才需要推荐系统来辅助用户高效获取感兴趣的信息.同样也正是因为 ...

  3. 【AGC】集成华为AGC崩溃服务实用教程

    ​简介 AppGallery Connect(简称AGC)崩溃服务提供了轻量级崩溃分析服务,集成Crash SDK,可以实现零代码快速集成,您的应用能够在崩溃时自动收集崩溃报告,帮助您了解应用版本质量 ...

  4. transform: scale() 实现鼠标悬浮在元素之上出现和消失

    前言 transform属性允许你旋转,缩放,倾斜或平移给定元素.其中scale(x, y)就是实现元素缩放的属性值. scale(x, y)的 x 乘以原本元素的 x:y 乘以原本的元素 y,就可以 ...

  5. 数据卷之Docker File

    DockerFile 是用来构建Docker镜像的构建文件,是由一些列命令和参数构成的脚本.后面再详细了解 DockerFile ! 1.我们在宿主机 /home 目录下新建一个 docker-tes ...

  6. Linux常用基础命令三

    一.ln 软链接 软链接也称为符号链接,类似于 windows 里的快捷方式,有自己的数据块,主要存放 了链接其他文件的路径. 在查看文件目录中,软连接是以'l'开头 创建软链接 ln -s [原文件 ...

  7. SpringBoot多重属性文件配置方案笔记

    SpringBoot多重属性文件配置方案笔记 需要重写PropertyPlaceholderConfigurer 同时要忽略DataSourceAutoConfiguration @SpringBoo ...

  8. Ansible_基础模块

    特点:无主从,即装即用,基于ssh 安装ansible yum install epel-release -y yum install ansible -y 定义主机清单 vim /etc/ansib ...

  9. [MRCTF2020]Ez_bypass WP

    首先打开页面 他提示说f12里面有东西,于是直接ctrl+u 查看源代码 I put something in F12 for you include 'flag.php'; $flag='MRCTF ...

  10. 记录一下对jdk8后的接口的一些理解

    对于jdk8后的接口,接口中加入了可以定义默认方法和静态方法. 为什么要这样设计呢? 是为了在给接口扩展方法的时候,不会影响已经实现了该接口的类 加入默认方法可以解决:在添加方法的同时,不影响现有的实 ...