Bootstrap的咖啡网站实例代码阅读笔记

昊虹AI笔记

已于 2023-10-27 14:41:48 修改

阅读量656

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 笔记前端

于 2023-10-27 14:41:12 首次发布

本文链接：https://blog.csdn.net/wenhao_ir/article/details/134053076

版权

Bootstrap 专栏收录该内容

50 篇文章 4 订阅

订阅专栏

01-index.html的完整代码
02-图片可以通过类 rounded-circle 设置为圆形显示
03-`<li class="nav-item mt-1 a">`中，类mt-1是什么意思？类a又是什么意思？
04-`href="javascript:void(0);"`是什么意思？
05-类font-menu是什么样式？
06-类margin1是什么样式？
07-类d-none是什么样式？
08-类d-sm-block是什么样式？
09-类card-link是什么样式？
10-类rounded-pill是什么样式？
11-template1 和 template2是如何实现切换的？
12-类clearfix是什么作用？为什么要清除浮动？
13-类carousel slide是什么效果？
14-类rounded是什么效果？

01-index.html的完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="js/jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.bundle.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
    <!--css文件-->
    <link rel="stylesheet" href="css/style.css">
    <!--字体图标文件-->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="js/index.js"></script>
    <!--Font Awesome是一套专为Twitter Bootstrap设计的图标字体，几乎囊括了网页中可能用到的所有图标，这些图标通过Web Font的方式来显示，可以被任意缩放、改变颜色，你可以像修改文字样式那样来修改图标样式。 -->
</head>
<body class="container-fluid">
<div class="row">
    <!--header-->
    <div class="col-12 col-lg-3 left ">
        <div id="template1">
            <div class="row">
                <div class="col-10">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link active" href="index.html">
                                <img width="40" src="images/logo.png" alt="" class="rounded-circle">
                            </a>
                        </li>
                        <li class="nav-item mt-1 a">
                            <a class="nav-link" href="javascript:void(0);">账户</a>
                        </li>
                        <li class="nav-item mt-1 a">
                            <a class="nav-link" href="javascript:void(0);">菜单</a>
                        </li>
                    </ul>
                </div>
                <div class="col-2 mt-2 font-menu text-right">
                    <a id="a1" href="javascript:void(0); "><i class="fa fa-bars"></i></a>
                </div>
            </div>
            <div class="margin1">
                <h5 class="ml-3 my-3 d-none d-sm-block text-lg-center">
                    <span class="b">心情惬意，来杯咖啡吧</span>&nbsp;&nbsp;<i class="fa fa-coffee"></i>
                </h5>
                <div class="ml-3 my-3 d-none d-sm-block text-lg-center">
                    <a href="javascritp:void(0);" class="card-link btn  rounded-pill text-success a"><i class="fa fa-user-circle"></i>&nbsp;登&nbsp;录</a>
                    <a href="javascritp:void(0);" class="card-link btn btn-outline-success rounded-pill text-success a">注&nbsp;册</a>
                </div>
            </div>
        </div>

        <div id="template2" class="d-none">
            <div class="row">
                <div class="col-10">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link active" href="index.html">
                                <img width="40" src="images/logo.png" alt="" class="rounded-circle">
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mt-2 a" href="index.html">
                                咖啡俱乐部
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-2 mt-2 font-menu text-right">
                    <a id="a2" href="javascript:void(0);"><i class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="margin2">
                <div class="ml-5 mt-5">
                    <h6><a href="index.html">门店</a></h6>
                    <h6><a href="index.html">俱乐部</a></h6>
                    <h6><a href="index.html">菜单</a></h6>
                    <hr/>
                    <h6><a href="index.html">移动应用</a></h6>
                    <h6><a href="index.html">臻选精品</a></h6>
                    <h6><a href="index.html">专星送</a></h6>
                    <h6><a href="index.html">咖啡讲堂</a></h6>
                    <h6><a href="index.html">烘焙工厂</a></h6>
                    <h6><a href="index.html">帮助中心</a></h6>
                    <hr/>
                    <a href="index.html" class="card-link btn rounded-pill text-success pl-0"><i class="fa fa-user-circle"></i>&nbsp;登&nbsp;录</a>
                    <a href="index.html" class="card-link btn btn-outline-success rounded-pill text-success">注&nbsp;册</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-9 right p-0 clearfix">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner max-h">
                <div class="carousel-item active">
                    <img src="images/001.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="images/002.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="images/003.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
        <!--多列卡片浮动排版-->
        <div class="p-4 list">
            <h5 class="text-center my-3 a">咖啡推荐</h5>
            <h5 class="text-center mb-4 a"><small>在购物旗舰店可以发现更多咖啡心意</small></h5>
            <div class="card-columns">
                <div class="my-4 my-sm-0">
                    <img class="card-img-top" src="images/006.jpg" alt="">
                </div>
                <div class="my-4 my-sm-0">
                    <img class="card-img-top" src="images/004.jpg" alt="">
                </div>
                <div class="my-4 my-sm-0">
                    <img class="card-img-top" src="images/005.jpg" alt="">
                </div>
            </div>
        </div>
        <!--网格系统布局-->
        <div class="row py-5">
            <div class="col-12 col-sm-6 pt-2">
                <div class="card border-0 text-center text-sm-left">
                    <div class="card-body ml-5">
                        <h4 class="card-title">咖啡俱乐部</h4>
                        <p class="card-text a">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。</p>
                        <a href="#" class="card-link btn btn-outline-success a">注册</a>
                        <a href="#" class="card-link btn btn-outline-success a">登录</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 text-center mt-5">
                <a href=""><img src="images/007.png" alt="" class="img-fluid"></a>
            </div>
        </div>
        <div class="p-4 list">
            <h5 class="text-center my-3">咖啡精选</h5>
            <h5 class="text-center mb-4 a"><small>在购物旗舰店可以发现更多咖啡心意</small></h5>
            <div class="row">
                <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="bg-light p-4 list-border rounded">
                        <img class="img-fluid" src="images/008.jpg" alt="">
                        <h6 class="text-secondary text-center mt-3 a">套餐一</h6>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="bg-white p-4 list-border rounded">
                        <img class="img-fluid" src="images/009.jpg" alt="">
                        <h6 class="text-secondary text-center mt-3 a">套餐二</h6>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="bg-light p-4 list-border rounded">
                        <img class="img-fluid" src="images/010.jpg" alt="">
                        <h6 class="text-secondary text-center mt-3 a">套餐三</h6>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="bg-light p-4 list-border rounded">
                        <img class="img-fluid" src="images/011.jpg" alt="">
                        <h6 class="text-secondary text-center mt-3 a">套餐四</h6>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-4">
            <h5 class="text-center my-3">咖啡讲堂</h5>
            <h5 class="text-center mb-4 a"><small>了解更多咖啡文化</small></h5>
            <div class="box">
                <ul id="ulList" class="clearfix">
                    <li class="list-border rounded">
                        <img src="images/015.jpg" alt="" width="300">
                        <h6 class="text-center mt-3 a">咖啡种植</h6>
                    </li>
                    <li class="list-border rounded">
                        <img src="images/014.jpg" alt="" width="300">
                        <h6 class="text-center mt-3 a">咖啡调制</h6>
                    </li>
                    <li class="list-border rounded">
                        <img src="images/013.jpg" alt="" width="300">
                        <h6 class="text-center mt-3 a" >咖啡烘焙</h6>
                    </li>
                    <li class="list-border rounded">
                        <img src="images/012.jpg" alt="" width="300">
                        <h6 class="text-center mt-3 a">手冲咖啡</h6>
                    </li>
                </ul>
                <div id="left">
                    <i class="fa fa-chevron-circle-left fa-2x text-success"></i>
                </div>
                <div id="right">
                    <i class="fa fa-chevron-circle-right fa-2x text-success"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<!--footer——在sm型设备尺寸下显示-->
