bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

苦海123

已于 2024-03-19 22:57:04 修改

阅读量577

点赞数 1

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

于 2021-05-17 21:13:43 首次发布

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

版权

Bootstrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

轮播图：

bootstrap封装了轮播图的功能，其具体如下：

类名	描述
.carousel	创建一个轮播图块的容器，实质是做布局用；且此容器应该有一个di属性，其属性值提供给下面左右按钮href锚点值，用于左右按钮控制图片切换
.data-ride=“carousel”	页面刷新实现轮播图自动滑动等功能，其他点击功能正常
.carousel-inner	定义装所有图片的大容器，实质是对此容器进行定位布局等
.carousel-item	定义装每张图片的小容器，对每张小图片进行布局等
.active	定义当前要显示的carousel-item容器和 carousel-indicators指示器
.carousel-control-prev	定义控制左边（上一张）图片按钮的布局
data-slide=“prev”	实现控制上一张图片按钮的功能
.carousel-control-next	定义控制右边（下一张）图片按钮的布局
data-slide=“next”	实现控制下一张图片按钮的功能
.carousel-control-prev-icon	定义切换上一张图片的按钮本身
carousel-control-next-icon	定义切换下一张图片的按钮本身
.carousel-indicators	定义指示器的容器，实质是对指示器进行布局与样式修改
.data-target	定义指示器中每个项控制的轮播图容器，其后面锚点值为最外面轮播图容器di值
data-slide-to=“index”	实现指示器中每项控制具体图片的功能，index指图片的索引

<div id="carouselBox" class="carousel" data-ride="carousel">
    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <a href="#"><img src="1.PNG"></a>
        </div>
        <div class="carousel-item">
            <a href="#"><img src="2.PNG"></a>
        </div>
        <div class="carousel-item">
            <a href="#"><img src="3.PNG"></a>
        </div>
    </div>
    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#carouselBox" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#carouselBox" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
    <!-- 指示器 -->
    <ul class="carousel-indicators">
        <li data-target="#carouselBox" data-slide-to="0" class="active"></li>
        <li data-target="#carouselBox" data-slide-to="1"></li>
        <li data-target="#carouselBox" data-slide-to="2"></li>
    </ul>
</div>

模态框：

bootstrap对模态框进行了封装，具体如下：

类名	描述
data-toggle=“modal”	给按钮定义一个打开模态框的功能
data-target=“selector”	给按钮绑定模态框，选择器指向要控制的模态框
.modal	用于定义一个模态框容器，此容器给id或者class名用于data-target=“selector”
.fade	布局模态框时用，用于show选择，不加此类，模态框看不见
.modal-dialog	用于定义装模态框内容容器的容器，起到布局的作用
modal-content	模态框内容容器，实质用于布局
. modal-header、. modal-body、. modal-footer	此三个类样式都是在modal-content中定义容器的，其依次表示头部、身体、脚步，它们都其布局作用
.modal-title	定义模态框内容中的标题，实质没太大作用
. close	用于布局头部退出标识
data-dismiss=“modal”	控制模态框退出的功能
.modal-S	设置模态框的大小,给 modal-dialog容器，S的值有sm和lg

<!-- 1.按钮：用于触发一个模态框弹出 -->
<button data-toggle="modal" data-target="#modalBox">模态框</button>
<!-- 2.模态框 -->
<div class="modal fade" id="modalBox">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">头部title</h4>
                <button class="close" data-dismiss="modal">X</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                主体body
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

提示框/弹出框：

标签中title属性设置提示信息，但是原生的不够美观，bootstrap封装了提示框，（弹出框在调用是使用popover()方法即可，其他都是一样的），其具体如下：

类名	描述
title=‘内容’	定义提示内容文本
data-toggle=“tooltip”	定义一个提示框，这里主要是功能，实质是禁用了原有的提示框；此属性的值还有 popover等
element.tooltip()	tooltip()方法用来在js脚本调用提示框功能，element为被调用者（有title的标签）;element.popover()为弹出框，此时对应的toggle属性值也应当设置为 popover
data-placement=“P”	用于规定提示框显示的位置，其值有top、bottom、left、right,此属性给有title属性的标签加
data-html=“true”	允许提示框中以标签的形式存在，且会被解析
data-trigger=“focus”	设置弹框在弹出的情况下，点击页面其他部分时关闭弹框
data-trigger=“hover”	设置hover切换效果
data-content=“附加内容”	用于设置附加的内容，也是会显示的

<!-- 1.创建一个提示框： -->
<a href="#" id="titlea" data-toggle="tooltip" data-placement="bottom" title="<span class='bg-success'>提示信息！</span>">显示提示框</a>
<script>
    // 2.在js脚本中调用此方法：
    $('#titlea').tooltip();提示框
  	//$('#titlea').popover();//弹框
</script>

滚动监听：

滚动监听主要用到Scrollspy插件，它会根据页面滚动的位置自动更新导航栏的导航位置，其具体如下：

类名	描述
data-spy=“scroll”	此属性是向body标签中添加的，用来监听页面滚动
data-target=“.navbar”	此属性是将body滚动位置与导航栏关联，后面选择器为导航栏id值或class值
导航中href属性	此属性的属性值为下面内容区中的锚点值
data-offset	设置滚动时距离顶部偏移的像素

