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>

上面的代码可以完成一个很基本的卡片，卡片分成上下两部分，上半部是一张图片，他的类是card-img-top，下半部是card-body，里面又有两个部件，card-title和card-text

一个卡片做成了，看上去没什么问题，我们复制一个，看他俩能不能很好的显示

很好，是不是发现第二个显示在了第一个卡片的下面，而明明右边还有很大的空间，怎么让他们并排排列呢，flex是一个办法，此外bootstrap还提供了很好的工具...

Grid

grid，顾名思义就是网格，bootstrap把页面布局横向划分成12等分，对不同的组件指定他的宽度占12份中的多少份，比如6就代表占6/12宽度，也就是一半，同理4就是1/3，4就是1/3等等，同时bootstrap还把浏览器的宽度像衣服一样分成了小小码xs，小码s，中码m，大码l和特大码xl，分别用（缺省），sm，md，lg，xl来表示（表示方式和衣服的不要弄混了。。），根据不同码的浏览器宽度，可以给组件分配不同的12等分比例，换句话说就是组件的宽度可以随着浏览器的宽度变化而变化，比如xl码浏览器下卡片宽度为2，一行就可以排6个，当随着浏览器宽度缩小到ｍ码时，卡片宽度设置为4，这样就变成3个一行的排列了

按照这样的思想，修改card部分的代码如下

<div class="container">
  <div class="row">
    <div class="col-7 col-sm-6 col-md-4 col-lg-3">
      <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>
    </div>
    <div class="col-7 col-sm-6 col-md-4 col-lg-3">
      <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>
    </div>
  </div>
</div>

这里的做法是先做一个row，这个row被划分成了12等分，在这其中有两列col（卡片放进col里），col的宽度应浏览器的宽度而变，当浏览器最小的时候，每个col占row的7/12（一行只能放一个col，第二个放不下），随着浏览器逐渐阔大为sm，md，lg时，宽度相应变为6/12（1/2），4/12（1/3）和3/12（1/4），相应的每行也就分别会显示1，2，3，4列（张卡片）了

复制多张卡片就会发现，当一行填满后，会自动换到下一行继续排列，缩小浏览器宽度，一行所能容纳的卡片数也会减少，被挤下去的卡片会自动重新布局，这就是使用grid的便利之处，试想一下，如果使用table，我们将不得不为各种宽度手动设置卡片布局

间距 margin和padding

做到这里会发现一个问题，卡片与卡片之间，以及卡片和上面的输入框之间没有任何空袭，看上去很拥挤，需要调整他们的边距margin和padding，再bootstrap中margin和padding的调整也可以通过设置不同的class来实现，m表示margin，p表示padding，上下左右分别用t，b，l，r（就是top，bottom，left和right的首字母）表示，距离的大小用数字0-5表示，0就是没有，5则是最大，这里的数字是一种程度表示而已，和像素px或者比例rem都没有关系

调节卡片的margin和padding像这样

<div class="container mb-5">
  <div class="row">
    <div class="col-7 col-sm-6 col-md-4 col-lg-3">
      <div class="card mt-3">
        <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>
    </div>
    <div class="col-7 col-sm-6 col-md-4 col-lg-3">
      <div class="card mt-3">
      ...

比如，mb-5就表示下边距为5，这里是为了划到底部以后，最后一行卡片仍和底部保持一些距离，再比如mt-3就是每张卡片的上边距为3，让卡片和上一行卡片或者输入框保持3的距离（同时这里删除了之前模板里的style="width: 18rem;"，卡片就没有那么大了。。）

如法炮制，我们给之前做好的表单也加上边距和grid，是他在手机上垂直排列，在电脑上水平排列

<form class="container">
 <p class="lead">Please select ATTACK HEALTH and COST of the cards you want to find.</p>
 <div class="row">
 <div class="col-7 col-sm-3">
 <input type="text" class="form-control my-2 my-sm-3" placeholder="Attack">
 </div>
 <div class="col-7 col-sm-3">
 <input type="text" class="form-control my-2 my-sm-3" placeholder="Health">
 </div>
 <div class="col-7 col-sm-3">
 <input type="text" class="form-control my-2 my-sm-3" placeholder="Cost">
 </div>
 <div class="col-7 col-sm-auto">
 <button type="button" class="btn btn-success my-2 my-sm-3">Search</button>
 </div>
 </div>
 </form>

• col-7 col-sm-3就是在小屏的时候占7/12，在稍大了之后就只占1/4了
• my-2 my-sm-3与之对应的小屏时上下的间距为2，在稍大了之后，变成了一行后，上下间距扩大到3

然后在表单和卡片之间加一道分割线，其实就是一个底边的边框，在bootstrap中底框是这样加的

<div class="container border-bottom pb-3 mb-5">

Flex布局

这里再提一提Flex，他可以和之前提到的grid结合使用，效果更佳，在默认状态下row中的每个col是从左到右依次排列的，也就是靠左排列，先填满左边的空位，如果想要居中显示，可以使用justify-content-center，这里的居中是水平居中，因为row中的col都是水平排列的，在垂直方向（也就是非排列方向，这个意识在Flex中很重要）也可调节，align-items-stretch可以在垂直方向把每一列拉伸为同样高度，这就保证卡片不会因内容的多少而大小层次不齐

<div class="row justify-content-center">
  <div class="col-7 col-sm-6 col-md-4 col-lg-3 d-flex align-items-stretch">
    <div class="card mt-3">
      <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>
  </div>
  ...

小图标

做到这里基本上已经大功告成了，最后来一个小彩蛋，加一个图标在标题栏上，Font Awesome是一个很有名的图标网站，里面有海量的图标可供使用，提前注册一个账号，就可以得到一个专属自己的资源链接，把他加入到页面头部中，像这样

<script src="https://kit.fontawesome.com/abc123.js"></script>

或者是使用外部的CDN也可以，像这样（好像不太好使了。。最好还是自己注册一个吧）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

然后在网站里找一个喜欢的图标，把他的代码复制下来，粘贴在需要的地方，比如这个

<i class="fas fa-dragon"></i>

这样就大功告成了。。最终效果应该是和文章开头展示的是一样的

电脑版的样子（输入框是水平排列的）

总结！

用了两篇文章的篇幅也只是粗略的介绍了一下bootstrap的一些特色，还有一些css的小trick，但还有更多有意思的内容值得继续发掘，关于bootstrap的，这篇文章提到过的，或是还没有涉及到的，都建议去bootstrap官网（链接在下方）多看看，bootstrap并不难，相信用不了多少时间，不仅自己可以做出漂亮的网页，别人用bootstrap写的网页代码也能够轻松看懂了，就酱

参考资料

https://getbootstrap.com/docs/4.3/layout/grid/​getbootstrap.comFont Awesome​fontawesome.com