【5】了解Bootstrap预置的栅格系统_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:05:13
原创
1151 人浏览过

在开篇之前我们来说一个class,因为以后要用到的

...
登录后复制

用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width,用以匹配栅格系统。

注意:由于设置了padding 和 固定宽度,.container不能嵌套。

这里可能有的人不太清楚“不同的媒体查询阈值范围”是什么?这里我说下,就是定义了一套范围(这个范围有几个区间),如果你现在是用的浏览器宽度值(即可视区域)在这套范围的某个区间中,那么就使用这个区间浏览网页的的解决方案。(不知道这样说能不能让大家懂,汗  ̄□ ̄||)

=================================================================================================

【1】下面我们就来介绍下栅格系统吧(摘抄下官网吧)

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

1、它包含了易于使用的预定义classe(这个是我们要说的,不知道是不是中文官方笔误,class后面怎么多了一个e啊);

2、还有强大的mixin用于生成更具语义的布局(这个不是我们要说的,它相当于自定义自己要的栅格布局,默认的预置classe就够我们用了,如果你想在进一步,可以自己研究下)。

=================================================================================================

【2】栅格系统用于通过一系列的行(row)与列(column)的组合创建页面布局,你的内容就可以放入创建好的布局中。

下面就介绍以下Bootstrap栅格系统的工作原理:

1、“行(row)”必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
2、使用“行(row)”在水平方向创建一组“列(column)”。
3、你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素。
4、通过一些预定义的栅格class( .row and .col-xs-4 )可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
5、通过设置padding从而创建“列(column)”之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
6、栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。

全屏布局方法:

对于需要占据整个浏览器视口(viewport)的页面,需要将内容区域包裹在一个容器元素内,并且赋予padding: 0 15px;,为的是抵消掉为.row所设置的margin: 0 -15px;(如果不这样的话,你的页面会左右超出视口15px,页面底部出现横向滚动条)。

ps.说实话,上面的一大摞有几句没有看明白,但是大概的都知道了,不明白的只能通过后面的练习来了解明白了,当然这个网格使用让我想起了用Excel表格。

=================================================================================================

摘抄了这么多官网的,这些我们又要会到开篇时候说的“不同的媒体查询阈值范围”,也就是栅格选项,下面我们就来了解下吧!

【3】栅格选项也就是Bootstrap的栅格系统如何在多种屏幕设备上工作的。下面我们看下中文官网给出的一张表

从表中我们可以看出是有4个区间对应着自己的设备,我们假定可视区域为x。

lg large(大) x≥1200px 桌面
md middle(中) 992px≤x<1200px 桌面
sm small(小) 768px≤x<992px 平板
xs extra small(极小,网上找的,不知道有没有更合适的) x<768px 手机

栅格class在屏幕宽度大于或等于阈值的设备上起作用,并且将针对小屏幕设备所设置的class覆盖掉。因此,对任何一个元素应用任何.col-md- (开头)class 将不仅作用于中等尺寸的屏幕,还将作用于大屏幕设备(如果没有设置.col-lg- (开头)class的话)。

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn