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

    目录

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

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

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

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

    案例1：首页顶部

    案例2：首页导航条组件

    案例3：轮播图组件

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

    案例1：首页顶部

     

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

    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 Templatetitle>
        <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 navigationspan>
                            <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">
                            
                            <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">Submitbutton>
                        form>
                    div>
                div>
            nav>
        div>
    body>
    html>

    案例3：轮播图组件

     

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

                
                <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">Previousspan>
                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">Nextspan>
                a>
            div>
        div>
    body>
    html>

    轮播图DIV的定时换图属性

    data-interval=“毫秒值”

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

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

     

     

    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 Templatetitle>
        <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.0font><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.0font><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.0font><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.0font><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.0font><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.0font><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.0font><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.0font><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.0font><br/>
                            p>
                        div>
                    div>
                div>
            div>
        div>
    body>
    html>

     

  • 相关阅读:
    校园二手服务平台
    洛谷P2065 [TJOI2011] 卡片
    为什么不建议使用自定义Object作为HashMap的key？
    Intel System Flags and Fields in the EFLAGS Register
    阿里二面：SpringCloud 有几种服务调用方式？
    LRU和FIFO页面置换算法模拟实战
    K8S Calico网络插件
    知识点16：big.LITTLE 和 dynamIQ架构的cache
    JVM的内存区域划分
    后端面经学习自测（一）
  • 原文地址：https://blog.csdn.net/m0_64550837/article/details/126322401