jquery+bootstrap实现购物车增减数量价格变动效果代码-html代码-BFW代码库

jquery+bootstrap实现购物车增减数量价格变动效果代码

代码语言：html

所属分类：其他

代码描述：jquery+bootstrap实现购物车增减数量价格变动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
</head>

<style lang="scss">
    .shopping-car-container {
        padding: 50px 40px;
    }

        .shopping-car-container .car-headers-menu {
            border-bottom: 1px solid #f5f5f5;
            padding: 0 15px;
        }

        .shopping-car-container .panel-body {
            padding: 15px 0;
        }

    #checkAll {
        vertical-align: text-bottom;
    }

    .shopping-car-container .car-menu {
        text-align: center;
    }
    /*
         商品区
         * */

    .shopping-car-container .goods-content {
        margin-top: 15px;
    }

        .shopping-car-container .goods-content .goods-item {
            margin-top: 20px;
        }

            .shopping-car-container .goods-content .goods-item .car-goods-info {
                height: 150px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .shopping-car-container .goods-content .goods-item .goods-image-column img,
            .shopping-car-container .goods-content .goods-item .goods-image-column span {
                display: block;
                float: left;
            }

            .shopping-car-container .goods-content .goods-item .goods-image-column span {
                width: calc(100% - 100px);
                box-sizing: border-box;
                text-indent: 2rem;
                line-height: 25px;
                padding: 10px;
            }

    .goods-price {
        color: red;
        font-weight: bolder;
    }

    .form-control {
        text-align: center;
    }

    .single-total {
        color: red;
        font-weight: bold;
    }

    .goods-params {
        color: darkgray;
    }

    .bottom-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .bottom-menu #checkAllBottom {
            vertical-align: text-bottom;
        }

    #deleteMulty {
        color: cornflowerblue;
        cursor: pointer;
        vertical-align: text-bottom;
    }

    .bottom-menu-include {
        background: #e5e5e5;
    }

    #selectGoodsCount {
        color: orangered;
        font-size: 16px;
        font-weight: bolder;
    }

    #selectGoodsMoney {
        color: orangered;
        font-size: 16px;
        font-weight: bolder;
    }

    .panel-default .submitData {
        background: orangered;
        font-size: 16px;
        color: white;
        cursor: pointer;
        font-weight: bolder;
        height: 58px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .panel-default .submitDis {
        background: #B0B0B0;
        cursor: no-drop;
    }

    .shopping-car-container .panel-default {
        position: relative;
    }
</style>
<body>
    <div class="shopping-car-container">
        <div class="car-headers-menu">
            <div class="row">
                <div class="col-md-1 car-menu">
                    <label><input type="checkbox" id="check-goods-all" /><span id="checkAll">全选</span></label>
                </div>
                <div class="col-md-3 car-menu">商品信息</div>
                <div class="col-md-2 car-menu">商品参数</div>
                <div class="col-md-1 car-menu">单价</div>
              .........完整代码请登录后点击上方下载按钮下载查看