學習之Bootstrap - Overview


今天是在DotNetNuke平台工作一周年的日子,值得紀念一下。回過頭來看,這一年基本上是與DotNetNuke的bug斗爭中走過的,同時見證了版本5到6的重大升級。DotNetNuke的框架是挺值得學習和借鑒的,非常全面的系統管理功能和超強的擴展能力讓它始終在CMS這一塊占據一席之地。

我大部分工作是在后台開發,也即開發或者更新一些模塊(module)來迎合客戶的需要。但有時候,在客戶那里工作時(俗稱外包),必須為他們的內部網站設計布局和頁面。這是我相當頭疼的問題,雖然客戶只有一個要求就是漂亮好看,但我始終覺得Dotnetnuke是眾多CMS中外觀最丑的。

 幸運的是,DNN提供了異常 方便和強大的Skin系統,可以讓開發者隨意便捷的設計主題。不幸的是,它過於有層次感,讓我經常迷惑在CSS的覆蓋和Javascript的沖突中。另外,不知道是不是因為我不是專業網站設計的緣故,自己搞出來的東東總是讓我很郁悶。

在外包的日子,總有些閑暇的時間,我就會尋找或嘗試一些CSS框架來為我的DNN主題設計找出路,這樣不但可以方便我前端的工作,更重要的是,CSS框架可以幫助我搭建一個漂亮,簡潔和清爽的網站。
 
我的第一個目標是 Blueprint,它是一 個CSS框架 其目的是 減少 你的開發 時間 它提供 了堅實的CSS基礎, 使用 網格, 合理的 排版 有用的插件 甚至 印刷 樣式讓你輕松的建立項目 。好景不長,沒用幾天就放棄了,原因有二:
  1. Doc看的比較吃力,思路不清晰。
  2. 沒有想象中的強大,總覺得只有CSS不夠用。
放棄之后,再也沒有時間和心情繼續我的DNN主題尋找之旅。直到最近,我在網上看到Twitter的前端工程們發布了新的 Bootstrap v2.0.2,較以前成熟的1.4版本有很多Break的升級或改進。以less為基礎構建css,新的布局能夠定制和響應不同的終端設備,更多的組件和Javascript集成插件,這一切的一切,瞬間讓我hold不住了。細細的看了它的在線文檔后,突然明白,這就是我一直要找的前端框架,不僅僅只有CSS。
 
從那時起,我就走在了Bootstrap的路上。寫這篇文章是想用來,記錄我編程路上的所思所想,更希望的是有大牛能不吝賜教。
 
總體來說, Bootstrap現在包括四個部分:布局(Scaffolding),基礎CSS(Base CSS),控件(Compoment)和Js插件(JavaScript Plugins)。里面各自包含什么,請看下圖。不過最吸引我的東東在下圖里沒有表明出來:通過LESS,我們可以編寫和生成我們自己的Bootstrap。 LESS是一個CSS的預編譯器,相當於賦予了CSS動態語言的特性,如變量,繼承,運算,函數,它既可以在客戶端上運行(支持IE 6+,Webkit,Firefox),也可以借助Node.js或者Rhino在服務端運行。

這里我想特別說說為什么這個圖是英文的:
  1. 我始終覺得英文在這方面的表述要更清晰明了一些,
  2. 翻譯不好怕誤導大家,
我的Bootstrap還在學習中,嘗試中,應用中,希望和大家一起共同學習共同進步。 Profitez-le, allez!
 
P.S. 我學完之后,首先要用它給博客園和wordpress做個主題,寫下來,督促自己。
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM