代码：

 <!DOCTYPE html>

 <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="UTF-8"/>

     <title>学生列表</title>

     <link href="bootstrap/css/bootstrap.css" rel="stylesheet">

 </head>

 <body>

 <div class="container">

     <nav class="navbar navbar-inverse">

         <div class="navbar-header">

             <a href="#" class="navbar-brand"><strong>demo</strong>.com</a>

             <button class="navbar-toggle" data-toggle="collapse" data-target="#nav1">

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

                 <!--<span class="icon-bar"></span>-->

             </button>

         </div>

         <div id="nav1" class="collapse navbar-collapse">

             <ul class="nav navbar-nav">

                 <li><a href="/">首页</a></li>

                 <li class="active"><a href="/listStudent">学生信息</a></li>

                 <li><a href="/welcome">图片</a></li>

                 <!--<li><a href="#">个人中心</a></li>-->

             </ul>

             <form action="" class="navbar-form navbar-right">

                 <input type="text" placeholder="搜索" class="form-control">

                 <input type="button" value="搜索" class="form-control">

             </form>

             <a href="#" class="navbar-btn btn btn-sm btn-link navbar-right">登陆</a>

             <a href="#" class="navbar-btn btn btn-sm btn-link navbar-right">注册</a>

         </div>

     </nav>

 </div>

 <div class="container">

     <div class="row">

         <div class="col-md-12">

             <h3 class="page-header">学生信息表</h3>

             <!--判断学生列表是否为空-->

             <table th:unless="${#lists.isEmpty(studentList)}" class="table table-striped">

                 <thead>

                 <tr>

                     <th>编号</th>

                     <th>姓名</th>

                     <th>性别</th>

                     <th>年龄</th>

                     <th>电话</th>

                 </tr>

                 <thead>

                 <!--循环遍历学生列表-->

                 <tbody>

                 <!--<tr>-->

                 <!--<td>1</td>-->

                 <!--<td>Mark</td>-->

                 <!--<td>Otto</td>-->

                 <!--<td>@mdo</td>-->

                 <!--<td>123123</td>-->

                 <!--</tr>-->

                 <tr th:each="student : ${studentList}">

                     <td th:text="${student.id}"></td>

                     <td th:text="${student.name}"></td>

                     <td th:text="${student.gender}"></td>

                     <td th:text="${student.age}"></td>

                     <td th:text="${student.telephone}"></td>

                 </tr>

                 <tbody>

             </table>

             <div th:if="${#lists.isEmpty(studentList)}" class="alert alert-info" role="alert">

                 <strong>暂时没有学生信息!</strong>

             </div>

         </div>

     </div>

     <div class="row">

         <div class="col-md-4">

             <h4 class="page-header">新增</h4>

             <form method="POST" action="/addStudent" class="navbar-form" role="form">

                 <div class="form-group">

                     <div>

                         <input name="id" id="id" type="text" placeholder="编号" class="form-control"/>

                     </div>

                     <div>

                         <input name="name" id="name" type="text" placeholder="姓名" class="form-control"/>

                     </div>

                     <div>

                         <input name="gender" id="gender" type="text" placeholder="性别" class="form-control"/>

                     </div>

                     <div>

                         <input name="age" id="age" type="text" placeholder="年龄" class="form-control"/>

                     </div>

                     <div>

                         <input name="telephone" id="telephone" type="text" placeholder="电话" class="form-control"/>

                     </div>

                     <p></p>

                     <div class="btn-group">

                         <button type="submit" class="btn btn-default">新增</button>

                         <button type="button" onclick="location.reload()" class="btn btn-default">刷新</button>

                     </div>

                 </div>

             </form>

         </div>

         <div class="col-md-4">

             <h4 class="page-header">删除</h4>

             <form action="/deleteStudentById" method="post" role="form" class="form-horizontal">

                 <div class="form-group col-md-8">

                     <div>

                         <input type="text" name="id" placeholder="请输入编号" class="form-control">

                     </div>

                     <p></p>

                     <div class="btn-group">

                         <button type="submit" class="btn btn-default">删除</button>

                         <button type="button" class="btn btn-default" onclick="location.reload()">刷新</button>

                     </div>

                 </div>

             </form>

         </div>

         <div class="col-md-4">

             <h4 class="page-header">查询</h4>

             <form action="/getStudentById2" method="get" class="form-horizontal" role="form">

                 <div class="form-group">

                     <!--<label class="col-md-2 control-label" for="id">编号</label>-->

                     <div class="col-md-7">

                         <input type="text" name="id" class="form-control" placeholder="请输入编号"/>

                     </div>

                 </div>

                 <div class="form-group col-md-8">

                     <button type="submit" class="btn btn-default">查询</button>

                 </div>

             </form>

         </div>

     </div>

 </div>

 </body>

 </html>

