bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名

苦海123

已于 2024-03-19 22:58:19 修改

阅读量1k

点赞数 1

分类专栏： Bootstrap 文章标签：前端 bootstrap

于 2021-05-15 13:45:50 首次发布

本文链接：https://blog.csdn.net/weixin_46758988/article/details/116846264

版权

Bootstrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

表格：

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>