鲍勃の部屋
  • Blog
  • Work
  • About
  • Contact

和鲍勃一起来学Bootstrap - 第3课

6/20/2014

0 Comments

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

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:

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

<div class="container">
  <div class ="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
</div>

第一个* 表示 类型( xs, sm, md, lg ) , 第二个*表示列宽 (1-12)

那么写一个两列宽,很列有两段落文字的页面 是不是信手拈来呢 :)

html的代码这个后台支持的不好,贴上来会自动改变我原来的输入内容,以后就不贴代码了,直接上文件了。有什么不明白的可以留言

bootsrap_bob_tutorial.html
File Size: 2 kb
File Type: html
Download File

用浏览器打开,看是不是直接就是两列布局了!!

你无需自己去写css实现了,换言之, 就算你搞不清楚 position: relative, static, absolute, fixed ,搞不清楚浮动是什么, 一样也可轻松实现各种布局了。

收工!
0 Comments



Leave a Reply.

    Author

    鲍勃 (上海)
    互联网码农

    小A

    Archives

    July 2014
    June 2014
    May 2014

    Categories

    All
    AngularJS
    App
    Bootstrap
    Cocos2dx-c++
    Css
    CSS3
    Design Pattern
    Express
    Funny
    Game
    Html5
    Jasmine
    Javascript
    Lua
    Music
    Node.js
    Pattern
    Phonegap
    Php
    Python
    Tdd
    Tips

    RSS Feed

Powered by Create your own unique website with customizable templates.