前端開發(fā)框架bootstrap

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

程序老白目錄 Bootsrap簡(jiǎn)介Css樣式類

組件javascript組件案例

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

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

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

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

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

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

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

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

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

快速設(shè)置浮動(dòng)

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

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

清除浮動(dòng)

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

可用的圖標(biāo)

包括200個(gè)來(lái)自GlyphiconHalflings的字體圖標(biāo)。GlyphiconHalflings一般不允許免費(fèi)使用，但是他們的作者允許Bootstrap免費(fèi)使用。

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

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

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

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

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

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

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

分頁(yè)

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

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

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

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

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

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

JavaScript插件

通過在基于文本的輸入框前面，后面或是兩邊加上文字或按鈕，可以擴(kuò)展對(duì)表單的控制。用帶有.input-group-addon的.input-group，可以給.form-control前面或后面追加元素。jQuery插件為Bootstrap的組件賦予了“生命”?？梢院?jiǎn)單地一次性引入所有插件，或者單個(gè)引入到你的頁(yè)面。這些動(dòng)態(tài)交互插件可以很好的提高用戶體驗(yàn)。

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

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

JavaScript插件

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

模態(tài)框modal.js

JavaScript插件

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

工具提示tooltip.js此插件不依賴圖片，只是使用CSS3來(lái)實(shí)現(xiàn)動(dòng)畫效果，并使用data屬性存儲(chǔ)標(biāo)題。

JavaScript插件

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

警告框alert.js用法

通過JavaScri