Bootstrap表格制作代码
Bootstrap 支持的一些表格元素:
可用于表格中的tablede 样式
可用于表格中的<tr>, <th> 和 <td>
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>
效果图:
(资源库 www.zyku.net)
栏 目:HTML/Xhtml
下一篇:超链接 a href 通过post方式提交表单的方法
本文标题:Bootstrap表格制作代码
本文地址:https://www.zyku.net/xhtml/1275.html
您可能感兴趣的文章
- 05-09一张图解析FastAdmin中的表格列表的功能
- 05-05excel表格中自动生成手机号码
- 02-17bootstrap table 数据表格行内修改的实现代码
- 02-14HTML5制作表格样式代码
- 11-21PHP中输出3行2列表格的方法
- 02-08小米11手机应用双开教程
- 01-19星球抓娃娃机-星球抓娃娃机应用软件功
- 10-22小米civi设置120hz教程介绍
- 11-04QQ音乐播放背景动态效果怎么关闭
- 11-15FileZilla Pro S3协议访问七牛云对象
- 01-12蒲公英企业版-蒲公英企业版应用软件功
- 01-12馨睿相伴-馨睿相伴应用软件功能介绍
- 12-29洗车水枪-洗车水枪应用软件功能介绍
- 10-13荣耀v40怎样启用5g网络
- 01-06oppo手机设置夜间更新版本流程一览
- 02-28WordPress根据分类名称获取分类ID、分
- 09-20抖音在哪里找到热门素材
- 01-10巧飞工厂管理-巧飞工厂管理应用软件功
- 08-13织梦dedecms网站中显示最近浏览文章列
- 03-20荣耀手机启用锁屏密码方法
最近更新
阅读排行
猜你喜欢
- 12-25DIY教学赏析-DIY教学赏析应用软件功能
- 03-14iqooneo5活力版开启微信分身方法
- 01-11文件扫描识别-文件扫描识别应用软件功
- 11-21帝国CMS系统标签大全
- 02-23Nginx 301不带www跳转到带www域名方法
- 09-20小米手机关闭分身提醒方法介绍
- 09-17vivox70pro红包提醒功能设置步骤分享
- 02-21红米k40游戏增强版开启护眼模式设置方
- 09-29vivo手机怎么编辑sim卡名称
- 01-11i铃声壁纸-i铃声壁纸应用软件功能介绍