截图：

Bootstrap之表格、表单应用的更多相关文章

  1. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

  2. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  3. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  4. bootstrap上传表单的时候上传的数据默认是0　一定要小心

    bootstrap上传表单的时候上传的数据默认是0 一定要小心

  5. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  6. HTML--绝对路径, 表格,表单, 框架

    URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...

  7. HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  8. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  9. bootstrap快速入门笔记（七）-表格,表单

    一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...

  10. Bootstrap学习笔记（3）--表格\表单\图片

    Bootstrap表格   表格类:    .table只会在表行之间增加横线;    .table-striped会在表格行之间增减斑马线;    .table-hover会给表设置鼠标悬停状态; ...

随机推荐

  1. Memcache分布式锁 转发 https://www.cnblogs.com/li150dan/p/9529090.html

    在分布式缓存的应用中,会遇到多个客户端同时争用的问题.这个时候,需要用到分布式锁,得到锁的客户端才有操作权限 下面通过一个简单例子介绍: 这里引用的是Memcached.ClientLibrary.d ...

  2. 转载 （三）surging 微服务框架使用系列之我的第一个服务（审计日志）

    (三)surging 微服务框架使用系列之我的第一个服务(审计日志)   前言:前面准备了那么久的准备工作,现在终于可以开始构建我们自己的服务了.这篇博客就让我们一起构建自己的第一个服务---审计日志 ...

  3. windows使用.NET CORE下创建MVC,发布到linux运行

    1.在有dotnet core 的环境下,打开控制台.创建文件夹demo1 2.创建MVC程序 3.创建完成 4.使用记事本修改一下HomeController 修改端口 5.发布 6.压缩发布的文件 ...

  4. RabbitMQ详解（二）------消息通信的概念

    PS:近期在南宁出差,工作比较忙,所以更新会比较慢. 说到消息通信,可能我们首先会想到的是邮箱,QQ,微信,短信等等这些通信方式,这些通信方式都有发送者,接收者,还有一个中间存储离线消息的容器.但是这 ...

  5. CSS选择器之基本选择器总结

    一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...

  6. 你不知道的腾讯社招面试经验（已offer）

    # 你不知道的腾讯社招面试经验(已offer) ## 背景 最近一段时间换工作,成功获得了腾讯的offer.在这里有点经验跟大家分享,我觉得,比起具体的面试题,有些东西更加重要,你知道这些东西,再去准 ...

  7. 使用 IIS 在 Windows 上托管 ASP.NET Core2.0

    准备: 操作系统:Windows Server 2008 R2 或更高版本 开发环境:VS2017 第一步:新建项目ASP.NET Core Web应用程序 在 Visual Studio 中,选择“ ...

  8. java.util.Stack类中 empty() 和 isEmpty() 方法的作用

    最近在学习算法和数据结构,用到Java里的Stack类,但程序运行结果一直和我预料的不一样,网上也没查清楚,最后查了API,才搞明白. java.util.Stack继承类 java.util.Vec ...

  9. babel-preset-env使用指南

    文章概览 babel-preset-env是非常重要且常用的一个插件预设,掌握它的用法以及实现原理非常有必要. 本文主要内容包括:babel-preset-env是什么.入门实例.如何配置以支持特定版 ...

  10. CSS 定位 (Positioning) 实例

    CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...