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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
php堆排序实现原理与应用方法
2015/01/03 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python random模块常用方法
2014/11/03 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
关于责任的演讲稿
2014/05/20 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
机械操作工岗位职责
2014/08/08 职场文书
就业协议书样本
2014/08/20 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
会计专业自荐信范文
2015/03/05 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书