Bootstrap表格制作代码


Posted in Javascript onMarch 17, 2017

本文实例为大家分享了Bootstrap表格制作的具体代码,供大家参考,具体内容如下

Bootstrap 支持的一些表格元素:

Bootstrap表格制作代码

可用于表格中的tablede 样式

Bootstrap表格制作代码

可用于表格中的<tr>, <th> 和 <td>

Bootstrap表格制作代码

html与css代码

<html> 
 <head> 
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
 <style> 
 div{ 
 font-family: '宋体'; 
 color: #0A0A0A; 
 } 
 tr,td{ 
 width:30px; 
 height: 50px; 
 font-size:24px; 
 } 
 </style> 
 </head> 
 
 <body> 
 <div class="container"> 
 <div class="header"> 
 <h1>表格</h1> 
 </div> 
 <p class="text-muted" style="font-size: 18px;">小妞妞的成绩单:</p> 
 <!-- 
  <p class="text-muted">本行内容是减弱的</p> 
  -->     
 <table class="table table-striped table-bordered table-hover table-condensed"> 
 <!-- 
  .table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) 
  .table-bordered 为所有表格的单元格添加边框 
  .table-hover 在 <tbody> 内的任一行启用鼠标悬停状态 
  .table-condensed 让表格更加紧凑 
 --> 
 <thead> 
  <tr class="active"> 
  <th>科目</th> 
  <th>成绩</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr class="success"> 
  <td>语文</td> 
  <td>90</td> 
  </tr> 
  <tr> 
  <td>数学</td> 
  <td>95</td> 
  </tr> 
  <tr class="warning"> 
  <td>英语</td> 
  <td>85</td> 
  </tr> 
  <tr class="danger"> 
 <!-- 
  .active 对某一特定的行或单元格应用悬停颜色;.success表示一个成功的或积极的动作; 
  .warning 表示一个需要注意的警告;.danger 表示一个危险的或潜在的负面动作; 
 --> 
  <td>综合</td> 
  <td>200</td> 
  </tr> 
 </tbody> 
 </table> 
 </div> 
 
 <script src="js/jquery.min.js"></script> 
 <script src="js/bootstrap.min.js"></script> 
 </body> 
 
</html>

效果图:

Bootstrap表格制作代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
vue中template的三种写法示例
Oct 21 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 #Javascript
angularJS之$http:与服务器交互示例
Mar 17 #Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 #Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 #Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 #Javascript
详解Vue.js入门环境搭建
Mar 17 #Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 #Javascript
You might like
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
详解Document.Cookie
2015/12/25 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python中str.format()详解
2017/03/12 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
动态密码技术
2012/10/18 面试题
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
《猴子种果树》教学反思
2014/04/26 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
校长新学期致辞
2015/07/30 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
5个实用的JavaScript新特性
2022/06/16 Javascript