前端學習隨筆 -- 前端框架

前端框架



jQuery擴展

    -- 擴展和自執行函數

    -- 登陸、註冊、Form驗證

    -- parsleyjs        

        http://parsleyjs.org/

    -- jQuery Validate  

        http://jqueryvalidation.org/


插件

    -- bxslider

        http://bxslider.com/

    -- Bootstrap

        http://www.bootcss.com/

    -- Font Awesome

        http://fontawesome.io/

    -- jQuery EasyUI

        http://www.jeasyui.com/download/index.php





BootStrap


一、介紹

Bootstrap 是一個用於構建響應式網站的前端框架。無論你想構建應用 程序、博客還是 CMS 網站,Bootstrap 都完美適用,只要你想得到, 它都能行。Bootstrap 把 HTML、CSS 和 JavaScript 組合起來,爲構建 穩定的網站提供了基礎設施,也能提高開發效率。基於默認的網格系 統,佈局變成了小菜一碟,按鈕、導航和表格也都活脫脫地賞心悅目。 十幾個 JavaScript 插件更爲我們賦予網站交互能力提供了強大保障。


響應式佈局:根據用戶設備的不同,進行相應的佈局


Bootstrap 是 Mark Otto 和 Jacob Thornton 共同開發的一個開源框架。 最初發布 Bootstrap 的時候,他們兩位都在 Twitter 工作。當時,他 們面臨着爲公司內部提供一套標準化的前端開發工具的需求。在發佈 Bootstrap 的那篇博客中,Mark Otto 這樣介紹他們的新項目:


Twitter誕生初期,爲了完成前端開發任務,工程師們幾乎嘗試 了自己熟悉的所有庫。應用之間的不一致性導致它們難以擴 展和維護。Bootstrap最初就是這個問題的一個解決方案,而且 在Twitter內部第一次Hackweek上得到了認可。Hackweek結束 後,我們手頭上的項目已經相當穩定,可以在公司內部部署使 用了。

    --Mark Otto 

      https://dev.twitter.com


Bootstrap 是 2011 年 8 月發佈的,發佈之後就迅速走紅。而且,它也 從最初 CSS 驅動的項目,發展到內置了很多 JavaScript 插件和圖標, 並且涵蓋了表單和按鈕元素。Bootstrap 本身支持響應式 Web 設計, 而且擁有一個非常穩健的 12 列、940 像素寬的網格佈局系統。值得一 提的是,Bootstrap 網站(http://getbootstrap.com)上還提供了一個構 建工具,讓你根據自己的需求選擇 CSS 和 JavaScript 功能。所有這一 切讓前端 Web 開發有了前瞻性的設計和開發基礎,開發效率倍增。上 手使用 Bootstrap 非常簡單,跟在網站中整合 CSS 和 JavaScript 沒有 什麼區別。




二、文件結構


bootstrap2

    ├── css

    │   ├── bootstrap-responsive.css

    │   ├── bootstrap-responsive.min.css

    │   ├── bootstrap.css

    │   └── bootstrap.min.css

    ├── img

    │   ├── glyphicons-halflings-white.png

    │   └── glyphicons-halflings.png

    └── js

        ├── bootstrap.js

        └── bootstrap.min.js


bootstrap3

    ├── css

    │   ├── bootstrap-theme.css

    │   ├── bootstrap-theme.css.map

    │   ├── bootstrap-theme.min.css

    │   ├── bootstrap.css

    │   ├── bootstrap.css.map

    │   └── bootstrap.min.css

    ├── fonts

    │   ├── glyphicons-halflings-regular.eot

    │   ├── glyphicons-halflings-regular.svg

    │   ├── glyphicons-halflings-regular.ttf

    │   ├── glyphicons-halflings-regular.woff

    │   └── glyphicons-halflings-regular.woff2

    └── js

        ├── bootstrap.js

        ├── bootstrap.min.js

        └── npm.js


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章