<div class="row fixed-bottom d-block d-sm-none py-1 bg-light border-top" id="footer" >
    <ul class="text-center p-0" id="myTab">
        <li>
            <a class="ab b  text-dark"  href="index.html"><i class="fa fa-home fa-2x p-1"></i><br/>主页</a>
        </li>
        <li>
            <a class="b  text-dark" href="javascript:void(0);"><i class="fa fa-calendar-minus-o fa-2x p-1"></i><br/>门店</a>
        </li>
        <li>
            <a class="b  text-dark" href="javascript:void(0);"><i class="fa fa-user-circle-o fa-2x p-1"></i><br/>我的账户</a>
        </li>
        <li>
            <a class="b  text-dark" href="javascript:void(0);"><i class="fa fa-bitbucket-square fa-2x p-1"></i><br/>菜单</a>
        </li>
        <li>
            <a class="b  text-dark" href="javascript:void(0);"><i class="fa fa-table fa-2x p-1"></i><br/>更多</a>
        </li>
    </ul>
</div>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        var nowIndex=0;
        var liNumber=$("#ulList li").length;
        function change(index){
            var ulMove=index*300;    //设置移动距离
            $("#ulList").animate({left:"-"+ulMove+"px"},500);
        }
        $("#left").click(function(){
            nowIndex = (nowIndex > 0) ? (--nowIndex) :0;
            change(nowIndex);
        })
        $("#right").click(function(){
            nowIndex=(nowIndex<liNumber-1) ? (++nowIndex) :(liNumber-1);
            change(nowIndex);
        });
    })
</script>
</html>

02-图片可以通过类 rounded-circle 设置为圆形显示

