Bootstrap4响应式布局之栅格系统

Donald 发布于2019-04-23 13:11 / 2003人阅读

摘要：前面说了的下载和简单使用，现在我们接着往下学习，的响应式布局主要依靠栅格系统来实现的。好了，栅格系统暂时先介绍到这了，有什么不懂的可以给老留言哦。

前面说了Bootstrap4的下载和简单使用，现在我们接着往下学习，Bootstrap4的响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统，让你能够更快的了解Bootstrap4.（PS：更详细的介绍请访问原K先生的博客）

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 class="container">div>

接下来我们来看Bootstrap4栅格系统另一种使用方法：

下面这也是用栅格系统做的响应式布局，这是屏幕分辨率符合.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)时的布局情况

下面是屏幕分辨率符合.col-sm- 平板 - 屏幕宽度等于或大于 576px时的布局。这时我们可以看到电影列表从一行6个变为了一行4个，也就是说它根据屏幕大小自动排列变化了这就是响应式。

下面我们看一下大致的布局代码

class="container">
  class="row">
    class="col-md-2 col-sm-3">这个div中放置要显示的各个电影

相信大家都能从这简单的代码中抓到重点。没错那就是col-md-2和col-sm-3类，我们前面说过栅格系统分为12列，也就是说一行会有12列，col-md-2的意思时每个电影图占据2个列，也就是说要满足一行12列，就需要一行出现6个电影图，如上图确实是出现了六个电影图；col-sm-3类同理，4个电影图，3*4=12。好了，栅格系统暂时先介绍到这了，有什么不懂的可以给老K留言哦。

云服务器 GPU云服务器响应式布局 asp如何响应式布局 html响应式导布局响应式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1536.html

bootstrap4源码阅读体会

摘要：通过阅读发现了不少知识的盲点和误解，对有了更深入的理解。总结几点印象较深的体会，分享给大家。但是通过阅读源码改变了这种认识模块化很简单灵活，这是其优点，同时也是一个缺点。欢迎到个人博客参观: 点击这里 bootstrap已经使用了很长时间，但是从来没有好好研究过其设计结构，春节期间闲来无事就阅读了源码。通过阅读发现了不少知识的盲点和误解，对css有了更深入的理解。总结几点印象较深的体...

incredible 2019-08-30 12:45 评论0 收藏0
有关css栅格系统的故事

摘要：下面，本文将介绍几个比较有代表性的栅格样式库，讲述它们的简要原理和用法正确的打开方式。虽然栅格样式库很棒，但它们并不是响应式设计的全部。但在这个过程中，理解各类栅格样式库的工作原理，正确使用它们，才能做出稳定可靠的页面结构。说到栅格系统（grid system），你也许见过这样的概念： showImg(https://segmentfault.com/img/bVmQnO); 像这样...

legendaryedu 2019-08-28 18:12 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
深入新版BS4源码探索flex和工程化sass奥秘

摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。这篇文章会带你深入Bootstrap最...

evin2016 2019-08-21 11:30 评论0 收藏0
深入新版BS4源码探索flex和工程化sass奥秘

摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。这篇文章会带你深入Bootstrap最...

silencezwm 2019-08-30 15:52 评论0 收藏0