直接使用代码
图片素材
点击下载本素材所包含的图片，js文件
css代码
<style>
/*首页-行板块*/
.index-row{padding:50px 0;}
.index-row .main-title{text-align:center;margin-bottom:30px;}
/*首页-客户的鼓励*/
/*手机超小屏幕下的单独样式 xs < 768px */
@media (max-width:767px){.popover-content{margin:5% 0 0 !important;}
}
.our-example{background-color:#f5f5f5;}
.our-example-box{padding-top:30px;padding-bottom:30px;}
.our-example-popover{height:190px;padding-bottom:0px;}
.our-example-popover .popover{height:160px;width:100%;max-width:100%;background-color:#f5f5f5;border-radius:4px;border:1px solid #34a263;box-shadow:none;z-index:10;position:relative;display:block;float:left;/*width:260px;*/
margin:0px;}
.popover.top>.arrow{border-top-color:#34a263;}
.popover.top>.arrow:after{border-top-color:#f5f5f5 !important;}
.popover-title-touxiang{width:100%;height:50px;position:absolute;top:-26px;margin:0;left:0;text-align:center;}
.popover-title-touxiang img{width:50px;height:50px;border-radius:100%;/*border:1px solid #34a263;*/
}
.popover-content{margin:9% 0 0;}
.popover-content-text{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;word-wrap:break-word;font-family:"SourceHanSansCN-Light","Lantinghei SC","Open Sans","Hiragino Sans GB","Microsoft YaHei","STHeiti-Light","WenQuanYi Micro Hei","Arial","SimSun","sans-serif";}
.popover-content-tag{position:absolute;font-size:12px;bottom:12px;width:91%;}
.popover-content-tag .bingzhong{float:left;background-color:#aaa;color:#fff;padding:.5% 3.5%;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"SourceHanSansCN-Light","Lantinghei SC","Open Sans","Hiragino Sans GB","Microsoft YaHei","STHeiti-Light","WenQuanYi Micro Hei","Arial","SimSun","sans-serif";}
.position-address{max-width:50%;float:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.position-icon{background-image:url(http://www.bootfastui.cn/img/2021/0905-4/position.png);background-repeat:no-repeat;background-size:10px 10px;width:10px;height:10px;float:left;margin-top:3px;margin-right:4px;}
.position-address span{color:#aaa;font-family:"SourceHanSansCN-Light","Lantinghei SC","Open Sans","Hiragino Sans GB","Microsoft YaHei","STHeiti-Light","WenQuanYi Micro Hei","Arial","SimSun","sans-serif";}
.glly-icon{background-image:url(http://www.bootfastui.cn/img/2021/0905-4/yhgl-icon.png);background-repeat:no-repeat;background-size:70px 70px;width:70px;height:70px;margin-left:auto;margin-right:auto;}
.ac-figure-icon{margin-left:auto;margin-right:auto;}
/*首页-客户的鼓励*/
</style>
HTML+JS代码
<!-- 客户的鼓励 -->
<section class="index-row our-example">
<div class="container">
<div class="row">
<div class="col-sm-12 main-title">
<h2 class="h1">客户的鼓励</h2>
<p class="line line-big"></p>
<h2>
<small>帮助您解决实际问题，顺利、及时地获得签证，是我们存在的根本价值。</small>
</h2>
</div>
<div class="col-sm-4 our-example-box">
<div class="our-example-popover">
<div class="popover top">
<div class="arrow"></div>
<h3 class="popover-title-touxiang">
<img src="http://www.bootfastui.cn/img/2021/0905-4/pingjia1.jpg">
</h3>
<div class="popover-content">
<p class="popover-content-text">
护照丢了，定了春节行程。11号补好护照约了13号面签，这速度简直惊人，所有的旅行社都说弄不了，来不及了，肯定没戏。多亏了你们，非常感谢！</p>
<div class="popover-content-tag">
<span class="bingzhong">B1商务签证</span>
<div class="position-address">
<figure class="position-icon"></figure>
<span>北京领事馆</span>
</div>
</div>
</div>
</div>
</div>
<figure class="glly-icon ac-figure-icon"></figure>
</div>
<div class="col-sm-4 our-example-box">
<div class="our-example-popover">
<div class="popover top">
<div class="arrow"></div>
<h3 class="popover-title-touxiang">
<img src="http://www.bootfastui.cn/img/2021/0905-4/pingjia2.jpg">
</h3>
<div class="popover-content">
<p class="popover-content-text">
因为我情况很特殊也很难办，白本加多次拒签。感谢你们为我做详细的分析与方案，这次签证终于过了！本来都做好心理准备再拒我就彻底放弃的。谢谢你们！</p>
<div class="popover-content-tag">
<span class="bingzhong">B2旅游签证</span>
<div class="position-address">
<figure class="position-icon"></figure>
<span>广州领事馆</span>
</div>
</div>
</div>
</div>
</div>
<figure class="glly-icon ac-figure-icon"></figure>
</div>
<div class="col-sm-4 our-example-box">
<div class="our-example-popover">
<div class="popover top">
<div class="arrow"></div>
<h3 class="popover-title-touxiang">
<img src="http://www.bootfastui.cn/img/2021/0905-4/pingjia3.jpg">
</h3>
<div class="popover-content">
<p class="popover-content-text">
同学推荐过来的，马上就要开学了，加上去年成绩不并理想。多亏你们帮我插队面签，分析面签问题，非常专业。现在签证已经拿到了，我会再介绍同学来。</p>
<div class="popover-content-tag">
<span class="bingzhong">F1留学签证</span>
<div class="position-address">
<figure class="position-icon"></figure>
<span>上海领事馆</span>
</div>
</div>
</div>
</div>
</div>
<figure class="glly-icon ac-figure-icon"></figure>
</div>
<div class="clearfix"></div>
</div>
</div>
</section>
<!-- 客户的鼓励 -->
