bootstrap中表格修饰图片浮动背景框提示框及关闭提示框元素淡入淡出及jQuery中操作类名
Posted 苦海123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap中表格修饰图片浮动背景框提示框及关闭提示框元素淡入淡出及jQuery中操作类名相关的知识，希望对你有一定的参考价值。
表格：
bootstrap中用类定义了几个风格的表格，使用时给table标签加上类名即可，具体如下：
| 类名 | 描述 |
|---|---|
| .table | 基础表格：标题加粗，只有水平的淡灰色边框线条，没有垂直方向的线条 |
| .table-striped | 条纹表格：标题加粗，隔行交替灰白两色，没有边框线 |
| .table-bordered | 边框表格：具有水平方向和垂直方向的淡灰色边框线，标题加粗 |
| .table-hover | 鼠标悬停表格：加载完是一个基础没有边框的表格，当鼠标经过某行时背景颜色变淡灰色 |
| . table-dark | 背景黑色表格：背景为黑色，字体为白色没有边框的表格 |
| 组合型 | 将上面的类名进行组合可以出现互相搭配的样式 |
除以上给table标签加类名的表格风格样式外，bootstrap还给tr标签提供了具有特殊意义的类名，这些类名具有不同的背景颜色（给table标签加此类类名整个表格会是一个背景色，当然这类类名给其他容器同样有背景色），具体如下：
| 类名 | 描述 |
|---|---|
| .table-primary | 蓝色背景：表示重要 |
| .table-success | 绿色背景：表示可执行的 |
| .table-danger | 浅红色背景：表示危险 |
| .table-info | 淡蓝色背景：表示变更 |
| .table-warning | 淡黄色背景：表示需要注意 |
| .table-active | 淡灰色背景：表示将要操作 |
| .table-secondary | 灰色背景：表示内容不重要 |
| .table-light | 灰白色背景：可用于主体背景，比纯白色较暗点 |
| .table-dark | 深灰色背景：可用于表格行的背景，类似灰色铅笔色 |
除上面修饰表格的样式类名外，bootstrap还提供了修饰表头的样式类名，使用时给thead标签添加此类类名即可，具体如下：
| 类名 | 描述 |
|---|---|
| .thead-dark | 给表头添加黑色背景（表头字体颜色变白色） |
| .thead-light | 给表头添加灰色背景（表头字体颜色为黑色） |
小表格：如果是移动端开发，或者需要较小的表格风格，可以给table标签加table-sm类名。
响应式表格：bootstrap提供了响应式表格，使用时给table的父级容器加table-responsive类名即可，当屏幕宽度尺寸大于992px时，不会出现滚动条，也是响应式表格，宽度小于992px时，会出现横向滚动条，除此之外，bootstrap还提供了更精准的响应式尺寸类名，这里类名不仅可以用于表格，而且可以用于 子元素宽度大于父容器时，（实际上bootstrap中的很多类样式可以用于不同的标签，但是为了具有语义化，开发中建议根据前缀对类名合理使用），其它尺寸类名如下：
| 类名 | 描述 |
|---|---|
| .table-responsive-sm | 屏幕宽度 < 576px时出现滚动条 |
| .table-responsive-md | 屏幕宽度 < 768px时出现滚动条 |
| .table-responsive-lg | 屏幕宽度 < 992px时出现滚动条 |
| .table-responsive-xl | 屏幕宽度 < 1200px时出现滚动条 |
修饰图片：
bootstrap提供了修饰img中图片的样式类名，使用时给img标签添加此类类名即可，具体如下：
| 类名 | 描述 |
|---|---|
| .rounded | 图片圆角：使img四角有很小的圆角 |
| .rounded-circle | 图片椭圆：使img成椭圆形 |
| .img-thumbnail | 缩略图：使img有边框，图片类似缩小 |
| .img-fluid | 响应式图片：使图片称为响应式的，随着屏幕尺寸变化而变化大小 |
浮动：
bootstrap中定义了float类，使用时直接给元素加此类类名即可，具体如：
| 类名 | 描述 |
|---|---|
| .float-right | 使元素向右浮动（右对齐） |
| .float-left | 使元素向左浮动（左对齐） |
| .clearfix | 清除浮动 |
| .float-S-P | 响应式浮动，其中S的值有：sm, md, lg ，xl；P的值有：left,rigth |
| float-none | 没有浮动 |
背景框：
bootstrap提供了一类会创建大号背景框的样式类，在这类背景框中可以继续开发内容，可以理解为一个有样式的div盒子，其具体如下：
| 类名 | 描述 |
|---|---|
| .jumbotron | 定义一个响应式灰色背景的框框，有默认高度，但是高度会随着内容撑开 |
| .jumbotron-fluid | 定义一个全屏白色背景框框 |
提示框：
bootstrap提供了具有特殊意义的信息提示框，提示框可以使用alert类名实现，使用时给容器添加类名即可，其具体如下：
| 类名 | 描述 |
|---|---|
| .alert | 定义一个有默认高度无色的响应式容器 |
| .alert-success | 定义一个浅绿色背景通栏，高度由内容撑开，表示成功 |
| .alert-info | 定义一个浅蓝色背景通栏，高度由内容撑开，表示注意 |
| .alert-warning | 定义一个浅黄色背景通栏，高度由内容撑开，表示警告 |
| .alert-danger | 定义一个浅红色背景通栏，高度由内容撑开，表示错误 |
| .alert-primary | 定义一个淡蓝色背景通栏，高度由内容撑开，表示首选的 |
| .alert-secondary | 定义一个淡灰色背景通栏，高度由内容撑开，表示次要的 |
| .alert-dark | 定义一个深灰色背景通栏，高度由内容撑开 |
| .alert-light | 定义暗白色背景通栏，高度由内容撑开 |
| .alert A | 实际开发中会将alert类名和具有特殊意义的alert-类名结合使用 |
提示框中的链接：bootstrap提供了a标签的类样式类名：alert-link，给a标签添加此类后，默认没有下划线，当鼠标经过时会出现下划线且颜色会改变（当a标签在父级为提示框的容器中，鼠标经过时颜色是不会改变的)。
关闭提示框：
bootstrap中提供了关闭提示框功能的自定义属性：data-dismiss=“alert”，（想要实现关闭提示框的功能，父级容器必须是类名为alert的提示框，另外给input按钮加data-dismiss="alert"就可以实现功能层面；但是外观是比较丑的，此时可以继续给button按钮加close类名，此类名可将按钮文本浮动到父级容器右边且修改默认样式）如下：
<!-- 特别提醒：在本地引入的jQuery文件在测试时会有错误：fn找不到的情况，由于对jQuery文件结构及依赖不是很清楚，这里可以采用cdn网络资源 -->
<div class="alert alert-success"><!--关闭提示框功能必须有alert属性，后面属性为修饰性属性，官方文档中还有alert-dismissible属性（设置padding-right: 4rem）-->
<button type="button" class="close" data-dismiss="alert">关闭</button><!-- type建议给button值，当然不给值也没问题；后面一个是修饰样式的类名，另一个是实现功能的自定义属性 -->
<span>提示信息！</span><!--此块区域可以继续开发其他 -->
</div>
元素淡出淡入效果：
bootstrap中提供了元素淡入淡出功能的类名show和fade，常配合操作类样式的API使用，如：
<body>
<div class="box">
<p>测试bootstrap中fade和show类及jQuery中操作类样式API</p>
</div>
<button>显示</button>
<button>关闭</button>
<button>显示/关闭</button>
<script>
var $box = $(document.querySelector('.box'));
var $button = $(document.querySelectorAll('button')[0]);
var $button1 = $(document.querySelectorAll('button')[1]);
var $button2 = $(document.querySelectorAll('button')[2]);
$button.on('click', function() {
$box.removeClass('fade');
$box.addClass('show');
});
$button1.on('click', function() {
$box.removeClass('show');
$box.addClass('fade');
});
$button2.on('click', function() {
$box.toggleClass('fade');
});
</script>
</body>
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海
以上是关于bootstrap中表格修饰图片浮动背景框提示框及关闭提示框元素淡入淡出及jQuery中操作类名的主要内容，如果未能解决你的问题，请参考以下文章