前端開發(fā)框架bootstrap

Bootstrap使用瀏覽器兼容、響應(yīng)式設(shè)計的前端框架

程序老白目錄 Bootsrap簡介Css樣式類

組件javascript組件案例

主流前端框架介紹在幾年前，并沒有真正意義上的前端開發(fā)。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)站和Web應(yīng)用程序變得越來越復(fù)雜，前端部分的工作獨立出來逐漸成為現(xiàn)在的前端開發(fā)。如今，我們可以看到越來越多的公司在招聘前端開發(fā)崗位。前端開發(fā)并不容易，除了掌握基本的HTML、CSS和Javascript之外，因為不同版本的瀏覽器和平臺，你需要知道如何做一個跨瀏覽器的網(wǎng)站。而最新的發(fā)展趨勢——響應(yīng)式設(shè)計，它不僅使Web項目開發(fā)更難，也需要花費更多的開發(fā)時間。這時候選擇一種合適的前端框架能夠大大縮短開發(fā)的周期，而且在開發(fā)人員沒有很深厚美學(xué)功底也可以搭建出漂亮的網(wǎng)站。前言Bootstrap是目前桌面端最為流行的開發(fā)框架，一經(jīng)Twitter推出，勢不可擋。Bootstrap主要針對桌面端市場，Bootstrap3提出移動優(yōu)先。主要基于jQuery進行JavaScript處理。Bootstrap框架在布局、版式、控件、特效方面都非常讓人滿意，都預(yù)置了豐富的效果，極大方便了用戶開發(fā)。BootstrapExtJS是一種主要用于創(chuàng)建前端用戶界面，是一個基本與后臺技術(shù)無關(guān)的前端ajax框架。功能豐富，無人能出其右。無論是界面之美，還是功能之強，ext的表格控件都高居榜首。華麗的界面，靈活的功能，還有開發(fā)工具都是配套的，但有個最大的問題，用就得花錢！ExtjsEasyui幫助你構(gòu)建你的web應(yīng)用更加容易。它是一個基于jquery的插件，開發(fā)出來的一套輕量級的ui框架，非常小巧而且功能豐富。但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以后的版本源代碼都是經(jīng)過混淆的，如果遇到問題修改起來會非常麻煩！是開源免費.EasyuijQueryUI是一套jQuery的頁面UI插件，包含很多種常用的頁面控件，例如Tabs（如本站首頁右上角部分）、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數(shù)據(jù)排序、窗體大小調(diào)整等等非常多的內(nèi)容。功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源！實際上是jQuery插件，專指由jQuery官方維護的UI方向的插件。jQueryUI

SenchaTouch可以讓你的WebApp看起來像NativeApp。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5和CSS3的WEB標準，全面兼容Android和AppleiOS設(shè)備。屬于重量級框架。交互操作用javascript，所以完全跨平臺。SenchaTouch(移動端)jQueryMobile是jQuery在手機上和平板設(shè)備上的版本。jQueryMobile不僅會給主流移動平臺帶來jQuery核心庫，而且會發(fā)布一個完整統(tǒng)一的jQuery移動UI框架。支持全球主流的移動平臺。。相比senchatouch是輕量級的。jQueryMobile(移動端)。比較

對于桌面端，目前Bootstrap和jQueryUI已經(jīng)可以滿足大多數(shù)的開發(fā)需求，也在業(yè)界得到了廣泛的應(yīng)用，有著豐富的組件和擴展，以及相對簡潔的語法和操作。局域網(wǎng)的應(yīng)用，還可以考慮SenchaExtJS框架，效果更加震撼，但是對網(wǎng)絡(luò)的要求也更高。如果這些還是不能滿足您內(nèi)心的狂野，那只能建議您使用SilverLight了，但這些對網(wǎng)絡(luò)速度非常敏感。

但是對于互聯(lián)網(wǎng)產(chǎn)品類網(wǎng)站，現(xiàn)在流行簡潔至上，對于前臺的選擇還需要滿足幾點：

框架的選擇跨瀏覽器：前端框架都在不同的瀏覽器測試通過。一致性：

UI組件，如導(dǎo)航，按鈕，標簽，表單，下拉菜單，表格...

他們的風(fēng)格都相互統(tǒng)一?？焖匍_發(fā)：您可以輕松，快速的構(gòu)建一個布局。他們通常有代碼片段和優(yōu)秀的文檔。響應(yīng)式：所有CSS組件和Javascript插件能夠從桌面擴展到移動端。綜上所述：選擇Bootstrap進行網(wǎng)站的布局和基礎(chǔ)樣式，快速實現(xiàn)網(wǎng)站跨瀏覽器和響應(yīng)式設(shè)計以及頁面的統(tǒng)計風(fēng)格，再配合jqueryUI的一些交互插件，便可以很好滿足網(wǎng)站的需求。

框架的選擇Bootstrap是非常棒的前端開發(fā)工具包，它擁有以下特色：適應(yīng)各種技術(shù)水平跨設(shè)備、跨瀏覽器提供12列柵格布局支持響應(yīng)式設(shè)計樣式化的文檔可定制的jQuery插件選用LESS構(gòu)建動態(tài)樣式支持HTML5支持CSS3提供開源代碼（)Bootstrap簡介Bootstrap提供了很多的樣式類供使用，以便能夠快速搭建出統(tǒng)一美觀的頁面，下面列出常用的重要的做個介紹，詳細的可以到官網(wǎng)查看其他及用法。viewport元數(shù)據(jù)標簽在移動設(shè)備瀏覽器上，通過為viewportmeta標簽添加user-scalable=no可以禁用其縮放（zooming）功能。這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓你的網(wǎng)站看上去更像原生應(yīng)用的感覺。注意，這種方式我們并不推薦所有網(wǎng)站使用，還是要看你自己的情況而定！Containers類用.container包裹頁面上的內(nèi)容即可實現(xiàn)居中對齊。在不同的媒體查詢閾值范圍內(nèi)都為container設(shè)置了width，用以匹配柵格系統(tǒng)。注意，由于設(shè)置了padding和固定寬度，.container不能嵌套。Css樣式類柵格系統(tǒng)Bootstrap內(nèi)置了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。柵格系統(tǒng)用于通過一系列的行與列的組合創(chuàng)建頁面布局，你的內(nèi)容就可以放入創(chuàng)建好的布局中。Css樣式類16列偏移

