Bootstrap表格示例

最新推荐文章于 2021-12-23 11:14:48 发布
最新推荐文章于 2021-12-23 11:14:48 发布
阅读量4.5k 收藏 15
点赞数 6
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011781521/article/details/72961476
版权

效果图如下:



代码如下:


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap表格示例</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<style>
	
	</style>
  </head>
  <body>

  
     <div class="container">

		<div style="text-align:center">
		  <h2>Bootstrap表格示例</h2>
		</div>
		
 
		<div class="panel panel-primary">
		
		  <div class="panel-heading">
			<h3 class="panel-title">数据表格</h3>
		  </div>
		

		
			<div class="panel-body" >
			
	<form class="form-inline">
		
		<div class="row">
		   
		   
		  <div class="form-group col-sm-3">
			<input type="checkbox" id="inlineCheckbox1" value="option1">
			<label>选择所有</label>
		  </div>
		   
		  <div class="form-group col-sm-3">
			<label>用户名:</label>
			<input type="name"  class="form-control"  id="exampleInputName3" placeholder="用户名">
		  </div>
		  
		  
		  <div class="form-group col-sm-3">
			<label>手机号:</label>

<input type="Mobile" class="form-control"  id="exampleInputMobile3" placeholder="手机号"></input>
			
			
		  </div>
		  
		  <div class="col-sm-3">
			<button type="submit" class="btn btn-primary">搜索</button>
			<button type="submit" class="btn btn-primary">删除</button>
		  </div>
		  

		   
		</div>
		
		 
	</form>
			
	<table class="table table-hover" style="margin-top:2px;">
	  <thead>
		<tr>
			<th></th>
			<th>顺序</th>
			<th>家庭名称</th>
			<th>家庭Key</th>
			<th>负责人</th>
			<th>手机号</th>
			<th>邮箱</th>
			<th>家庭地址</th>
			<th>创建时间</th>
			<th>状态</th>
			<th>操作</th>
		</tr>
	  </thead>
	  <tbody>
		<tr>
		  <td><input type="checkbox" id="inlineCheckbox1" value="option1"></td>
		  <th scope="row">1</th>
		  <td>ckse的家庭</td>
		  <td>234567981234567841564131</td>
		  <td>ckse</td>
		  <td>1302016367</td>
		  <td>1302016367@163.com</td>
		  <td>闵行区</td>
		  <td>2017-6-9</td>
		  <td>启用</td>
		  <td><a href="#">编辑</a></td>
		</tr>
		<tr>
		  <td><input type="checkbox" id="inlineCheckbox1" value="option1"></td>
		  <th scope="row">2</th>
		  <td>Thornton的家庭</td>
		  <td>234567981234567841564133</td>
		  <td>Thornton</td>
		  <td>1302016363</td>
		  <td>1302016363@163.com</td>
		  <td>闵行区</td>
		  <td>2017-6-9</td>
		  <td>启用</td>
		  <td><a href="#">编辑</a></td>
		</tr>
		<tr>
		  <td><input type="checkbox" id="inlineCheckbox1" value="option1"></td>
		  <th scope="row">3</th>
		  <td>the Bird的家庭</td>
		  <td>234567981234567841564132</td>
		  <td>the Bird</td>
		  <td>1302016365</td>
		  <td>1302016365@163.com</td>
		  <td>闵行区</td>
		  <td>2017-6-9</td>
		  <td>启用</td>
		  <td><a href="#">编辑</a></td>
		</tr>
	  </tbody>
	</table>
			
			</div>
		</div>
		
		<div style="margin:0px;text-align:center;margin-top:0px;">
			<ul class="pagination" style="height:100px;">
				<li><a href="#">«</a></li>
				<li class="active"><a href="#">1</a></li>
				<li class="disabled"><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">»</a></li>
				
				<li>  
                	总记录
                    1
                    总页数
                    1
                    当前第
                    1
                    页
	                转到
	                <input type="text" style="width:30px;" class="input" value="1" />
	                页
	                <button type="button" class="btn btn-success">确定</button>
            	</li>
				
			</ul>
			
		</div>
			

	
	</div>
	
	
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


