页面效果：



<!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. React报错之Objects are not valid as a React child

    正文从这开始~ 总览 当我们尝试在JSX代码中,直接渲染对象或者数组时,会产生"Objects are not valid as a React child"错误.为了解决该错误, ...

  2. JavaScript 里三个点 ...，可不是省略号啊···

    摘要:Three dots ( - ) in JavaScript. 本文分享自华为云社区<JavaScript 里三个点 ... 的用法>,作者: Jerry Wang . Rest P ...

  3. Luogu2375 [NOI2014]动物园 （KMP）

    写炸,上网,不同KMP形态. 无力,照该,一换写法就过. 横批:我是垃圾 求\(next\)时\(DP\)出\(num\),路径压缩防卡\(n^2\) AC #include <iostream ...

  4. OpenJudge 1.5.28 分离整数的各个数位

    28:分离整数的各个数位 总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个整数,要求从个位开始分离出它的每一位数字. 输入 输入一个整数,整数在1到100000000之间. 输出 ...

  5. .NET 7 SDK 对容器的内置支持

    大家好,我是等天黑. .NET 又双叒叕出新功能了, 就在前几天,.NET 团队发布博客,宣称在 .NET SDK 中内置了对 .NET 应用容器化的支持. 小试牛刀 在正式介绍它之前,先通过一个简单 ...

  6. atcoder beginner contest 251(D-E)

    Tasks - Panasonic Programming Contest 2022(AtCoder Beginner Contest 251)\ D - At Most 3 (Contestant ...

  7. 端口安全 | DHCP snooping

    1.端口安全用于防止mac地址的欺骗.mac地址泛洪攻击.主要思想就是在交换机的端口下通过手工或者自动绑定mac地址,这就就只能是绑定的mac地址能够通过. 2.通过静态的端口绑定:将mac地址手工静 ...

  8. ubuntu 安装及配置Apache

    一.下载.启动apache2 sudo apt-get install apache2 sudo /etc/init.d/apache2 restart 二.修改配置文件 1.更改网站根目录 sudo ...

  9. KingbaseES V8R6集群维护之--修改数据库服务端口案例

    ​ 案例说明: 对于KingbaseES数据库单实例环境,只需要修改kingbase.conf文件的'port'参数即可,但是对于KingbaseES V8R6集群中涉及到多个配置文件的修改,并且在应 ...

  10. 全网最简单的大文件上传与下载代码实现（React+Go）

    前言 前段时间我需要实现大文件上传的需求,在网上查找了很多资料,并且也发现已经有很多优秀的博客讲了大文件上传下载这个功能. 我的项目是个比较简单的项目,并没有采用特别复杂的实现方式,所以我这篇文章的目 ...