Javascript知识【BootStrap技术实现商品页面】

发布于：2023-01-19 ⋅ 阅读:(177) ⋅ 点赞:(0)

目录

  • 💂 个人主页: 爱吃豆的土豆
  • 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

  • 🏆人必有所执，方能有所成！

  • 🌈欢迎加入社区，福利多多哦！土豆社区

  • 🐋希望大家多多支持😘一起进步呀！

案例1：首页顶部

案例2：首页导航条组件

案例3：轮播图组件

案例4：热卖商品【重点】

案例1：首页顶部

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <img src="../img/logo2.png"/>
            </div>
            <div class="col-lg-4 visible-lg">
                <img src="../img/header.png"/>
            </div>
            <div class="col-lg-4">
                <ul class="list-inline" style="padding-top: 25px;">
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">购物车</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

案例2：首页导航条组件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <!-- 汉堡按钮 -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">首页</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <!--谁被选中，谁家active                        -->
                        <li class="active"><a href="#">手机数码<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">电脑办公</a></li>
                        <li><a href="#">电脑办公</a></li>
                        <li><a href="#">电脑办公</a></li>
                    </ul>
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
            </div>
        </nav>
    </div>
</body>
</html>

案例3：轮播图组件

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 多个轮播图id不能相同       -->
        <div id="czxy" class="carousel slide" data-ride="carousel" data-interval="2000">
            <!-- 小圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#czxy" data-slide-to="0" class="active"></li>
                <li data-target="#czxy" data-slide-to="1"></li>
                <li data-target="#czxy" data-slide-to="2"></li>
            </ol>

            <!-- 轮播图片，默认展示的图片加入active样式 -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="../img/1.jpg" alt="...">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img src="../img/2.jpg" alt="...">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img src="../img/3.jpg" alt="...">
                    <div class="carousel-caption">

                    </div>
                </div>
            </div>
            <!-- 左右按钮 -->
            <a class="left carousel-control" href="#czxy" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#czxy" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</body>
</html>

轮播图DIV的定时换图属性

data-interval=“毫秒值”

注意：多个轮播图必须修改轮播图的ID。 

案例4：热卖商品【重点】

 

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>热门商品<img src="../img/title2.jpg"/></h2>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2 visible-lg">
                <img src="../products/hao/big01.jpg" width="110%"/>
            </div>
            <div class="col-lg-10">
                <div class="row">
                    <div class="col-lg-6 hidden-xs hidden-sm">
                        <img src="../products/hao/middle01.jpg"/>
                    </div>
                    <div class="col-lg-2 col-xs-6">
                        <p align="center">
                            <img src="../products/hao/small03.jpg"/><br/>
                            电饭锅<br/>
                            <font color="#ff0b0b">￥299.0</font><br/>
                        </p>
                    </div>
                    <div class="col-lg-2 col-xs-6">
                        <p align="center">
                            <img src="../products/hao/small03.jpg"/><br/>
                            电饭锅<br/>
                            <font color="#ff0b0b">￥299.0</font><br/>
                        </p>
                    </div>
                    <div class="col-lg-2 col-xs-6">
                        <p align="center">
                            <img src="../products/hao/small03.jpg"/><br/>
                            电饭锅<br/>
                            <font color="#ff0b0b">￥299.0</font><br/>
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-2 col-xs-6">
                        <p align="center">
                            <img src="../products/hao/small03.jpg"/><br/>
                            电饭锅<br/>
                            <font color="#ff0b0b">￥299.0</font><br/>
                        </p>
                    </div>
                    <div class="col-lg-2 col-xs-6">
                        <p align="center">
                            <img src="../products/hao/small03.jpg"/><br/>
                            电饭锅<br/>
                            <font color="#ff0b0b">￥299.0</font><br/>
                        </p>
                    </div>
                    <div class="col-lg-2 col-xs-6">
                        <p align="center">
                            <img src="../products/hao/small03.jpg"/><br/>
                            电饭锅<br/>
                            <font color="#ff0b0b">￥299.0</font><br/>
                        </p>
                    </div>
                    <div class="col-lg-2 col-xs-6">
                        <p align="center">
                            <img src="../products/hao/small03.jpg"/><br/>
                            电饭锅<br/>
                            <font color="#ff0b0b">￥299.0</font><br/>
                        </p>
                    </div>
                    <div class="col-lg-2 col-xs-6">
                        <p align="center">
                            <img src="../products/hao/small03.jpg"/><br/>
                            电饭锅<br/>
                            <font color="#ff0b0b">￥299.0</font><br/>
                        </p>
                    </div>
                    <div class="col-lg-2 col-xs-6">
                        <p align="center">
                            <img src="../products/hao/small03.jpg"/><br/>
                            电饭锅<br/>
                            <font color="#ff0b0b">￥299.0</font><br/>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布