Bootstrap4响应式布局之栅格系统
前面说了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响应式布局之栅格系统的更多相关文章
- bootstrap第一天,响应式布局,栅格系统运用
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- 响应式框架Bootstrap栅格系统
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8&qu ...
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
- pure响应式布局
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)
栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
- bootstrap 自适应和响应式布局的区别
自适应: 不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...
随机推荐
- MySQL utilities介绍&出现 No module named utilities
目录 安装 mysqlreplicate mysqlrplcheck mysqlrplshow mysqlrpladmin mysqlfailover mysqldbcompare 详细介绍 mysq ...
- spring的Java注解方式
以往我们在使用spring的时候都是用一堆<>这个玩意(尖括号)的xml文件来配置spring,在xml里都是"xxx"来配置需要的内容信息,在"" ...
- Doxygen的使用,配置及实例
Doxygen是一种开源跨平台的,以类似JavaDoc风格描述的文档系统,可以从一套归档源文件开始,生成文档 下载Doxygen + Graphviz Doxygen可以生成动态文档 Graphviz ...
- element-ui table 最后一行合计,单元格合并
接着写两个方法--最后一行合计的方法 --单元格合并的方法 先写一个rowspan方法,计算出spanArr数组是怎么单元格合并的,注意rowspan方法要在渲染完成之前使用,可以在mounted中使 ...
- 集合框架map_DAY18
1:map集合(掌握) (1)Map集合存储的是键值对元素.键是唯一的,值可以重复. (2)Map和Collection的区别? A:Map是双列集合,存储的元素键值对,键唯一,值可以重复. B:Co ...
- Form表单中不同的按钮进行不同的跳转
本文参考:http://my.oschina.net/sallency/blog/300568 在开发工作共我们往往会遇到一个表单需要包含多个action不同的提交动作,这时候就不能在使用submit ...
- 一个对眼睛很好的vim 颜色主题
地址:https://github.com/altercation/vim-colors-solarized 安装: $ cd vim-colors-solarized/colors $ mv sol ...
- list、vector、deque互相拷贝
#include <iostream> #include <stdlib.h> #include <string.h> #include <algorithm ...
- SSM整合(1): spring 与 springmvc 整合
久没有写博客了, 今年事情太多了, 也没了心思. 去深圳出差, 更重要的结婚的事情, 一茬接一茬. 好在最近闲暇一些, 就想记录一些曾经困扰过我的问题(现在用spring boot真是太方便了, 很 ...
- mysql dbcp Caused By: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: The last packet successfully received
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy ...