首頁 > web前端 > html教學 > Bootstrap 3之美02-Grid简介和应用_html/css_WEB-ITnose

Bootstrap 3之美02-Grid简介和应用_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:59:21
原創
1035 人瀏覽過

本篇主要包括:

■  Grid简介
■  应用Grid
■  Multiple Grids

 

  Grid简介

Bootstrap中,把页面分成12等份,这就是所谓的Grid。

 

在Bootstrap中,用类名控制,这些类型遵循".col-xx-6"类似的形式。

 

2个6就占满整个页面。所以,类名最后面的数字表示要占几个格子。

 

又比如,3个4也占满整个页面。

 

又比如,4个3也占满整个页面。

 

又比如,6个2也占满整个页面。

 

另外,类似".col-xx-10 .col-xx-offset-2"这样的类名,offset表示偏移,2表示向右偏移2个单元格。


以上值得注意的是:在倒数第二行,当把".col--xx-3"放在".col-xx-3 .col-xx-offset-2"之后的时候,由于超过了12个单元格的大小,".col--xx-3"会自动跑到下一行的最开头。

 

  应用Grid

id为body的section如何应用Grid呢?
→在index.html中,给id为body的section加上class="container"属性
→给id为main的section加上class="col-md-8"属性
→给id为sidebar的section加上class="col-md-4"属性


如何让header和footer部分也应用Grid呢?
→去掉id为page的div的class="container"属性,变为:


→给header加上class="container"属性,变为:

→给footer加上class="container"属性,变为:


以上,header, body, footer部分都应用了Grid,body的main部分占8个单元格,body的sidebar部分占4个单元格。

 

so far so good。但是,如果我们把浏览器的宽度缩小到像智能手机屏幕般大小,一些不和谐的方面呈现了出来:

 

比如,本来一行的标题撑成了2行:

 

比如,本来可以完整呈现的图片,现在需要滑动水平滚动条才可以窥其全貌:

还比如,原先在右边的部分,被挤到了下方,等等。


如何解决这些问题呢?

 

  Multiple Grids

Multiple Grids的意思是:一个页面元素可以有多个表示单元格大小的类名。不同的页面宽度,启用不同的类。

 

在Bootstrap 3中,
".col-lg-xx"表示页面宽度>=1200像素。
".col-md-xx"表示页面宽度>=992像素。
".col-sm-xx"表示页面宽度>=768像素。
".col-xs-xx"表示页面宽度

 

我们可以为一个html元素赋予多个类名,区分地表示,在ld情况下占几个单元格,在md情况下占几个单元格,等等。

 

假设我们需要考虑sm的情况,即面宽度>=768像素的情况。
→在id为main的section中,为class增加col-sm-9
→在id为sidebar的sectioin中,为class增加col-sm-3

 

现在,把页面宽度调整到大概800像素的大小。

可见,这时候,正如之前设置的,id为main的section占了9个单元格,id为sidebar的sectioin占了3个单元格。


接着,我们再考虑xs的情况,即页面宽度→在id为main的section中,为class增加col-xs-6
→在id为sidebar的sectioin中,为class增加col-xs-6

 

现在,把页面宽度调整到大概590像素的大小。

可见,这时候,正如之前设置的,id为main的section占了6个单元格,id为sidebar的sectioin占了6个单元格。

 

但是,当页面宽度


参考资料:WilderMinds  

 

Bootstrap 3之美系类包括:

Bootstrap 3之美01-下载并引入页面

Bootstrap 3之美02-Grid简介和应用

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板