接上一期的自主搭建的商城界面，bootstrap的模态框的使用

最新推荐文章于 2024-02-06 12:02:42 发布
最新推荐文章于 2024-02-06 12:02:42 发布
阅读量188 收藏 1
点赞数
分类专栏： WEB 文章标签： bootstrap html css java web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67150631/article/details/124619354
版权

哈喽，大家好，今天我给大家分享的是重点模态框的使用，当然啦，是嵌套在是商城界面的，用于增加商品，可按自己的需求改样式就好了！
在这里提供一个

目录

一，效果预览

主页
这里的样式大致为这样，详细的可私信博主
login
———————————————————————————————————
模态框
这个模态框是浮在主界面之上的

二，源代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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 src="images/p1.jpg" class="d-block">
                <div class="carousel-caption d-none d-md-block">
                    <h1>华美商城</h1>
                    <p>只有你想不到，没有你买不到</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/p2.jpg" class="d-block w-100">
                <div class="carousel-caption d-none d-md-block">
                    <h1>华美商城</h1>
                    <p>只有你想不到，没有你买不到</p>
                </div>
            </div>
            <div class="carousel-item">
                <img  src="images/p3.jpg" class="d-block w-100">
                <div class="carousel-caption d-none d-md-block">
                    <h1>华美商城</h1>
                    <p>只有你想不到，没有你买不到</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">
                    全部
                </a>
                <a href="#" class="list-group-item list-group-item-action">服装</a>
                <a href="#" class="list-group-item list-group-item-action">电器</a>
                <a href="#" class="list-group-item list-group-item-action">食品</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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">华美商城</h5>
                                <p class="card-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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                  <h5 class="card-title">华美商城</h5>
                                <p class="card-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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                  <h5 class="card-title">华美商城</h5>
                                <p class="card-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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                 <h5 class="card-title">华美商城</h5>
                                <p class="card-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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                 <h5 class="card-title">华美商城</h5>
                                <p class="card-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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                 <h5 class="card-title">华美商城</h5>
                                <p class="card-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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                  <h5 class="card-title">华美商城</h5>
                                <p class="card-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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                  <h5 class="card-title">华美商城</h5>
                                <p class="card-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="contact">
                    <div class="row">
                        <div class="card col-md-3 mb-2">
                            <img src="images/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                 <h5 class="card-title">华美商城</h5>
                                <p class="card-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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">华美商城</h5>
                                <p class="card-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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                  <h5 class="card-title">华美商城</h5>
                                <p class="card-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/p4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                 <h5 class="card-title">华美商城</h5>
                                <p class="card-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>
        </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">
    <div class="form-floating mb-3">
  <input type="text" class="form-control" id="floatingInput" placeholder="您的账号">
  <label for="floatingInput">账号</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">密码</label>
  <div class="d-grid gap-2 ">
  <button class="btn btn-primary" type="button">登录</button>
</div>
</div>
       
    </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">服装</option>
                            <option value="2">家电</option>
                            <option value="3">食品</option>
                        </select>
                   </div>
    <div class="mb-3">
        <label for="price" class="form-label">商品价格: $<span>500</span></label>
        <input type="range" value="500" min="1" max="1000" class="form-range" id="price">
    </div>
    <div class="mb-3">
        <label for="cover" class="form-label">商品数量</label>
        <input type="number" class="form-control" id="stock" placeholder="请输入商品的数量">
    </div>
    
    <div class="mb-3">
        <label for="cover" class="form-label">商品封面</label>
        <input type="file" class="form-control" id="cover" >
    </div>
    <div class="mb-3">
        <label for="describe" class="form-label">商品描述</label>
        <textarea class="form-control" id="describe" rows="3" placeholder="请输入商品的描述"></textarea>
    </div>
    <div class="form-check form-switch mb-3">
        <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-primary">增加</button>
        <button type="reset" class="btn btn-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()
    }
    
    $("#price").mousemove(function () {
        $(this) //标签自己
            .parent() //父元素
            .find("span") //找span
            .text($(this).val())
    })
</script>
</body>
</html>

小编写码不易，拿码还请留个赞！！！

