1. 程式人生 > >初學者一定要認識Web前端開發框架--Boostrap

初學者一定要認識Web前端開發框架--Boostrap

Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美,直觀並且給力的web設計工具包,可以用來開發跨瀏覽器相容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI元件,柵格系統以及一些常用的JavaScript外掛。


Bootstrap是用動態語言LESS寫的,主要包括四部分的內容:


    腳手架——全域性樣式,響應式的12列柵格佈局系統。記住Bootstrap在預設情況下並不包括響應式佈局的功能。因此,如果你的設計需要實現響應式佈局,那麼你需要手動開啟這項功能。
    基礎CSS——包括基礎的HTML頁面要素,比如表格(table),表單(form),按鈕(button),以及圖片(image),基礎CSS為這些要素提供了優雅,一致的多種樣式。
    元件——收集了大量可以重用的元件,如下拉選單(dropdowns),按鈕組(button groups),導航面板(navigation control)——包括:tabs,pills,lists標籤,麵包屑導航(breadcrumbs)以及頁碼(pagination),縮圖(thumbnails),進度條(progress bars),媒體物件(media objects)等等。
    JavaScript——包括一系列jQuery的外掛,這些外掛可以實現元件的動態頁面效果。外掛主要包括模態視窗(modals),提示效果(tool tips),“泡芙”效果(popovers),滾動監控(scrollspy),旋轉木馬(carousel),輸入提示(typeahead),等等。 
想要快速掌握web前端技能,可以參加知海匠庫web前端課程,讓你成為一名優秀的程式設計師。
Bootstrap已經足夠強大,能夠實現各種形式的 Web 介面。為了更加方便地利用Bootstrap進行開發,很多工具和資源可以用來配合使用,下面列舉了其中的一部分工具和資源。

    jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來說這是個非常好的資源,能夠把 Bootstrap的清爽介面元件引入到jQuery UI中。
    jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似,這是一個為jQuery mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問,那麼這個資源對你來說很方便易用。
    Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控制元件。Fuel UI 安裝,修改,更新以及優化都很簡單方便。
    StyleBootstrap.info —— Bootstrap提供了自己的幾種介面風格,StyleBootstrap提供了更多的配色選項,並且你可以給每個元件都應用不同的配色。
    BootSwatchr —— 利用這個工具你可以立刻檢視主題修改後的效果。對於每一次變動的效果,這個應用都會生成一個唯一的URL方便你與他人分享,你也可以在任意時刻修改你的主題。
    Bootswatch —— 提供大量免費的Bootstrap主題。
    Bootsnipp —— 線上前端框架互動元件製作工具,是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。

    LayoutIt —— 通過介面拖放生成器簡便快捷地建立基於Bootstrap的前端程式碼。通過拖放動作將Bootstrap風格的元件加入到你的個人設計裡並且可以方便地修改他們的屬性,簡單便捷。