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

news2024/11/17 16:01:08

目录

一.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";

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/442205.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2021遥感应用组二等奖:基于多源遥感数据的武夷山毛竹林提取研究及扩张特征分析

作品介绍 一、应用背景 近年研究表明&#xff0c;竹林固碳能力高&#xff0c;在维护全球碳平衡和应对气候变化等方面具有重要的作用。中国是竹资源最丰富的国家之一&#xff0c;在世界竹子研究领域处于领先地位。毛竹是中国本土竹类中分布最广、面积最大、经济价值最高的优良竹…

原来这就是所谓的 JSR!

相信大家在学习 Java 的过程中&#xff0c;或多或少都见过 JSR 这个词。本篇文章就科普下什么是 JSR。 什么是 JSR &#xff1f; JSR&#xff08;Java Specification Requests&#xff09;&#xff0c;是指 Java 规范请求&#xff08;或者活规范提案&#xff09;。这个请求&a…

1. VBA概述

VBA代表Visual Basic for Applications&#xff0c;这是一种来自Microsoft的事件驱动编程语言&#xff0c;现在主要与Microsoft Office应用程序(如MSExcel&#xff0c;MS-Word和MS-Access)一起使用。 它帮助技术人员构建定制的应用程序和解决方案&#xff0c;以增强这些应用程…

小程序 vs HTML 5 动态更新模式有何区别?

最近在看一些移动开发的文章&#xff0c;很多都在反复讲动态更新这个概念&#xff0c;其实换种讲法就是热更新&#xff0c;既然很多地方都在讲&#xff0c;作为一名“躺平”的开发者&#xff0c;必须再深入了解下具体的原理和模式。 动态机制及技术原理 动态研发模式就是一种…

Web 开发会话技术之 -Cookie介绍以及源码分析和图分析以及Cookie的生命周期--路径--中文乱码的分析和代码示例

目录 Web 开发会话技术之 -Cookie 会话 基本介绍 1. 什么是会话&#xff1f; 2. 会话过程中要解决的一些问题&#xff1f; cookie 技术 cookie 介绍 二说 cookie cookie 可以用来做啥 cookie 基本使用 cookie 常用方法 cookie 底层实现机制-创建和读取 Cookie Crea…

javaweb838仓库进销存管理系统

此系统主要分4个模块&#xff0c;分别是&#xff1a; 出库管理模块&#xff1a;对每种出库出去的商品都有相应的记录显示。 入库管理模块&#xff1a;对每种入库来的商品都有相应的记录显示&#xff0c;如果商品管理局显示某一厂家的某一种商品不符合要求&#xff0c;则在入库的…

变压器基本知识

1、高频变压器是工作频率超过中频&#xff08;10kHz&#xff09;的电源变压器&#xff0c;主要用于高频开关电源中&#xff0c;常用的工作频率是50K&#xff0c;65K。 变压器是变换交流电压、电流和阻抗的器件&#xff0c;当初级线圈中通有交流电流时&#xff0c;铁芯&#xff…

Crash工具介绍和常见命令使用

1. 介绍 本文主要介绍crash工具的使用以及常用的命令。crash工具&#xff0c;常用来分析内核的coredump以及应用的coredump&#xff0c;功能非常强大。 crash工具官方介绍 使用crash分析内核crash情况&#xff0c;需要准备以下内容&#xff1a; 内核crash时生成的coredump文…

ArcGIS发展历史及体系架构

ArcGIS是美国能源环境研究所ESRI&#xff08;Environmental Systems Research Institute&#xff09;开发的GIS软件。 1 ArcGIS软件发展历史 &#xff08;1&#xff09;ARC/INFO Workstation 1981年&#xff0c;ARC/INFO第一代商业产品发布; 1986年&#xff0c;PC版ARC/INFO问世…

2022(一等奖)D277:1998-2019年中国植被动态变化及其影响因素分析

作品介绍 1 应用背景 近半个世纪以来&#xff0c;随着全球气候变化和人类活动的双重干扰&#xff0c;自然生态系统遭到了不同程度的影响。植被作为陆地生态系统的重要组成部分&#xff0c;在陆地生态系统的物质循环和能量流动中发挥着不可替代的作用&#xff0c;是自然生态系统…

