代码:

 <!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. pytorch visdom可视化工具学习—1—详细使用-2-plotting绘图

    3)plotting绘图 我们已经包装了几种常见的plot类型,以便轻松创建基本的可视化.这些可视化是由Plotly驱动的. Visdom支持下列API.由 Plotly 提供可视化支持. vis.s ...

  2. CF341D Iahub and Xors

    CF341D Iahub and Xors 给定一个 \(n\times n\) 的矩阵,平面异或,求平面异或和 \((n\leq10^3,\ m\leq10^5)\) 树状数组 这里主要是记录一下板 ...

  3. Java的错误类型

    程序的错误分为:编译期语法错误.运行期异常错误和运行期逻辑错误 (1)编译期语法错误可以借助Eclipse的帮助方便地定位错误,并进行修改 如: (2)运行期异常,即 没有语法错误,编译可以通过,但运 ...

  4. C# — Socket通信实现

    昨天晚上在网上查找资料,简单实现了C#开发的Socket通信,以下是具体的开发流程,我使用的是VS2017进行开发的: 一.服务器端: 1.新建一个项目,Windows控制台程序 2.重命名cs文件 ...

  5. 对Android系统权限的认识

    Android系统是运行在Linux内核上的,Android与Linux分别有自己的一套严格的安全及权限机制 Android系统权限相关的内容 (一)linux文件系统上的权限 -rwxr-x--x ...

  6. Git安装以及常用命令(图文详解)

    **Git安装以及常用命令** 1.下载安装Git,傻瓜式安装相信大家都会. 官网下载地址:[https://git-scm.com/downloads] 2.Git基本操作 (1)git --ver ...

  7. OpenResty入门之使用Lua扩展Nginx

    记住一点:nginx配置文件很多坑来源自你的空格少了或多了. 1.Centos下载安装 如果你的系统是 Centos 或 RedHat 可以使用以下命令: yum install readline-d ...

  8. Python—闭包

    闭包的定义:即函数定义和函数表达式位于另一个函数的函数体内(嵌套函数).而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时 ...

  9. Pair Project

    以前只是一个人完成一个项目,不论什么都是,现在突然要两个人一起来写, 听上去挺稀奇的,也挺简单的,可惜了就是“听上去”而已.我认为这也是一种技术啊~ 我跟我的搭档研究了好久好久,选择了好久,然后也选了 ...

  10. 使用postman发送post数据时遇到的问题

    平时工作最多的内容就是写接口,免不了测试自己写的接口是否正确,postman就是一个不错的选择 使用postman最好了解一些http协议的知识,不然就会闹笑话,比如,下面这个图片中的做法,尝试发送p ...