响应式作为Bootstrap的一大特色。栅格系统可谓是功不可没,既然如此,那我们就来看一下栅格系统是怎样帮助bootstrap实现响应式布局的呢?

1、什么是栅格系统

我们能够从Bootstrap的官网上找到比較官方的回答:Bootstrap提供了一套响应式、移动设备优先的流失栅格系统,随着屏幕或视口(viweport)的添加,系统会自己主动分为最多12列。

它包括了易于使用的提前定义类,还有强大的mixin用于生成更具语义的布局。

这样的说法是比較精准并且明了的。可是还能够更通俗一点的来解释:将视口等分12列,当中的元素占领不同的列数,当视口改变时,元素所占领的列数会对应改变。当然这是我临时的理解。

2、一个最简单的栅格演示样例

我先上一段我用来做演示样例的代码,和对应的效果展示:

<div class="container"><div class="row part-msg"><div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" /></div><div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" /></div><div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" /></div><div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" /></div><div class="col-md-4 col-lg-2  col-sm-5"><img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" /></div>   <div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" /></div></div>
</div>

我电脑当前的分辨率为1600*900。这是的显示效果例如以下:

当我缩小浏览器大小到一定程度时。再来查看显示效果:

然后此种情况下我继续缩小浏览器视口,会发现布局会进一步的改变:

而当我进一步缩小视口的时候,图片布局也对应的发生了改变,从而显示了终结效果:

看到了这种效果,和我最简单的描写叙述,如今预计会有一个最大的疑惑,缩小到什么程度才会有对应的效果呢,栅格系统在这里是怎么表现的呢?

3、演示样例代码分析

首先,在代码的最外层有一个<div class="container"></div>,作为一个div出现。我们非常easy想到,它是一个独立的模块。而它详细的表现形式呢。我们来看下对应样式表中的设置:

.container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;
}
@media (min-width: 768px) {.container {width: 750px;}
}
@media (min-width: 992px) {.container {width: 970px;}
}
@media (min-width: 1200px) {.container {width: 1170px;}
}

这里我们在container里看到了一个熟悉的代码:margin-right:auto;margin-left:auto;这不由让我想起了我们最经常使用的margin:0px auto;就是居中效果。而在这里相同依据屏幕大小设定的它的固定宽度。当然,我们相同要注意一点。这里是没有设置高度的,假设用来布局的话,高度的问题还须要注意协调,这个后面再说。

而我们在这个地方看到了三个用来做界限切割的视口尺寸:768px、992px、1200px。那这三个尺寸是不是与我之前的操作有对应的关系呢,答案是肯定的,就是由于它的关系。

我们来看官网在这里的解释:

我们在代码编写中也用到了对应的class属性:col-md-、col-lg-、col-sm-、col-xs-等等,而这里的md则是middle,lg代表了large,sm代表了small,xs也就代表了“更小。极小”的意思吧。这时候我们再来看上面的代码是不是很基础,可谓是简单至极。

可是另一个细节我们绝对是不能够忽视的,那就是<div class="row"></div>的存在。它的存在意义是什么呢?

假设出现row、column的字眼,最先想起来的是什么,对了,就是table,表格中才有行列,而这也就是我们的网格系统了,既然有了col-。那怎么能少的了row。并且列也仅仅能在行中体现,行的以下仅仅能是列,而对应行的对应列才是一个详细的单元格,才干写内容,而这里的row也仅仅能被放置在container或者container-fluid之内

至于对于行和列的设定,我们能够来看下样式表里的定义:

.row {margin-right: -15px;margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left;
}
.col-xs-12 {width: 100%;
}
.col-xs-11 {width: 91.66666667%;
}
.col-xs-10 {width: 83.33333333%;
}
.col-xs-9 {width: 75%;
}
.col-xs-8 {width: 66.66666667%;
}
.col-xs-7 {width: 58.33333333%;
}
.col-xs-6 {width: 50%;
}
.col-xs-5 {width: 41.66666667%;
}
.col-xs-4 {width: 33.33333333%;
}
.col-xs-3 {width: 25%;
}
.col-xs-2 {width: 16.66666667%;
}
.col-xs-1 {width: 8.33333333%;
}

看到这里的.row的设置,发现了什么呢,还记得.container的设置么。padding:0px 15px;而这里的margin却是-15px啊。

就这样,最简单的栅格系统就完毕了,突然感觉好高大上...



转载于:https://www.cnblogs.com/claireyuancy/p/6817236.html

