xxf页面编辑bootstarp

  • 首先是pom
  • a
  • s
  • d
  • u

首先是pom

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.4.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>shenzhouxinqiao</artifactId><version>0.0.1-SNAPSHOT</version><name>shenzhouxinqiao</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version><!--切换thymeleaf版本--><!--<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>--><!--布局功能的支持程序 thymeleaf3主程序 layout2以上版本--><!--thymeleaf2 layout1--><!--<thymeleaf‐layout‐dialect.version>2.2.2</thymeleaf‐layout‐dialect.version>--></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.0.1</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>3.3.7</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

a

<!DOCTYPE html>
<html lang="zh-CN"xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org">
<head><!-- 基本 head、css --><link th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}" rel="stylesheet"></head>
<body><form  th:action="@{'/add'}"method="get" class="form-horizontal" role="form"><div class="box box-info"><div class="box-body"><div class="form-group form-group-sm "></div><div class="form-group form-group-sm "><div class="col-md-3"></div><label class="col-md-1 col-sm-12 col-xs-12 control-label"><b>姓名:</b></label><div class="col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control" th:name="name"></div></div><div class="form-group form-group-sm "><div class="col-md-3"></div><label class="col-md-1 col-sm-12 col-xs-12 control-label"><b>年龄:</b></label><div class="col-md-2 col-sm-12 col-xs-12"><select th:name="age" class="form-control select2-minimumResultsForSearch"><option th:value="10">10</option><option th:value="20">20</option><option th:value="30">30</option><option th:value="40">40</option></select></div></div><div class="form-group form-group-sm "><div class="col-md-3"></div><label class="col-md-1 col-sm-12 col-xs-12 control-label"><b>性别:</b></label><div class="col-md-2 radio"><label class="radio-inline"><input type="radio" th:name="sex"  value="0"> 男</label><label class="radio-inline"><input type="radio" th:name="sex"   value="1"> 女</label></div></div><div class="form-group form-group-sm"><div class="col-md-5"></div><button type="submit" class="btn btn-primary glyphicon glyphicon-thumbs-up" >添加</button></div></div></div></form></body>
</html>

s

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title><link th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}" rel="stylesheet">
</head>
<body><div class="container-fluid"><div class="row"><div class="col-md-12"><td ><div class="alert alert-success alert-dismissible" th:text="数据保存成功"></div></td></div></div>
<div class="row"><div class="col-md-12"><div class="box box-success"><div id="agentInfoListTable"><div class="box-header"><h3 class="box-title" >查询列表</h3></div><div class="box-body table-responsive no-padding"><table class="table table-hover  table-condensed"><thead><tr><th  data-sort="string">id</th><th  data-sort="string">姓名</th><th  data-sort="string">年龄</th><th data-sort="string">性别</th><th >操作</th></tr></thead><tbody><tr th:each="list:${list}"><td th:text="${list.id}"></td><td   th:text="${list.name}"></td><td  th:text="${list.age}"></td><td th:text="${list.sex}==0?'女':'男'"></td><td align="center"><a th:href="@{'/delete?id='+${list.id}}">删除</a></td></tr></tbody></table></div></div></div></div>
</div><div class="box-body"><div class="form-group "><div  class="col-md-5 "></div><div  class="col-md-2 "><div class="btn-group btn-group-justified" role="group"><a  href="javascript:void(0);" id="backButton" class="btn btn-info btn-sm"onclick="return history.back(); "><i class="glyphicon glyphicon-hand-left"></i>返回</a></div></div></div></div>
</div>
</body>
</html>