<!-- 页面滚动监听+导航栏 -->
<body data-spy="scroll" data-target=".navbar" data-offset="10">
    <!-- 导航区： -->
    <nav class="navbar navbar-expand-sm bg-info navbar-dark fixed-top">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#content1">区块一</a></li>
            <li class="nav-item"><a class="nav-link" href="#content2">区块二</a></li>
            <li class="nav-item"><a class="nav-link" href="#content3">区块三</a></li>
            <!-- 下拉菜单型导航： -->
            <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">区块四</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#content4-1">区块四-1</a>
                    <a class="dropdown-item" href="#content4-2">区块四-2</a>
                </div>
            </li>
        </ul>
    </nav>
    <!-- 内容区： -->
    <div id="content1" style="padding-top:200px;padding-bottom:800px">content1</div>
    <div id="content2" style="padding-top:200px;padding-bottom:800px">content2</div>
    <div id="content3" style="padding-top:200px;padding-bottom:800px">content3</div>
    <div id="content4-1" style="padding-top:200px;padding-bottom:800px">content4-1</div>
    <div id="content4-2" style="padding-top:200px;padding-bottom:800px">content4-2</div>
</body>

弹性布局：

bootstrap提供了弹性布局的类样式，如下：

类名	描述
.d-flex	创建一个弹性容器
.d-inline-flex	创建在同一行显示的弹性容器
.flex-row	设置弹性子元素水平显示，默认值
.flex-row-reverse	设置右对齐显示并翻转子元素排列顺序
.flex-column	设置弹性子元素垂直显示
.flex-column-reverse	设置子元素垂直且翻转显示
.justify-content-F	设置子元素排列方式，F的值有： start (默认靠左排列), end靠右, center居中, between ， around
.flex-fill	强制设置子元素宽度相等
flex-grow-1	使子元素使用剩下的空间
.order-i	对子元素进项排序，i的值为1-12，数字越小权重越高
.mr-auto	设置元素右外边距为auto
.ml-auto	设置元素左外边距为auto
.flex-nowrap	允许子元素换行且按顺序排列
.flex-wrap-reverse	允许子元素换行且翻转排列
.flex-nowrap	不允许子元素换行排列，按顺序排列
.align-content-F	控制在垂直方向子元素的排列，F的值有：start (默认靠左排列), end靠右, center居中, stretch ， around
.align-items-F	设置单行的子元素对齐方式，其中F的值有：start, end靠右, center居中, stretch(默认值) ， baseline

<div class="d-flex flex-column-reverse">
    <div class="bg-success">1</div>
    <div class="bg-warning">12</div>
    <div class="bg-primary">123</div>
</div>

<div class="d-flex flex-column-reverse">
    <div class="bg-success">1</div>
    <div class="bg-warning">12</div>
    <div class="bg-primary">123</div>
</div>

响应式flex类总结：
在这里插入图片描述

多媒体对象：

bootstrap提供了处理图片、视频和网页的布局类（常用于评论等），如下：

类名	描述
.media	用于定义一个多媒体的容器
.media-body	用于定义多媒体的身体部分，在此类后面添加图片，图片会考右显示；当在此类前面添加图片时，图片将在左边显示
.align-self-P	定义图片(视频)显示位置，P的值与 start、center、end

<div class="media">
    <img src="1.png" width='50px' class="align-self-start">
    <div class="media-body">
        <p>博主</p>
        <div class="media">
            <img src="2.png" width='50px' class="align-self-center">
            <div class="media-body">
                <p>博客1</p>
            </div>
        </div>
        <div class="media">
            <img src="1.png" width='50px' class="align-self-end">
            <div class="media-body">
                <p>博客2</p>
            </div>
        </div>
    </div>
</div>

小工具：

bootstrap中提封装了一些样式，使用时只需要添加类名即可，如：

类名	描述
.border-0	去掉所有的边框
.border-P-0	去掉指定的位置的边框，P的值有：top、bottom、left、right
…border-C	设置边框的颜色，C的值有：primary、 secondary、 success、 danger、 warning、 info、 light、 dark、 white
.border	设置边框
.rounded	设置圆角
.rounded-P	设置不同方向的圆角，P的值有：rounded-top、 rounded-right、 rounded-bottom、 rounded-left、 rounded-circle（圆）、 rounded-0去掉圆角
.mx-auto	设置居中对齐
.w-N	设置宽度百分比，其中N的值有：25、50、 75、 100；（ mw-100表示最大值为100）
.h-N	设置高度百分比，其中N的值有：25、50、 75、 100；（ mh-100表示最大值为100）
.p-n	表示内边距，n的值是1-5

MUI：

MUI也是一款UI框架,是最接近原生app体验的高性能框架，移动端开发还是比较推荐的，如果需要了解，请阅读官方文档：https://dev.dcloud.net.cn/mui/

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

苦海123

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

轮播图：bootstrap封装了轮播图的功能，其具体如下：类名描述.carousel创建一个轮播图块的容器，实质是做布局用；且此容器应该有一个di属性，其属性值提供给下面左右按钮href锚点值，用于左右按钮控制图片切换.data-ride=“carousel”页面刷新实现轮播图自动滑动等功能，其他点击功能正常.carousel-inner定义装所有图片的大容器，实质是对此容器进行定位布局等.carousel-item定义装每张图片的小容器，对每张小图片进行布
复制链接

扫一扫