快捷導(dǎo)航

Bootstrap自動(dòng)適應(yīng)PC、平板、手機(jī)的Bootstrap柵格系統(tǒng)

更新時(shí)間：2016年05月27日 17:24:06 投稿：mrr

這篇文章主要介紹了Bootstrap自動(dòng)適應(yīng)PC、平板、手機(jī)的Bootstrap柵格系統(tǒng)的相關(guān)資料,需要的朋友可以參考下

柵格系統(tǒng)英文為“grid systems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。

1692年，新登基的法國(guó)國(guó)王路易十四感到法國(guó)的印刷水平差強(qiáng)人意，因此命令成立一個(gè)管理印刷的皇家特別委員會(huì)。他們的首要任務(wù)是設(shè)計(jì)出科學(xué)的、合理的，重視功能性的新字體。委員會(huì)由數(shù)學(xué)家尼古拉斯加宗（Nicolas Jaugeon）擔(dān)任領(lǐng)導(dǎo)，他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計(jì)依據(jù)，每個(gè)字體方格分為64個(gè)基本方格單位，每個(gè)方格單位再分成36個(gè)小格，這樣，一個(gè)印刷版面就有2304個(gè)小格組成，在這個(gè)嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計(jì)字體的形狀，版面的編排，試驗(yàn)傳達(dá)功能的效能，這是世界上最早對(duì)字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的活動(dòng)，也是柵格系統(tǒng)最早的雛形。

我給網(wǎng)頁(yè)柵格系統(tǒng)下的定義為：以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。網(wǎng)頁(yè)柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來(lái)。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對(duì)于前端開發(fā)來(lái)說(shuō)，網(wǎng)頁(yè)將更加的靈活與規(guī)范。

Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語(yǔ)義的布局。

也就是說(shuō)Bootstrap把一個(gè)元素的寬度劃分成12份。我們則在這個(gè)被劃分成12份的行安排元素。

一、基本目標(biāo)

制作如下的兩行，這兩行因?yàn)樵O(shè)備的不同里面各個(gè)單元格的寬度會(huì)改變：

在手機(jī)小屏幕上，上行A占2份B占10份，AB分享了這12份，下行A占1份B占1份C占10份，ABC分享了這12份。

在平板的中等屏幕上，上行A占8份B占4份，AB分享了這12份，下行A占10份B占1份C占1份，ABC分享了這12份。

在PC的大屏幕上，上行A占4份B占8份，AB分享了這12份，下行A占1份B占10份C占1份，ABC分享了這12份。

二、制作過(guò)程

先在網(wǎng)頁(yè)文件夾中配置好Bootstrap，在官網(wǎng)（點(diǎn)擊打開鏈接）下載組件即可，用于生產(chǎn)環(huán)境的Bootstrap版本（點(diǎn)擊打開鏈接），Bootstrap3對(duì)2并不兼容，建議直接根據(jù)其開發(fā)文檔使用Bootstrap3。將Bootstrap解壓之后把得到的3個(gè)文件夾css,fonts,js拷貝到站點(diǎn)目錄下面。如果是Eclipse的JSP Web Project的話就把它們放到WebRoot文件夾下面。

之后代碼如下，詳情請(qǐng)看注釋：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--網(wǎng)頁(yè)編碼，要使用的外部文件，自動(dòng)適應(yīng)屏幕-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>柵格系統(tǒng)</title>
</head>
<body>
<!--使用Bootstrap如果不使用面板的話，要把元素放進(jìn)一個(gè)占滿100%屏幕的容器里-->
<!--class="container"則自動(dòng)居中-->
<div class="container-fluid">
<!--定義一行-->
<div class="row">
<!--xs代表手機(jī)小屏幕，md代表平板中屏幕，lg代表PC大屏幕-->
<!--同一對(duì)的元素之和必須等于12，否則出現(xiàn)錯(cuò)誤，如A的col-xs-2+B的col-xs-10是等于12的-->
<!--bg-warning是定義淺黃色的背景色-->
<div class="col-xs-2 col-md-8 col-lg-4 bg-warning">
A
</div>
<div class="col-xs-10 col-md-4 col-lg-8 bg-primary">
B
</div>
</div>
<div class="row">
<!--這里的道理與上面的一樣，A的col-xs-1+B的col-xs-1+C的col-xs-10是等于12的-->
<div class="col-xs-1 col-md-10 col-lg-1 bg-warning">
A
</div>
<div class="col-xs-1 col-md-1 col-lg-10 bg-primary">
B
</div>
<div class="col-xs-10 col-md-1 col-lg-1 bg-success">
C
</div>
</div>
</div>
</body>
</html>

您可能感興趣的文章: