栅格布局基本用法
1.1布局容器
1)新建demo02.html文件,定义一个container容器,我们看container帮我们做了哪些事情。
2)运行一下,首先是把这个div是居中的。
3)当浏览器变小的时候,它基本上就全屏了。
4)也就是bootstrap帮我们定义一个container这样一个样式,container可以把它当成一个网页的容器。
5)我们bootstrap把我们分辨率分成了4个屏幕,当屏幕分辨率小于768,container的最大宽度是None自动的;当屏幕分辨率大于等于768并且小于992时,container的最大宽度是750px;当屏幕分辨率大于等于992并且小于1200时,container的最大宽度是970px,当屏幕分辨率大于等于1200时,container的最大宽度是1170px,
(因此,屏幕分辨率小于768,container的最大宽度是None自动的,它基本上是占满整个屏幕。)
6)系统Bootstrap会自动识别你这个浏览器的分辨率,来帮你设置这个div的宽度是多少,这就是container会帮你做的事情。
7)container还有一个参数就是container-fluid,表示占满全屏。
8)运行结果如下
(container-fluid它是占满全屏的不管是在哪种分辨率下,而这个Container它根据了不同的分辨率设置了div的宽度。)
9)我们打开bootstrap.css文件可以看到container根据不同像素设置的宽度
10)布局容器小总结
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器
浏览器宽度4种类型:<768px,>=768px,>=992px、>=1200px
1.2列组合.cool-md-*
1)首先,新建一个demo03.html文件
2)定义一个div样式,设定它的行row并在行中设定列。
3)我们运行一下,是这样的效果。在中等分辨率底下,它们是平分的。 每一列占了12格中的4格。
4)定义第二行,修改分辨率
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
运行结果:
在很小分辨率下Col-xs-6占6格,col-xs-6占6格。
(分辨率从小到大是相互兼容的)
5)重新定义第二行,修改分辨率(md是中等分辨率)
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
运行结果:
只有在中等屏幕下,Col-xs-6和col-xs-6才是1:1的
如果我们将屏幕变小,这时小分辨率就不行了。
(分辨率从小到大是相互兼容的,你设置了小分辨率的比例,大分辨率自然就适应小分辨率的这个比例。)
1.3列偏移 .col-md-offset-*
1)在之前的基础上再设置一个第三行,col-md-3占三格,col-md-2占两格。
运行一下,结果:
如果我们想让col-md-3在左边空三格,就用col-md-offset-3,让col-md-3在左边空两格,就用col-md-offset-2,这就是我们的列偏移。
运行结果:
1.4列嵌套
1)定义一行,第一列占12格中的8格,第二列占12格中的4格。
运行结果:
2)我们可以在这个列中再嵌套一个行,这个行分为两列,所占比例为1:1。
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
</div>
<div class="col-md-4">4</div>
</div>
运行效果:
我们设置了一行两列,第一行和第一列占了8个格,在第一列里面又插入了一个行,这行里面设置的是6,占6格,就相当于把12等分的8等分再拆分成12等分,显示的两个6表示把这个12等分的8等分当成了12等分,再对这8等分进行1:1的拆分。这个就是我们的列嵌套。
1.5列排序 .col-md-push-* .col-md-pull-*
1)我们再重新定义一行,col-xs-3占三格,col-xs-2占两格
运行结果:
我们可以用col-md-push-5来指定col-xs-3向右推5格
运行结果:
同样,我们可以用col-md-pull-2来指定col-xs-2向左拉两格
运行效果:
注意:
1)col-md-push-*表示向右推几格;
2)col-md-pull-*表示向左拉几个;