柵格系統英文為“grid systems”，也有人翻譯為“網格系統”，應用固定的格子設計版面布局，其風格工整簡潔，在2戰后大受歡迎，已成為本日出版物設計的主流風格之1。
1692年，新登基的法國國王路易104感到法國的印刷水平差能人意，因此命令成立1個管理印刷的皇家特別委員會。他們的重要任務是設計出科學的、公道的， 重視功能性的新字體。委員會由數學家尼古拉斯加宗（Nicolas Jaugeon）擔負領導，他們以羅馬體為基礎，采取方格為設計根據，每一個字體方格分為64個基本方格單位，每一個方格單位再分成36個小格，這樣，1個印刷版面就有2304個小格組成，在這個嚴謹的幾何網格網絡中設計字體的形狀，版面的編排，實驗轉達功能的效能，這是世界上最早對字體和版面進行科學實驗的活動，也是柵格系統最早的雛形。
我給網頁柵格系統下的定義為：以規則的網格陣列來指點和規范網頁中的版面布局和信息散布。網頁柵格系統是從平面柵格系統中發展而來。對網頁設計來講，柵格系統的使用，不但可讓網頁的信息顯現更加美觀易讀，更具可用性。而且，對前端開發來講，網頁將更加的靈活與規范。
Bootstrap 提供了1套響應式、移動裝備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包括了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。
也就是說Bootstrap把1個元素的寬度劃分成12份。我們則在這個被劃分成12份的行安排元素。
1、基本目標
制作以下的兩行，這兩行由于裝備的不同里面各個單元格的寬度會改變：
在手機小屏幕上，上行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份。
2、制作進程
先在網頁文件夾中配置好Bootstrap，在官網（點擊打開鏈接）下載組件便可，用于生產環境的Bootstrap版本（點擊打開鏈接），Bootstrap3對2其實不兼容，建議直接根據其開發文檔使用Bootstrap3。將Bootstrap解壓以后把得到的3個文件夾css,fonts,js拷貝到站點目錄下面。如果是Eclipse的JSP Web Project的話就把它們放到WebRoot文件夾下面。
以后代碼以下，詳情請看注釋：
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
