前面说了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>,就是

<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留言哦。

Bootstrap4响应式布局之栅格系统的更多相关文章

  1. bootstrap第一天,响应式布局,栅格系统运用

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  2. 响应式框架Bootstrap栅格系统

    <!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8&qu ...

  3. Bootstrap响应式布局

    Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...

  4. pure响应式布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  6. 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板

    本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...

  7. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  8. bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  9. bootstrap 自适应和响应式布局的区别

    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...

随机推荐

  1. 上台阶问题(递归,DFS)

    题目 一共39层台阶.如果我每一步迈上1个台阶或者两个台阶,先迈左脚,再迈右脚,然后左右交换,最后一步迈右脚,也就是一共要走偶数步,那么,上完39级台阶,有多少种不同的方法? 思路 采用递归的思想,边 ...

  2. 【原创】Your Connection is not private

    用Chrome打开google等https网站时碰到问题: “your connection is not private”. 后来发现是跟GoAgent的安全证书有关系(我用XX.NETFQ) 解决 ...

  3. K-means算法的原理、优缺点及改进(转)

    文章内容转载自:http://blog.csdn.net/sinat_35512245/article/details/55051306                                ...

  4. Parallel Gradient Boosting Decision Trees

    本文转载自:链接 Highlights Three different methods for parallel gradient boosting decision trees. My algori ...

  5. Scala使用Akka模拟RPC机制代码

    上代码:  另一个版本(自己加注释):http://www.cnblogs.com/DreamDrive/p/6740440.html RemoteMessage.scala trait Remote ...

  6. linux free命令详解(一)

    一. 作用 free命令可以显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区. 二. 语法 free [选项] 三. 选项       默认情况下,即在没有选项的情况下,&qu ...

  7. Android 开发工具类 33_开机自运行

    原理:该类派生自 BroadcastReceiver,重载方法 onReceive ,检测接收到的 Intent 是否符合 BOOT_COMPLETED,如果符合,则启动用户Activity. imp ...

  8. 一道JS面试题引发的血案

    刚入职新公司,属于公司萌新一枚,一天下午对着屏幕看代码架构时. BI项目组长给我看了一道面试别人的JS面试题. 虽然答对了,但把理由说错了,照样不及格. 话不多说,直接上题: var a = 1; s ...

  9. Silverlight中使用MVVM(4)—演练

    本来打算用MVVM实现CRUD操作的,这方面例子网上资源还挺多的,毕竟CRUD算是基本功了,因为最近已经开始学习Cailburn框架了,感觉时间 挺紧的,这篇就实现其中的更新操作吧.         ...

  10. 27-hadoop-hbase安装

    hbase的安装分为单机模式和完全分布式 单机模式 单机模式的安装很简单, 需要注意hbase自己内置一个zookeeper, 如果使用单机模式, 那么该机器的zookeepr不可以启动 1, 添加j ...