Bootstrap4速成笔记三 Card Carousel

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