Bootstrap-3

最新推荐文章于 2022-07-07 10:53:15 发布
最新推荐文章于 2022-07-07 10:53:15 发布
阅读量184 收藏
点赞数
分类专栏： Bootstrap 文章标签： bootstrap html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Javajsjsh/article/details/124733632
版权

目录

前言：

一，效果图：

菜单栏和分类的优化：

导航栏的优化：

二，代码详情：

insert.html：

index.html:

总结：

一，效果图：
菜单栏和分类的优化：

导航栏的优化：
新增了我的功能，可以实现登录和购物车界面的弹出


增加界面由新的界面变成了主界面弹出： 

二，代码详情：


insert.html：
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>Title</title>
    <!-- Jquery JS -->
    <script src="../js/jquery-3.3.1.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../bootstrap-5.0.0-beta3-dist/css/bootstrap.css" rel="stylesheet">
    <!-- Bootstrap JS -->
    <script src="../bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
</head>
<body class="container">
<form action="">
    <div class="mb-3">
        <label for="name" class="form-label">商品名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入商品名称">
    </div>
    <div class="mb-3">
        <label for="topic" class="form-label">商品名称</label>
        <select id="topic" class="form-select">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="price" class="form-label">商品价格:￥<span id="showPrice">123</span></label>
        <input type="range" class="form-range" id="price" max="1000" min="1">
    </div>
    <div class="mb-3">
        <label for="stock" class="form-label">商品库存: <span id="showStock">123</span></label>
        <input type="range" class="form-range" id="stock" max="100" min="1">
    </div>
    <div class="mb-3">
        <label for="describe" class="form-label">商品描述</label>
        <textarea rows="3" class="form-control" id="describe" placeholder="请输入商品描述"></textarea>
    </div>
    <div class="mb-3 form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="disabled">
        <label class="form-check-label" for="disabled">商品是否可用</label>
    </div>
    <div class="mb-3">
        <button type="submit" class="btn btn-outline-primary">提交</button>
        <button type="reset" class="btn btn-outline-danger">重置</button>
    </div>
</form>
</body>
</html>
index.html:
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- Jquery JS -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- Bootstrap CSS -->
    <link href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css" rel="stylesheet">
    <!-- Bootstrap JS -->
    <script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
    <style>
        .carousel-item img {
            width: 100%;
            height: 350px;
            background: no-repeat center / cover;
        }
 
        .carousel-caption {
            color: white !important;
        }
 
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
    <div class="container-fluid">
        <a class="navbar-brand" href="index.html">
            快乐奶茶
        </a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <button class="nav-link btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                        商品添加
                    </button>
                </li>
                <li class="nav-item dropdown">
                    <button class="nav-link dropdown-toggle btn btn-primary" id="navbarDropdown"
                            data-bs-toggle="dropdown">
                        我的
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" data-bs-toggle="offcanvas" href="#loginCanvas">登录</a></li>
                        <li><a class="dropdown-item" data-bs-toggle="offcanvas" href="#carCanvas">购物车</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>
<div class="container">
    <div id="goodsCarousel" class="carousel carousel-dark slide mb-5" data-bs-ride="carousel" data-bs-interval="2000">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#goodsCarousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#goodsCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#goodsCarousel" data-bs-slide-to="2"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block">
                <div class="carousel-caption d-none d-md-block">
                    <h1>欲购从速</h1>
                    <p>Some representative placeholder content for the third slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100">
                <div class="carousel-caption d-none d-md-block">
                    <h1>欲购从速</h1>
                    <p>Some representative placeholder content for the third slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100">
                <div class="carousel-caption d-none d-md-block">
                    <h1>欲购从速</h1>
                    <p>Some representative placeholder content for the third slide.</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#goodsCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#goodsCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <div class="row">
        <div class="col-md-2">
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action active">
                    The current link item
                </a>
                <a href="#" class="list-group-item list-group-item-action">A second link item</a>
                <a href="#" class="list-group-item list-group-item-action">A third link item</a>
                <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
            </div>
        </div>
        <div class="row col-md-10">
            <ul class="nav nav-tabs mb-3" id="myTab">
                <li class="nav-item">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                            type="button">秒杀商品
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
                            type="button">热销商品
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
                            type="button">月度榜单
                    </button>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home">
                    <div class="row">
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#staticBackdrop">🔍
                                    </button>
                                    <button type="button" class="btn btn-danger" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="添加购物车">🛒
                                    </button>
                                    <button type="button" class="btn btn-warning" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="不喜欢该商品">🙅‍
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#staticBackdrop">🔍
                                    </button>
                                    <button type="button" class="btn btn-danger" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="添加购物车">🛒
                                    </button>
                                    <button type="button" class="btn btn-warning" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="不喜欢该商品">🙅‍
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#staticBackdrop">🔍
                                    </button>
                                    <button type="button" class="btn btn-danger" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="添加购物车">🛒
                                    </button>
                                    <button type="button" class="btn btn-warning" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="不喜欢该商品">🙅‍
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#staticBackdrop">🔍
                                    </button>
                                    <button type="button" class="btn btn-danger" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="添加购物车">🛒
                                    </button>
                                    <button type="button" class="btn btn-warning" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="不喜欢该商品">🙅‍
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="profile">
                    <div class="row">
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary">🔍</button>
                                    <button type="button" class="btn btn-danger">🛒</button>
                                    <button type="button" class="btn btn-warning">🙅‍</button>
                                </div>
                            </div>
                        </div>
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary">🔍</button>
                                    <button type="button" class="btn btn-danger">🛒</button>
                                    <button type="button" class="btn btn-warning">🙅‍</button>
                                </div>
                            </div>
                        </div>
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary">🔍</button>
                                    <button type="button" class="btn btn-danger">🛒</button>
                                    <button type="button" class="btn btn-warning">🙅‍</button>
                                </div>
                            </div>
                        </div>
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary">🔍</button>
                                    <button type="button" class="btn btn-danger">🛒</button>
                                    <button type="button" class="btn btn-warning">🙅‍</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="contact">
                    <div class="row">
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary">🔍</button>
                                    <button type="button" class="btn btn-danger">🛒</button>
                                    <button type="button" class="btn btn-warning">🙅‍</button>
                                </div>
                            </div>
                        </div>
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary">🔍</button>
                                    <button type="button" class="btn btn-danger">🛒</button>
                                    <button type="button" class="btn btn-warning">🙅‍</button>
                                </div>
                            </div>
                        </div>
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary">🔍</button>
                                    <button type="button" class="btn btn-danger">🛒</button>
                                    <button type="button" class="btn btn-warning">🙅‍</button>
                                </div>
                            </div>
                        </div>
                        <div class="card col-md-3 mb-2">
                            <img src="images/default.jpeg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">果冻奶茶</h5>
                                <p class="card-text">Some quick example text</p>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-primary">🔍</button>
                                    <button type="button" class="btn btn-danger">🛒</button>
                                    <button type="button" class="btn btn-warning">🙅‍</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="loginCanvas">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">用户登录</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <h1>这里是登录表单</h1>
    </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="carCanvas">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">我的购物车</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <h1>这里是购物车</h1>
    </div>
</div>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">添加购物车</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addCar()">添加</button>
            </div>
        </div>
    </div>
</div>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">天天商城</strong>
            <small>刚刚</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            添加购物车成功
        </div>
    </div>
</div>
<div id="exampleModal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加商品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="">
                    <div class="mb-3">
                        <label for="name" class="form-label">商品名称</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入商品名称">
                    </div>
                    <div class="mb-3">
                        <label for="topic" class="form-label">商品名称</label>
                        <select id="topic" class="form-select">
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="price" class="form-label">商品价格:￥<span id="showPrice">123</span></label>
                        <input type="range" class="form-range" id="price" max="1000" min="1">
                    </div>
                    <div class="mb-3">
                        <label for="stock" class="form-label">商品库存: <span id="showStock">123</span></label>
                        <input type="range" class="form-range" id="stock" max="100" min="1">
                    </div>
                    <div class="mb-3">
                        <label for="describe" class="form-label">商品描述</label>
                        <textarea rows="3" class="form-control" id="describe" placeholder="请输入商品描述"></textarea>
                    </div>
                    <div class="mb-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="disabled">
                        <label class="form-check-label" for="disabled">商品是否可用</label>
                    </div>
                    <div class="mb-3">
                        <button type="submit" class="btn btn-outline-primary">提交</button>
                        <button type="reset" class="btn btn-outline-danger">重置</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">添加</button>
            </div>
        </div>
    </div>
</div>
<script>
 
    const myModal = new bootstrap.Modal($("#staticBackdrop")[0])
 
    $(() => {
        $(".carousel-item img").each((i, e) => {
            $(e).css("background-image", "url(images/t" + (i + 1) + ".jpg)")
        })
    })
 
    function addCar() {
        myModal.toggle()
        new bootstrap.Toast($("#liveToast")[0]).show()
    }
</script>
</body>
</html>

一个没学懂Java的YT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap03之主页优化
m0_64043477的博客
05-06 457
Bootstrap03.主页优化
选项卡
化学纤维
05-28 736
选项卡 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Visual Studio 2015、Tab选项卡 作者： 梁柏源 撰写时间：2019/5/27 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
bootstrap风格提示框直接可用toast
02-09
在chorme下测试通过，可以运行html直接看效果（这里还不支持贴图。。。。。）
Bootstrap5 + js 上传文件操作流程 Model-Toasts综合运用
土味儿
07-07 1668
1、点击添加图片：弹出模态框（上传图片界面） 2、选择图片文件：会在前后端验证文件类型 3、点击上传按钮：关闭模态框、ajax执行上传操作、接收操作结果 4、弹出Toast信息栏：展示操作结果 ...
Bootstrap3 Toast的Bootoast消息框插件使用
mcband的博客
06-26 1132
消息框
bootstrap之data-dismiss作用
kinitor的博客
10-16 5907
data-dismiss是bootstrap里自定义的属性，给一个元素data-dimiss属性的话，可以通过点击该元素达到让目标消失的效果。 例如：当点击按钮时，直接关闭外层alert × Warning! Better check yourself, you're not looking too good. 这里是引用htt...
Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍
alex_zoucn的博客
04-17 1168
轻量级 Toast 弹窗 DEMO https://www.blazor.zone/toasts 基础用法: 用户操作时，右下角给予适当的提示信息 <ToastBox class="d-block" Options="@Options1" /> @code{ Options1 = new ToastOption { Title = "保存数据", IsAutoHide = false, Content = "保存数据成功，4 秒后自动关闭" }; } Toast 手动关闭: 不会自
Bootstrap3 Toast消息框插件
12-11
Bootoast是一款Bootstrap3 Toast消息框插件。通过Bootoast插件你可以非常方便的制作Toast消息框效果，并且插件提供了各种参数来控制Toast消息框。
Bootstrap系列之轻量弹框（Toasts）
老__L的博客
06-19 4335
当使用toast插件时要知道的事情如果您从源代码构建我们的JavaScript，它需要util.js。出于性能原因，toast是可选择的，所以您必须自己初始化它们。请注意，你负责定位toast。如果没有指定，toast将自动隐藏。该组件的动画效果依赖于preferred -reduced-motion media查询。
Bootstrap 发布十周年，Bootstrap 5都有什么新功能？
前端全栈开发者
08-25 3849
近日，知名前端工具包 Bootstrap 官博宣布十周年，其创始人 Mark Otto 回顾了这十年里取得的一些成就与里程碑数据： 文档浏览量超过 25 亿次，每天超过 685,000 次； 自 2015 年以来，npm 下载量为3.94 亿，仅 2020 年就有超过 1.31 亿次下载。在过去的六年中，每天有 180,000 次。 5000 万次 RubyGems 下载 5700 万次 NuGet 下载 750 万次 Packagist 安装 被超过 22% 的网站使用 被 GitHub 上的 270
响应式模糊透明背景Bootstrap3前端应用模板
03-07
响应式模糊透明背景Bootstrap3前端应用模板，非常精美！
bootstrap-toast 的消息提示toast
12-03
bootstrap-toast 的消息提示toastbootstrap-toast 的消息提示toastbootstrap-toast 的消息提示toastbootstrap-toast 的消息提示toastbootstrap-toast 的消息提示toastbootstrap-toast 的消息提示toast
swagger-bootstrap-ui-1.9.6-API文档-中文版.zip
07-13
赠送jar包：swagger-bootstrap-ui-1.9.6.jar； 赠送原API文档：swagger-bootstrap-ui-1.9.6-javadoc.jar； 赠送源代码：swagger-bootstrap-ui-1.9.6-sources.jar； 赠送Maven依赖信息文件：swagger-bootstrap-ui-...
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
bootstrap最新版资源下载不易。
bootstrap-4.6.2
最新发布
06-13
bootstrap4下载
bootstrap-select-1.13.14
06-05
bootstrap-select-1.13.14
Java bootstrap-3.4.1-dist 前端框架
03-18
Java bootstrap-3.4.1-dist 前端框架
去除BootStrap模态框背景变暗效果
wj_slh的博客
06-18 1233
BOOTSTRAP 模态框（MODAL）插件 BootStrap 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，父窗体所有操作都会屏蔽 可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 bootstrap的模糊框效果都是如下所示的： 在打开模态框时 原来页面追加了一个div 解决方案 1 手动去掉遮罩层 $('.modal-backdrop').remove();//去掉遮罩层 2 修改CSS .modal-backdrop 属性 Boots
CSS day_12(6.27) Boot常用组件
m0_70328115的博客
06-28 677
Boot常用组件（导航条、下拉菜单、模态框、轮播图）
sudo keystone-manage bootstrap --bootstrap-password cqu2022\ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne
06-12
- `--bootstrap-admin-url`：用于设置管理员API终端的URL。 - `--bootstrap-internal-url`：用于设置内部API终端的URL。 - `--bootstrap-public-url`：用于设置公共API终端的URL。 - `--bootstrap-region-id`：用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值