AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-10-09 53
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Bootstrap01【前端开发框架】家居商城首页之导航&轮播图

一.WWW

1.What？

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

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

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

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

2.Why？

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

②.移动设备优先

③.浏览器支持

④.容易上手

3.Where？

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

×过于复杂的电商网站

二.环境安装

①.下载Bootstrap库  

 image.png

②.页面中引入库

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


文章标签：
前端开发
开发框架
容器
JavaScript
关键词：
Bootstrap导航
前端框架
Bootstrap前端
Bootstrap框架
前端轮播图
瑶大头*^_^*
目录
相关文章
土木林森
|
12天前
|
前端开发 JavaScript 开发者
颠覆传统：React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库，以其虚拟DOM机制和组件化设计，成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容，帮助开发者更好地理解和使用React。
土木林森
40 9
想飞的雪糕
|
26天前
|
人工智能 前端开发 JavaScript
前端架构思考 ：专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展，微前端架构成为应对复杂大型应用的流行方案，允许多个团队使用不同技术栈并将其模块化集成。然而，这种设计在高交互性需求的应用中存在局限，如音视频处理、AI集成等。本文探讨了传统微前端架构的不足，并提出了一种新的分层式微前端架构，通过展示层与业务层的分离及基于功能的横向拆分，以更好地适应现代前端需求。
想飞的雪糕
40 0
东方睿赢
|
6天前
|
前端开发 JavaScript API
前端界的秘密武器：掌握这些框架，让你轻松秒杀99%的同行！
前端开发日新月异，掌握几个明星框架如React、Vue.js和Angular，不仅能让工作更得心应手，还能轻松超越同行。React以高效的虚拟DOM和组件化著称；Vue.js简洁易懂，灵活性高；Angular提供全面的解决方案，适合大型应用。此外，轻量级的Svelte也值得关注，其编译时处理设计提升了应用性能。掌握这些框架，结合深刻理解和灵活运用，助你在前端领域脱颖而出。
东方睿赢
21 9
G0518
|
1月前
|
JavaScript 前端开发 API
Vue.js：现代前端开发的强大框架
【10月更文挑战第11天】Vue.js：现代前端开发的强大框架
G0518
65 41
刘大猫.
|
16天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
刘大猫.
27 3
二二*一一
|
18天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
二二*一一
30 3
想飞的雪糕
|
24天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇（五）：如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用，包括服务端和客户端的创建。通过一个简单的代码示例，展示了Deno在WebSocket实现中的便捷与强大，无需额外依赖，即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时，适合全栈开发者学习和使用。
想飞的雪糕
94 7
想飞的雪糕
|
24天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时，利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成，通过抽象出辅助方法`useRx`和`pushPipe`，实现跨框架的状态管理。具体介绍了各框架的响应式机制，展示了如何将RxJS的Observable对象转化为框架的响应式数据，并通过示例代码演示了使用方法。此外，还讨论了全局状态源与WebComponent的部署优化，以及一些实践中的改进点。这些方法不仅简化了异步编程，还提升了代码的可读性和可维护性。
想飞的雪糕
64 1
想飞的雪糕
|
25天前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇（四）：Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时，旨在解决 Node.js 的设计缺陷，具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务，并详细讲解了 Oak 框架的安装和使用方法，包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便，非常适合快速开发和部署现代 Web 应用程序。
想飞的雪糕
76 2
游客ogeeqvh5vfa5q
|
5天前
|
前端开发
Bootstrap5 导航5
示例展示了两种导航菜单：胶囊式和选项卡式，均包含活动链接、下拉菜单（含三个子链接）及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。
游客ogeeqvh5vfa5q
13 0

热门文章

最新文章

  • 1
    start.aliyun.com 正式上线！极速构建 bootstrap 应用
  • 2
    PHPStorm中使用bootstrap3控件！
  • 3
    Bootstrap系列 -- 12. 水平表单
  • 4
    Bootstrap的学习以及简单运用
  • 5
    Bootstrap-轮播图-No.2
  • 6
    使用国人的koala来重新预编译BOOTSTRAP的LESS文件
  • 7
    bootstrap51-Bootstrap 基本的输入框组
  • 8
    bootstrap-表单控件——输入框input
  • 9
    bootstrap-带有头和尾的面板
  • 10
    bootstrap-面板--基础面板
  • 1
    前端利器SASS之入门篇，前端开发你需要了解的那些事
    64
  • 2
    sass 公用10个mixins代码块，算法太TM重要了，前端开发要求
    46
  • 3
    JS的几种设计模式，Web前端基础三剑客学习知识分享，前端零基础开发
    51
  • 4
    CSS3 转换，深入理解Flutter动画原理，前端基础图形
    65
  • 5
    4(1)，阿里面试官，前端开发面试题目
    51
  • 6
    【前端】websocket 讲解与项目中的使用
    84
  • 7
    详解前端登录流程：实现原理与最佳实践
    282
  • 8
    npm与Maven：前端与后端构建工具深度对比学习
    186
  • 9
    TypeScript：前端世界的“甜蜜烦恼”——究竟该不该用？
    52
  • 10
    前端获取当前日期---------------年月日//时分秒
    63

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云OSS设置跨域访问