热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Bootstrap基本样式学习笔记之表格(2)

Bootstrap提供了一个清晰的创建表格的布局,这篇文章主要介绍了Bootstrap学习笔记之表格基本样式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Bootstrap实现了大量基本样式,包括表格、表单、按钮、图片等。基本的使用方法是通过添加特定的class来实现。
Bootstrap 提供了一个清晰的创建表格的布局。

0x01 表格样式

(1)基本样式:不带边框和分割线:




 
 
 
 
 
 


序号 姓名 年龄
1 kikay 20
2 Tom 18
1 小花 21

(2)样式:table-bordered为表格带上边框:


(3)样式:table-striped:为表格带上斑马线:

(4)样式:.table-hover:为鼠标悬浮在表格行上指定不同颜色:

(5)样式:.table-condensed:使表格更加紧凑:

0x02 状态标识

还可以为表格中行或者单元格添加状态样式,比如:




 
 
 
 
 
 


序号 姓名 年龄
1 kikay 20
2 Tom 18
1 小花 21

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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


推荐阅读
author-avatar
mobiledu2502858253
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有