使用.col-md-offset-*可以將列偏移到右側(cè)。這些class通過使用*選擇器將所有列增加了列的左側(cè)margin。例如，.col-md-offset-4將.col-md-4向右移動了4個列的寬度。Css樣式類17表格為任意<table>標簽添加.table可以為其賦予基本的樣式—少量的內(nèi)補（padding）和水平方向的分隔線。Css樣式類條紋狀表格。Css樣式類帶邊框的表格。表單。單獨的表單控件會被自動賦予一些全局樣式。所有設(shè)置了.form-control的<input>、<textarea>和<select>元素都將被默認設(shè)置為width:100%;。將label和前面提到的這些控件包裹在.form-group中可以獲得最好的排列。Css樣式類樣式代碼Css樣式類內(nèi)聯(lián)表單為<form>元素.form-inline可使其內(nèi)容左對齊并且表現(xiàn)為inline-block級別的控件。只適用于瀏覽器窗口至少在768px寬度時（窗口寬度再小的話就會使表單折疊）。Css樣式類按鈕使用下面列出的class可以快速創(chuàng)建一個帶有樣式的按鈕。Css樣式類按鈕需要讓按鈕具有不同尺寸嗎？使用.btn-lg、.btn-sm、.btn-xs可以獲得不同尺寸的按鈕。Css樣式類工具class

快速設(shè)置浮動

通過這兩個class讓頁面元素左右浮動。!important被用來避免某些問題。也可以像mixin一樣使用這兩個class。Css樣式類內(nèi)容區(qū)域居中

將頁面元素設(shè)置為display:block并通過設(shè)置margin使其居中?？梢宰鳛閙ixin或class使用。。工具class

清除浮動

使用.clearfix清除任意頁面元素的浮動。顯示和隱藏內(nèi)容通過.show和.hidden可以強制顯示或隱藏任一頁面元素（包括在屏幕閱讀器上）。打印classCss樣式類為了加快開發(fā)人員的開發(fā)速度，bootstrap提供了一些常用的組件，可以直接拿過來使用而不用做太多修改，當(dāng)然這些組件的外觀同樣簡約美觀，你也可以自定義。下面列出比較常用的幾個：

可用的圖標

包括200個來自GlyphiconHalflings的字體圖標。GlyphiconHalflings一般不允許免費使用，但是他們的作者允許Bootstrap免費使用。

組件按鈕式下拉菜單把任何按鈕放入.btn-group然后加入正確的菜單標記，就可以做成下拉菜單觸發(fā)器。

組件輸入框組通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。

組件通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。導(dǎo)航條

Bootstrap中可用的導(dǎo)航有相似的標記，用基類.nav開頭，這是相似的部分。改變修飾類可以改變樣式。

組件通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。導(dǎo)航條

通過添加.navbar-inverse類可以改變導(dǎo)航條的外觀。

組件通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。反色導(dǎo)航條

分頁

組件通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素?；照陆o鏈接、Bootstrap導(dǎo)航等等加入<spanclass="badge">，可以容易地高亮新的或未讀的條目。進度條

組件通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。大屏幕輕量，靈活的可選組件，擴展整個視角，展示您站點上的關(guān)鍵內(nèi)容。要讓大屏幕介紹是屏幕寬度，請別把它包括在.container。

組件通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素?？s略圖用縮略圖組件擴展Bootstrap的柵格系統(tǒng)，可以簡單地顯示柵格樣式的圖像，視頻，文本，等等。

組件通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。媒體對象這是一個抽象的樣式，用以構(gòu)建不同類型的組件，這些組件都具有在文本內(nèi)容的左或右對齊的圖片（就像blog內(nèi)容或Tweets等）。

組件通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。列表組列表組是靈活又強大的組件，不僅僅用于顯示簡單的成列表的元素，還用于復(fù)雜的定制的內(nèi)容。

組件通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。面版雖然不總是必須，但是某些時候你可能需要將某些內(nèi)容放到一個盒子里。對于這種情況，可以試試面板組件。

JavaScript插件

通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。jQuery插件為Bootstrap的組件賦予了“生命”?？梢院唵蔚匾淮涡砸胨胁寮?，或者單個引入到你的頁面。這些動態(tài)交互插件可以很好的提高用戶體驗。

首先要提到下Data屬性，該屬性可以僅僅通過data屬性API就能使用所有的Bootstrap插件，無需寫一行JavaScript代碼。這是Bootstrap中的一等API，也應(yīng)該是你的首選方式。

在某些情況下可能需要將此功能關(guān)閉。因此，我們還提供了關(guān)閉data屬性API的方式，即解除綁定到文檔命名空間上的所有事件data-api。如下：

JavaScript插件

通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。

模態(tài)框modal.js

JavaScript插件

通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。

工具提示tooltip.js此插件不依賴圖片，只是使用CSS3來實現(xiàn)動畫效果，并使用data屬性存儲標題。

JavaScript插件

通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴展對表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。

警告框alert.js用法

通過JavaScri