Bootstrap4速成笔记三 Card Carousel

最新推荐文章于 2022-06-05 00:43:36 发布
最新推荐文章于 2022-06-05 00:43:36 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 前端 文章标签： css js javascript bootstrap html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yeweij226/article/details/104429342
版权

目录

Card卡片组件

一个卡片可以由卡片头，卡片体，卡片尾组成，使用卡片的方法仍然是设置相关类进行操作；首先设置一个div，类为"card"；

如若想要文本居中可以加入情景类"text-center/right/left"进行设置，然后下开几个div；

我这里是标准的三段式，第一个div设置类为"card-header"，第二个设置为"card-body"，第三个为"card-footer"，然后设置内部的相关效果即可；

我这里设置头部内容为Card，尾部无内容，卡片体中有"card-title"/“card-link”/"card-text"等相关内容可以进行设置

<div class="component demo">
        <div class="card text-center">
            <div class="card-header">
                <h4>Card</h4>
            </div>
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">description</p>
                <a href="#" class="card-link">Action1</a>
                <a href="#" class="card-link">Action2</a>
            </div>
            <div class="card-footer">footer</div>
        </div>
    </div>

在这里插入图片描述
如果需要设置头部尾部为图片内容可以直接将div进行一个替换，头部图片使用"card-img-top"，尾部图片"card-img-bottom"，头部图片的上边两角为圆角，尾部图片的下边两角为圆角

  <div class="component demo">
        <div class="card text-center">
            <img src="lib/img/1.jpg" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">description</p>
                <a href="#" class="card-link">Action1</a>
                <a href="#" class="card-link">Action2</a>
            </div>
            <img src="lib/img/1.jpg" class="card-img-bottom">
        </div>
    </div>

在这里插入图片描述
如想使用悬浮效果，可以将图片class设置"card-img"，这样图片的四个角都会有圆角效果；

然后将原先body的类改成"card-img-overlay",可以将文字内容在图片上悬浮显示
在这里插入图片描述
Card组件没有固定的宽度，因此其宽度会随着浏览器中容器的宽度变化而变化

如果需要将不同卡片进行统一管理与宽度一致，可以将多张卡片放到同一个卡片组中

 <div class="component demo">
        <div class="card-group">
            <!-- 卡片一 -->
            <div class="card text-center">
                <img src="lib/img/1.jpg" class="card-img">
                <div class="card-img-overlay">
                    <h4 class="card-title">Title</h4>
                    <p class="card-text">description</p>
                    <a href="#" class="card-link">Action1</a>
                    <a href="#" class="card-link">Action2</a>
                </div>
            </div>
            <!-- 卡片二 -->
            <div class="card text-center">
                <img src="lib/img/1.jpg" class="card-img">
                <div class="card-img-overlay">
                    <h4 class="card-title">Title</h4>
                    <p class="card-text">description</p>
                    <a href="#" class="card-link">Action1</a>
                    <a href="#" class="card-link">Action2</a>
                </div>
            </div>
        </div>
    </div>

在这里插入图片描述
修改一个卡片的内容，会发现其不会改变两张卡片宽度的一致性
在这里插入图片描述
当前卡片是相邻且连接起来的，如果想让其中间有一定的间隙，可以将"card-group"换成"card-deck"
在这里插入图片描述
将"card-group"换成"card-columns"，可以将横向分布的卡片变成纵向分布，再适当修改内容，可以将卡片变成瀑布流显示
在这里插入图片描述

Carousel循环显示组件

Carousel可以通过设置实现多图循环播放的功能，控件还是十分受欢迎的

使用方法：
首先设置最外层的div，其中class为"carousel slide"，slide是我自定义的图片平滑切换的情景类；

然后在内部设置一个容器inner，创建div，class为"carousel-inner"

再设置循环播放的选项，每个选项外面是div，class是"carousel item"，内部是设置好的img，下面代码中class设置的d-block等于display:block;w-100等同于width:100%

总的来说就是最外面是carousel组件，向里走一层是inner，再往里走就是item

<div class="component demo">
        <div class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="lib/img/1.jpg">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="lib/img/2.jpg">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="lib/img/3.jpg">
                </div>
            </div>
        </div>
    </div>

在这里插入图片描述
这样就可以实现图片的自动循环播放

下面加入一些控制元素

首先将当前的carousel工程div的id设置成一个你自己喜欢的名字，我的是"carousel-demo"；

然后在和item同级的div下加入两个a标签，href链接设置成"#id"（例如我的就是#carousel-demo），其余设置见下面的代码，其中第一个的参数设置成prev，第二个的所有参数设置成next

<div class="carousel slide" id="carousel-demo" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="lib/img/1.jpg">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="lib/img/2.jpg">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="lib/img/3.jpg">
                </div>
                <!--左右切换按钮设置-->
                <a href="#carousel-demo" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span>
                </a>
                <a href="#carousel-demo" class="carousel-control-next" data-slide="next"><span class="carousel-control-next-icon"></span>
                </a>
            </div>