03-`<li class="nav-item mt-1 a">`中，类mt-1是什么意思？类a又是什么意思？

类mt-1：这是Bootstrap的辅助类之一，用于控制元素的外边距（margin-top）。具体来说，mt-1 表示在该元素的顶部添加一个较小的外边距。mt 代表 “margin-top”，而数字 1 表示外边距的大小或程度。Bootstrap提供了一系列边距类，从 mt-0（没有外边距）到 mt-5（最大外边距）不等。

类a:这是自定义的样式，用于控制字体大小。在文件 “E:\HTML_code\book_code\ch15\css\style.css” 中
相关代码如下：

.a{
    font-size: 22px;
}
.b{
    font-size: 20px;
}
.c h5{
    font-size: 20px;
}

在这里插入图片描述

04-`href="javascript:void(0);"`是什么意思？

<li class="nav-item mt-1 a">
	<a class="nav-link" href="javascript:void(0);">账户</a>
</li>

请问：其中的href="javascript:void(0);"是什么意思？

在提供的Bootstrap代码中，href="javascript:void(0);"是一个在HTML中常见的用法，通常用于创建一个不执行任何实际操作的超链接（anchor）。

href 是HTML中超链接元素 <a> 的属性，它定义了链接目标的URL。正常情况下，这将是指向一个网页或其他资源的URL。但当 href 的值为 "javascript:void(0);" 时，它实际上是一种JavaScript伪链接。
javascript:void(0); 是一个JavaScript表达式，它执行一个空操作并返回 undefined。这是一种常见的技巧，用于创建一个点击链接时不执行任何跳转或操作的超链接，通常用于一些特定的交互或事件处理需求。

这种做法通常用于防止页面跳转，但允许你附加JavaScript事件处理程序，以便在链接被点击时执行特定的JavaScript代码。在您提供的代码中，点击"账户"链接将不导致浏览器跳转到新页面，而是执行与该链接关联的JavaScript代码（如果有的话）。这可以用于触发模态框、下拉菜单或其他用户界面交互元素的显示或隐藏等操作。

总结：说白了，就是预留一个 javascript 脚本的操作在这里，以便将来添加 javascript 操作。

05-类font-menu是什么样式？

这是自定义的一个类，定义代码如下：

.font-menu{
    font-size: 1.3rem;
}

06-类margin1是什么样式？

这是自定义的一个类，定义代码如下：

