bootstrap-表格-响应式表格

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>表格</title>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" 
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
	crossorigin="anonymous">

	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" 
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
	crossorigin="anonymous">
</head>
<body>
	<!-- 响应式表格 .table-responsive -->
	<div class="table-responsive">
		<table class="table table-bordered">
			<caption>响应式表格 .table-responsive</caption>
			<thead>
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>年龄</th>
					<th>性别</th>
					<th>学历</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>小小</td>
					<td>23</td>
					<td>女</td>
					<td>大专</td>
				</tr>
				<tr>
					<td>2</td>
					<td>允允</td>
					<td>23</td>
					<td>女</td>
					<td>大专</td>
				</tr>
				<tr>
					<td>3</td>
					<td>朔朔</td>
					<td>26</td>
					<td>男</td>
					<td>大专</td>
				</tr>
				<tr>
					<td>4</td>
					<td>单单</td>
					<td>24</td>
					<td>女</td>
					<td>大专</td>
				</tr>
			</tbody>
		</table>
	</div>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
	crossorigin="anonymous"></script>
</body>
</html>

时间： 2024-10-06 03:54:37

bootstrap-表格-响应式表格的相关文章

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应式表格</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&

<Bootstrap> 学习笔记一. 配置环境, 简单使用, 响应式表格, 响应式图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1, user-scala

RWD Table Patterns – 响应式表格解决方案

在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏览器会使用滚动条代替. 您可能感兴趣的相关文章创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果你见过吗?9款超炫的复选框(Checkbox)效果超赞!基于 Bootstrap 的响应式的后台管理模板太赞了!超炫的页面切换动画效果[附源码下载] 立即下

CSS3响应式表格和响应式图片

最近跟着某大牛学CSS3,下面是跟着大牛做的两个实例项目,不得不说CSS3真的很强大.另外最近用SAE搭建了一个网站,把最近的实例都放到了里面,等搭建好放出,这样大家就能直观的看到演示效果了建立HTML文件 <!DOCTYPE html> <html> <meta charset="utf-8"> <head> <meta charset="UTF-8"> <title>响应式表格设计<

响应式表格布局

通过css媒体查询捕捉浏览器的大小,来改变css样式,本例是改变表格的样式 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式表格布局</title> <link rel="stylesheet" type="text/css" href=&qu

基于ASP.NET MVC和Bootstrap搭建响应式个人博客站（一）

1.0 为什么要做这个博客站? www.zynblog.com 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效.这样一来,也就不方便自己查阅了.如果转载.收藏到自己的博客园账号中.CSDN账号中,脚本之家中,知乎中等等,依然是很凌乱,不方便下次查阅. 因此,我下决心开发一个个人技术博客站.主要原因是:可以整合各种宝贵资源,将知识变为

Bootstrap禁用响应式布局

在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev

bootstrap的响应式布局

css ul{ list-style: none; margin: 0; padding: 0; } a{ color: #666; text-decoration: none; } a:hover{ text-decoration: none; } body{ background: #f5f5f5; } .container{ background: #fff; } /* 因为设计稿是1280px的,而bootstrap里面的container最大为1170px,因此我们手动修改contai

Django中间件，CSRF（跨站请求伪造），缓存，信号，BootStrap(模板)-响应式（栅格）+模板

Django中间件,CSRF(跨站请求伪造),缓存,信号,BootStrap(模板)-响应式(栅格)+模板 1.中间件(重要): 在Django的setting中有个MIDDLEWARE列表,里面的东西可以理解为过滤管道,里面有个安全过滤管道: from django.middleware.csrf import CsrfViewMiddleware里面有四个常用的方法: process_request:客户端请求的通道,但当此方法里面有return时就不会再执行后面的方法,直接走process