bootstrap 学习笔记 - 3 （表格 + 表单 +控件）

最新推荐文章于 2026-05-02 11:18:47 发布
原创 最新推荐文章于 2026-05-02 11:18:47 发布 · 6.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了Bootstrap中的表格用法，包括table-striped、thead、tfoot等样式，以及表单的各种类型如普通表单、内联表单、水平排列的表单，并展示了各类型表单的样例代码和效果，还提到了Bootstrap支持的表单控件。

Bootstrap学习


Bootstrap学习之 - 表格

表格（<table>）

table-striped ：每一行增加斑马条纹样式。

thead ： 指定表格最上行

tfoot ：指定表格最下行

table-bordered ：为表格和其中的每个单元格增加边框。

table-hover ：每一行对鼠标悬停状态作出响应。

table-condensed ： 让表格更加紧凑，单元格中的内补（padding）均会减半。

.active ：鼠标悬停在行或单元格上时所设置的颜色

.success ：标识成功或积极的动作

.info  ：标识普通的提示信息或动作

.warning ：标识警告或需要用户注意

.danger  ：标识危险或潜在的带来负面影响的动作

table-responsive ：可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。





样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.7.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>


	</head>

	<body >
		<div style="padding: 20px;">
			<form class="form-horizontal">
				
				<p>输入框  </p>
				<div class="form-group">
					<div>
						<input type="text" class="form-control" placeholder="please input something……"/>
					</div>
				</div>
				
				
				<hr/>
				<p>文本域 </p>
				<div class="form-group">
					<div>
						<textarea class="form-control" rows="3" placeholder="please input something……"></textarea>
					</div>
				</div>
				
				
				<hr/>
				<p>多选和单选框 </p>
				<div class="checkbox">
				  <label>
				    <input type="checkbox" value=""/>
				    Option one is this and that—be sure to include why it's great
				  </label>
				</div>
				
				<div class="checkbox disabled">
				  <label>
				    <input type="checkbox" value="" disabled/>
				    Option two is disabled
				  </label>
				</div>
				
				<div class="radio">
				  <label>
				    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked/>
				    Option one is this and that—be sure to include why it's great
				  </label>
				</div>
				<div class="radio">
				  <label>
				    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"/>
				    Option two can be something else and selecting it will deselect option one
				  </label>
				</div>
				<div class="radio disabled">
				  <label>
				    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled/>
				    Option three is disabled
				  </label>
				</div>
				
				
				<hr/>
				<p>内联单选框 </p>
				<div>
					<label class="checkbox-inline">
						<input type="checkbox" id="inlineCheckbox1" value="option1" checked/>	1					
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="inlineCheckbox2" value="option2"/>	2					
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="inlineCheckbox1" value="option1"/>	3					
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="inlineCheckbox2" value="option2" disabled/>	4					
					</label>
				</div>
				
				
				<hr/>
				<p>内联多选框 </p>
				<div>
					<label class="radio-inline">
						<input type="radio" name="radio_inline" id="inlineradio1" value="option1" checked/>	1
					</label>
					
					<label class="radio-inline">
						<input type="radio" name="radio_inline" id="inlineradio2" value="option2"/>	2
					</label>
					
					<label class="radio-inline">
						<input type="radio" name="radio_inline" id="inlineradio3" value="option3" disabled/>	3
					</label>
				</div>
								
				
				<hr/>
				<p>下拉列表</p>
				<div style="width:200px;">
					<select class="form-control">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option selected>5</option>
						<option>6</option>
					</select>
				</div>
				
				<hr/>
				<p>支持多选下拉列表 </p>
				<div  style="width:200px;">
					<select multiple class="form-control">
						<option selected>1</option>
						<option selected>2</option>
						<option selected>3</option>
						<option>4</option>
						<option>5</option>
						<option>6</option>
					</select>
				</div>
			</form>
			
			<hr/>
			<form class="form-horizontal">
				<p>静态控件</p>
				<div class="form-group">
					<label class="control-label col-sm-2">Email</label>
					<div class="col-sm-10">
						<p class="form-control-static">email@example.com</p>
					</div>				
				</div>
				
				<div class="form-group">
					<label class="control-label col-sm-2">Password</label>
					<div class="col-sm-10">
						<input type="password" placeholder="Password" class="form-control"/>
					</div>				
				</div>
			</form>
			
			<form class="form-inline">
			 	<div class="form-group">
			    	<label class="sr-only">Email</label>
			    	<p class="form-control-static">email@example.com</p>
				</div>
				<div class="form-group">
			  		<label for="inputPassword2" class="sr-only">Password</label>
			 		<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
			  	</div>
			  	<button type="submit" class="btn btn-default">Sign in</button>
			</form>
			
			<form>
				<div class="form-group has-success has-feedback">
					<label class="control-label" for="inputSuccess2">Input with success</label>
					<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
				 	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					<span id="inputSuccess2Status" class="sr-only">(success)</span>
				</div>
				
				<div class="form-group has-warning has-feedback">
				 	<label class="control-label" for="inputWarning2">Input with warning</label>
				 	<div class="input-group">
						<span class="input-group-addon">Warning</span>
						<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
						<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
						<span id="inputWarning2Status" class="sr-only">(warning)</span>
					</div>
				</div>
				
				<div class="form-group has-error has-feedback">
				  	<label class="control-label" for="inputError2">Input with error</label>
				  	<div class="input-group">
						<span class="input-group-addon">Error     </span>				  	
					  	<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
					 	<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
					  	<span id="inputError2Status" class="sr-only">(error)</span>
				  	</div>
				</div>
				<div class="form-group has-success has-feedback">
				  	<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
				  	<div class="input-group">
				    	<span class="input-group-addon">Sucess  </span>
				    	<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
				  	</div>
				  	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
				  	<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
				  	<span class="aria-describedby">我是辅助文本，辅助你去了解上一行需要填写什么内容</span>
				</div>
			</form>
		</div>
	</body>
