Bootstrap4的小例子----简单购物页面

原创 于 2019-10-21 10:45:02 发布 · 2.5k 阅读 · 11 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#Bootstrap4

直接上代码吧。

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <style>
        #tt{
            padding :5px;
        }
    
    </style>
</head>

<body>

    <div class="container-fluid bg-primary text-white" id="tt">
        <p class="text-center">商品列表(未登录) <span class="float-right">登录</span></p>
    </div>


    <div class="container">
        <div class="row">
            <div class="card col-6">
                <img class="card-img-top" src="yi1.jpg" alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">礼服</h4>
                    <a href="#" class="btn btn-primary">￥4000</a>
                </div>
            </div>


            <div class="card col-6">
                <img class="class=" card-img-top" src="yi2.jpeg" alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">礼服</h4>
                    <a href="#" class="btn btn-primary">￥4000</a>
                </div>
            </div>

            <div class="card col-6">
                <img class="card-img-top" src="yi3.jpeg" alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">礼服</h4>
                    <a href="#" class="btn btn-primary">￥4000</a>
                </div>
            </div>


            <div class="card col-6">
                <img class="card-img-top" src="yi4.jpeg" alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">礼服</h4>
                    <a href="#" class="btn btn-primary">￥4000</a>
                </div>
            </div>
        </div>
    </div>


    <nav class="fixed-bottom ">
        <div class="container " >
            <p class="text-center">
                  
                <span class="float-left">
                    <a href="#" class="text-danger">首页</a>
                </span>

                <a href="#" class="text-danger">购物车</a>

                <span class="float-right">
                    <a href="#" class="text-danger">我的订单</a>
                </span>
            </p>
        </div>
    </nav>


</body>

</html>

运行结果如下：

还有一点我没弄好的就是，怎么让两个图片之间留一点空隙，望知道的可以指导一下的。

 

后续对上面的页面做了微调：

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <style>
        #tt {
            padding: 5px;
        }
     
    </style>
</head>

<body>

    <div class="container-fluid bg-primary text-white" id="tt">
        <p class="text-center">商品列表(未登录) <span class="float-right">登录</span></p>
    </div>


    <div class="container">

        <div class="row">
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <img class="card-img-top" src="yi3.jpeg" alt="Card image" style="width:100%">
                        <h4 class="card-title">礼服</h4>
                        <a href="#" class="btn btn-primary">￥4000</a>
                    </div>
                </div>
            </div>


            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <img class="card-img-top" src="yi3.jpeg" alt="Card image" style="width:100%">
                        <h4 class="card-title">礼服</h4>
                        <a href="#" class="btn btn-primary">￥4000</a>
                    </div>
                </div>
            </div>
        </div>



        <div class="row">
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <img class="card-img-top" src="yi3.jpeg" alt="Card image" style="width:100%">
                        <h4 class="card-title">礼服</h4>
                        <a href="#" class="btn btn-primary">￥4000</a>
                    </div>
                </div>
            </div>


            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <img class="card-img-top" src="yi4.jpeg" alt="Card image" style="width:100%">
                        <h4 class="card-title">礼服</h4>
                        <a href="#" class="btn btn-primary">￥4000</a>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <img class="card-img-top" src="yi4.jpeg" alt="Card image" style="width:100%">
                        <h4 class="card-title">礼服</h4>
                        <a href="#" class="btn btn-primary">￥4000</a>
                    </div>
                </div>
            </div>


            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <img class="card-img-top" src="yi4.jpeg" alt="Card image" style="width:100%">
                        <h4 class="card-title">礼服</h4>
                        <a href="#" class="btn btn-primary">￥4000</a>
                    </div>
                </div>
            </div>
        </div>


    </div>



    <nav class="fixed-bottom ">
        <div class="container ">
            <p class="text-center">

                <span class="float-left">
                    <a href="#" class="text-danger">首页</a>
                </span>

                <a href="#" class="text-danger">购物车</a>

                <span class="float-right">
                    <a href="#" class="text-danger">我的订单</a>
                </span>
            </p>
        </div>
    </nav>


</body>

</html>

 

新运行结果：

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值