d

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title><link th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}" rel="stylesheet">
</head>
<body><div class="container-fluid"><div class="row"><div class="col-md-12"><td ><div class="alert alert-success alert-dismissible" th:text="删除数据成功!"></div></td></div></div><div class="row"><div class="col-md-12"><div class="box box-success"><div id="agentInfoListTable"><div class="box-header"><h3 class="box-title" >查询列表</h3></div><div class="box-body table-responsive no-padding"><table class="table table-hover  table-condensed"><thead><tr><th  data-sort="string">id</th><th  data-sort="string">姓名</th><th  data-sort="string">年龄</th><th data-sort="string">性别</th><th >操作</th></tr></thead><tbody><tr th:each="list:${list}"><td th:text="${list.id}"></td><td   th:text="${list.name}"></td><td  th:text="${list.age}"></td><td th:text="${list.sex}==0?'女':'男'"></td><td align="left"><a th:href="@{'/delete?id='+${list.id}}">删除</a></td></tr></tbody></table></div></div></div></div></div><div class="box-body"><div class="form-group "><div  class="col-md-5 "></div><div  class="col-md-2 "><div class="btn-group btn-group-justified" role="group"><a  href="javascript:void(0);" id="backButton" class="btn btn-info btn-sm"onclick="return history.back(); "><i class="glyphicon glyphicon-hand-left"></i>返回</a></div></div></div></div>
</div>
</body>
</html>

u

<!DOCTYPE html>
<html lang="zh-CN"xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org">
<head><!-- 基本 head、css --><link th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}" rel="stylesheet"></head>
<body><form  th:action="@{'/setupdate'}"method="get" class="form-horizontal" role="form" th:object="${agent}"><input type="hidden"  th:field="*{id}"><div class="box box-info"><div class="box-body"><div class="form-group form-group-sm "></div><div class="form-group form-group-sm "><div class="col-md-3"></div><label th:for="name" class="col-md-1 col-sm-12 col-xs-12 control-label"><b>姓名:</b></label><div class="col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control" th:name="name" th:field="*{name}"></div></div><div class="form-group form-group-sm "><div class="col-md-3"></div><label th:for="age" class="col-md-1 col-sm-12 col-xs-12 control-label"><b>年龄:</b></label><div class="col-md-2 col-sm-12 col-xs-12"><select th:name="age" th:field="*{age}" class="form-control select2-minimumResultsForSearch"><option th:value="10">10</option><option th:value="20">20</option><option th:value="30">30</option><option th:value="40">40</option></select></div></div><div class="form-group form-group-sm "><div class="col-md-3"></div><label class="col-md-1 col-sm-12 col-xs-12 control-label"  th:for="sex"><b>性别:</b></label><div class="col-md-2 radio"><label class="radio-inline"><input type="radio" th:name="sex"  value="0" th:field="*{sex}"> 男</label><label class="radio-inline"><input type="radio" th:name="sex"  th:field="*{sex}" value="1"> 女</label></div></div><div class="form-group form-group-sm"><div class="col-md-5"></div><button type="submit" class="btn btn-primary glyphicon glyphicon-thumbs-up" >添加</button></div></div></div></form></body>
</html>

