0
点赞
收藏
分享

微信扫一扫

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

践行数据分析 2022-09-23 阅读 188
javascriptbootstrap前端htmlcss虚拟化云计算


​​案例1：首页顶部​​

​​案例2：首页导航条组件​​

​​案例3：轮播图组件​​

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

案例1：首页顶部

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

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

 

<!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：首页导航条组件

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

<!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：轮播图组件

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

 

<!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：热卖商品【重点】

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

Javascript知识【BootStrap技术实现商品页面】_前端_06

 

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

 

<!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>


 

举报

相关推荐

Javascript知识【BootStrap】

javascriptbootstrap前端htmlcss

Javascript实现页面商品个数增减功能

文本框html5ejQuery前端开发yyds干货盘点

uniapp —— 实现左右联动商品分类页面

前端javascript

商品详情API接口的技术实现

API数据后端框架Python后端开发

编写商品列表和商品编辑和商品新增页面

udp网络协议网络

Bootstrap实战 - 单页面网站

bootstrapcss导航栏CSSjQueryHtml/CSS前端开发

Python实现post请求京东商品列表页面参数

开发者搜索数据接口Storm大数据

【Bootstrap 学习笔记】Bootstrap 提供相应插件在HTML页面中实现动态交互效果

开发语言Cc++

Bootstrap‘s JavaScript requires jQuery

javascriptbootstrapjqueryhtml虚拟化云计算

Bootstrap支持的JavaScript插件

H5饥人谷技术博客让前端飞前端开发笔记
0 条评论