积跬步,聚小流------Bootstrap学习记录(3)
响应式作为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啊。
就这样,最简单的栅格系统就完毕了,突然感觉好高大上...
最新文章
- .NET HttpWebRequest/WebClient网络请求第一次很慢解决方案
- dict
- linux操作
- Memcached和Redis对比和适用场景
- ping通网关 ping不能外网 DNS无法解析
- C# Socket 入门4 UPD 发送结构体(转)
- Emgu CV 高斯建模
- 创建多模块maven项目
- 推荐C/C++常见的面试题目
- 管道通信之无名管道---pipe()
- xcode - 触摸移动
- 一,PHP 语法
- Redis简介一
- 用FastDFS一步步搭建文件管理系统
- Django view(视图)
- CentOS和RedHat Linux的区别
- 线程使用中常见的错误-“System.InvalidOperationException”线程间操作无效: 从不是创建控件“ ”的线程访问它。
- 利用profiler工具提高NC-Verilog仿真效率
- linux df
- L1-056 猜数字
热门文章
- xcode菜单栏
- Git Bash Windows客户端乱码
- python-opencv 分离图片(视频)中的某一颜色物体
- 任务备忘(已经完成):用python写一个格式化xml字符串的程序
- (7) 将tomcat HTTP连接器启动在80端口(jsvc使用详解)
- HTML、CSS 和 JS框架之Bootstrap
- (二十一)python 3 内置函数
- Uncaught ReferenceError: 板栗 is not defined at HTMLButtonElement.onclick (view:1)
- POJ 2553 The Bottom of a Graph(强连通分量的出度)
- [数据结构]C#基于数组实现泛型顺序表