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 相关文章推荐
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
javascript的console.log()用法小结
May 31 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
JS实现图片切换效果
2018/11/17 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python二分查找详解
2015/09/13 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python 线程池用法简单示例
2019/10/02 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
Python执行时间的几种计算方法
2020/07/31 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
后勤岗位职责
2013/11/26 职场文书
分层教学实施方案
2014/03/19 职场文书
五水共治一句话承诺
2014/05/30 职场文书
史上最牛的辞职信
2015/02/28 职场文书
团员自我评价范文
2015/03/10 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python