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中操作类名相关推荐
- LaTeX 中表格和图片的目录
原 文:LaTeX 中表格和图片的目录 译 者:Xovee 翻译时间:2020年11月3日 LaTeX 中表格和图片的目录 表格和图片的目录可以让读者快速定位文档中某些特定的内容.本篇文章介绍如何 ...
- 如何在论文中表格和图片变成引用格式，实现ctrl访问
步骤1:给表格或图片加入题注 方法:在表格上方或图片下方新起一行,点开引用下插入题注,如下图. 然后看到下图界面,在这可以输入标题和标签. 输入好标题后 点击确定,可以得到如下图.此时在表格上方已插入 ...
- jquery 获取同级元素_如何在jQuery中获取元素的同级
jquery 获取同级元素 In this post, we will discuss how to get the siblings of an HTML element in jQuery. jQ ...
- latex中表格、图片的排版
一.图.表位置 1. 第一行标记图像.表格位置: (1) [h]here; [t]top; [b]bottom;[p]浮动 (2) 强行固定位置,不浮动:加包\usepackage{float},用[ ...
- 表格，图片，背景样式
- html图片从中间淡入淡出效果,CSS中的多个图像交叉淡入淡出-无需（java）脚本
小编典典 如果您知道有多少张图片,可以使用CSS3轻松完成. #crossfade > img { width: 100%; height: 100%; position: absolute; ...
- jquery 查找祖先元素_如何获得jQuery中元素的第一个祖先
jquery 查找祖先元素 In this post, we will discuss about the traversal method to get the first ancestor of ...
- css持续淡入淡出,在CSS中连续的淡入淡出效果
代码: CSS: body { background: #fff; } @-webkit-keyframes 'blink' { 0% { opacity:1; } 50% { opacity:0; ...
- 【在工程Word文档的大量表格中自动插入图片的python程序】
在工程Word文档的大量表格中自动插入图片的python程序 一.问题描述 在word的表格中插入图片代码 图形界面GUI设计 程序打包 一.问题描述 我的姐姐是一个工程技术公司的资料员,经常需要在w ...
最新文章
- pdb+ipdb 调试 Python代码
- A*寻路算法的探寻与改良（三）
- Q：一个经典的helloworld程序需要几个文件？
- 计算机与生命科学交叉应用,第二届 “数学、计算机与生命科学交叉研究”青年学者论坛...
- Microsoft Artificial Intelligence Conference（2018.05.21）
- my Lead add Lead test
- 线程间通信————同步
- 快速学习23种设计模式思想Design Patterns
- java 百度api接口开发_百度熊掌号使用Java工具类对接API推送接口进行文章推送实例详解...
- Pycharm代码格式化快捷键及其设置方法
- 拉格朗日插值_拉格朗日插值定理的理论基础
- remaining connection slots are reserved for non-replication superuser connections
- 电脑文件夹同步软件哪个比较好用？
- AllenNLP 用法总结
- delphi 分析抓取html,delphi网页数据抓取
- qt designer 手册翻译
- RingBuffer的快速上手使用方法
- ansible D2
- 机械键盘上的ASF是什么意思？
- 全球及中国便捷式GNSS接收器行业供应需求及项目投资战略分析报告2022-2027年