Bookstrap全局css样式-表格1|学习笔记

简介: 快速学习Bookstrap全局css样式-表格1

开发者学堂课程【前端开发框架Bootstrap使用教程:Bookstrap全局css样式-表格1】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/360/detail/4229


Bookstrap全局css样式-表格1


目录:

一、基本实例

二、条纹状表格

三、带边框的表格

四、鼠标悬停

五、紧缩性表格

六、状态类


一、基本实例

为任意<table> 标签添加. table类可以为其赋予基本的样式—少量的内补( padding )和水平方向的分隔线。这种方式看起来很多余! ?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。

实例:

Optional table caption.

<table class="table">

</table>

二、条纹状表格

通过.table-striped 类可以给<tbody> 之内的每一行增加斑马条纹样式。

跨浏览器兼容性

条纹状表格是依赖:nth-child CSS选择器实现的,而这一功能不被Intermet Explorer 8支持。

实例:

<table class="table table-striped">

</table>

三、带边框的表格

添加.table-bordered 类为表格和其中的每个单元格增加边框。

实例:

<table class="table table-bordered">

</table>

四、鼠标悬停

通过添加. table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover ">

</table>


五、紧缩性表格

通过添加.table-condensed 类可以让表格更加紧凑,单元格中的内补( padding )均会减半。

<table class="table table-condensed ">

</table>


六、状态类

通过这些状态类可以为行或单元格设置颜色。

Class   描述

.active  鼠标县停在行或单元格上时所设置的颜色

.success 标识成功或积极的动作

.info    标识普通的提示信息或动作

相关文章
|
前端开发 开发者
HTML+CSS+JS 学习笔记(二)———CSS
HTML+CSS+JS 学习笔记(二)———CSS
178 0
|
7天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
24天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
5月前
|
人工智能 前端开发
CSS学习笔记2024最新
CSS学习笔记2024最新
35 1
|
前端开发
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
54 0
|
5月前
|
前端开发 JavaScript 容器
CSS学习笔记(一) 盒子模型
CSS学习笔记(一) 盒子模型
|
5月前
|
缓存 前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记->处理CSS
《Webpack5 核心原理与应用实践》学习笔记->处理CSS
51 0
|
前端开发
CSS学习笔记
CSS学习笔记
46 0
CSS学习笔记
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
前端开发 开发者