Chapter 1 unit 1 of Bootstrap-Bootstrap Scaffolding

This is the first chapter of the e-book named 《bootstrap》 written by Jake Spurlock and printed by the CMP,here I paste the cover of this book here specially to share with you all. I wish that will be a good reference to u,perhaps.here I don't mean to advertise for this book ,just want to share to you only. 

 

Bootstrap Scaffolding

 in  my last two blogs ,I start to know something of Boostrap ,here ,let's begin to try to use this skill to weave our web with  the beautify of her.

1. Default Grid System

 the first key words,here I will pick some classic words to describe an note it here instead my words. of course the keywords will be weighted and being bold and colored red.

also pictures will be pasted here to try to described more clearly and specificly.

The default Bootstrap grid system utilizes 12 columns, making for a940px-wide containerwithout responsive features enabled. With the responsive CSS file added, the grid adapts to be724px or 1170pxwide, depending on your viewport.
Below 767px viewports, such as the ones on tablets and smaller devices, the columns becomefluid and stack vertically. At the default width, each column is60 pixels wide and offset 20 pixelsto the left.

     1.1 Basic Grid HTML

     To create a simple layout, create a container with a <div> that has a class of .row and  add the appropriate amount of .span* columns. that means the amount of  your divs modified with differcent classes should be 12 in total. here is the template of the html code:

<div class="row">
<div class="span8">...</div>
<div class="span4">...</div>
</div>

    1.2 Offsetting Columns

You can move columns to the right using the .offset* class. Each class moves the span over that width. So an .offset2 would move a .span7 over two columns .so you can control the position of this grid system by yourself easily. as well, here is the code template below:

<div class="row">
  <div class="span2">...</div>
  <div class="span7 offset2">...</div>
</div>

 and your page will be showed like this :

  1.3  Nesting Columns

Sometime we need to put some components in a container, so nesting columns can help you . her let's have a test here.

your code will be like this :

<div class="row">
    <div class="span9">Level 1 of column
        <div class="row">
            <div class="span6">Level 2</div>
             <div class="span3">Level 2</div>
       </div>
    </div>
</div>

and your page will be displayed like this :

sorry ,because the limition of number of the pics in this blog, perhaps you can imagine in your way if you are always be a skillful web deveoper or designer.

ok ,see you next blog ,and I will write something about fluid grid system, please care more,thank you.