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

最新推荐文章于 2024-06-17 09:42:04 发布
最新推荐文章于 2024-06-17 09:42:04 发布
阅读量2.3k 收藏 11
点赞数 4
分类专栏： BootStrap 文章标签： Bootstrap4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hello_cmy/article/details/102659358
版权

直接上代码吧。

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

 

新运行结果：

hello_cmy
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全网最全-谷粒商城项目-面试总结-简历优化
成功最快的秘诀: 抱团取暖 。
09-20 28万+
该系用采用SpringCloud架构，利用SpringBoot构建应用，利用Nacos作为服务的注册、配置中心，利用OpenFeign实现与其他模块进行交互，利用Sentinel实现熔断降级和错误处理，利用Gateway作为服务网关，利用RabbitMQ实现延迟队列，利用Redis作为缓存解决读多写少的场景，利用MySQL进行持久化，利用MyBatisPlus作为持久化框架。
Bootstrap-案例
qq_60478234的博客
04-03 1386
这次的内容主要是以Bootstrap案例来讲解。 案例1：实现搜索书籍页面 实现搜索书籍页面的效果及代码展示： 1.在Bootstrap中使用的组件：媒体对象-Media object 2.效果图： 3.代码： <div class="col-9"> <!-- 右9 --> <div class="media"> <img src="./img/img/1.png" class="mr-3" alt="..."&.
bootstrap实现的购物网站模板
01-07
bootstrap实现的购物网站模板，支持移动端pc端的自适应
bootstrap4 网格布局实例_网站设计师的10个糟糕网页设计实例和常见错误
weixin_42299150的博客
01-04 616
本文讨论了10个糟糕的网页设计示例和常见错误，以帮助网站设计人员更好地了解好的和坏的网页设计之间的区别。在我们开始之前，我有一个问题：设计网站时，你的首要任务是什么？是吸引人的外观？还是酷炫的效果？对于我来说，我喜欢优先考虑网站功能和用户体验。界面很重要，但是你网站的功能更重要。你应该以整洁和合乎逻辑的方式向用户提供你的想法或产品。特别是在建立品牌时，你需要让你的网站看起来值得信赖。但是你如何建立...
探索高效电子商务展示：Start Bootstrap - Shop Item 模板
最新发布
gitblog_00084的博客
06-17 374
探索高效电子商务展示：Start Bootstrap - Shop Item 模板 项目地址:https://gitcode.com/StartBootstrap/startbootstrap-shop-item 在数字化时代，一个吸引眼球的在线商品展示页面是成功销售的关键。今天，我们向您推荐一款专为电商设计的开源神器——Start Bootstrap - Shop Item，这是一款精简而功能强...
Bootstrap 4 Example
09-28
Bootstrap 英文入门教程，介绍Bootstrap 4的入门基础和使用。
Bootstrap 4 正式发布！带来新的示例和新的主题
前端大全
01-19 574
（点击上方公众号，可快速关注）来源：oschinahttp://www.oschina.net/news/92573/bootstrap-4-0-0-releasedlBootstrap 4.0.0 正式版现已发布，更新内容方面，相对于之前的测试版，正式版没有重大的改变，但做出了一些关键的改进，并解决了一些棘手的错误。新的示例几乎每个示例都经过稳定的 v4 版本的重大修改，其中删除了一些过时的示例
【CSS】Bootstrap 4 样例
SEVLT
06-08 299
效果预览：https://sevlt.github.io/bootstrap4-demo/index.html Html 代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" .
ecommerce-website-in-django-3-and-bootstrap-4
07-24
这些技术的结合，可以创建出用户友好、响应迅速且后端强大的在线购物平台。 **Django 3**: Django是一个高级的Python Web框架，它鼓励快速开发和实用主义设计。在Django 3中，我们可以利用其内置的ORM（对象关系...
大三数据库课程设计上，做的网上购物系统，SSM框架+bootstrap+ajax+页面设计.zip
10-07
这个项目就是一个典型的例子——“网上购物系统”，它使用了Spring、SpringMVC（统称为SSM框架）、Bootstrap、Ajax等技术。让我们详细探讨这些关键技术和它们在项目中的作用。 **Spring框架**：Spring是Java开发中...
Bootstrap部分案例
m0_61148761的博客
04-03 2807
主要用于组件：媒体对象-Media object代码如下效果如下主要用于页面内容：表格-Table代码如下效果如下主要用于组件：模态框-Modal代码如下效果如下：（点击结算弹出）扩展内容-图标代码如下效果如下折叠 滚动监听 下拉菜单 分页导航-面包屑导航 等等（需要留下印象）页面中引入库 ① bootstrap.min.css:Bootstrap核心样式【添加到head标签中】
bootstrap经典案例
10-27
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。
bootstrap4 中文用例demo
11-22
bootstrap4 最后一次预览版的中文demo，尚有一些功能不全，后期有空会放出bootstrap4 正式版的demo
购物车前端开发（jQuery和bootstrap3）
11-23
作为一名不在软件公司工作的软件工程师，不仅要会写后台代码(PHP/JAVA/SQL…)，还是兼顾前端工程师的工作(html/javascript/css…)。下面就来分享一个在实际工作项目中使用到的购物车的前端开发。 这里分享的仅仅是针对购物车的操作(产品数量的增加减少，删除购物车中产品项)，假设购物车中已经放有若干产品。闲话少说，先上两张效果图。 HTML代码如下：这里使用到了JQuery1.11和bootstrap3 。 &lt;!DOCTYPE html> &lt;html&gt; <HEADER> &lt;meta charset="UTF-8"&gt; &lt;title&gt;Shopping Cart&lt;/titl
bootstrap4实现购物商城
06-18
bootstrap4实现购物商城
Bootstrap(实现搜索书籍页面&&购物车页面以及订单)
m0_68332494的博客
05-04 3505
运用Bootstrap实现以下案例： 案例1：实现搜索书籍页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：实现搜索书籍页面</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/&
php+bootstrap+jquery+mysql实现购物车项目案例
老徐的博客只有干货
03-09 980
使用php,bootstrap,jquery,mysql实现的简易购物车案例。php 操作 mysql 实现增删改查掌握 php 常用数组函数掌握 php $_session 对象使用掌握 php 基本的面向对象编程知识掌握 bootstrap 基本的布局和样式组件使用。
购物车界面（Bootstrap）
user_app的博客
05-30 9526
分析： 1、网络购物车是一个虚拟的购物车，但是要实现像真实购物一样的大概流程， 添加商品，丢掉商品，结算价钱等等 1、 因为只有用户确定购买的商品才是有效的，并且选择不同的商品要浏览不同的页面，所以需要长久保存数据，但是还不能把所有的选过的商品都添加到数据库中，这样如果客户不要该商品时还需要在数据库中删除增加了服务器的压力，所以要筛选到只有客户最终确定的商品才添加到数据...
bootstrap实现的购物车(可自动适应电脑，平板，手机三端)
阿航的博客
07-10 2702
最近想做一个购物车，看了很多帖子和博客，发现大部分购物车要么无法适应手机端，要么缺乏一些功能，或者做的不够美观(当然我这个也一般般: ) ),于是自己结合网上的代码加以修改完善了一下。 效果图： 电脑端: ipad端： 这里将金额隐藏了。 手机端: 以下是文件结构: 图片： goods1.jpg goods2.jpg mark.png mark1.png mark2.png bootstrap和jquery源码可官网上自行下载，这里就不贴出来了 bootstrap: jquery 废话
一键修复ORACLE Bootstrap故障：ORA-702 Recovery软件详解
此软件旨在通过一键操作帮助用户解决Bootstrap$故障，确保在处理过程中数据丢失的风险降至最低。它支持.NET Framework的不同版本，如ORA-702_Recovery.Net2.exe适用于2.0、3.0和3.5版本的.NET框架，即适用于Oracle...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值