Bootstrap構成模塊是怎樣的

這篇文章給大家分享的是有關Bootstrap構成模塊是怎樣的的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

Bootstrap構成模塊從大的方面可以分為布局框架、頁面排版、基本組件、jQuery插件以及變量編譯的LESS等部分。

（1）頁面布局

布局對于每個項目都必不可少。Bootstrap在960柵格系統的基礎上擴展出一套優秀的柵格布局，而在響應式布局中有更強大的功能，能讓柵格布局適應各種設備。這種柵格布局使用也相當簡單，只需要按照HTML模板應用，即可輕松構建所需的布局效果。

此外，改變模板中的類名；就能實現不同的布局風格。例如，要實現常見的固定布局，只需在HTML中添加container類名；而要實現流體布局，只需在HTML中添加container-fluid類名。

Bootstrap還為開發者設計了Responsive，讓布局框架更為出色。開發者可以在此基礎上覆蓋任何樣式，從而實現理想中的響應式設計。

（2）頁面排版

頁面排版的好壞直接影響產品風格，也就是說頁面設計是不是好看。在Bootstrap中，頁面的排版都是從全局的概念上出發，定制了主體文本、段落文本、強調文本、標題、Code風格、按鈕、表單、表格等格式。

Bootstrap在Icon部分采用了Sprites技術，為用戶準備了上百種常用的Icon應用。

這里有必要向讀者推薦Font Awesome項目。它是Dave Gandy在Bootstrap的基礎上擴展而來的一個Icon主題，最大的特點在于，整套圖標中沒有運用任何圖片。Font Awesome項目中主要運用了CSS3的@font-face和偽元素一起實現。

（3）基本組件

基本組件是Bootstrap的精華之一，其中都是開發者平時需要用到的交互組件。例如，網站導航、標簽頁、工具條、面包屑、分頁欄、提示標簽、產品展示、提示信息塊和進度條等。這些組件都配有jQuery插件，運用它們可以大幅度提高用戶的交互體驗，使產品不再那么呆板、無吸引力。

（4）jQuery插件

Bootstrap中的jQuery插件主要用來幫助開發者實現與用戶交互的功能，Bootstrap 1提供了6種常見插件。

Bootstrap 2中的jQuery插件如何使用，還需要根據Bootstrap所提供的文檔，以及各插件的參數，具體問題具體分析。只有充分了解，才能靈活運用。

（5）動態樣式語言LESS

LESS是動態CSS語言，它基于JavaScript引擎或者服務器端對傳統的CSS進行動態擴展，具有更強大的功能和更好的靈活性。基于LESS，編輯CSS就可以像使用編程語言一樣，定義變量、嵌入聲明、混合模式、運算等。

Bootstrap中有一套編輯好的LESS框架，開發者可以將其應用到自己的項目中，也可以通過less.js、Less.app或Node.js等方法來編輯LESS文件。LESS文件一旦編譯，Bootstrap框架就僅包含CSS樣式，這意味著沒有多余的圖片、Flash之類的元素。

感謝各位的閱讀！關于“Bootstrap構成模塊是怎樣的”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！