移動web開發+前端框架bootstrap+Zepto+gitbook相關筆記（一）

1.Bootstrap中的js組件裏的標籤頁使用的是錨點連接的方式切換選項卡及內容的 ◆導航區域：a標籤的href='#home' ◆內容區域：div標籤的id='home' ◆使用時注意：【 ◇導航區域與內容區域的位置能夠互換 ◇兩塊兒區域是互相獨立的，僅僅經過href屬性跟id進行關聯，因此才能夠防止不一樣的位置 ◇若是想要增長導航和內容，須要在兩個區域都添加代碼，由於須要對應，新增長的導航對應新增長的內容。 ◇ ◇ 】 ◆ ◆ 2.浮動元素與非浮動元素進行組合時 ◆浮動元素的標籤必定要放在上面，雖然浮動元素會變成行內塊兒結構，可是浮動元素有一個特性，就是後面的浮動元素只會跟着前面的浮動元素佔在一行，後面的浮動元素並不會跟着前面的非浮動元素佔在一行，若是前面的是非浮動元素，不管上面非浮動元素的空間有多麼小，所留給浮動元素的位置多麼大，浮動元素都會另起一行的來佔位置。 ◆若是前面的浮動元素佔的空間很小，後面非浮動元素會跟上來，若是不是文字那麼會佔在浮動元素的下方，若是是文字那麼會跟在浮動元素的旁邊，由於文字的層級比浮動元素的層級高。 ◆浮動元素在前，非浮動元素在後，若是不想非浮動元素受浮動元素的影響，那麼能夠給非浮動元素建立一個格式化上下文，如使用overflow:hidden，獲取計算浮動元素的具體寬度，而後經過浮動元素的margin屬性來遠離浮動元素，這樣就不會受浮動元素的影響了，通常都會經過這兩種方式來實現浮動元素的這一邊是固定寬度，非浮動元素的這一邊是自適應寬度。 3.工做以後，大部分公司的員工都是按照設計圖去寫的，並非按照你本身的想法想怎麼寫就怎麼寫。 4.Bootstrap的使用： ◆默認的符合要求就直接使用 ◆html標籤組成不對勁，使用瀏覽器審查元素，進行刪減，最後再去修改代碼 ◆樣式不對，找到bootstrap.css中的該組件的全部樣式，而後拷貝到新的css文件中，修改拷貝後的樣式，替換掉原來的類名爲本身定義的類名，最後在本身的頁面中修改原bootstrap中的類名爲本身定義的類名便可，可是要先引入本身的css樣式表。 ◆ ◆ 5.柵格系統的偏移 ◆柵格一行默認只能使用12份 ◆偏移的寬度也是在這12份裏面 ◆柵格一行可以放置元素，計算須要考慮的偏移 ◆col-md-offset-4表示按照正常的四份進行偏移，那麼這一行就只能防止8份了，由於有4份做爲了偏移的部分。 ◆ 6.響應式是依賴媒體查詢，不少的樣式隨着屏幕的變化而變化，都是經過媒體查詢來實現的，實際上也能夠經過js 的onresize事件加上獲取瀏覽器的可視區域的寬高來動態修改樣式。 7.Zepto這個相似jquery的小框架，優勢是最小的能夠壓縮到幾kb，而jquery最小也得幾十kb，因此Zepto很好，可是隨着時代的發展，移動運營商和瀏覽器廠商都進化了，網速快了，瀏覽器也知道去緩存資源了，因而Zepto再也不那麼流行了，jquery之因此大是由於功能愈來愈強大了，往裏面加的代碼也多了，因此大，而Zepto是將jquery最經常使用的方法提取出來再進行封裝，因此減小了不少的代碼。 8.Zepto介紹 ◆模塊兒化，想要使用對應的功能，須要導入對應的模塊兒，先要引入核心模塊兒，而後須要其它模塊兒再引其它模塊兒，好比須要使用普通的事件，就引入event模塊兒，若是須要使用動畫就使用fx模塊，再若是須要使用移動端觸摸屏幕的事件，那麼就引入touch模塊兒。 ◆語法跟jq基本同樣 ◆如今沒有之前流行 ◆如今流行jq，本身封裝一個jq，把移動事件封裝進去。 ◆它處理兼容性問題的地方所有被砍掉了，否則也不會相比於jquery而言那麼小了。 ◆它是專門爲移動端而生的，在移動端使用最好。 9.gitbook導出筆記 ◆首先要安裝gitbookeditor ◆而後再安裝node.js（是一個程序） ◆以後經過npm安裝gitbook，安裝完畢（C:\Users\LENOVO\AppData\Roaming\npm） ◆其實gitbook中的東西都在（C:\Users\LENOVO\GitBook\Library\Import）裏面 ◆使用windows鍵+r，輸入cmd ◆而後使用cd命令切換到gitbook指定的書本目錄，輸入gitbook build --gitbook=2.5.0，最後就會有一個_book的文件夾，這個文件夾中的html文件就是你寫的書本。 ◆ ◆ 10.border有四條邊，在不一樣狀況下，邊框是不一樣的形狀 ◆當只設置兩條不相連的兩條邊時，邊框是矩形的。 ◆當設置了相連的邊時，邊框是梯形的。 ◆若是內容的高度或者padding的值都爲0時，這個時候設置的每一條邊框都是三角形的。