响应式作为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啊。

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



积跬步,聚小流------Bootstrap学习记录(3)的更多相关文章

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

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

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

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  3. 积跬步,聚小流-------js实现placeholder的效果

    前几天在"技术问答"上问了问题,然后有回复一句话就给概括了:placeholder的效果,不得不说.了解的多了才干说起来言简意赅,用最简单的语言描写叙述最清晰的表达. 可是plac ...

  4. 积跬步,聚小流------关于UML类图

    UML的存在 类图是使用频率比較高的UML图,它用于描写叙述系统中所含的类以及它们之间的相互关系,帮助人们简化对系统的理解,也是系统分析和设计阶段的重要产物,也是系统编码和測试的重要类型根据. UML ...

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

    *  实现效果: 原图:  改动后: *  实现目的: 满足为实现不同界面色彩搭配改动png图标的颜色 *  实现方法: 1.打开Photoshop工具,导入须要进行改动的png图标: 2.对导入的图 ...

  6. 积跬步,聚小流------界面经常使用的jeecms标签

    * JEECMS初印象 第一次接触JEECMS,突然脑海就浮现了一句话"20元建站,立等可取",原来这都是真的... * JEECMS的界面经常使用标签 临时忽略掉环境搭建.栏目配 ...

  7. 积跬步,聚小流------java信息生成图片

    需求: 是在做证书的时候碰到的这个问题. 当时需求是能够进行在线打印证书,第一次进行的操作是直接打印html,并且已经排好版(用jqprint插件)进行打印.在打印时碰到了兼容的问题,另外因为背景图片 ...

  8. 积跬步,聚小流------java获取图片的尺寸

    在一篇文章中获取到通过例如以下两种方式进行获取: 1.使用ImageReader进行获取: 2.使用BufferedImage进行获取: 而且经过验证ImageReader进行操作的耗时远远低于Buf ...

  9. qingshow “不积跬步无以至千里,不积小流无以成江海”。--荀子《劝学篇》 用tomcat+花生壳搭建自己的web服务器+域名(参考)

    链接地址:http://www.blogjava.net/qingshow/archive/2010/01/17/309846.html 用tomcat搭建web服务器 目标:免费拥有自己的网站及域名 ...

随机推荐

  1. java文件上传,自动判断文件类型

    public enum FileType { /** * JEPG. */ JPEG("FFD8FF"), /** * PNG. */ PNG("89504E47&quo ...

  2. 3. COLLATIONS

    3. COLLATIONS 表COLLATIONS提供有关每个字符集排序规则的信息.下表中SHOW Name对应SHOW COLLATION. INFORMATION_SCHEMA Name SHOW ...

  3. 1.INFORMATION_SCHEMA简介

    1. INFORMATION_SCHEMA简介 INFORMATION_SCHEMA提供对数据库元数据的访问,有关MySQL服务器信息,例如数据库或表的名称,列的数据类型或访问权限. INFORMAT ...

  4. CentOS7安装Tomcat9并配置

    划重点:安装tomcat之前必须先安装jdk  安装教程 1.下载 Tomcat 9 CentOS 7 下创建目录并下载文件:// 链接已更新 cd /usr/local/ mkdir tomcat ...

  5. 美团技术分享:大众点评App的短视频耗电量优化实战

    美团技术专栏: 关注MAYOU18 前言 美团测试团队负责App的质量保证工作,日常除了App的功能测试以外,还会重点关注App的性能测试.现在大家对手机越来越依赖,而上面各App的耗电量,直接影响了 ...

  6. 树梅派 -- 通过/sys读写ADC芯片 pcf8591

    通过wiringPi等library, 在user space 通过/dev/i2c来读写i2c设备的方案不在本文讨论了. 编译SENSORS_PCF8591 模块 在Default raspberr ...

  7. while循环处理列表和字典

    一.在列表之间移动元素 假设有一个列表,里面存放的是网站新注册但没有验证的用户,验证这些用户后,如何将它们移动到另一个已验证用户列表中呢? 其中一种方法是使用while循环,在验证用户的同时,将其从未 ...

  8. os操作文件

    os.makedirs('dirname1/dirname2') 可生成多层递归目录 os.removedirs('dirname1') 若目录为空,则删除,并递归到上一级目录,如若也为空,则删除,依 ...

  9. 安装完Centos 7后的一些处理

    1.安装dkms:dkms-2.2.0.3-31.1.noarch.rpm 2.安装显卡驱动:amdgpu-pro-18.10-572953 3.启动图形界面使用init 5 不能使用startx

  10. DEV Express中NavBarCointrol的使用

    尚未对内容进行删减,内容有偏差和冗余,谨慎阅读. 发现在后面,写在前面: 13,之前在Default模式下,之所以很多Appearance属性都起不到作用,是因为Control的LookAndFeel ...