其他
【每日一练】96—Bootstrap实现一个响应式卡片效果
作者 | 杨小爱
写在前面
今天这个练习是使用Bootstrap实现的一个卡片效果，关于这个卡片式的效果，我们在前面也分享过，主要是用纯CSS实现。
当然，用什么方式实现自己想要的效果，主要是根据自己当前开发项目的需求来，同一个效果，实现的方式有多种，选择合适的就可以了，因此，我们在练习时，需要多尝试不同的实现方式，这样可以为实际开发项目时，找到合适的方式。
现在，我们就来看一下今天这个练习的最终效果：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>【每日一练】96—Bootstrap实现一个响应式卡片效果</title> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css"></head><body> <section class="section-team"> <div class="container"> <div class="row justify-content-center text-center"> <div class="col-md-8 col-lg-6"> <div class="header-section"> <h3 class="small-title">技术团队</h3> <h2 class="title">欢迎关注我们的公众号【web前端开发】</h2> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-lg-4 col-xl-3"> <div class="single-person"> <div class="person-image"> <img src="images/01.png" alt=""> <span class="icon"> <i class=" fa fa-address-card"></i> </span> </div> <div class="person-info"> <h3 class="full-name">杨小爱</h3> <span class="speciality">Web开发设计师 & UI设计师</span> </div> </div> </div> <div class="col-sm-6 col-lg-4 col-xl-3"> <div class="single-person"> <div class="person-image"> <img src="images/02.png" alt=""> <span class="icon"> <i class=" fa fa-address-card"></i> </span> </div> <div class="person-info"> <h3 class="full-name">张三</h3> <span class="speciality">Web开发设计师 & UI设计师</span> </div> </div> </div> <div class="col-sm-6 col-lg-4 col-xl-3"> <div class="single-person"> <div class="person-image"> <img src="images/03.jpg" alt=""> <span class="icon"> <i class=" fa fa-address-card"></i> </span> </div> <div class="person-info"> <h3 class="full-name">李四</h3> <span class="speciality">Web开发设计师 & UI设计师</span> </div> </div> </div> <div class="col-sm-6 col-lg-4 col-xl-3"> <div class="single-person"> <div class="person-image"> <img src="images/04.jpg" alt=""> <span class="icon"> <i class=" fa fa-address-card"></i> </span> </div> <div class="person-info"> <h3 class="full-name">赵六</h3> <span class="speciality">Web开发设计师 & UI设计师</span> </div> </div> </div> </div> </div> </section></body></html>p,a,h1,h2,h3,h4 { margin: 0; padding: 0;}
.section-team { font-family: "Poppins", sans-serif; padding: 80px 0;}
.section-team .header-section { margin-bottom: 50px;}
.section-team .header-section .small-title { margin-bottom: 25px; font-size: 16px; font-weight: 500; color: #3e64ff;}
.section-team .header-section .title { font-weight: 700; font-size: 45px;}
.section-team .single-person { margin-top: 30px; padding: 30px; background-color: #f6f9ff; border-radius: 5px;}
.section-team .single-person:hover { background: linear-gradient(to right, #016cec, #00b5f7);}
.section-team .single-person .person-image { position: relative; margin-bottom: 50px; border-radius: 50%; border: 4px dashed transparent; transition: padding .3s;}
.section-team .single-person:hover .person-image { padding: 12px; border: 4px dashed #fff;}
.section-team .single-person .person-image img { width: 100%; border-radius: 50%;}
.section-team .single-person .person-image .icon { position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; background: linear-gradient(to right, #016cec, #00b5f7); color: #fff; border-radius: 50%; font-size: 24px;}
.section-team .single-person:hover .person-image .icon { background: none; background-color: #fff; color: #016cec;}
.section-team .single-person .person-info .full-name { margin-bottom: 10px; font-size: 28px; font-weight: 700;}
.section-team .single-person .person-info .speciality { text-transform: uppercase; font-size: 14px; color: #016cec;}
.section-team .single-person:hover .full-name,.section-team .single-person:hover .speciality { color: #fff;}写在最后
以上就是我们今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号