官網 http://wrongwaycn.github.com/bootstrap/docs/index.html 教學下載 http://www.verycd.com/topics/2929861/ 先跟各位說抱歉 我個人並不專精於這類程式 僅出於分享新知的精神 來和各位分享 所以無法解決困惑 但希望有看過此篇 後專精於此的人 來跟大家分享成果 第三方介紹 http://www.infoq.com/cn/news/2012/02/bootstrap-2.0.1-released 原文簡體 簡介 Bootstrap是著名的社交網站、微博的先驅Twitter在2011年8月推出的開源WEB前端框架， 集合CSS和HTML，使用了最新的瀏覽器技術，為快速WEB開發提供了一套前端工具包，包括 佈局、網格、表格、按鈕、表單、導航、提示等等。使用Bootstrap可以構建出非常優雅 的前端界面，而且佔用資源非常小。 Bootstrap發佈時間不長，但是已經非常成熟了，目前最新版本是2.0，包括完整的CSS編 譯和非編譯版本，樣例模板和Javascript插件。 歷史 早期Twitter的前端工程師幾乎採用了任何自己熟悉的庫來應對前端的開發需求，這樣的 造成的問題就是維護和擴展非常困難。最終Bootstrap成為應對這些挑戰的解決方案，並 開始在Twitter內部迅速成長，被twitter.com廣泛採用，形成了穩定版本。隨著工程師對 其不斷的開發和完善，Bootstrap進步顯著，不僅包括基本樣式，而且有了更為優雅和持 久的前端設計模式。2011年8月，Twitter將其開源，相關地址： http://twitter.github.com/bootstrap 使用Bootstrap構建優雅的Web Page Bootstrap的核心就是基於Less框架構建的CSS。所以談到Bootstrap，就必須得說說Less 。 關於Less Less是一個動態CSS語言框架，官方網站是http://lesscss.org/。Less擴展了CSS的動態 特性，相對於傳統的CSS，Less提供了更為強大的功能和靈活性。基於Less，我們可以在 編寫CSS時使用嵌入式申明、變量、混合模式、運算和顏色編輯功能函數等。簡單來說就 是Less可以讓你像編程一樣編寫CSS，把程序存儲在後綴為less的文件中，Less提供了框 架將其編譯為標準的css文件。舉個簡單的例子，如果你想為多個樣式設置同一個顏色， 可以這樣寫： @color: #FFFFFF; h1 { color: @color; } #sub{ color: @color; } 編譯後的css就是： h1 { color: #ffffff; } #sub { color: #ffffff; } 以上代碼只是Less的最簡應用。除了變量，還可以在CSS進行數學運算、傳參、文件相互 引用、規則嵌套等等。可以想像，這種編寫CSS的方式會為前端開髮帶來多大的改變。無 論是從靈活性、擴展性和可維護性上，Less都讓CSS開發有了大幅提升，動態性增強了。 編譯Less的方式很簡單，有兩種方式，一種是在使用時編譯。下載less.js，在樣式中引 用： <link rel="stylesheet/less" type="text/css" href="less/mystyles.less"> <script src="js/less.js" type="text/javascript"></script> 還有一種方式是使用前編譯好，可以通過服務器端的Node.js進行編譯，也可以到這個網 站http://incident57.com/less/下載Less.app，提供了GUI方式編譯less文件，目前只支 持Mac OS X。 基於Less編譯的Bootstrap 使用了Less的Bootstrap具備如下優點： Bootstrap實現起來依舊很簡單，使用也很簡單，把Bootstrap.css拖入你的代碼即可。編 譯less文件可以使用less.js，Less.app或Node.js等多種方案實現。 一旦編譯，Bootstrap框架僅包含CSS文件，這意味著沒有多餘的圖片、Flash或 Javascript，只有用於Web應用開發的簡潔而強大的CSS樣式。 兼容性 目前Bootstrap的最新版本是2.0.1，支持幾乎所有的主流瀏覽器，包括Safari、Chrome， Firefox、IE7.0及以上，最新版本還支持智能手機WebUI。 2.0的新特性 Bootstrap的版本更新很快，2011年11月剛發布了1.4，2012年2月份就再次放出新版本2.0 ，而且有了大幅改進。 2.0版本採用了更靈活也更受歡迎的12欄網格佈局，並以此來實現其各種佈局框架。增加 了響應式設計，以適應各種移動終端的需求。完善和改進原有樣式庫，並提供更豐富的新 樣式，包括樣式繁多的圖標（icon），漂亮易用的進度條等。改進和增加了自定義jQuery 插件，完善文檔，修復bug，同時還提供了很多基於Bootstrap構建的網站樣例。 已經使用1.4的開發者也不用擔心，Bootstrap專門提供了從1.4升級到2.0的手工嚮導可以 參考。 功能集合 Bootstrap2.0把現有框架進行了清晰的功能劃分，主要分為框架（Scaffolding），基礎 CSS，構件庫和jQuery插件庫。 Scaffolding主要提供基於網格的各種佈局，包括普通網格系統、嵌入式網格，固定佈局 、自適應佈局，同時可以對網格和佈局進行自定義。 Bootstrap2.0提供了響應式設計，可以通過單個文件支持各種手持設備，自適應不同的設 備和屏幕變化。 基礎CSS包括各種排版樣式（標題、段落、引用塊、列表、內聯標籤等），代碼展示方面 提供了基於code標籤的內嵌代碼，基於pre的塊代碼和基於Google Prettify的代碼樣式。 同時提供各種表格、表單、按鈕、圖標的展示方式。 構件庫提供了基於按鈕、導航、標籤、排版、警告、進度欄、圖像網格等控件。 jQuery插件庫則提供了十幾種插件實現動態效果，例如Modal、Dropdown、Tab、Tooltip 、Popover、Carousel等，開發者可以根據自己的業務需求使用不同的插件實現各種動態 效果。 -- 如果找不到不愛你或愛你的理由 ▁▁ 都可以是愛你或不愛你的理由 ▕Ａ６▏ ▕出品▏ 我想你要的是愛 不是理由 ￣￣ --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 114.245.166.189 ※ 編輯: A6 來自: 114.245.166.189 (08/28 01:48)