Bootstrap01【前端开发框架】家居商城首页之导航&轮播图

最新推荐文章于 2024-01-27 20:21:08 发布
最新推荐文章于 2024-01-27 20:21:08 发布
阅读量656 收藏 3
点赞数 1
文章标签： 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73126462/article/details/130236795
版权

目录

一.WWW

1.What？

2.Why？

3.Where？

二.环境安装

三.案例

案例1：查询按钮原生态实现对比Bootstrap方式实现

案例3：首页导航原生态实现（div+css）

案例4：首页导航Bootstrap实现

案例5：首页轮播图实现&最新上架/热门家居框架搭建

栅格系统

一.WWW

1.What？

①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架

②.是一个用于快速开发Web应用程序和网站的前端框架

③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷

概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

2.Why？

①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机）

 ②.移动设备优先

③.浏览器支持

④.容易上手

3.Where？

√企业网站、博客、后台、分类简单的电商之类的网站

×过于复杂的电商网站

二.环境安装

①.下载Bootstrap库   Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。https://v4.bootcss.com/②.页面中引入库

  1. bootstrap.css：引入Bootstrap核心样式【添加到head标签中】
  2. jquery-3.3.1.js：先引入jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】
  3. bootstrap.js：再引入Bootstrap核心库

           2 和 3 必须【添加到</body>之前】

三.案例

案例1：查询按钮原生态实现对比Bootstrap方式实现

  • 布局容器  固定容器【class="container"】
  • 大屏幕（大桌面显示器，大于等于 1200px） lg（ large）
  • 中等屏幕（桌面显示器，大于等于 992px）   md（middle）
  • 小屏幕（平板，大于等于 768px）  sm（small）
  • 超小屏幕（手机，小于 768px）  xs（extra small）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例1：查询按钮原生态实现对比Bootstrap方式实现</title>
<!-- 支持手机端 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        .aa{
            background-color: pink;/*背景颜色*/
            color: white;/*字体颜色*/
            border: 0px;/*无边框*/
            width: 60px;/*宽*/
            height: 40px;/*高*/
            border-radius: 5px;/*设置边框圆角*/
        }
    </style>
    <!-- 引入Bootstrap的CSS -->
    <link rel="stylesheet" href="CSS/bootstrap.css"/>
</head>
<body>
    <!-- 固定容器 -->
    <div class="container">
        <button class="aa">查询</button>
        <hr/>
        <button type="button" class="btn btn-outline-success">Success</button>
    </div>
   
    <!-- 先引入jQuery的类库 -->
    <script  src="js/jquery-3.6.4.js"></script>
    <!-- 再引入Bootstrap的类库 -->
    <script  src="js/bootstrap.js"></script>
</body>
</html>

案例3：首页导航原生态实现（div+css）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例3：首页导航原生态实现（div+css）</title>
    <style>
        .aa{
            float:left;/*左浮动*/
            margin-left :50px;/*左间距*/
        }
        .bb{
            float:right;/*右浮动*/
            margin-right :50px;/*右间距*/
        }
        .dh{
            height: 50px;/*高度*/
            background-color: azure;/*背景颜色*/
            line-height: 50px;/*行高  垂直居中*/
        }
          .cc{
            font-weight: bold;  /*加粗*/
        }
        .bb a{
            margin-left: 5px;/*左间距*/
        }
    </style>
</head>
<body>
    <div class="dh">
        <div class="aa">你好,欢迎来到集美家居</div>
        <div class="bb">
            <a class="cc">首页</a>
            <a>分类</a>
            <a>登录</a>
            <a>注册</a>
            <a>我的购物车</a>
        </div>
    </div>
</body>
</html>

