Bootstrap之表格、表单应用
代码:
<!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之表格、表单应用的更多相关文章
- bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- HTML--绝对路径, 表格,表单, 框架
URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...
- HTML表格表单综合——用户注册表
今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- css表格表单和统筹
css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
- bootstrap快速入门笔记(七)-表格,表单
一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...
- Bootstrap学习笔记(3)--表格\表单\图片
Bootstrap表格 表格类: .table只会在表行之间增加横线; .table-striped会在表格行之间增减斑马线; .table-hover会给表设置鼠标悬停状态; ...
随机推荐
- solidity learning (1)
学习文档笔记:http://solidity-cn.readthedocs.io/zh/develop/layout-of-source-files.html 1.pragma solidity ^0 ...
- 使用BBED跳过归档进行恢复
https: 使用BBED跳过归档进行恢复 数据库启动异常,提示6号文件丢失 SQL> startup ORACLE instance started. Total System Global ...
- ORA-00600: internal error code, arguments: [2662]
转自 http://www.eygle.com/archives/2005/12/oracle_diagnostics_howto_deal_2662_error.html 在ORA-00600 22 ...
- Red Hat 7.2 RPM安装Mysql 5.7.12
安装Red Hat 7.2 开发包Java包全部安装 下载Mysql 5.7.12 wget http://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5 ...
- ISCC:Please give me username and password!
地址:http://118.190.152.202:8017/ 题目说 给用户名和密码, 构造url为:118.190.152.202:8017/?username=sda&password= ...
- Clustering[Spectral Clustering]
0. 背景 谱聚类在2007年前后十分流行,因为它可以快速的通过标准的线性代数库来实现,且十分优于传统的聚类算法,如k-mean等. 至于在任何介绍谱聚类的算法原理上,随便翻开一个博客,都会有较为详细 ...
- 聊聊我是如何自学Java两年的(上)
没啥经验,说说心路历程吧~~ 过两天就9月1号了,正式成为大三生,没错,我就是如此嫩~~~ 萌芽在初中 初一的时候,电视广告结尾都会放一句,我们的网站是.....于是心里琢磨,网站是怎么建的呢?我可以 ...
- Signalr实现消息推送
一.前言 大多数系统里面好像都有获取消息的功能,但这些消息来源都不是实时的,比如你开两个浏览器,用两个不同的账号登录,用一个账号给另外一个账号发送消息,然而并不会实时收到消息,必须要自己手动F5刷新一 ...
- 在Linux的Windows子系统上(WSL)使用Docker(Ubuntu)
背景 平时开发大部人都是在提供了高效GUI的window下工作,但是真正部署环境普遍都是在Linux中,所以为了让开发环境和部署环境统一,我们需要在windows模拟LInux环境,以前我们可能通过虚 ...
- 2018 Multi-University Training Contest 1
比赛链接:2018 Multi-University Training Contest 1 6301 Distinct Values 题意:输出一个长度为n的序列,要求满足m个区间的数都不相同,并且字 ...