论文笔记:GhostNet: More Features from Cheap Operations

1 论文简介 论文&#xff1a;GhostNet: More Features from Cheap Operations&#xff08;华为诺亚团队&#xff09; 源代码&#xff1a;https://github.com/huawei-noah/ghostnet 2 动机 由于内存和计算资源的限制&#xff0c;在嵌入式设备上部署卷积神经网络非常困难。 本…

浅述 国产 仪器 4456系列数字荧光示波器

4456系列数字荧光示波器具有6个产品型号&#xff0c;带宽350MHz~1GHz&#xff0c;最高采样率5GSa/s&#xff0c;最大存储深度500Mpts/CH&#xff0c;最快波形捕获率100万个波形/秒&#xff0c;独创的Any Acquire Phosphor技术&#xff0c;为您提供全新的示波器使用体验。 4456…

Doris(12):高级设置

1 增大内存 内存不够时, 查询可能会出现‘Memory limit exceeded’, 这是因为doris对每个用户默认设置内存限制为 2g SHOW VARIABLES LIKE "%mem_limit%"; exec_mem_limit 的单位是 byte&#xff0c;可以通过 SET 命令改变 exec_mem_limit 的值。如改为 8GB。 SET…

《Spring MVC》 第四章 域对象、视图、转发和重定向

前言 介绍Spring MVC的域对象、视图、转发和重定向 1、域对象共享数据 Spring MVC 提供了多种域对象共享数据的方式&#xff0c;其中最常用的方式如下&#xff1a; 1.1、使用 Servlet API 向 request 域对象中共享数据 服务端代码&#xff1a; RequestMapping("toLo…

RTC音视频是什么意思?即构RTC音视频有什么优势

RTC音视频是什么意思? RTC(Real time communication)&#xff0c;是实时音视频的一个简称&#xff0c;一种给行业提供高并发、低延时、高清流畅、安全可靠的全场景、全互动、全实时的音视频服务的终端服务。但更广义的RTC技术&#xff0c;不单单局限于音视频&#xff0c;包括I…

C++ 算法进阶系列之剖析树型动态规划算法思想

1. 前言 什么是树型动态规划&#xff1f; 概念中有 2 个子概念&#xff1a; 一个是动态规划概念。动态规划可以简单理解为通过对已经计算出来的子问题的状态值进行修改(基于子问题的状态值找到当前子问题的最优值)而得到当前子问题的状态值。 Tips&#xff1a; 本文侧重于动…

数智融合,生态链接丨 亚信科技“信伙伴”交流会(成都站)成功举办

日前&#xff0c;“数智融合&#xff0c;生态链接”亚信科技“信伙伴”交流会&#xff08;成都站&#xff09;在成都希顿酒店成功举办。本次会议由四川省信创产业联盟指导&#xff0c;亚信科技AntDB数据库事业部、四川省软件行业协会联合举办。 伴随我国信息技术应用创新不断向…

探究以太坊生态系统中的Consensys:产品技术细节与应用场景介绍

文章目录 前言一. Infura1. API简介&#xff08;1&#xff09;HTTP API&#xff08;2&#xff09;WebSocket API 2. Infura优势&#xff08;1&#xff09;稳定性&#xff08;2&#xff09;易用性&#xff08;3&#xff09;免费 二、Truffle1. Truffle框架&#xff08;1&#xf…

【大数据之Hadoop】十七、MapReduce之数据清洗ETL

ETL是将业务系统的数据经过抽取、清洗转换之后加载到数据仓库的过程&#xff0c;目的是将分散、零乱、标准不统一的数据整合到一起&#xff0c;为决策提供分析依据。 ETL的设计分三部分&#xff1a;数据抽取、数据的清洗转换、数据的加载。 1 ETL体系结构 ETL主要是用来实现…

Python无框架分布式爬虫,爬取范例:拼多多商品详情数据,拼多多商品列表数据

拼多多是中国领先的社交电商平台之一&#xff0c;是一家以“团购折扣”为主要运营模式的电商平台。该平台上有海量的商品&#xff0c;对于商家和消费者来说都具有非常大的价值&#xff0c;因此&#xff0c;拼多多商品数据的采集技术非常重要。本文将介绍拼多多商品数据的采集技…