bootstrap4使得div居中_一起来学习Bootstrap4！（下）

把之前的坑填完。。。点这里 是前情回顾，主要介绍了如何开始一个Bootstrap页面，怎么加一个导航栏，一个醒目的大标题，和一个表单组件，如果都没有问题就继续看下面的内容

iPend：一起来学习Bootstrap4！（上）​zhuanlan.zhihu.com

背景图片

我们给Jumbotron加上背景图片，让他更醒目，还是在css中写下面的代码

.jumbotron {
    
 background-image: url("https://cdn.mos.cms.futurecdn.net/7jdAzhXDFrSdJr4Jmrm5i9.jpg");
 background-size: cover;
 background-position: center;
}

• background-image 背景图片的内容来源
• background-size 选cover的意思是图片的横向100%展现出来，然后在纵向做剪切
• background-position 选center就是让图片居中，因为水平方向会完全展示，这里center的意思就是不要在上或在下

但这些和bootstrap都没有啥关系，都是css的设置。。

Card

卡片也是一个非常使用的组件，用来呈现长得差不多的一组数据，比如网店的商品啊，每一件商品就做成一个卡片，卡片里可以有一张商品的图片，再附上一些说明文字，还有加入购物车啊加入心愿单啊之类的按钮

bootstrap的一个神奇之处就是可以适配不同的设备，比如在大屏幕的电脑上，这些卡片就可以。。比如每行排4个，稍稍小一点的屏幕就让他每行放2个，原先的一行就分两行显示了，如果是手机的话，因为手机是窄长型的，所以比起横向的排列，更适合垂直的布局，所以在手机上就做成每行一个，也就是做成一个上下划划划的列表样式，这些满足不同场景的变化的需要都可以用bootstrap的grid做到，在真正开始grid布局之前，先做一个卡片作为一个基本的元素

<div class="card" style="width: 18rem;">
 <img src="hunter.png" class="card-img-top" alt="...">
 <div class="card-body">
 <h5 class="card-title">Card title</h5>
 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 </div>
 </div>

<