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的变化