积跬步,聚小流------Bootstrap学习记录(3)相关推荐

  1. 积跬步,聚小流------Bootstrap学习记录(2)

    现阶段开启每一次新的征程,已然离不开"Hello World"的习惯仪式.这次自然也不例外.先来看下给出的官网给出的演示样例: 1.bootstrap官网提供的html基本模板代码 ...

  2. 积跬步,聚小流------html知识大纲归纳总结

    习惯于从熟悉的地方入手的我,每要开始整理学习新东西之前,喜欢把熟悉的相关知识再温习一遍,既是总有所得的缘故,也是如此会将斗志燃到最烈.我总感觉这是病,只是不愿治.... 这次的前端整理,便直接从htm ...

  3. 积跬步,聚小流------ps有用小技巧,改变png图标颜色

    积跬步,聚小流------ps有用小技巧,改变png图标颜色 *  实现效果: 原图:  改动后: *  实现目的: 满足为实现不同界面色彩搭配改动png图标的颜色 *  实现方法: 1.打开Phot ...

  4. 【无标题】积跬步,以致千里;积小流,以成江海。

    1.自我介绍 大家好!我是来自西安工程大学计算机类的大一学生.上学期已经学习了C语言,但是发现自己的代码编程能力并没有多大提升,理论知识基础也还不够扎实.之前也在github中提交过代码.但是没有在C ...

  5. 积跬步以至千里_《荀子》名句76则:不积跬步,无以至千里;不积小流,无以成江海...

    荀子(约公元前313年-公元前238年),名况,字卿,华夏族(汉族),战国末期赵国人 .著名思想家.文学家.政治家,时人尊称"荀卿".西汉时因避汉宣帝刘询讳,因"荀&qu ...

  6. 劝学:不积跬步,无以至千里,不积小流,无以成江海.

    领略古人智慧. 不积跬步,无以至千里,不积小流,无以成江海.骐骥一跃,不能十步,驽马十驾,功在不舍.--<荀子·劝学>

  7. 积跬步以至千里_积跬步以至千里,聚小利终成大户

    声明:只做客观解读,不做主观预测,仅供参考,不作交易依据. ​择股看行业.择时看大盘.买点等共振.炒股就是控制风险. 大盘结束8连阳,跌破5日均线,30分钟形成顶背离,大盘正在走30分钟下跌一笔,舵手 ...

  8. 不积跬步无以至千里[转]

    不积跬步无以至千里<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> ...

  9. 不积跬步,无以致千里--首篇随笔

                ----不积跬步,无以至千里:不积小流,无以成江海---- 这会儿是2018年9月10日23点喽,一个崭新的周一夜晚.年初开始,就盘算着好好开个博客,记录生活的流水账,分享自己 ...

最新文章

  1. 高性能asp服务器,服务器中让人头疼的防火墙-ASP教程,性能优化
  2. oracle shared_pool_size 0,Oracle shared_pool_reserved_size参数设置说明
  3. Binding(一):数据绑定
  4. Why does pthread_cond_signal not work?【转】
  5. TS Decorator
  6. matlab2020数值计算,MATLAB2020从入门到精通
  7. python利用Excel读取和存储测试数据完成接口自动化
  8. x264源代码简单分析:宏块分析(Analysis)部分-帧间宏块(Inter)
  9. python强行终止程序,如何终止Python脚本
  10. 8253/8255/8259相关知识
  11. 开发环境搭建好,也要做镜像
  12. 《重构 改善既有代码的设计》笔记
  13. 3ds Max 2012 简体中文版 带注册机32位64位
  14. MyX5TbsDemo【体验腾讯浏览服务Android SDK (完整版)】
  15. github恢复误删除的文件
  16. 如何在Chrome39添加360抢票王插件
  17. (笔记)一些有意思的电路
  18. 实战项目 — 爬取 校花网图片
  19. 【计算机毕业设计】外卖点餐源码
  20. 基于MVC的简易图形编辑器

热门文章

  1. 【Java10】lambda表达式(函数式编程),Stream流,File类,字节/字符流,乱码,缓冲/转换/序列化/打印流,Properties
  2. Web服务器常用端口
  3. 【STM32】FreeRTOS任务挂起和恢复API
  4. 【Linux】一步一步学Linux——halt命令(196)
  5. 【Linux】一步一步学Linux——Linux文件属性详解(28)
  6. 【SSL】SSL工作原理
  7. pygame精灵组有哪些方法_小精灵科学室-如何在活动中提高幼儿的探究能力和科学探究活动?...
  8. 如何将图片序列化_如何将图片文字转化为Word文档?
  9. C代码+汇编 C的 函数汇编学习分析 rep stos dword ptr [edi]
  10. IA-32 Intel手册学习笔记(三)任务切换