表格边框背景思维导图

U4117575421

2025-12-17

浏览量: 79

边框设置

表格

表格的个性化风格

表格边框背景内容详述

树图思维导图提供《表格边框背景》在线思维导图免费制作，点击“编辑”按钮，可对《表格边框背景》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：1a9371fd05a6c1ba369d91f385f074d5

思维导图大纲

表格

表格的结构标签

<table> 表格容器 <thead> 表格的表头容器 <tbody> 表格的主体容器 <tr> 表格的行结构 <td> 表格的单元格 <th> 表格的表头容 <caption> 表格的标题容器

表格的个性化风格

.table <tbody> 表格的默认风格，对每个td增加padding，相邻之间的td也会有一些间隔，并且增加了水平方向的分割线 .table-borderless <tbody> 无边框风格，设计没有边框的表格 .table-striped <tbody> 条纹状风格，设计条纹、斑马纹状的表格 .table-bordered <tbody> 边框风格，设计表格具备边框 .table-hover <tbody> 指针悬停风格，使表格产生行悬停效果，将鼠标移至行上时，改变底纹颜色 .table-sm <tbody> 紧凑风格，将表格的padding值缩减一半，使表格紧凑 .table-primary <tbody>、<thead>、<tr>、<td> 用于设计表格背景颜色，蓝色，表重要操作 .table-success 适用标签与.table-primary一致用于设计表格背景颜色，绿色，表示可执行操作 .table-danger 适用标签与.table-primary一致用于设计表格背景颜色，红色，表示危险操作 .table-info 适用标签与.table-primary一致用于设计表格背景颜色，浅蓝色，表示表示内容变更 .table-warning 适用标签与.table-primary一致用于设计表格背景颜色，橘色，表示需要注意的操作 .table-active 适用标签与.table-primary一致用于设计表格背景颜色，灰色，用于鼠标悬停效果 .table-secondary 适用标签与.table-primary一致用于设计表格背景颜色，灰色，表示内容不重要 .table-light 适用标签与.table-primary一致用于设计表格背景颜色，浅灰色 .table-dark 适用标签与.table-primary一致用于设计表格背景颜色，深灰色

边框

边框设置

.border-top 为元素添加上边框 .border-right 为元素添加右边框 .border-left 为元素添加左边框 .border-bottom 为元素添加下边框

边框删除

.border-0 删除元素的所有边框，前提是需要删除的边框已经存在 .border-top-0 删除元素的上边框，前提是需要删除的边框已经存在 .border-right-0 删除元素的右边框，前提是需要删除的边框已经存在 .border-left-0 删除元素的左边框，前提是需要删除的边框已经存在 .border-bottom-0 删除元素的下边框，前提是需要删除的边框已经存在

边框样式类的语法格式

边框样式类的语法格式如下所示。 <span class="border"></span>

边框颜色

.border-primary 用于设计蓝色边框，表强调意义 .border-secondary 用于设计灰色边框，表次要意义 .border-success 用于设计绿色边框，表成功意义 .border-danger 用于设计红色边框，表危险意义 .border-warning 用于设计橘黄色边框，表警告意义 .border-info 用于设计浅蓝色边框，表信息意义 .border-light 用于设计白色边框，表高亮意义 .border-dark 用于设计黑色边框 .border-white 用于设计白色边框

边框颜色类的语法格式

边框颜色类的语法格式如下所示。 <span class="border border-primary"></span>

圆角边框

.rounded 设置元素四角为圆角，前提是需要设置的边框已经存在 .rounded-top 设置元素左上角和右上角为圆角边框，前提同上 .rounded-right 设置元素右上角和右下角为圆角边框，前提同上 .rounded-left 设置元素左上角和左下角为圆角边框，前提同上 .rounded-bottom 设置元素左下角和右下角为圆角边框，前提同上 .rounded-circle 设置元素边框为正圆形，前提同上 .rounded-pill 设置元素边框为胶囊形，前提同上 .rounded-0 取消元素的所有圆角边框，即设置元素四角为直角，前提同上 .rounded-sm 设置元素四角边框为小圆角，前提同上 .rounded-lg 设置元素四角边框为大圆角，前提同上

圆角边框类的语法格式

圆角边框类的语法格式如下所示。 <span class="border rounded"></span>

背景

背景颜色类的语法格式

背景颜色类的具体说明

.bg-primary 背景颜色为蓝色，表示重要意义 .bg-secondary 背景颜色为灰色，表示次要意义 .bg-success 背景颜色为浅绿色，表示成功意义 .bg-danger 颜色为浅红色，表示危险意义 .bg-warning 颜色为浅黄色，表示警告意义 .bg-info 颜色为浅蓝色，表示信息意义 .bg-light 颜色为浅灰色，表示高亮意义（此背景颜色在文本为白色时会模糊文字） .bg-dark 颜色为深灰色，表示暗色意义 .bg-white 背景颜色为白色（此背景颜色在文本为白色时会模糊文字） .bg-transparent 背景颜色为透明色（此背景颜色在文本为白色时会模糊文字）

3A Unit 1 A Proper Job思维导图