</html>

效果图：



Bootstrap学习之 - 表单

form-group ：使用组将控件管理起来，并样式化
form-control ：对于表单中的控件进行了样式化
form-inline ：内联表单（显示在一行）
placeholder ： 提示信息
help-block ：帮助提示信息


普通表单

样例代码：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.7.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>


	</head>

	<body >
		<div style="padding: 20px;">
			<form >
				<div class="form-group">
					<label>Email address</label>
					<input type="email" class="form-control" placeholder="Enter Email">
				</div>
				
				<div class="form-group">
					<label>Password</label>
					<input type="password" class="form-control" placeholder="Password">
				</div>
				
				<div class="form-group">
					<label>File input</label>
					<input type="file" class="form-control">
					<p class="help-block">Example block-level help text here.</p>
				</div>
				
				<div class="checkbox">
					<label>
						<input type="checkbox">check me out
					</label>
				</div>
				
				<button type="submit">btn btn-default</button>
			
			</form>
		</div>
	</body>
</html>



效果图：



内联表单

form-inline ：表单内的所有控件单行内显示
样例代码：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.7.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>


	</head>

	<body >
		<div style="padding: 20px;">
			<form class="form-inline">
				<div class="form-group">
					<input type="email" class="form-control" placeholder="Enter Email">
				</div>
				
				<div class="form-group">
					<input type="password" class="form-control" placeholder="Password">
				</div>
				
				<div class="checkbox">
					<label>
						<input type="checkbox"> Remember me
					</label>
				</div>
				
				<button type="submit">Sign in</button>
			
			</form>
		</div>
	</body>
</html>
效果图

水平排列的表单

form-horizontal ：水平以网格形式进行控件对齐
样例代码：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.7.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>


	</head>

	<body >
		<div style="padding: 20px;">
			<form class="form-horizontal">
				<div class="form-group">
					<label class="col-sm-2  control-label">Email</label>
					<div class="col-sm-8">
						<input type="email" class="form-control" placeholder="Enter Email">
					</div>
				</div>
				
				<div class="form-group">
					<label class="col-sm-2  control-label">Password</label>
					<div class="col-sm-8">
						<input type="password" class="form-control" placeholder="Password">
					</div>
				</div>
				
				<div class="form-group">
					<div class="checkbox col-sm-offset-2 col-sm-8">
						<label>
							<input type="checkbox"> Remember me
						</label>
					</div>
				</div>
				
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-8">
						<button type="submit">Sign in</button>
					</div>
				</div>
			
			</form>
		</div>
	</body>
