Bootstrap4速成笔记三 Card Carousel

<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速成笔记三 Card Carousel相关推荐

Bootstrap4速成笔记二 Alert,Badge,Breadcrumb,Button
目录组件准备工作 Alert提示组件 Badge标签组件 Breadcrumb导航路径组件 Button按钮组件组件准备工作在编辑器中下载bootstrap4组件,我是用的是sublime ...
Bootstrap4速成笔记五 Listgroup,Modal,Nav,NavBar
目录 Listgroup列表群组组件 Modal对话框组件 Nav导航与NavBar导航栏组件 Listgroup列表群组组件使用list-group可以创建一个列表群组使用方法:可以使用无序列表 ...
C语言速成笔记 —— 考点详解知识点图解
C语言速成笔记文章目录 C语言速成笔记第一章分置于循环一.选择结构 1. if 语句 2. switch 语句 3. 条件操作符二.循环结构 1. while 循环 2. do while ...
NCR3网络技术速成笔记（1）
NCR3网络技术速成笔记(1) 计算机网络的分类局域网(LAN): 特点:有限的地理范围:高数据传输速率,低误码率:一般属于单位,易于建立和维护扩展. 介质访问划分:共享式(如集线器,共享通道),交 ...
来了来了，阿里p9整理的Netty速成笔记，应有尽有
又逢"金九银十",年轻的毕业生们满怀希望与忐忑,去寻找.竞争一个工作机会.已经在职的开发同学,也想通过社会招聘或者内推的时机争取到更好的待遇.更大的平台. 然而,面试人群众多,技术 ...
登峰造极，阿里高工手码分布式系统速成笔记，千万别害怕迈出第一步
如何设计出一个分布式系统? 想要真正地设计出分布式系统所面临的挑战肯定会是很大的,并不会像喝水一样简单,其中需要考虑的主要有以下几个方面: 如何将系统拆分为子系统? 如何规划子系统间的通信?如何考虑通 ...
J2EE学习笔记三：EJB基础概念和知识收藏
J2EE学习笔记三:EJB基础概念和知识收藏 EJB正是J2EE的旗舰技术,因此俺直接跳到这一章来了,前面的几章都是讲Servlet和JSP以及JDBC的,俺都懂一些.那么EJB和通常我们所说的Ja ...
tensorflow学习笔记(三十二):conv2d_transpose (解卷积)
tensorflow学习笔记(三十二):conv2d_transpose ("解卷积") deconv解卷积,实际是叫做conv_transpose, conv_transpose ...
Ethernet/IP 学习笔记三
Ethernet/IP 学习笔记三原文为硕士论文: 工业以太网Ethernet/IP扫描器的研发知网网址: http://kns.cnki.net/KCMS/detail/detail.aspx? ...

Bootstrap4速成笔记三 Card Carousel

目录

Card卡片组件

Carousel循环显示组件

Bootstrap4速成笔记三 Card Carousel相关推荐

最新文章

热门文章