bootstrap4 p-_一起来学习Bootstrap4!(下)
把之前的坑填完。。。点这里 是前情回顾,主要介绍了如何开始一个Bootstrap页面,怎么加一个导航栏,一个醒目的大标题,和一个表单组件,如果都没有问题就继续看下面的内容
iPend:一起来学习Bootstrap4!(上)zhuanlan.zhihu.com背景图片
我们给Jumbotron加上背景图片,让他更醒目,还是在css中写下面的代码
.
- background-image 背景图片的内容来源
- background-size 选cover的意思是图片的横向100%展现出来,然后在纵向做剪切
- background-position 选center就是让图片居中,因为水平方向会完全展示,这里center的意思就是不要在上或在下
但这些和bootstrap都没有啥关系,都是css的设置。。
Card
卡片也是一个非常使用的组件,用来呈现长得差不多的一组数据,比如网店的商品啊,每一件商品就做成一个卡片,卡片里可以有一张商品的图片,再附上一些说明文字,还有加入购物车啊加入心愿单啊之类的按钮
bootstrap的一个神奇之处就是可以适配不同的设备,比如在大屏幕的电脑上,这些卡片就可以。。比如每行排4个,稍稍小一点的屏幕就让他每行放2个,原先的一行就分两行显示了,如果是手机的话,因为手机是窄长型的,所以比起横向的排列,更适合垂直的布局,所以在手机上就做成每行一个,也就是做成一个上下划划划的列表样式,这些满足不同场景的变化的需要都可以用bootstrap的grid做到,在真正开始grid布局之前,先做一个卡片作为一个基本的元素
<
上面的代码可以完成一个很基本的卡片,卡片分成上下两部分,上半部是一张图片,他的类是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个,当随着浏览器宽度缩小到m码时,卡片宽度设置为4,这样就变成3个一行的排列了
按照这样的思想,修改card部分的代码如下
<
这里的做法是先做一个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像这样
<
比如,mb-5就表示下边距为5,这里是为了划到底部以后,最后一行卡片仍和底部保持一些距离,再比如mt-3就是每张卡片的上边距为3,让卡片和上一行卡片或者输入框保持3的距离(同时这里删除了之前模板里的style="width: 18rem;",卡片就没有那么大了。。)
如法炮制,我们给之前做好的表单也加上边距和grid,是他在手机上垂直排列,在电脑上水平排列
<
- col-7 col-sm-3就是在小屏的时候占7/12,在稍大了之后就只占1/4了
- my-2 my-sm-3与之对应的小屏时上下的间距为2,在稍大了之后,变成了一行后,上下间距扩大到3
然后在表单和卡片之间加一道分割线,其实就是一个底边的边框,在bootstrap中底框是这样加的
<
Flex布局
这里再提一提Flex,他可以和之前提到的grid结合使用,效果更佳,在默认状态下row中的每个col是从左到右依次排列的,也就是靠左排列,先填满左边的空位,如果想要居中显示,可以使用justify-content-center,这里的居中是水平居中,因为row中的col都是水平排列的,在垂直方向(也就是非排列方向,这个意识在Flex中很重要)也可调节,align-items-stretch可以在垂直方向把每一列拉伸为同样高度,这就保证卡片不会因内容的多少而大小层次不齐
<
小图标
做到这里基本上已经大功告成了,最后来一个小彩蛋,加一个图标在标题栏上,Font Awesome是一个很有名的图标网站,里面有海量的图标可供使用,提前注册一个账号,就可以得到一个专属自己的资源链接,把他加入到页面头部中,像这样
<
或者是使用外部的CDN也可以,像这样(好像不太好使了。。最好还是自己注册一个吧)
<
然后在网站里找一个喜欢的图标,把他的代码复制下来,粘贴在需要的地方,比如这个
<
这样就大功告成了。。最终效果应该是和文章开头展示的是一样的
总结!
用了两篇文章的篇幅也只是粗略的介绍了一下bootstrap的一些特色,还有一些css的小trick,但还有更多有意思的内容值得继续发掘,关于bootstrap的,这篇文章提到过的,或是还没有涉及到的,都建议去bootstrap官网(链接在下方)多看看,bootstrap并不难,相信用不了多少时间,不仅自己可以做出漂亮的网页,别人用bootstrap写的网页代码也能够轻松看懂了,就酱