在这里插入图片描述
再设置一下导航栏

在和inner同等位置下加入一个ol有序列表，其中class为"carousel-indicators"，然后在ol下开与item数量相同的li，每个的data-target设置成"#id"（我的是#carousel-demo），data-slide-to设置成想要导航到的图片的顺序下标（默认从零开始）

整段代码

<div class="carousel slide" id="carousel-demo" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-demo" data-slide-to="1"></li>
                <li data-target="#carousel-demo" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="lib/img/1.jpg">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="lib/img/2.jpg">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="lib/img/3.jpg">
                </div>
                <a href="#carousel-demo" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span>
                </a>
                <a href="#carousel-demo" class="carousel-control-next" data-slide="next"><span class="carousel-control-next-icon"></span>
                </a>
            </div>
        </div>

效果
在这里插入图片描述
可以看到当前的图片切换的时候宽度不是均匀的，使用CSS进行设置

在carousel slide后加一句demo，然后在CSS文件中设置item高度为300px,img的最小高度与最大高度设置，图片平铺防止比例变化，

.carousel.demo .carousel-item{
	height: 300px;
}
.carousel.demo .carousel-item img{
	min-height: 300px;
	max-height: 400px;
	object-fit: cover;
}

这样就实现了宽度平均
在这里插入图片描述
最后设置一下循环时间和监听动作

首先，循环时间可以通过使用js文件或自定义参数进行设置，js文件可以使用carousel函数

$('.carousel').carousel({
		//轮播时间设置
		interval:1000
	})

自定义参数可以使用data-interval，效果和js设置一样

<div class="carousel slide demo" id="carousel-demo" data-ride="carousel" data-interval=1000>

除了轮换时间设置，其他自定义参数有
在这里插入图片描述
当图片轮换时与图片轮换完成时可以除法时间，在这里使用js进行设置

$('.carousel').on('slide.bs.carousel',function(event) {
		console.log('slide',`
			方向：${event.direction}
			从${event.from}
			到${event.to}`)
	});
	$('.carousel').on('slid.bs.carousel',function(event) {
		console.log('slid',`
			方向：${event.direction}
			从${event.from}
			到${event.to}`)
	});

注意右下角console的变化
在这里插入图片描述

