xxf页面编辑bootstarp

最新推荐文章于 2024-04-15 00:43:03 发布

bootxff

最新推荐文章于 2024-04-15 00:43:03 发布

阅读量291

点赞数

文章标签： bootstarp xff

本文链接：https://blog.csdn.net/weixin_41266420/article/details/89424288

版权

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>