CSS框架BluePrint

作慣了後臺程序的咱們，是否對前端編程有興趣麼，經過CSS框架，使咱們很容易的開發出基於Div+CSS佈局的頁面來，今天讓咱們瞭解下大名鼎鼎的blueprint CSS框架吧！

 

它的官方網站：http://www.blueprintcss.org/

 

首先你應該申明好CSS，這很簡單，經過在頁面的head區域加入以下引用便可：

 

 

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

 

blueprint爲咱們提供了grid，form，print，reset，typography等多種css文件，咱們重點來了解下佈局。

 

在默認狀況下，以950px做爲寬度，好比咱們能夠利用以下代碼，表示950px的居中Div：

 

 

<div class="container">
lt;p>Here's my site!</p>
</div>

 

你能夠經過span-x來進行容器內列的定義，好比咱們須要實現常見的頂部，main區域3列布局，可利用以下代碼：

 

 

<div class="container" style="border:1px solid #000;">
    <div class="span-24 last">
        頂部
    </div>
    <div class="span-4">
        左側邊欄
    </div>
    <div class="span-16">
        主體
    </div>
    <div class="span-4 last">
        右側邊欄
    </div>
</div>

 span-x的命名規則是指定了寬度，每一個span-x比前一個增長40px，起始值爲30px，可在grid.css文件中找到以下定義：

 

 

/* Use these classes to set the width of a column. */
.span-1 {width: 30px;}
.span-2 {width: 70px;}
.span-3 {width: 110px;}
......
.span-23 {width: 910px;}
.span-24, div.span-24 { width: 950px; margin-right: 0; }

 

容器內列的定義是也許嵌套的，好比以下的代碼咱們定了了一個頂部，中部，頂部佈局，其中中部分爲左側，中側和右側佈局，中側包括上下佈局，代碼以下：

 

 

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-4">
        Left sidebar
    </div>

    <div class="span-16">
        <div class="span-8">
            Box1
        </div>
        <div class="span-4">
            Box2
        </div>
        <div class="span-4 last">
            Box3
        </div>
        <div class="span-16 last">
            Main content
        </div>
    </div>

    <div class="span-4 last">
        Right sidebar
    </div>
    <div class="span-24 last">
        Footer
    </div>
</div>

 

在全部的佈局中，請注意：在一個容器內最後一列的定義要加上last，確保一行中的span-x的定義的值總和要超過24，想要了解更多，能夠直接下載附件中blueprint的框架包，裏面附有完整的綜合性的例子。

 

感受對新手來講，還算一個不錯的CSS框架。

 

• joshuaclayton-blueprint-css-v0.9.1-0-g9be6857.zip (3.9 MB)