bootstrap17-响应式表格布局

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>响应式表格布局</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<table class="table table-responsive">

<caption>响应式表格布局</caption>

<thead>

<tr>

<th>名称</th>

<th>城市</th>

<th>邮编</th>

</tr>

</thead>

<tbody>

<tr class="active">

<td>Tanmay</td>

<td>Bangalore</td>

<td>560001</td>

</tr>

<tr class="success">

<td>Sachin</td>

<td>Mumbai</td>

<td>400003</td>

</tr>

<tr class="warning">

<td>Uma</td>

<td>Pune</td>

<td>411027</td>

</tr>

<tr class="danger">

<td>suyanzhu</td>

<td>xuzhou</td>

<td>221400</td>

</tr>

</tbody>

</table>

</div>

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

时间: 2024-10-16 17:49:29

bootstrap17-响应式表格布局的相关文章

响应式表格布局

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

吴裕雄 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&

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

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

浅析响应式网站布局Bootstrap

bootstrap是一款依赖于jquery开发的一款响应式网页布局的插件,可以针对不同的屏幕尺寸调整你的页面,使其在个尺寸屏幕上表现良好. 从bootstrap官方网站来看,bootstrap主要有下面几部分组成: CSS--Bootstrap为我们预实现了很多CSS样式.包括一些图片以及网站的响应式布局. 组件--Bootstrap为我们预实现了很多CSS组件.如下拉框.按钮组.导航等.也就是说Bootstrap内容帮我们定义好了很多CSS样式,你可以将这些样式直接应用到之前的下拉框等元素里.

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

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

bootstrap-表格-响应式表格

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表格</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --&g

&lt;Bootstrap&gt; 学习笔记一. 配置环境, 简单使用, 响应式表格, 响应式图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--以移动设备为优先 宽度和设备屏幕宽度一致, 初始缩放为1:1, 禁止用户缩放--> <meta name="viewport" content="width=device-width, initial-scale=1, user-scala

响应式图片布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式图片布局</title> <link rel="stylesheet" type="text/css" href="begin.css" /> </head> <

多个盒子一行排列的方法大全 响应式网页布局

如果想把多个块级元素放到同一行上,同学们首先想到的是浮动,但是就仅仅独此一种吗,答案不是的.这里小强老师总结了5种布局方式,希望对大家有所帮助. 第一种方法: 浮动法 这种方法是最简单的,也是我们初学css必须掌握的技能,就是把li浮动起来就好了. 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title