退堂鼓一级演员
关注
专栏目录
bootstrap4-Carousel 轮播
qq_44563258的博客
05-17 848
开发工具与关键技术：Visual Studio 2015 作者：杨灵武 撰写时间：2019/05/17 1.这是一个循环滚动的幻灯片组件，可以使用文本、图象水平不间断滚动，如同旋转木马一般。 点击的id=“carouselIndicators"要和”#carouselIndicators"相对应 将 .active 样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正常运行（展现）。 下面...
4 Bootstrap4组件——卡片
weixin_45884768的博客
03-17 3301
4 Bootstrap4组件——卡片1 卡片内容1.1 卡片标题1.2卡片主体1.2.1 文本1.2.2 超链接1.3 图片1.4 列表组1.4.1 基本结构1.4.2 列表标题1.4.3 列表页眉页脚2 响应式卡片2.1 使用栅格系统2.2 使用全局样式2.3 自定义样式 .card卡片组件是BootStrap 4新增的一组重要样式，它是一个灵活的、可扩展的内容管理器，可以包含图片、列表、文本、...
bootstrap4--轮播、滚动监听
zxn200125的博客
12-23 1949
bootstrap4中的轮播与滚动监听介绍
vue 列表滑动_滑动式卡带传送带，可通过Vue查看列表
cuk5340的博客
07-30 528
vue 列表滑动 Vue卡轮播 (Vue Card Carousel) Sliding card carousel for list viewing. 滑动卡传送带，可用于查看列表。 *Please note this is in active development and subject to change until it is out of alpha versions. *请注意，...
Bootstrap 4 中文开发手册 Cards（卡）
极客神殿
09-05 813
Bootstrap 的卡片提供了一个灵活且可扩展的内容容器，包含多种变体和选项。 关于 一个卡片是一个灵活的，可扩展的内容容器。它包括页眉和页脚的选项，各种内容，上下文背景颜色以及强大的显示选项。 如果您熟悉 Bootstrap 3，卡片可以替换我们的旧面板、水井和缩略图。与这些组件类似的功能可作为卡片的修饰符类使用。 示例 卡片尽可能少的标记和样式，但仍然设法提供大量的控制和定制。使用 flexbox 构建，它们可以轻松对齐并与其他 Bootstrap 组件良好混合。 以下是具有混合内容和固定宽度的基本卡
Bootstrap学习笔记 轮播（Carousel）插件
12-12
在Bootstrap框架中，轮播（Carousel）插件是一个强大的功能，用于创建响应式的滑动内容展示，如图像、视频或任何其他元素。它为网站添加动态效果，提升了用户体验。让我们深入了解一下如何使用这个插件。 首先，...
react-bootstrap-carousel:React部分自举轮播
05-13
react-bootstrap-carousel 该项目支持使用构建的轮播组件。 安装 npm i --save react-bootstrap-carousel 入门 import ReactBootstrapCarousel from "react-bootstrap-carousel" ; import "bootstrap/dist/css/...
bootstrap4随书笔记
11-10
本笔记是作者经过一个月深入学习Bootstrap4后的成果，包括亲手敲打的代码、详细的索引和学习心得，还有相关的参考资料链接。 Bootstrap4的核心概念是网格系统，它基于12列的响应式布局，可以根据屏幕尺寸自动调整...
Bootstrap-4-Carousel-Template:Bootstrap 4 Carousel HTML5 CSS3模板
05-02
Bootstrap 4 Carousel HTML5 CSS3模板是一款基于最新版本Bootstrap框架的动态轮播组件模板，它结合了HTML5、CSS3以及JavaScript技术，为网站设计提供了高效、响应式的展示方案。这款模板尤其适合创建吸引人的首页...
bootstrap中获取当前的图片索引值
月夜游人的博客
09-21 1516
刚刚学习使用bootstrap的轮播效果，想通过对当前图片的判断展示不同的carousel-caption. $("#secondDiv").carousel("cycle"); var pastItem; $("#secondDiv").on("slide.bs.carousel",function(){ var pastItemob=$(this).find(".item.active
Carousel
xiaoxin888888的专栏
08-31 425
BootStrap笔记-卡片的使用
IT1995的博客
01-24 924
运行截图如下； 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ..
Bootstrap5 卡片讲解
qq_65552364的博客
06-05 2782
在 Bootstrap5 中，通过类 .card 与 .card-body 可以快速创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置，卡片采用 flexbox 构建，易于对齐，并可与其他 Bootstrap 组件很好地混合。卡片没有固定的起始宽度，因此它们会自然地填充其父元素的整个宽度。卡片支持各种内容，包括图像、文本、列表组、链接等 🚀卡片之二式：标题 在卡片的内容中我们可以通过类 .card-title 设置卡片的标题，通过类 .card-subtitle 设置卡片的字幕。如果将 ..
bootstrap4响应式轮播图详解
yufanhui的博客
06-19 1万+
在开发过程中，既要采用框架，又要使用响应式布局。而bootstrap正好帮我们解决了这个问题。采用bootstrap框架快速开发，达到快速开发响应式轮播图的目的。1.引入bootstrap框架 引入方式有两种：&lt;link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css"&...
【前端开发】bootstrap4常用组件
`雾博客
10-14 473
该.active级需要被添加到一个幻灯片否则转盘将不可见。还要确保id在.carousel可选控件上设置唯一的，尤其是当您在单个页面上使用多个轮播时。控制和指示元件必须具有一个data-target属性（或href相匹配的中的链接）id的的.carousel元件。因此，您可能需要使用其他实用程序或自定义样式来适当调整内容大小。虽然轮播支持上一个/下一个控件和指示器，但它们不是明确要求的。根据您的需要添加和自定义。用于指示当前页面在导航层级中的位置，并通过 CSS 为各导航条目之间自动添加分隔符。
20个最佳Bootstrap 4插件
代码教主
06-20 3166
Bootstrap完全开源并且免费使用，已成为桌面和移动开发最流行的前端框架之一。 采用移动优先的方法，该框架实质上迫使设计人员为小屏幕创建站点，然后从那里扩大设计规模。 Bootstrap 4是框架的最新版本，今天我们来看看CodeCanyon提供的20个最好的Bootstrap 4插件。 无论您是为WordPress主题编码还是为静态站点搜索表单或导航栏模板，CodeCanyon都为您...
Bootstrap 简单认识之Carousel组件
热门推荐
博客
03-02 1万+
Carousel（幻灯片）组件一、简介 往往用于首页轮流展示不同的图片，电商网站常见； 在IE8、9下没有图片滑动动画效果； 二、样式 下面给出的样式类并不完整从下面可以看出图片切换动画消耗的时间：/*from _carousel.scss*/ .carousel-item { /*...省略*/ @include transition($carousel-transitio
bootstrap 学习笔记 轮播（Carousel）插件
最新发布
06-12
好的，关于 Bootstrap 的轮播插件，以下是一些学习笔记： 1. 轮播插件是基于 JavaScript 实现的，所以需要在 HTML 文件中引入 jQuery 和 Bootstrap 的 JavaScript 文件。 2. 在 HTML 中创建轮播容器，可以使用 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值