</html>


效果图：

被支持的表单中的控件

text
textarea
checkbox
radio ：<input type="radio" name="optionsRadios" checked 　name 标示为一组  ；checked标示为选中；disabled 标示为不可选中；
password
datetime
datetime-local
date
month
time
week
number
email
url
search
tel 
color
&mdash; ：   －
sr-only ：隐藏表单中当前的控件的
input-lg ：控制控件尺寸（lg sm）
form-group-sm ：表单组的尺寸
col-xs-2 ：列的尺寸
aria-describedby ：辅助文本




样例代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.7.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>


	</head>

	<body >
		<div style="padding: 20px;">
			<form class="form-horizontal">
				
				<p>输入框  </p>
				<div class="form-group">
					<div>
						<input type="text" class="form-control" placeholder="please input something……"/>
					</div>
				</div>
				
				
				<hr/>
				<p>文本域 </p>
				<div class="form-group">
					<div>
						<textarea class="form-control" rows="3" placeholder="please input something……"></textarea>
					</div>
				</div>
				
				
				<hr/>
				<p>多选和单选框 </p>
				<div class="checkbox">
				  <label>
				    <input type="checkbox" value=""/>
				    Option one is this and that—be sure to include why it's great
				  </label>
				</div>
				
				<div class="checkbox disabled">
				  <label>
				    <input type="checkbox" value="" disabled/>
				    Option two is disabled
				  </label>
				</div>
				
				<div class="radio">
				  <label>
				    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked/>
				    Option one is this and that—be sure to include why it's great
				  </label>
				</div>
				<div class="radio">
				  <label>
				    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"/>
				    Option two can be something else and selecting it will deselect option one
				  </label>
				</div>
				<div class="radio disabled">
				  <label>
				    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled/>
				    Option three is disabled
				  </label>
				</div>
				
				
				<hr/>
				<p>内联单选框 </p>
				<div>
					<label class="checkbox-inline">
						<input type="checkbox" id="inlineCheckbox1" value="option1" checked/>	1					
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="inlineCheckbox2" value="option2"/>	2					
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="inlineCheckbox1" value="option1"/>	3					
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="inlineCheckbox2" value="option2" disabled/>	4					
					</label>
				</div>
				
				
				<hr/>
				<p>内联多选框 </p>
				<div>
					<label class="radio-inline">
						<input type="radio" name="radio_inline" id="inlineradio1" value="option1" checked/>	1
					</label>
					
					<label class="radio-inline">
						<input type="radio" name="radio_inline" id="inlineradio2" value="option2"/>	2
					</label>
					
					<label class="radio-inline">
						<input type="radio" name="radio_inline" id="inlineradio3" value="option3" disabled/>	3
					</label>
				</div>
								
				
				<hr/>
				<p>下拉列表</p>
				<div style="width:200px;">
					<select class="form-control">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option selected>5</option>
						<option>6</option>
					</select>
				</div>
				
				<hr/>
				<p>支持多选下拉列表 </p>
				<div  style="width:200px;">
					<select multiple class="form-control">
						<option selected>1</option>
						<option selected>2</option>
						<option selected>3</option>
						<option>4</option>
						<option>5</option>
						<option>6</option>
					</select>
				</div>
			</form>
			
			<hr/>
			<form class="form-horizontal">
				<p>静态控件</p>
				<div class="form-group">
					<label class="control-label col-sm-2">Email</label>
					<div class="col-sm-10">
						<p class="form-control-static">email@example.com</p>
					</div>				
				</div>
				
				<div class="form-group">
					<label class="control-label col-sm-2">Password</label>
					<div class="col-sm-10">
						<input type="password" placeholder="Password" class="form-control"/>
					</div>				
				</div>
			</form>
			
			<form class="form-inline">
			 	<div class="form-group">
			    	<label class="sr-only">Email</label>
			    	<p class="form-control-static">email@example.com</p>
				</div>
				<div class="form-group">
			  		<label for="inputPassword2" class="sr-only">Password</label>
			 		<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
			  	</div>
			  	<button type="submit" class="btn btn-default">Sign in</button>
			</form>
			
			<form>
				<div class="form-group has-success has-feedback">
					<label class="control-label" for="inputSuccess2">Input with success</label>
					<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
				 	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					<span id="inputSuccess2Status" class="sr-only">(success)</span>
				</div>
				
				<div class="form-group has-warning has-feedback">
				 	<label class="control-label" for="inputWarning2">Input with warning</label>
				 	<div class="input-group">
						<span class="input-group-addon">Warning</span>
						<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
						<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
						<span id="inputWarning2Status" class="sr-only">(warning)</span>
					</div>
				</div>
				
				<div class="form-group has-error has-feedback">
				  	<label class="control-label" for="inputError2">Input with error</label>
				  	<div class="input-group">
						<span class="input-group-addon">Error     </span>				  	
					  	<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
					 	<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
					  	<span id="inputError2Status" class="sr-only">(error)</span>
				  	</div>
				</div>
				<div class="form-group has-success has-feedback">
				  	<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
				  	<div class="input-group">
				    	<span class="input-group-addon">Sucess  </span>
				    	<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
				  	</div>
				  	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
				  	<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
				  	<span class="aria-describedby">我是辅助文本，辅助你去了解上一行需要填写什么内容</span>
				</div>
			</form>
		</div>
	</body>
