BootStrap实现网上商城首页的排版布局，可匹配不同尺寸的PC，平板，手机。

最新推荐文章于 2024-02-06 12:02:42 发布
最新推荐文章于 2024-02-06 12:02:42 发布
阅读量1.5k 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanzizhen0/article/details/78748732
版权
本文介绍了如何使用BootStrap框架，实现网上商城首页的响应式排版，确保在PC、平板和手机等不同设备上都能自适应显示，提供良好的用户体验。
摘要由CSDN通过智能技术生成
<!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">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>商城首页</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery-1.11.3.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

    </head>

    <body>
        <!--logo部分
      -->
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <img src="img/logo2.png" />
                </div>
                <div class="col-lg-5 col-md-4 col-sm-6 hidden-xs">
                    <img src="img/header.png" />
                </div>
                <div class="col-lg-3 col-md-4 col-sm-12" style="padding-top: 15px;">
                    <a href="#">登陆</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
        </div>

        <!--导航栏-->
        <div class="container">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <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>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li>
                                <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>
                            <li>
                                <a href="#">孕婴保健</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">所有分类<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">手机数码</a>
                                    </li>
                                    <
最低0.47元/天 解锁文章
yuanzizhen0
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
09-02
这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果，优化用户体验。Bootstrap栅格系统的核心原理是通过预定义的CSS类来控制元素的宽度和排列方式，使得在不同分辨率的设备上，元素可以自动...
【Bootstrap】一个PC、平板、手机同时使用而且美观的登陆页面
编程记录，亲测有效
10-20 9076
Bootstrap如同前台框架，它已经布置好不少的CSS，前端开发的使用需要则直接调用即可。其网站的网址就是http://www.bootcss.com。使用Bootstrap能减少前端开发时候在CSS样子的布置时间 需要使用Bootstrap先在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接），Bootstrap3对2并不兼容，建议直接根据其开发文档使用B
bootstrap响应式兼容PC和移动端图片无缝滚动效果demo
CodingNoob
09-15 6085
效果如图所示： js代码部分：/** * Created by Administrator on 2017/9/15. */(function(){ var firstDom = $("#zzScroll .item:last"); var scrollWidth = $("#zzScroll .item").innerWidth()+1; var scrollObj
【阿里百秀】一个简单的 bootstrap 响应式布局例子 兼容电脑、平板和手机
代码笔记
05-18 1066
【阿里百秀】一个简单bootstrap例子 兼容电脑、平板和手机
web前端：bootstrap栅格系统：自适应多屏幕布局，手机设备、ipad、PC三端合一
cevent的博客
01-19 1870
1.先看效果图 2.less自定义样式 *{ margin: 0; padding: 0; a{ display: block; text-align: center; color: gray; &:visited{ text-decoration: none !important; } &:focus{ text-d
bootstrap第二章：bootstrap布局
qq_62244121的博客
10-17 4080
bootstrap布局详细介绍，附有网格列偏移和网格列嵌套
bootstrap4实现购物商城
06-18
在购物商城的页面设计中，我们可以利用这一特性来布局商品展示区域，使得商品信息在桌面、平板和手机上都能保持良好的可读性和用户体验。例如，潮流穿搭.html可能就是一个展示商品分类或热门商品的页面，通过...
bootstrap-table实现新建商品规格表及子表
gba3455的博客
12-02 1750
公司有个针对手机维修等维修类项目的需求： 在新建商品时，创建一个表格，表格内可动态创建各项目，各项目又可动态创建各个子项目，如图： 该功能全程使用bootstrap-table组件实现， 遇到几个问题记录一下： 创建子表时OnExpandRow事件中的参数$detail无法传值 onExpandRow: function(index, row, $detail) { // addSub(row, index, $detail); oTableInit
通过bootstrap4框架制作商城网页
m0_55366658的博客
05-28 3597
这是整个页面显示出来的效果 下面来解析: 最上面显示的是导航栏用到椭圆形头像，下拉列表，文本框，button里设置font-awesome图标，因为bootstrap4没有自带图标了，所以我们就用font awesome。Font Awesome 品牌图标 | 菜鸟教程 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" > <img src=...
bootstrap网上购物商城.zip
07-29
bootstrap网上购物商城，仿天猫商城界面
基于bootstrap设计的手机商城
01-29
基于bootstrap设计的手机商城，比较轻量级，前端各功能的页面齐全，加入后端接口调用，本人转载来的优质资源，可以直接用~~
仿小米商城html网页源码
03-31
仿小米商城html网页源码，包括主页和详情页、购物页面，等等。内容非常丰富，适宜做学习商城网站前端页面参考，源码很棒，建议下载。
基于bootstrap的移动web商城前端UI
07-06
这是移动web开发技术的课程设计源码，使用HTML+JavaScript+CSS完成移动商城的系列前端UI。基于bootstrap实现响应式网页。因为服务器不是我的，所以页面请求的服务器数据不保证时效性哦。
Bootstrap——flex布局（定义弹性盒子、排列方向、内容排列、项目对齐、自身对齐、自动对等、等宽变换、自动边距、包裹、排序、对齐内容）
m0_69034993的博客
10-10 4246
使用flexbox容器上的.justiiy-content-*类可以改变flex子元素在主轴上的对齐（默认x轴开始，如果flex-direction:column则为y轴开始）*可以是从start(浏览器默认值）、end、center、between或around。改变Flex子容器在Flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap类（浏览器默认）、包裹.flex-wrap类，或者反向包裹.flex-wrap-reverse类。任何一个容器都可以指定为Flex布局。
bootstrap 实现商城布局
dxm809的博客
09-07 883
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>--> .
BootStrap网上书城首页布局
m0_67514201的博客
04-04 1649
目录 1,什么是 Bootstrap？ 2,导入js库 3,代码演示 1,什么是 Bootstrap？ Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。 2,导入js库 网上书城首页布局 3,代码演示 <!DOCTYPE html> <html> <head> <meta charset=...
【前端素材】bootstrap4实现移动端电商APP页面 MobileShop（附源码）
最新发布
m0_46013789的博客
02-06 850
移动端电商网页是指为移动设备（如智能手机和平板电脑）优化设计的电子商务网页。它是在线商店的移动版本，旨在提供方便的购物体验和无缝的移动端操作。
bootstrap排版实战
dianchou8532的博客
06-05 961
bootstrap+angular实战 CASE-01：页面总体排版 说明：页面排版整体分为三个部分（见产品图）：上导航条（红色区域）、左导航条（紫色区域）、内容区域（蓝色区域）。左导航条的区域是由整个页面的蓝色部分使用margin-left右移留出来的。上导航条采用position绝对定位固定。内容区域则是采用ui-view引入具体的模块页面。 1：页面总览 ...
JavaScript实现类的私有成员：BootStrap布局实战教程
本资源是一份关于Bootstrap响应式布局的教程，由专业讲师风舞烟讲解，针对初至中级开发者设计。课程分为六个经典案例，包括窄屏模式网页、固定布局模式、登录界面实战、流动布局、营销类页面设计以及网页顶部与底部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值