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实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
JavaScript 数组详解
2013/10/10 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
python函数局部变量用法实例分析
2015/08/04 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
python yield关键词案例测试
2019/10/15 Python
python pygame实现球球大作战
2019/11/25 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
挪威手表购物网站:Klokker
2016/09/19 全球购物
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
const和static readonly区别
2013/05/20 面试题
Python中pass语句的作用是什么
2016/06/01 面试题
网络营销策划方案
2014/06/04 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
安全教育片观后感
2015/06/17 职场文书
python - timeit 时间模块
2021/04/06 Python
深入理解Vue的数据响应式
2021/05/15 Vue.js