bootstrap4--常用布局组件二

张0x0

已于 2022-02-05 22:00:48 修改

阅读量1k

点赞数 1

分类专栏： web前端基础学习文章标签：前端 bootstrap css

于 2021-12-17 10:02:21 首次发布

本文链接：https://blog.csdn.net/zxn200125/article/details/121989875

版权

本文介绍了Bootstrap4中的一些常用布局组件，包括图像形状、信息提示框、进度条、加载效果和徽章的使用方法及样式调整。图像形状可以通过特定类实现圆角、圆形、边框和对齐方式。信息提示框提供了不同颜色和关闭功能。进度条可自定义宽度、颜色和样式，加载效果则包括多种动画类型。徽章用于表示新或未读状态，支持颜色和形状定制，并能与其他元素结合使用。

摘要由CSDN通过智能技术生成

图像形状

bootstrap中，通过固有类的设置来实现图像形状改变或者位置移动效果：

● .rounded：图片实现圆角效果

● .rounded-circle：设置椭圆/圆形图片

● .img-thumbnail：设置带边框的图片缩略图

● .float-left：实现图片左对齐

● .float-right：实现图片右对齐

● .mx-auto + .d-block：实现图片居中对齐

测试代码：

    <div class="container">
        <img src="../../../exercise/image/1.png">
        <!-- 图片显示圆角效果 -->
        <img src="../../../exercise/image/1.png" class="rounded">
        <!-- 设置圆形图片 -->
        <img src="../../../exercise/image/1.png" class="rounded-circle">
        <!-- 设置缩略图 -->
        <img src="../../../exercise/image/1.png" class="img-thumbnail">
        <br><br>
        <!-- 图片右对齐 -->
        <img src="../../../exercise/image/1.png" class="float-left">
        <!-- 图片左对齐 -->
        <img src="../../../exercise/image/1.png" class="float-right">
        <!-- 图片居中对齐 -->
        <img src="../../../exercise/image/1.png" class="mx-auto d-block">
    </div>

实现效果：

bootstrap还支持设置响应式图片，也就是根据屏幕大小自适应的图片，设置方式如下：

在<img>标签中添加.img-fluid类 (.img-fluid类设置了max-width:100%;height:auto)

信息提示框

显示

bootstrap中的信息提示框与js中的不同，不是弹出新的信息提示框，而是相当于一个背景框，用于放置相关信息。

●.alert：基本类

●.alert-*：设置信息提示框颜色。*代表诸如success、info等有代表意义的颜色类

测试代码：

        <div class="alert alert-success">操作成功提示信息</div>
        <div class="alert alert-info">注意信息</div>
        <div class="alert alert-warning">警告信息</div>
        <div class="alert alert-danger">危险信息/失败信息</div>
        <div class="alert alert-primary">首选重要信息</div>
        <div cla