zoukankan      html  css  js  c++  java
  • Bootstrap 3之美02-Grid简介和应用

    本篇主要包括:

    ■  Grid简介
    ■  应用Grid
    ■  Multiple Grids

      Grid简介

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

     

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

     

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

     

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

     

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

     

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

     

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


    以上值得注意的是:在倒数第二行,当把".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"属性
    14


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

    16


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

     

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

     

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

     

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

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


    如何解决这些问题呢?

      Multiple Grids

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

     

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

     

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

     

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

    20

    现在,把页面宽度调整到大概800像素的大小。
    21
    可见,这时候,正如之前设置的,id为main的section占了9个单元格,id为sidebar的sectioin占了3个单元格。


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

    22

    现在,把页面宽度调整到大概590像素的大小。
    23
    可见,这时候,正如之前设置的,id为main的section占了6个单元格,id为sidebar的sectioin占了6个单元格。

     

    但是,当页面宽度<768像素的时候,把左右2边都设置成占6个单元格的做法,不太可能出现在实际项目中,以上这么做只是为了演示。我们还需要把这种情况对应的类名删除。回到如下的状态:

    20


    参考资料:WilderMinds  

    “Bootstrap 3之美”系列类包括:

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

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

    Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

    Bootstrap 3之美04-自定义CSS、Theme、Package

    Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

    Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells

    Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

  • 相关阅读:
    「JOI 2015 Final」城墙
    「JOI 2015 Final」舞会
    「JOISC 2014 Day1」 历史研究
    「JOISC 2015 Day 1」卡片占卜
    「NOI十联测」奥义商店
    「NOI十联测」黑暗
    「THUSCH 2017」大魔法师
    「ZJOI2014」星系调查
    HDU
    HDU
  • 原文地址:https://www.cnblogs.com/darrenji/p/3928807.html
Copyright © 2011-2022 走看看