@media (min-width: 992px){
    .left {
        position: fixed;
        top: 0;
        left: 0;
    }
    .right{
        margin-left:25% ;
    }
    .margin1{
        margin-top: 40vh;
    }

提问： 40vh是什么意思？
答：“vh” 是 CSS 中的一个长度单位，它表示视窗（viewport）的高度的百分比。具体来说，1vh 等于视窗高度的1%。这个单位通常用于响应式设计，以使元素的大小或位置相对于视窗的高度进行调整。在你提供的代码中，“margin-top: 40vh;” 表示元素的上外边距（margin-top）设置为视窗高度的 40%。这将使元素在视窗中垂直居中，距离视窗顶部的距离为视窗高度的 40%。

07-类d-none是什么样式？

08-类d-sm-block是什么样式？

Bootstrap中的d-sm-block类是用于控制元素在特定屏幕大小（viewport width）上显示为块级元素（block element）的类。这类用于实现响应式设计，允许你在不同屏幕尺寸上控制元素的可见性和布局。

具体来说，d-sm-block类的作用是使元素在小型（small）屏幕尺寸上显示为块级元素，这意味着元素会在自己的行上占据整个可用宽度，换句话说，元素会从上到下垂直排列，而不是水平并排排列。

这种类的结构通常用于响应式设计，以适应不同大小的屏幕，使内容在小屏幕上更容易阅读和浏览。

示例：

<div class="d-sm-block">这个元素在小型屏幕上显示为块级元素，垂直排列。</div>

在上述示例中，元素在小型屏幕上将显示为块级元素，占据整个可用宽度，而在较大屏幕上则可能显示为行内元素，水平排列。

通过结合使用不同的d-*-block和d-*-none类，你可以根据不同的屏幕尺寸来控制元素的可见性和布局，以创建响应式的页面布局，提供更好的用户体验。

09-类card-link是什么样式？

<a href="javascritp:void(0);" class="card-link btn  rounded-pill text-success a"><i class="fa fa-user-circle"></i>&nbsp;登&nbsp;录</a>

在Bootstrap中无类card-link，在自定义样式中也无类card-link。用F12进入调试模式，也没发现这个类。

10-类rounded-pill是什么样式？

在Bootstrap中，rounded-pill 是一个用于设置元素圆角边框的类，通常用于创建圆形或椭圆形的元素，比如按钮或图像。它是Bootstrap 4和Bootstrap 5的一部分，用于改变元素的外观。

rounded-pill 类将元素的边框设置为圆形，使其看起来像一个椭圆或圆形的形状，而不是传统的矩形。这可用于创建视觉上吸引人的按钮、徽章、标签或其他元素。

以下是如何在HTML中使用rounded-pill类的示例：

<button class="btn btn-primary rounded-pill">圆形按钮</button>

在这个示例中，rounded-pill 类被应用于一个按钮元素，使按钮的边框变为圆形，从而呈现出圆形按钮的外观。

请注意，rounded-pill 是Bootstrap的一个辅助类，用于快速设置元素的外观，但你可以进一步自定义这些边框样式，通过CSS来实现更精细的控制。

11-template1 和 template2是如何实现切换的？

template1和template2之间的切换是通过d-none类来实现的。d-none类是Bootstrap提供的一个用于隐藏元素的类。

 <div id="template2" class="d-none">

具体来说，template2元素具有d-none类，这使得它一开始是隐藏的。当需要切换到template2时，相关的组件，比如这里的导航组件，会移除d-none类，使其可见。类似地，要切换回template1，只需相关组件重新添加d-none类。

12-类clearfix是什么作用？为什么要清除浮动？

<div class="col-12 col-lg-9 right p-0 clearfix">

Bootstrap的类clearfix是用来解决浮动元素在容器内部导致高度塌陷的问题的一种解决方案。在网页开发中，经常会使用浮动（float）来布局元素，但浮动的元素可能会让其父容器无法正常计算高度，从而导致容器无法包含浮动元素的问题。clearfix类可以用来清除这些浮动，确保父容器正确地包裹其内部的浮动元素。

通常，您会将clearfix类应用于父容器，以确保它包含了其中的浮动元素。这可以通过将clearfix类添加到父容器的HTML元素上来实现，或者您可以使用内联样式。

以下是一个示例，演示如何在Bootstrap中使用clearfix类：

<div class="container clearfix">
  <div class="float-left">浮动元素 1</div>
  <div class="float-left">浮动元素 2</div>
</div>

那么什么叫高度塌陷的问题呢？请大家看下面这篇博文：
https://blog.csdn.net/xiagh/article/details/53356158

其实现原理是什么呢？请大家看下面这篇博文：
https://blog.csdn.net/qq_36538012/article/details/133946031

13-类carousel slide是什么效果？

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

Bootstrap中有一个类叫做"carousel"，用于创建轮播（carousel）组件。这类是Bootstrap的Carousel组件的核心类，用于创建轮播图像、内容和幻灯片效果。

要创建一个轮播，你通常需要以下步骤：

包含必要的Bootstrap CSS和JavaScript文件。
创建一个具有.carousel类的HTML元素，通常是一个<div>元素。
在轮播元素内部，创建包含轮播项的幻灯片（slides），通常是<div>元素，它们应该具有.carousel-item类。
在每个轮播项内部，添加图像、文本或其他内容。
使用导航控件（如前进和后退按钮）以及指示器（表示当前轮播项的小圆点）来导航轮播。

以下是一个简单的Bootstrap轮播示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap Carousel Example</title>
  <!-- 引入Bootstrap的CSS和JavaScript文件 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 轮播指示器 -->
  <ul class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ul>
  
  <!-- 轮播项目 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
  
  <!-- 左右导航按钮 -->
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</body>
</html>

这个示例中，carousel类用于创建轮播元素，carousel-item类用于定义轮播项。通过使用Bootstrap的CSS和JavaScript，你可以实现具有轮播效果的图像或内容展示。

14-类rounded是什么效果？

<div class="bg-light p-4 list-border rounded">

在Bootstrap中，rounded 是一个用于添加圆角边框效果的类。这个类可以应用于各种元素，如按钮、图像、卡片等，以使它们的边框具有圆角效果，使元素看起来更加柔和和现代。

rounded 类有多个变体，你可以根据需要选择其中之一：

rounded：这是基本的圆角类，会在元素的所有四个角上添加相同程度的圆角。
rounded-top：这个类将圆角效果应用在元素的顶部两个角上，而底部的两个角则保持直角。
rounded-right、rounded-bottom、rounded-left：这些类分别将圆角效果应用在元素的右上角、右下角、左下角。它们分别只作用于一个角，而其他角仍然保持直角。
rounded-circle：这个类将元素变成一个圆形，通常用于图像。
rounded-pill：这个类将元素变成一个椭圆形，通常用于按钮，使其具有椭圆形的外观。
rounded-0：这个类会移除所有圆角效果，使元素的边角都变成直角。

以下是一些示例：

<button class="btn btn-primary rounded">圆角按钮</button>
<img src="example.jpg" class="img-fluid rounded-circle" alt="圆形图像">
<div class="card rounded-top">
  <!-- 卡片内容 -->
</div>