xxf页面编辑bootstarp相关推荐

  1. SharePoint 检测页面编辑模式

    在SharePoint开发模板页时,有时候我们需要在页面编辑模式下加载一些脚本或样式的时候,这段代码对我们的帮助会很大. //第一种方式if(g_disableCheckoutInEditMode = ...

  2. 【办公软件有哪些】万彩办公大师教程丨PDF页面编辑

    关于万彩PDF大师-页面编辑 万彩PDF大师-页面编辑是一个简单快速的桌面应用程序,帮助你修改和组合PDF页面(重新组织PDF页面),允许进行以下操作: 1.页面编辑:包括剪切/粘贴.克隆.删除.插入 ...

  3. Chrome插件开发-右键菜单开启页面编辑

    开发一个执行js脚本改变页面DOM的Chrome插件,manifest_version版本为3. Chrome插件基本知识 Chrome插件通常由以下几部分组成: manifest.json 该文件为 ...

  4. web在线页面编辑实现-abtest可视化实验

    前言 最近我们开发了A/B Testing 平台,开发web可视化实验中,涉及到页面在线编辑的实现,本文对此展开叙述.我在另一篇文章里也简单做了分享,有兴趣的可以点击查看abtest-可视化实验sdk ...

  5. 【Word页面编辑---Chrome 浏览器插件】

    ** Word页面编辑-Chrome 浏览器插件 ** 前言 目前基于Web页面的富文本编辑器有Ueditor.CKEditor等前端编辑器:这些编辑器具有小巧灵活,使用方便的特点.但是这种前端编辑器 ...

  6. 【画册设计软件】名编辑电子杂志大师教程 | 页面编辑面板

    什么是页面编辑面板 页面编辑面板.设计设置面板和预览选项是名编辑电子杂志大师中很重要的三块设计版块. 在页面编辑面板中,用户可以删除页面或者添加页面,也可以在页面中添加超链接.形状图.按钮.flash ...

  7. kettle web 版本 (webspoon) 中文部署 kettle 页面编辑 kettleweb 中文

    文章目录 web spoon 中文切换 web 版本安装 开始汉化 安装vim 汉化配置 web spoon 中文切换 github 地址 : https://github.com/HiromuHot ...

  8. thinkphp6错误页面编辑_Windows10在Word中编辑PDF文件

    在以前,如果我们需要编辑PDF文件,而复杂的PDF文件包含各种内容,逻辑结构元素以及注释,图层,富媒体,甚至文件附件和数字签名等交互元素.支持如此强大的PDF编辑,优先选择Adobe Acrobat. ...

  9. hugo,静态页面编辑神器,外行人的福音(一文详解)

    首语 之前做那个程序监控的程序,苦于不会前端,最后只能用模板生套,十分费劲,后来在看开源项目的时候注意到hugo,感觉自己还可以拯救一下. HUGO简介 hugo是一个通用网站框架,从技术上来说,Hu ...

最新文章

  1. FLAS: fast and high-throughput algorithm for PacBio long-read self-correction FLAS:快速、高通量的PacBio lon
  2. XShell 技巧分享
  3. SQL基础---SQL WHERE 子句
  4. IPv6地址居然不够用?(特殊情况)怎么办?
  5. 我的Go语言学习之旅六:做一个WIN的简单弹窗
  6. php 读文件返回字符串,PHP:file_get_contents('php:// input')返回JSON消息的字符串...
  7. Selenium2.0功能测试之唯一元素的定位
  8. SQL SERVER IDENTITY 约束的用法
  9. Excel 函数大全
  10. 西安电子科技大学计算机学院评论,西电高琳教授团队在Science子刊及领域著名期刊发表成果...
  11. 教你轻松查看QQ空间加密后的好友图片
  12. 2017年的6个大数据发展趋势
  13. 将HTML5封装成android应用APK文件的几种方法
  14. 余弦相似度-C#代码实现
  15. 如何在微信小程序中实现实时会话(聊天)系统
  16. 哪些网站可以免费托管静态页面
  17. runas自动输入密码普通用户以管理员权限自动安装软件
  18. Cpython源码分析02_Python代码是怎么运行起来的
  19. python统计元音总数_python:计算用户输入单词中元音或辅音的数量
  20. 张江高科技园区企业_知名品牌入驻张江高科技园区 共筑上海浦东新高度

热门文章

  1. python程序设计简明教程知识点_《Python 简明教程》读书笔记系列一 —— 基本语法...
  2. GUC-10 线程八锁
  3. STM32 + UCGUI+外扩NAND FLASH 中文字库支持方法
  4. 图片怎样修改分辨率?用什么修改图片分辨率?
  5. css 谷歌字体加载,使用谷歌网页字体无限制的添加字体到您的网站
  6. 10mbps 局域网组播_无线局域网Apple Bonjour部署指南
  7. GetLastError 返回码含义
  8. 【牛客网华为机试】HJ46 截取字符串
  9. Windows上鲜为人知的三款黑马软件,款款深入人心
  10. webpack将部分图片打包后转化为base64