赤诚&
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap 模态框实现刷新网页并关闭功能
08-31
主要介绍了BootStrap 模态框实现刷新网页并关闭的功能，实现方法简单易懂,需要的朋友可以参考下
Javascript知识【BootStrap技术实现商品页面】
若有所执，必有所成，心之所向，必显光芒
08-13 1270
案例1：首页顶部 案例2：首页导航条组件 案例3：轮播图组件 案例4：热卖商品【重点】
通过bootstrap4框架制作商城网页
m0_55366658的博客
05-28 3482
这是整个页面显示出来的效果 下面来解析: 最上面显示的是导航栏用到椭圆形头像，下拉列表，文本框，button里设置font-awesome图标，因为bootstrap4没有自带图标了，所以我们就用font awesome。Font Awesome 品牌图标 | 菜鸟教程 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" > <img src=...
bootstrap5实现的在线商城网站Parlo
m0_46013789的博客
01-03 564
在线商城网站是指通过互联网提供商品和服务的电子商务平台。它为商家和消费者提供了一个虚拟的市场，使得买卖双方可以在网上进行交易。
【前端素材】bootstrap4实现移动端电商APP页面 MobileShop（附源码）
最新发布
m0_46013789的博客
02-06 668
移动端电商网页是指为移动设备（如智能手机和平板电脑）优化设计的电子商务网页。它是在线商店的移动版本，旨在提供方便的购物体验和无缝的移动端操作。
bootstrap02（书城首页）
qq_67785529的博客
05-02 226
总案例：（导航条，搜索框，分类组，书籍展示） <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no
Bootstrap模态框使用详解
08-31
主要为大家详细介绍了Bootstrap模态框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap模态框（Modal）实现过渡效果
08-31
主要为大家详细介绍了Bootstrap模态框（Modal）实现过渡效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap3 模态框使用实例
08-31
主要介绍了Bootstrap3 模态框的使用实例,非常不错，具有参考借鉴价值，需要的朋友可以参考下
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
主要为大家详细介绍了bootstrap 模态框modal实现水平垂直居中显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap网上购物商城.zip
07-29
bootstrap网上购物商城，仿天猫商城界面
bootstrap实现的购物网站模板
01-07
bootstrap实现的购物网站模板，支持移动端pc端的自适应
电子商务网站前端页面（基于bootstrap框架）
05-28
电子商务前端页面，使用bootstrap前端框架。界面简洁，商品定位为书和CD。https://github.com/isixline/Book-CD
基于BootStrap实现商城首页
qq_44116526的博客
11-24 1488
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>书城首页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https
BootStrap实现商城首页
热门推荐
m0_37286282的博客
09-10 1万+
BootStrap作为一个JS框架，在web开发上带来的便捷实在太大了。如图 这是个特别方便的文档，可以下载离线，也可以在官网上直接用。 附上一个效果图及自己的代码： 效果图就是这样，有很多框架就是直接官网模板复制过来简单的修改一下，而且很美观。 Bootstrap 101 Template
通过BootStrap框架制作商城网页
kior的博客
07-25 9196
BootStrap框架 通过官网查询代码实现内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="style...
bootstrap实现商品主页面 代码
wh1132633619的博客
09-22 9172
Insert title here <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" ari
bootstrap实践写下电商网页
人生不迷茫的博客
08-09 3927
首先感谢B站大佬的慷慨授课！！！！！ 个人制作效果： 就下来记一下笔记巩固记忆； 1！引入bootsrap样式，用到网站bootcdn中文网. 用到的版本3.3.7，其他版本像4.0我不知道怎么回事引入后并没有效果. 有大佬知道怎么回事方便就@下小弟：感激不尽！ bootstrap样式可以下载保存本地也可直接采用外部链接使用， 在设计之前做好布局，导航栏以下部分是竖向排列3份，各...
基于bootstrap实现的在线商城前端整站源码，页面齐全
mazai5080的博客
04-04 4785
大家好，今天给大家介绍一款，基于bootstrap实现的在线商城前端整站源码，功能很齐全（图1）。送给大家哦，获取方式在本文末尾。 图1 商品列表页（图2） 图2 商品详情页（图3） 图3 分类导航菜单（图4） 图4 购物车（图5） 图5 图5 结算页（图6） 正在上传…重新上传取消 图6 账户管理（图7） 图7 地址管理（图8） 图8 订单管理（图9） 图9 部分源码（图10） <!doctype html>
bootstrap模态框
08-03
引用[1]、[2]和[3]提供了关于Bootstrap模态框的三个示例。Bootstrap模态框是一种常用的弹出窗口组件，用于在网页中...通过使用Bootstrap提供的CSS和JavaScript，我们可以轻松地创建和自定义模态框，以满足不同的需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值