一.bootstrap框架簡介 Bootstrap是最受歡迎的前端開發框架。 什麼是框架：開發過程的半成品。 bootstrap具有以下重要特性： （1）完整的CSS樣式外掛 （2）豐富的預定義樣式表 （3）基於jQuery的插件集 （4）靈活的柵格系統 以下將簡單介紹對bootstrap可能用到的知識進行梳理。 二.新手入門 筆者使用版本是3.3.x 在bootstrap中文官網可以找到以下介面 本書採用預先編譯的版本進行學習 三. 文件結構 生產環境使用bootstrap.min.css和bootstrap.min.js。除了font結構之外，其他文件都可以隨意命名。 四. 標準模板 首先是在aptana搭建bootstrap環境。 ctrl+N新建web項目，選擇預設項目，命名項目，定義位置，完成。 把下載好的資料夾dist重新命名為bootstrap，複製貼上到專案資料夾下。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 html lang="zh-cn"> head> meta charset="UTF-8"= "UTF-8"> 🎜 meta http-equiv="X-UA-Compatible" > meta name="viewport"name="viewport" ="viewport" "> meta name="renderer" meta name= "author" meta name="keywords" ="keywords" meta name="description"name="description">="description" title>bootstrap基礎範本title> link rel="stylesheet" > link rel ="stylesheet" head> body> script src="scripts/jquery.min.js" script src ="bootstrap/bootstra. script src ="scripts/js." body> html> 注意用順序，自己的樣式和腳本必須在後面。 網上引用cdn是 1 2 3 4 5 6 7 8 "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.strapcdn.com/bootstrap/3.3.2/css/bootstrap.min..L. "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bstrap-themestrapcdn.com/bootstrap/3.3.2/css/bstrap-theme. "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> 五. CSS基本語法 1.優先權 和原生CSS一樣。 #xxx>.xxx>xxx 2.選擇器 （1）屬性選擇器 （2）子選擇器 >號 （3）兄弟選擇器 臨近選擇器用+號表示，比如說在一個nav-ul-li結構的導航條裡，欲設定兩個li之間的外邊距。 1 2 3 nav>li+li{ margin-left:10px; } 指定元素後邊的節點用~。比如說找article元素內h1後面所有的p元素 1 article h1~p{font-size:20px} 3. 偽類選擇器 bootstrap常用的偽類無外乎這幾個 4. display屬性 display很好用，但是不能亂用。 5.媒詢 媒詢是bootstrap響應式佈局核心的要素，但主要用到的還是min,max和and 1 2 3 4 5 6 7 8 9 @media(max-width: 767px){ /*在小於768像素的螢幕中，這裡樣式生效*/ } @media(max-width: 767px) and (max-width: /*在768-991像素區間的螢幕中，這裡樣式生效*/ } @media(min-width : 1200px){ /*在大於等於1200像素的螢幕中，這裡樣式生效*/ } 同理還可以用到高度。 6.相關JavaScript語法梳理 （1）與和或運算子（&&，||）（2）立即呼叫函數 推薦使用這個 1 2 3 ( function (){ do somthing }() ) 表示馬上呼叫。 （3）原型 BT中的js插件，都是基於物件導向的方法創建。 簡單舉個栗子，定義加減法運算 1 2 3 4 5 6 7 8 9 10 11 12 var decimalDigits = 2, tax = 5; function add(x, y) { return x + y; } function subtract(x, y) { return x - y; } //alert(add(1, 3)); 改寫成一個加減計算函數物件 1 2 3 4 var Calculator = function (decimalDigits, tax) { this.decimalDigits = decimalDigits; this.tax = tax; }; 然後，透過給Calculator物件的prototype屬性賦值物件字面量來設定Calculator物件的原型。 1 2 3 4 5 6 7 8 9 10 Calculator.prototype = { add: function (x, y) { return x + y; }, subtract: function (x, y) { return x - y; } }; //alert((new Calculator()).add(1, 3)); （程式碼來自作者部落格） 7.jQuery知識梳理 （1）事件綁定 jQuery常用的綁定語法有on/off、bind/unbind。比如說 1 2 $('div').on(click,function(){...}); $('div').off(click,function(){...}); 註：bind()函數是jQuery 1.7之前或更早版本所採用的一個用來綁定事件處理程序的函數；on()函數是jQuery 1.7版本提供的首選的用來綁定事件處理程序的函數；從1.7版本的介紹以及參數描述來看，其實這兩個函數基本上用法一致，但可能在早期的版本中，bind()函數一次只能為標籤對象綁定一個事件的處理程序，而on ()函數則可以一次為多個不同的事件綁定處理程序。 在bootstrap方法中的綁定類似但是思想不同， 1 $(document).on('click.bs.carosel.data.api','div',function'div', . 利用的是冒泡的機制，選擇document的div。提高了性能。 （2）命名空間 調試時，事件後面加上一段字串例如click.djtao，再用trigger方法觸發時，就不會影響原本的點擊事件。 （3）$.data() 蒐集指定元素上所有以data為前綴的自訂屬性，合併為一個字面量。比如說： 1 div id="abc" data-role=aaa data-xxx ="djtao">div> 我要收集role的值 1 $('#abc').data( 'role' ) 如果不帶參數，則等於收集並聲明了一個json。 var value={role:'aaa',toggle:'toggle',xxx:'djtao'} 8.H5的輔助屬性 可以支持盲人等人群閱讀。通常以arial為前綴統稱arial屬性。 【後記】 很多國內作者的書讀起來就跟看api文檔的感覺一樣。自己的話多了錯誤就多，而且還貴(@﹏@)~。 。但API文件本身的起點不低，既然說是「深入理解」了，多讀幾遍，經歷過若干專案。或許就能看出它高於API文件的價值。 本系列閱讀筆記基於現學現用，快速入門的想法，將會插入一些書外網上蒐集的書外實例。基本上都是自己敲過一遍，部分內容自己改造過，故而只是一系列記錄自己學習過程的文章。而已。 來自為知筆記(Wiz)
