標籤：網站前端 bootstrap
簡單介紹:
1. Bootstrap於2010年Twitter開源將常見的CSS布局小工具和JS外掛程式進行了封裝,大大規範且提高了代碼品質及開發效率.
2. Bootstrap包含完整的基礎CSS外掛程式,豐富的預定義樣式表,基於JQuery的JS外掛程式集,非常靈活的響應式刪欄系統,支援跨平台,且完全支援自訂.
注意: Bootstrap的所有JS外掛程式都依賴jQuery庫,所以要確保在使用這些功能的時候引用相應的jQuery檔案
模版標準:
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 預設文件寬度與裝置寬度保持1:1 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="keywords" content=""> <title>Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <!-- 以下2個外掛程式使IE8支援HTML5元素和媒體查詢 --> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <!-- 如果使用Bootstrap的JS外掛程式則必須引入JQuery --> <script src="js/jquery.min.js"></script> </body></html>
樣式標準:
說明: Bootstrap的CSS核心就是選取器的定義以及各自優先順序上的處理,CSS優先順序引入組合概念(a, b, c, d),a表示style屬性,優先順序最高,由於一般都是class樣式,所以該值一般都是0,b表示該選取器上id數量的總和,一般都是1個,c表示該選取器上其它的屬性CSS選取器以及偽類別選取器的總數,d表示元素和虛擬元素選取器個數,所以#menu h2就是0101, h2.title就是0011,h2+p就是0002,所以#leftbar li#first就比#leftbar li:first-child的優先順序高因為前者是0201後者是0102,所以前者優先順序高.
指令碼標準:
+function($){ // Javascript Code}(jQuery);
說明: 如上自執行函數,在執行時傳入jQuery對象,這樣做i的好處在於函數內部$已經是局部變數,不再受外部範圍影響,前面的+號和;號功能一樣,都是為了防止代碼壓縮時由於不規範而出錯
Alert.prototype.show = function (e){ // Javascript Code};
說明: 如上原型對象,就是在Alert函數上定義一個名為show的原型方法,調用時只需要在其執行個體上調用原型上的show方法即可
$(document).on(‘mouseover.bs.stress‘, ‘tr:not(:first)‘, function(event) { // JavaScript Code});
說明: 如上事件綁定,支援以事件命名空間的方式在事件後加點自訂事件處理函數,常規綁定事件會觸發mouseover所有綁定的回調,而以命名空間的形式可以確保只觸發自訂的事件.
<select id="area" data-role="area" data-toggle="toggle" role="combobox"></select>
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/8B/4F/wKioL1hJcRzgkkT5AARvgOR_pSA257.png" title="clipboard.png" alt="wKioL1hJcRzgkkT5AARvgOR_pSA257.png" />
說明: 如上輔助設計,支援很多自訂屬性,如data-*開頭,還有一個role支援如上不同類別,不同裝置會對此角色做不同的反應.
+function($){ console.log($("#area").data("role")) var $data = $("#area").data(); for(var key in $data){ console.log(key, $data[key]) };}(jQuery)
說明: $(selector).data([field])會自動搜集指定元素上以data-開頭的自訂HTML5屬性,
本文出自 “滿滿李 - 營運開發之路” 部落格，請務必保留此出處http://xmdevops.blog.51cto.com/11144840/1880956
網站前端_Bootstrap.基礎入門.0001.BS的模版標準/樣式標準/指令碼標準?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