码农致富
关注
  • 6
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap表格
weixin_44543307的博客
06-17 501
Bootstrap表格 开发工具与关键技术：VS Bootstrap 作者：木林森 撰写时间：2019年6月16日 之前我们分享了layui表格，今天我们就来分享另一种表格——Bootstrap表格。 在写编程时我们经常会用到表格，那我们是使用layui表格还是使用Bootstrap表格，这个就需要根据实际的情况进行选择了。 如果你想要设计一个有自己特点的表格，那就建议使用Bootstrap表格...
BootStrap-表格
hxy1625309592的博客
01-04 115
6.1 基本表格 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网页编码的类型--> <meta charset="utf-8"> <!--使用最新的支持H5浏览器内核来解析--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
bootstrap table表格实例,基于javaweb的bootstrap table实例源码下载
02-07
本实例针对bootstrap中table的使用方法，通过ajax远程调用服务器实现table的显示、分页、查询。
bootstrap实现表格
04-24 184
基本实例样式 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户管理页面</title> <!-- Bootstrap core CSS -...
基本表单实例
weixin_30292843的博客
06-25 144
基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。 将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。 <form> <div cla...
bootstrap-table的实例编写
10-02
bootstrap-table的实例编写 bootstrap-table的实例编写
jQuery动态生成Bootstrap表格
10-21
在本文中，我们将深入探讨如何使用jQuery动态生成Bootstrap表格，这是一种高效的方法，可以在网页上创建交互式的、响应式的表格。Bootstrap框架提供了丰富的样式和组件，而jQuery则是一种强大的JavaScript库，用于...
Bootstrap表格编辑生成器插件.rar
04-29
`index.html`是示例网页文件，包含HTML、CSS和JavaScript代码，用于演示如何使用Bootstrap表格编辑生成器插件。`bootstrap-3.3.7-dist`文件夹则是Bootstrap的库文件，包含了框架的CSS、JavaScript和图片资源，是构建...
Bootstrap表格制作代码
12-10
本文实例为大家分享了Bootstrap表格制作的具体代码，供大家参考，具体内容如下 Bootstrap 支持的一些表格元素： 可用于表格中的tablede 样式 可用于表格中的, <th> 和 html与css代码 <html> <head&...
Bootstrap Table的官网例子
09-27
本人因为项目开发的需要，需要用到一个表格插件。于是看上了Bootstrap Table，官网只是给了一个例子，于是我把官网的代码给爬下来。在基础上进行自己的修改。如果有兴趣可以下载来看看，代码个官网的是一模一样的。
基于Bootstrap的jquery动态数据表格插件
12-11
raydreams.js是一款基于Bootstrap的jquery动态数据表格插件。该jquery动态数据表格的特点是使用简单，它能通过json动态加载表格所需的数据，并通过配置参数设置表格列是否排序和添加功能按钮等。
bootstrap案例35个常用案例
01-15
收集了35个实用的bootstrap案例，轮播，表单设计等
动态加载bootstrap表格数据
11-29
对bootstrap表格的自定义demo，js动态加载表格数据
bootstrap表格分页实例讲解
08-31
总结来说，Bootstrap表格分页实例讲解涵盖了使用Bootstrap-table插件在网页上创建带分页功能的表格的基本步骤。通过引入必要的库、设置HTML结构和编写JavaScript初始化代码，可以实现用户友好的数据展示和交互。这个...
BootstrapTable简单的例子
WangCode
11-13 495
BootstrapTable简单的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Demo</title> <link rel="stylesheet" href="static/css/bootstrap.min.css"> <link rel="stylesheet" href=
Bootstrap Table数据表格的使用指南，springmvc面试题2020
m0_64383449的博客
12-23 869
public Specification buildSpec(StudentForm form){ return null; } 其中page方法中接收参数的TablePageable类是接收分页和排序参数类，其中还包含了几个分页排序处理的方法。StudentForm中的字段和实体类中字段一样，主要用于接收查询条件。Student为实体类。buildSpec方法为查询方法。 TablePageable类代码如下。 import org.springframework.data.domain.PageRequ
Bootstrap框架之表单
weixin_42146366的博客
07-20 1500
一、简介 介绍如何使用 Bootstrap 工具包来创建表单。 二、表单 基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获...
Bootstrap项目（表单）实践3
qq_56180999的博客
06-05 545
Bootstrap项目（表单）实践3 文章目录Bootstrap项目（表单）实践3一、成果展示二、主要代码三、遇到的问题1.布局2.表单宽度3.栅格系统布局 一、成果展示 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 二、主要代码 表单代码： <form class="form-horizontal container-fluid"> <div class="form-group">
BootStrap表格状态Class应用示例
Bootstrap提供了多种状态Class，如`.success`, `.info`, `.warning`, 和 `.danger`，这些Class可以用于表格、按钮、标签等元素，使得开发者可以根据不同场景轻松改变元素的外观。 表格（`<table>`）是HTML中用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值