bootstrap4--模态框、提示框、弹出框、Flex布局、多媒体对象

张0x0

已于 2022-03-21 00:44:29 修改

阅读量3k

点赞数 1

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

于 2021-12-22 21:30:04 首次发布

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

版权

模态框

模态框是覆盖在父窗体上的子窗体，可以在不离开父窗体的情况下提供信息交互。一个简单的模态框制作步骤如下：

1.父窗体设置一个打开子窗体的媒介，一般是设置一个按钮用于打开子窗体。媒介设置data-toggle="modal" data-target="ID名"(这里的ID名与模态框整体ID名一致)

2.模态框第一层div元素设置.modal类(可以添加.fade类设置打开模态框渐显渐隐)，并设置ID名(与媒介呼应)

3.第二层div元素设置.modal-dialog类

4.第三层div元素设置.modal-content类

5.第四层div元素用于正式设置模态框主体内容，一般来说可以设置头部、主体、底部，三者分开设置

5-1.模态框头部添加.modal-header类。一般来说模态框头部除了添加标题，还会提供一个关闭标志‘X’。关闭功能实现添加.close类以及data-dismiss="modal"

5-2模态框主体添加.modal-body类

5-3模态框底部添加.modal-footer类。

一个基本模态框的设置如下(在这里我们将模态框底部设置为一个关闭按钮)：

    <div class="container">
        <!-- 打开模态框按钮 -->
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#mtk">
            打开模态框
        </button>
        <!-- 打开模态框 -->
        <div class="modal fade" id="mtk">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 设置模态框头部 -->
                    <div class="modal-header">
                        <h3>模态框头部</h3>
                        <!-- 关闭按钮 -->
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- 设置模态框主体 -->
                    <div class="modal-body">
                        模态框主体内容
                    </div>
                    <!-- 设置模态框底部 -->
                    <div class="modal-footer">
                        <!-- 底部关闭按钮 -->
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

模态框还可以调整大小，bootstrap提供两个类分别创建小模态框和大模态框。.modal-sm类用于创建小模态框，.modal-lg类用于创建大模态框，两个类添加在设置了.modal-dislog类的div中

提示框

提示框是一个小弹窗，鼠标移动到元素上显示，移开则消失，常用于设置在用户信息注册上。简单提示框的设置步骤如下：

1.HTML中元素添加data-toggle='tooltip'

2.jQuery中在指定的元素上调用tooltip()方法

默认情况下，空间足够的情况下提示框显示在元素上方，提示框显示位置也可以进行设置

●使用data-placement属性设置top/bottom/left/right分别表示上/下/左/右

基本提示框设置:

    <div>
        <!-- 默认设置显示 -->
        <a href="#" data-toggle="tooltip" title="提示框提示内容">鼠标移动显示提示框(默认)</a><br><br><br>
        <!-- 设置显示在上方 -->
        <a href="#" data-toggle="tooltip" data-placement="top" title="提示框提示内容">鼠标移动显示提示框(上)</a><br><br><br>
        <!-- 设置显示在下方 -->
        <a href="#" data-toggle="tooltip" data-placement="bottom" title="提示框提示内容">鼠标移动显示提示框(下)</a><br><br><br>
        <!-- 设置显示在左边 -->
        <a href="#" data-toggle="tooltip" data-placement="left" title="提示框提示内容">鼠标移动显示提示框(左)</a><br><br><br>
        <!-- 设置显示在右边 -->
        <a href="#" data-toggle=