</html>


效果图：


BootStrap【表格二、基础表单、被支持的控件、表单状态】(二)-全面详解（学习总结---从入门到深化）
11-23 840
BootStrap【表格二、基础表单、被支持的控件、表单状态】(二)-全面详解（学习总结---从入门到深化）
Bootstrap-table 使用总结
热门推荐
菜鸟逆袭之路
06-29 5万+
一、什么是Bootstrap-table？ 　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动
Bootstrap-table 自我留存
Rebirth 重生
05-18 1万+
一、什么是Bootstrap-table？ 　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如..
终极指南：如何用Bootstrap Table快速打造专业数据表格
gitblog_00691的博客
04-23 500
Bootstrap Table是一款功能强大的扩展表格插件，能够与多种流行CSS框架无缝集成，包括Bootstrap、Semantic UI、Bulma、Material Design和Foundation等。本文将为您提供一份简单易懂的入门指南，帮助您快速掌握Bootstrap Table的使用方法，轻松创建出专业级的数据表格。 [![Bootstrap Table官方网站首页](https:
BootStrap入门到实战：BootStrap全局CSS样式（三）- 表格、表单、按钮、图片、辅助类
林林一928的博客
05-19 1862
一. 表格 1.基本表格2.带边框的表格3.条纹状表格4.鼠标悬停时作出响应的表格5.紧缩表格6. 状态类7. 响应式表格。 二.表单 1.基本实例2.水平排列的表单3.内联表单4.被支持的控件4.1输入框4.2文本域4.3多选4.4 单选5.表单状态5.1焦点在状态5.2禁用状态5.3只读状态5.4效验状态5.5控制尺寸 三.按钮 1.可作为按钮使用的标签或元素2. 预定义样式3. 尺寸4. 禁用状态 四.图片 1.响应式图片2.图片形状 五.辅助类 1.情景文本颜色2.情景背景色3.关闭按钮4.三角符号
BootstrapTable简单的使用
FeiSir_PC的博客
03-24 7924
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 本篇文章介绍bootstrap-table的简单的使用（查询，新增，修改，删除），在看之前，需要有一点点bootstrap的基础知识，很多bootstrap的相关知识点就不介绍了，只讲bootstrap-table的相关内容。bootstrap-table 的使用非常简单，只需要像引用JQuery一样将js文件以
算是最全面的bootstrap-table的介绍了吧
cykj202103的博客
07-10 9462
属性默认值描述heightundefined表格的高度classes表格的类名称buttons{}按钮,bootstraptable加载的按钮集,可自定义表头样式'''-'当数据为 undefined 时显示的字符localeundefined语言设置false是否开启虚拟滚动undefined虚拟滚动条项目高度sortabletrue是否启用排序sortClassundefined被排序的td标签的class名silentSorttrue。
Bootstrap3 横向表单/水平表单
歪脖先生的博客
05-07 4474
横向表单 通过为表单添加.form-horizontal类，并联合使用 Bootstrap的栅格类，便可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了。如： <formclass="form-horizontal"> <divclass="form-gro...
Awesome Bootstrap Checkbox：纯CSS美化表单控件完整指南
最新发布
gitblog_00249的博客
05-02 1009
Awesome Bootstrap Checkbox 是一款基于纯CSS实现的表单控件美化工具，它能够帮助开发者轻松创建视觉吸引力强的复选框和单选按钮，且无需编写任何JavaScript代码。该项目完美支持Bootstrap框架，通过简单的CSS类即可实现多种风格的表单控件定制。 ## 📌 为什么选择Awesome Bootstrap Checkbox？ 在网页开发中，原生表单控件往往显得单
bootstraptable 手册_bootstrap table表格使用方法详解
weixin_42395740的博客
02-15 8497
本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下1.进入页面，根据指定的URL加载数据(json格式)2.加载成功，根据$table.bootstrapTable({options})显示表格样式。感觉还是挺漂亮的哈，OK，下面贴代码解释功能。开始之前，当然要引用js啦html代码，一是指定table要使用的工具栏，而是写一个空的table新增修改删除js...
bootstrapTable的使用及表格的导出_bootstraptable 导出
2401_84240369的博客
04-12 3607
有toolbar：的样式无toolbar：的样式（2）sidePagination："client"或 “server”：分页方式：client客户端分页，server服务端分页（*）**client客户端分页：**如果是客户端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中没有pageSize和PageNumber这两个属性；server服务端分页：如果是r服务端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中必须有pageSize和PageNumber这两个属性；
Bootstrap Table数据表格的使用指南
2401_89190813的博客
12-17 1442
null)?= null?limit : 10;limit : 10;= null?limit : 10;返回的AjaxResult类为返回提示的一个类。bulidPageResult方法，是返回表格所需要的格式数据。代码如下。return msg;super();super();数据源得到了，就可以看到渲染表格的效果了，如图。
BootStrap----table
yingw1的博客
02-14 1812
bootstrap
我的天！做Java九个月涨薪7K，这究竟是怎么做到的
2401_83411843的博客
04-12 954
总而言之，面试官问来问去，问的那些Redis知识点也就这么多吧，复习的不够到位，知识点掌握不够熟练，所以面试才会卡壳。将这些Redis面试知识解析以及我整理的一些学习笔记分享出来给大家参考学习《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！大家参考学习还有更多学习笔记面试资料也分享如下：[外链图片转存中…(img-qqGiEtUj-1712925995904)]《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》
Bootstrap Table数据表格的使用指南，springmvc面试题2020
m0_64383449的博客
12-23 1103
public Specification buildSpec(StudentForm form){ return null; } 其中page方法中接收参数的TablePageable类是接收分页和排序参数类，其中还包含了几个分页排序处理的方法。StudentForm中的字段和实体类中字段一样，主要用于接收查询条件。Student为实体类。buildSpec方法为查询方法。 TablePageable类代码如下。 import org.springframework.data.domain.PageRequ
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
m0_69034993的博客
11-05 1万+
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。
BootStrap表格详解
july_29的博客
10-11 3563
表格 html： 表格标签用table标签表示，每一行由<tr>表示。表格是由行组成，行由列组成,列由<td>单元格组成。 <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr>
bootstrap中table的使用
weixin_43487532的博客
07-24 3983
bootstrap、java实现数据表单展示
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值