twitter_bootstrap_第二章

通过前面的了解，大家都看到 bootstrap 的css 框架效果，很不错吧 ！那么我们开始下面的学习。
1、bootstrap 框架使用

Bootstrap 是基于 html5 的 css 框架所以 。 要引导利用HTML元素和CSS属性,需要使用HTML5 doctype。一定要包括它开始在你的项目的每一个空白的页面。


2、使用bootstrap的排版（Layout）

在bootstrap中有两种布局方式，分别是固定布局和不固定布局。
2.1、固定布局

固定布局会在页面上创建以 (940，宽)居中的单一的单元。效果如下



代码如下


2.2、不固定布局

不固定布局，不必要担宽度的问题。默认情况下宽度与页面相等等。这里为大家列举经典的一行两列布局小例。 效果如下





代码如下：



3、bootstrap 中的grid介绍

在bootstrap中的grid 也是一种布局器 。 grid跟布局同样分为两种固定和不固定。grid分别的使用 .row 和 .row-fluid  的布局。
3.1、Grid固定（940px 宽度）



Grid默认是以固定（940px 宽度）进行12 列的划分的，间距 30 px 宽。效果如下



代码：




3.2、Gird不固定

在Gride中使用不固定的（.row-fluid）是通过整个页面的宽度进行12 列的划分。间距以2.5641%; 宽度有进行的 。效果如下




3.3、Grid多样化

聪明的朋友很快就会发现在grid 中 span1 ….span2 可以灵活多的使用。下面是bootstrap中例子




3.4、Grid位移

我们使用 grid 时候，感觉跟 html table 标签差不多一样。有的朋友可能会想到如果我想隐藏几列那应该怎么办了。先来看看下面的代码。你可能会它是能隐藏列的



效果如下



offset1—offset12



分别用于填充列的。 通过几次尝试发现加上offset 都会从左边开始填充。


3.5、Grid嵌套

在 grid 嵌套里的 span1….span12 不能加了入 border: 1px; 样式  。 可能会导至换行等别情况  。 下面效果





代码




代码地址


http://pan.baidu.com/share/link?shareid=95726&uk=1862801370


原文


http://www.oljeo.com/index.php/bootstrap/4.html

 

csdn

http://blog.csdn.net/xiegqooo/article/details/8142506