案例4：首页导航Bootstrap实现

  • 导航条组件的使用-Navbar
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例4：首页导航Bootstrap实现</title>
    <!-- 支持手机端 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 引入CSS -->
    <link rel="stylesheet" href="CSS/bootstrap.css" />
    <style>
        .navbar-collapse{
            /*1代表弹性扩大占用父容器剩余部分   0代表不占用*/
            flex-grow: 0;
        }
        .active{
            font-weight: bold;/*加粗*/
        }
    </style>
</head>

<body>
    <!-- 导航条 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <!-- 固定容器 -->
        <div class="container">
            <a class="navbar-brand" href="#">你好,欢迎来到集美家居</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav"> 
                    <!-- active激活的 -->
                    <li class="nav-item active">
                        <a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link ">注册</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link ">我的购物车</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 引入jQuery的类库 -->
    <!-- 再引入Bootstrap的类库 -->
    <script src="js/jquery-3.6.4.js"></script>
    <script src="js/bootstrap.js"></script>
</body>

</html>

案例5：首页轮播图实现&最新上架/热门家居框架搭建

  • 轮播组件-Carousel

  • 栅格系统

  • 概念：Bootstrap提供了一套响应式、移动设备优先的流式网格系统
    特点：会随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列

网格系统策略图 

实现首页整体大致布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例5：首页轮播图实现&最新上架/热门家居框架搭建</title>
  <!-- 支持手机端 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- 引入CSS -->
  <link rel="stylesheet" href="CSS/bootstrap.css" />
  <style>
    .navbar-collapse {
      /*1代表弹性扩大占用父容器剩余部分   0代表不占用*/
      flex-grow: 0;
    }

    .active {
      font-weight: bold;
      /*加粗*/
    }

    #carouselExampleCaptions {
      margin-top: 20px;
      /*上间距*/
    }

    .aa {
      border: solid red 2px;
    }
  </style>
</head>

<body>
  <!-- 导航条 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- 固定容器 -->
    <div class="container">
      <a class="navbar-brand" href="#">你好,欢迎来到集美家居</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <!-- active激活的 -->
          <li class="nav-item active">
            <a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">分类</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">登录</a>
          </li>
          <li class="nav-item">
            <a class="nav-link ">注册</a>
          </li>
          <li class="nav-item">
            <a class="nav-link ">我的购物车</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!--轮播效果 -->
  <div class="container">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="img/banner1.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>雪王红红火火恍恍惚惚哈哈哈哈</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="img/banner2.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="img/banner3.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </button>
    </div>


    <div class="row">
      <div class="col aa"  style="background-color: lightblue;">
        1 of 2
      </div> 
      <div class="col aa">
       <!-- 嵌套一行 -->
          <dvi class="row" >
                <div  class="col aa">1</div>
                <div  class="col aa">2</div>
                <div  class="col aa">3</div>
                <div  class="col aa">4</div>
          </dvi>
      </div>
    </div>


    <!-- 大PC一行4列  中PC一行3列  平板端一行2列  手机端一行一列 -->
    <!-- <div class="container">
        <div class="row">
          <div class="aa col-lg-3 col-md-4 col-sm-6">
            One of three columns
          </div>
          <div class="aa col-lg-3 col-md-4 col-sm-6">
            One of three columns
          </div>
          <div class="aa col-lg-3 col-md-4 col-sm-6">
            One of three columns
          </div>
          <div class="aa col-lg-3 col-md-4 col-sm-6">
            One of three columns
          </div>
        </div>
      </div> -->

  </div>


  <!-- 引入jQuery的类库 -->
  <!-- 再引入Bootstrap的类库 -->
  <script src="js/jquery-3.6.4.js"></script>
  <script src="js/bootstrap.js"></script>
</body>

</html>

  • 运行项目，改变页面的大小，页面每行所显示的 div 的数量就会发生改变；

  • row，表示一行，意思是当前 div 为一行

  • col：表示列，意思是当前 div 为一列；

  • 如果行里面要增加列，在 "class=row" 的 div里面继续添加 div并设置 "class=col"；

  • 如果要继续添加行，那么在 "class=container" 的 div里面继续添加 div 并设置 "class=row"；

