bootstrap的一些API認識以及應用和回到頂部按鈕的實現 week15學習

這周的很多時間是花在了bootstrap上，把慕課網的基礎教學部分看完了，然後看了一下有響應式的部分以及簡單看了一下回到頂部按鈕是怎麼實現的。
基礎部分講的都是一些API如何應用，如果可以很好地應用，可以用很少的代碼實現很好地網頁效果。 通過getbootstrap.com官網學習，可以將js,css,fonts等字型檔下載再連結入自己的檔案，也可以直接連結目標網址進入檔案來實現。當中有很多內容都可以直接引入類名來實現，排版中的標題，文字，對其風格，代碼的寫入，表格表單，複選框，按鈕，下拉式功能表，媒體對象等等，僅需將類名引入即可。

覺得其中比較重要的是網格系統，它可以很好地做好頁面配置排版。

網格系統------實現原理：

                                        1、資料行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊和內距(padding)。如：

                      <div class="container">                      <div class="row"></div>                      </div>

                                        2、在行(.row)中可以添加列(.column)，但列數之和不能超過平分的總列數，比如12。如：

                      <div class="container">                      <div class="row">                      <div class="col-md-4"></div>                      <div class="col-md-8"></div>

                                        3、具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row)的直接子項目

                                        4、通過設定內距（padding）從而建立列與列之間的間距。然後通過為第一列和最後一列設定負值的外距（margin）來抵消內距(padding)的影響

網格系統----實現格式：

                                     <div class="container">                                            <div class="row">                                                   <div class="col-md-4">.col-md-4</div>                                                   <div class="col-md-8">.col-md-8</div>                                            </div>                                            <div class="row">                                                   <div class="col-md-4">.col-md-4</div>                                                   <div class="col-md-4">.col-md-4</div>                                                   <div class="col-md-4">.col-md-4</div>                                            </div>                                            <div class="row">                                                   <div class="col-md-3">.col-md-3</div>                                                   <div class="col-md-6">.col-md-6</div>                                                   <div class="col-md-3">.col-md-3</div>                                            </div>                                     </div>

網格系統----列位移：

                                     有的時候，我們不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術手段來。這個時候就可以使用列位移（offset）功能來實現。使用    列 位移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要位移的列組合數)，那麼具有這個類名的列就會向右位移。例如，你在列元                                  素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度。

網格系統----列排序：

                                    列排序其實就是改變列的方向，就是改變左右浮動，並且設定浮動的距離。在Bootstrap架構的網格系統中是通過添加類名“col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數)。

網格系統----列的嵌套：

                                     Bootstrap架構的網格系統還支援列的嵌套。你可以在一個列中添加一個或者多個行（row）容器，然後在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當前外部列的寬度。（總列數也不能超過12）

<div class="container">    <div class="row">        <div class="col-md-8">        我的裡面嵌套了一個網格            <div class="row">            <div class="col-md-6">col-md-6</div>            <div class="col-md-6">col-md-6</div>          </div>        </div>    <div class="col-md-4">col-md-4</div>    </div>    <div class="row">        <div class="col-md-4">.col-md-4</div>    <div class="col-md-8">    我的裡面嵌套了一個網格        <div class="row">          <div class="col-md-4">col-md-4</div>          <div class="col-md-4">col-md-4</div>          <div class="col-md-4">col-md-4</div>        </div>    </div>    </div></div>還有自己看的一點回到頂部效果的實現：首先要準備按鈕的表徵圖，然後將按鈕設定為表徵圖按鈕，利用CSS+HTML做好定位，可以通過錨連結實現回到頂部效果，不過它的缺點是視覺上不夠直觀，使用者體驗不是很好。相比來說，用js實現效果可能會比較好一些<a href="javascript:;" id="btn">按鈕</a>//用來阻止瀏覽器的預設行為

js原始碼：

// 擷取頁面可視區的高度var clientHeight = document . documentElement . clientHeight;// 擷取捲軸高度， IE 和 其他主流瀏覽器var offsetTop = document . documentElement . scrollTop || document . body . scrollTop ;使用JavaScript實現“按鈕”的顯示與隱藏1、隱藏回到頂部按鈕(1)在樣式表回到頂部按鈕設定成display:none;2、擷取頁面可視區的高度(1)建立變數，擷取頁面可視區的高度var clientHeight=document.documentElement.clientHeight;(2)彈出頁面可視區高度alert(clientHeight);(3)顯示回到頂部按鈕，把樣式表中的display先刪除(4)重新整理頁面擷取高度後隱藏3、增加判斷，在滾動的時候(1)擷取捲軸距離頂部的高度var disTop = document.documentElement.scrollTop || document.body.scrollTop;(2)增加判斷，讓按鈕顯示出來（在樣式表中可以改成display:block;就能顯示，但如何用js顯示）if(osTop>=clientHeight){obtn.style.display='block';//把樣式表中的display改成block}(3)回到第一屏隱藏else{obtn.style.display='none';}