Bootstrap4响应式布局之栅格系统

更新时间:2023-05-05 17:39:19 阅读: 评论:0

Bootstrap4响应式布局之栅格系统
前⾯说了Bootstrap4的下载和简单使⽤,现在我们接着往下学习,Bootstrap4的响应式布局主要依靠栅格系统来实现的。⾯⽼K先来讲解⼀下Bootstrap4的栅格系统,让你能够更快的了解Bootstrap4.(PS:更详细的介绍请访问原)
Bootstrap4栅格系统
栅格系统是基于⼀个12列、有5种响应尺⼨(对应不同的屏幕)的布局。Bootstrap4栅格系统共有五个类:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或⼤于 576px
.col-md- 桌⾯显⽰器 - 屏幕宽度等于或⼤于 768px)
.col-lg- ⼤桌⾯显⽰器 - 屏幕宽度等于或⼤于 992px)
.col-xl- 超⼤桌⾯显⽰器 - 屏幕宽度等于或⼤于 1200px)
这些类的意思通俗点说就是,当你同时使⽤这些类的时候,它会根据你的屏幕⼤⼩来使相应的类⽣效。
下⾯我们再来看⼀下,这些类是怎么使⽤的
<div class="row">
<div class="col-9">这个div中放置轮播图⽚,并且它占9列</div>
<div class="col-3">这个div中放置排⾏榜,并且它占3列</div>
</div>
我们需要把col类放到row类下,并且同⼀⾏中的数字相加为12,也就是上⾯代码中的col类,下⾯是⼤致效果图
最后在补充⼀点,栅格系统必须放在container容器类下,也就是说上⾯的代码外⾯还要再嵌套⼀层<div>,就是
<div class="container"></div>
接下来我们来看Bootstrap4栅格系统另⼀种使⽤⽅法:
下⾯这也是⽤栅格系统做的响应式布局,这是屏幕分辨率符合.col-md- 桌⾯显⽰器 - 屏幕宽度等于或⼤于 768px)时的布局情况
下⾯是屏幕分辨率符合.col-sm- 平板 - 屏幕宽度等于或⼤于 576px时的布局。这时我们可以看到电影列表从⼀⾏6个变为了⼀⾏4个,也就是说它根据屏幕⼤⼩⾃动排列变化了这就是响应式。
下⾯我们看⼀下⼤致的布局代码
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3">这个div中放置要显⽰的各个电影
</div>
</div>
</div>
相信⼤家都能从这简单的代码中抓到重点。没错那就是col-md-2和col-sm-3类,我们前⾯说过栅格系统分为12列,也就是说⼀⾏会有12列,col-md-2的意思时每个电影图占据2个列,也就是说要满⾜⼀⾏12列,就需要⼀⾏出现6个电影图,如上图确实是出现了六个电影图;col-sm-3类同理,4个电影图,3*4=12。好了,栅格系统暂时先介绍到这了,有什么不懂的可以给⽼K留⾔哦。

本文发布于:2023-05-05 17:39:19,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/858041.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

上一篇:电放的含义
标签:系统   栅格   电影   屏幕   布局   响应   等于
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图