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

最新推荐文章于 2024-04-22 10:35:30 发布

zhagener

最新推荐文章于 2024-04-22 10:35:30 发布

阅读量6.7k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/zhagener/article/details/46356661

版权

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>

最低0.47元/天解锁文章

zhagener

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 学习笔记 - 3 （表格 + 表单 +控件）

Bootstrap学习Bootstrap学习之 - 表格表格（）table-striped ：每一行增加斑马条纹样式。thead ：指定表格最上行tfoot ：指定表格最下行table-bordered ：为表格和其中的每个单元格增加边框。table-hover ：每一行对鼠标悬停状态作出响应。table-condensed ：让表格更加紧凑，单
复制链接

扫一扫