⑤bootstrap表格使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--移动设备优先--> <title>bootstrap</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"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> .table-hover{background-color: #e29c84;} </style> </head> <body> <div class="container"> <h1>带条纹</h1> <table class="table table-striped"> <tr><th>序号</th><th>姓名</th><th>年龄</th></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> </table> <h1>带边框</h1> <table class="table table-bordered table-striped"> <tr><th>序号</th><th>姓名</th><th>年龄</th></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> </table> <h1>悬停</h1> <table width="600" class="table table-bordered table-striped table-hover"> <tr><th>序号</th><th>姓名</th><th>年龄</th></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> </table> <h1>紧凑/行内样式</h1> <table class="table table-bordered table-condensed"> <tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr> <tr class="success"><td>1</td><td>张三</td><td>22</td></tr> <tr class="warning"><td>1</td><td>张三</td><td>22</td></tr> <tr class="danger"><td>1</td><td>张三</td><td>22</td></tr> <tr class="active"><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> </table> <hr/> <hr /> <div class="row"> <div class="col-sm-4"> <h1>响应式表格要放在div里</h1> <div class="table-responsive"> <table class="table table-bordered table-striped table-hover"> <tr><th>序号</th><th>姓名</th><th>年龄</th></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> <tr><td>1</td><td>张三</td><td>22</td></tr> </table> </div> </div> </div> </div> </body> </html>
⑤bootstrap表格使用基础案例的更多相关文章
- 【7】了解Bootstrap栅格系统基础案例(2)
ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...
- 【10】了解Bootstrap栅格系统基础案例(5)
这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...
- 【9】了解Bootstrap栅格系统基础案例(4)
这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...
- 【8】了解Bootstrap栅格系统基础案例(3)
这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...
- 【6】了解Bootstrap栅格系统基础案例(1)
从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...
- ⒂bootstrap组件 折叠 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ⒀bootstrap组件 选项卡 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- ④bootstrap列表使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ③bootstrap文本使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 实例讲解webpack的基本使用第一篇
更新文章不容易,尤其是更新高质量的文章更加不易,因此为了节约时间,闲话就不多说了.关于webpack的介绍,webpack是用来干嘛的,这些基础概念性的东西,就不在此赘述,下面直接开始正题. webp ...
- IE9总是弹出“ICBC Anti-Phishing class” 加载项是否要启用还是不启用的提示
解决方法: 后来在通过查询,发现 IcbcDaemon.exe 进程是写在系统服务中的,我们可以在系统的服务管理工具中停止该服务: 1.单击开始,在搜索框中输入 services.msc ,按下回车键 ...
- git fsck -- 一致性检查
格式: git fsck [选项] <path> 选项 git commit -a 提交所有改动的文件(a -- all) git commit -m 提交说明(m ...
- webpack2使用ch8-loader解析less less自动添加浏览器前缀
1 目录结构 安装依赖 "less": "^2.7.2","less-loader": "^4.0.3", 2 web ...
- webpack2使用ch1-目录说明
1 目录解释 webpack.config.js:配置文件,配置文件可以改成其他名,但package.json --config文件名称也要对应修改 2 webpack.config.js //we ...
- pb9常见错误及含义
1. by zero 发生被0除错误 2. Null object reference 空对象引用 3. Array boundary exceeded 数组越界 4. Enumerated v ...
- linux RPM软件包管理
linux RPM软件包管理 目录 1.软件包的介绍 2.rpm包管理 3.rpm包管理前端工具 1.软件包的介绍 在我们在对软件包管理前,先对软件包有个很好的了解,这样更方便我们来对其进行管理. 软 ...
- (10.11)Java第一小步
在度过大一和大二浑浑噩噩的咸鱼生活之后,我决定 开始为自己的未来负责,开始学习自己喜欢的Java,同时决定以这篇博客来开启自己的博客之旅和Jaca的学习之路. 以后我也会陆续在博客园更新自己的博客,记 ...
- Xadmin集成富文本编辑器ueditor
在xadmin中通过自定义插件,实现富文本编辑器,效果如下: 1.首先,pip安装ueditor的Django版本: pip install DjangoUeditor 2.之后需要添加到项目的set ...
- CSS3动画 transition和animation的用法和区别
transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C IE -ms- Chrome/Safari -webkit- Firefoc - ...