瑶大头*^_^*
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
真皮沙发红木bootstrap家居网站模板
03-31
真皮沙发红木bootstrap家居网站模板
171.Web前端网页制作 响应式自适应酒店设计室内装修网页实例 大学生期末大作业 html+css+js
最新发布
A240307的博客
05-07 1010
响应式自适应酒店设计室内装修网页实例，应用html+css+js： Div、导航栏、三级菜单、Banner、图片轮翻效果、鼠标滑动特效、悬浮菜单、背景特效等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。
基于Spring Boot的家具商城系统
2301_77732240的博客
05-08 209
总之，前端技术在现代网站和应用程序的开发中起着至关重要的作用，它们不仅可以提高用户体验，还可以提高网站和应用程序的性能和可维护性。在现今的数字时代，线上购物已成为一种流行的方式，也让家具商城系统得以更好的服务于消费者。该系统具有良好的用户体验和系统稳定性，能够满足消费者的购买需求，也能够帮助商家更好地管理商品和订单。此外，用户还可以查看商品的详细信息，例如商品的详细描述、图片、价格等。用户注册：用户可以通过注册页面进行账号注册，使其可以进行更多的操作和享受更多的服务。
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
Zhang_wang_yun的博客
04-05 5555
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
静态网页设计html css——家具网页设计实例 企业网站制作
qq_3200628753的博客
12-19 1203
使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
bootstrap4实现购物商城
06-18
bootstrap4实现购物商城
【前端】Bootstrap案例：轮播图
karshey的博客
10-18 2659
一个demo
Bootstrap案列:首页界面
zyz博客
02-07 1366
在自学Bootstrap之后我开始完成一个旅游网项目的首页界面，本博文主要演示实现的具体过程。 首先导入BootStra的环境 <!--引入本地的bootstrap——css--> <link href="../js/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"> <sc...
Bootstrap系列之轮播图（Carousel）
老__L的博客
06-05 8251
一个幻灯片组件，用于循环浏览元素、图像或文本幻灯片，就像旋转木马一样。旋转木马是一个通过一系列内容循环的幻灯片，用CSS 3D转换和一点JavaScript构建。它可以处理一系列图像、文本或自定义标记。它还包括对previous/next控件和指示器的支持。在支持页面可见性API的浏览器中，当网页对用户不可见时，旋转木马将避免滑动(如当浏览器选项卡不活跃，浏览器窗口最小化，等等)。请注意，嵌套的旋转木马不受支持，而且旋转木马通常不符合无障碍标准。最后，如果您从源代码构建我们的JavaScript，它需要ut
【2023】Bootstrap+JSP+MySQL搭建电商网站
热门推荐
仨仨的博客
06-13 2万+
Bootstrap+jsp+Mysql搭建简易电商网站，包含增删改查商品、购物车、留言评价、用户商品管理等功能。
基于boostrap响应式家居商城前端模板
10-25
Bootstrap响应式家居商城前端模板是一种基于Bootstrap框架设计的网页模板，专为家居商品销售网站提供。Bootstrap是由Twitter推出的一个开源的用于前端开发的工具集，它包含了一系列预先设计的CSS和JavaScript组件，...
家居房屋装修bootstrap模板
04-09
Bootstrap是世界上最受欢迎的前端开发框架之一，主要用于构建响应式布局和移动设备优先的网页项目。在家居房屋装修领域，利用Bootstrap模板可以创建出美观、易用且适应各种屏幕尺寸的网站设计。本模板专为展示家居...
欧式家居装修bootstrap模板
04-02
模板中的组件可能包括导航栏、轮播图、卡片式布局、按钮、表单、下拉菜单等，这些都是Bootstrap框架内常见的交互元素，有助于增强用户在浏览家居装修方案时的互动性。同时，可能还集成了自定义的CSS样式和JavaScript...
书桌家居装修bootstrap网站模板
04-02
"书桌家居装修bootstrap网站模板"是一个专门为家居装修行业设计的网页模板，它基于流行的前端开发框架Bootstrap构建。Bootstrap是由Twitter开发的一个开源项目，旨在提供响应式布局、移动设备优先的WEB开发方案，...
使用Bootstrap搭首页
m0_62839141的博客
04-01 1470
一，实现首页轮播图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1:实现首页轮播图</title> <!-- 一如Bootatrap的CSS --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <!-- 支持手..
手把手教你使用bootstrap完成轮播图
weixin_42442856的博客
12-21 1万+
手把手教你使用bootstrap完成轮播图
BootStrap前端框架
Skf_0004010的博客
11-04 5123
BootStrap 1、Bootstrap介绍 什么是bootstrap? 简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootstrap是基于HTML,CSS,Javascript的 特点 移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式 响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局） 偏UI，综合框架，包含一些常用的UI组件以及一些JS组件 Bootstrap的适用场景？ b
前端小案例——轮播图（HTML+CSS+JS, 附源码）
前端小白一枚
01-27 2035
这个轮播图是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和图片
web前端【3】JS基础-轮播图【JavaScript、定时器、鼠标动作、自动轮播、增加和减少li列表】
jdkzeus的博客
10-17 4888
创建新圆点，重新赋值index，同步激活图片，当单击删除时，当nums1>2是删除，清除图片激活状态，删除父元素的最后一个子元素，修改图片父元素和圆点父元素的className，重新赋值index，imgNum.value使图片激活状态同步。当减少的第二张时不再减少。整体布局：设计一个轮播图，中间部分为自动轮播的图片展示区域，每张图片的左上方显示图片的序号，左右箭头按钮用于切换图片，右下方小圆点数字列表用于导航到指定图片和显示当前展示图片的序号，且与显示的图片序号相同的小圆点按钮的背景颜色为红色。
用c++写一个家具城管理系统
04-20
好的，我会尽力回答您的问题。以下是对家具城管理系统的简要介绍： 家具城管理系统是一种用于管理家具城的软件系统，可以协助管理家具城的所有活动和业务。该系统包括库存管理、销售管理、客户关系管理、财务管理等各种组件，使家具城能够更好地掌握市场动态，提高管理效率和利润率。 下面是一个用 C 语言编写家具城管理系统的简单示例代码： #include <stdio.h> #define MAX_NUM 100 // 家具城最大存货量 // 家具存货结构 struct Furniture { int id; // 存货编号 char name[20]; // 名称 int quantity; // 数量 double price; // 价格 }; int main() { struct Furniture inventory[MAX_NUM]; // 家具存货数组 int inventory_count = 0; // 存货数量 // 添加存货 inventory[inventory_count++] = (struct Furniture){ .id = 1, .name = "桌子", .quantity = 10, .price = 50.0 }; inventory[inventory_count++] = (struct Furniture){ .id = 2, .name = "椅子", .quantity = 20, .price = 20.0 }; inventory[inventory_count++] = (struct Furniture){ .id = 3, .name = "沙发", .quantity = 5, .price = 200.0 }; // 查询存货 int i; for (i = 0; i < inventory_count; i++) { printf("%d\t%s\t%d\t%.2f\n", inventory[i].id, inventory[i].name, inventory[i].quantity, inventory[i].price); } return 0; } 以上代码给出了一个简单的家具城存货管理示例。在这个示例中，我们定义了一个结构体 Furniture，用于存储每一项家具存货的编号、名称、数量和价格。使用结构体数组 inventory 来存储所有的家具存货，通过 for 循环遍历输出所有存货数据。 当然，这只是一个简单示例，实际的家具城管理系统需要考虑更多的因素，如数据库管理、销售订单管理、员工管理、客户管理等。希望这个简单的示例可以为您提供一些参考。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑶大头*^_^*

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值