【BootStrap】佈局組件 I

時間 2019-12-10

原文原文鏈接

BootStrap佈局組件 I前端

　　除了在原生的HTML基礎上進行了外觀和類別上的改進，BS還包裝了不少組件進庫中，設計網頁時咱們能夠方便地調用這些組件。下面來簡略地介紹一下各類各樣的組件mysql

■　　字體圖標 Glyphiconsql

　　BS的字體圖標就能夠理解成是一種內置好的小圖標的庫。調用時最多見的方法是這樣的：bootstrap

　　<span class="glyphicon glyphicon-xxxxx"></span>　　也就是說以span標籤的形式表明一個小圖標。這個span標籤能夠靈活地嵌到<a>，<button>中去好比：瀏覽器

　　<button class="btn btn-default">Button<span class="glyphicon glyphicon-xxxxx"></span></button>就能夠建立一個文字Button後面帶一個小圖標的這樣一個按鈕。oracle

　　上面的xxxxx是指圖標的名稱，BS一共提供了兩百多個圖標，有各自不一樣的名稱。參見http://www.w3cschool.cn/statics/demosource/bootstrap3-glyph-icons.htm。以加號的圖標glyphicon-plus爲例：框架

      <p>Plus icon: <span class="glyphicon glyphicon-plus"></span></p>    
      <p>Plus icon as a link:
        <a href="#">
          <span class="glyphicon glyphicon-plus"></span>
        </a>
      </p>
      <p>Plus icon on a button:
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-plus"></span> Plus
        </button>
      </p>
      <p>Plus icon on a styled link button:
        <a href="#" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-plus"></span> Plus
        </a>
      </p>

　　獲得的效果：ide

■　　下拉菜單函數

　　下拉菜單說白了就是一個連接的集合，集合到一個菜單中來。佈局

　　一個典型的下拉菜單的構造是這樣的：

    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜單<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li role="presentation">
                <a role="menuitem" href="http://www.baidu.com">百度</a>
            </li>
            <li role="presentation">
                <a role="menuitem" href="http://www.cnblogs.com/">博客</a>
            </li>
            <li role="presentation">
                <a role="menuitem" href="http://www.126.com/">郵箱</a>
            </li>
        </ul>
    </div>

　　首先一個.dropdown的div總括全局。而後在裏面要分別添加一個下拉項（這個例子中時<button>）和一個列表。下拉項的class中要有添加dropdown-toggle，此外還須要特別新增一個屬性data-toggle="dropdown"（這纔是關鍵）。至於那個列表，通常是<ul>而後就是要讓class="dropdown-menu"。另外根據最佳實踐，每一個列表項中都含有一個<a>這個a裏面寫上列表項的文字和連向的地址。爲了使結構更加清晰，能夠像上例同樣爲ul,li和a都加註上各自的role。

　　此外在合適的地方能夠添加<li role="presentation" class="dropdown-header">菜單標題</li> 來添加一個菜單標題，添加<li role="presentation" class="divider"></li>來添加一條菜單分隔線。

　　與下拉菜單相對應的還有上拉菜單dropup，即內容都是向上展開的。只要把最高層的div的class改爲dropup便可。

　　*一個小坑，注意在文件頭上聲明引用的JQ版本要夠高。一開始用了一個很老的版本作的實驗結果致使下拉列表無效了。

■　　按鈕組

　　按鈕組就是幾個按鈕組合到一塊兒的集合。按鈕組沒有功能上的特色，只是把幾個功能相似或者邏輯上放到一塊兒比較好的按鈕給組合起來。

　　最簡單的按鈕組就是.btn-group的div了。在這個div裏面添加上幾個帶有.btn的按鈕，BS就自動把他們組成一個按鈕組。按鈕組能夠整個做爲一個總體地調整大小，好比class="btn-group btn-group-lg"就是總體都大一點的按鈕組。從排列方向來講，默認的.btn-group是橫向排列的，若是想要縱向排列的就要用.btn-group-vertical類。

　　另外一種更加高層次的按鈕組是.btn-toolbar。toolbar至關因而按鈕組的組，一個.btn-toolbar的div中能夠含有若干個.btn-group的按鈕組，而每一個按鈕組又含有若干個.btn的按鈕。

　　另外，.btn-group是能夠嵌套的。可是通常按鈕組成的按鈕組的話，即便嵌套也是看不出效果的。嵌套主要用在當要把下拉菜單給整合到一個按鈕組裏面去的時候。前面說過下拉菜單通常會新開一個.dropdown的div，可是這樣的話會使得下拉菜單的按鈕換行從新開始。其實這時候能夠把.dropdown換成.btn-group來使得下拉菜單的按鈕也排列在按鈕組以內。好比：

<div class="btn-group">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <button type="button" class="btn btn-default">按鈕 3</button>
    <div class="btn-group">
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按鈕4<span class="caret"></span></button>
          <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                  <a href="#" role="menuitem">選項</a>
              </li>
          </ul>
    </div>
</div>

　　效果：

　　事實上這種在.btn-group裏面添加下拉菜單按鈕的作法也是通行的，好比想要兩個並列的下拉菜單，用.dropdown的div確定不行，會換行，因此用兩個.btn-group的div，每一個div裏添加一個下拉菜單選項便可。

■　　輸入框組

　　輸入框就是咱們知道的input，而輸入框組並非指若干個輸入框結合成一個集合，而是說把一些按鈕和文字做爲輸入框的前綴或後綴，並加上輸入框造成一個總體，這才叫輸入框組。

　　具體的作法在前面也提到過了說不定，是這樣的：把.form-control的那個輸入框的前或後面加上一個.input-group-addon的span，而且把這兩個元素統一放到一個.input-group的div中去，造成一個輸入框組。.input-group-addon是爲輸入框組添加文本前綴或後綴，若是須要添加的前綴或後綴是個單選或者複選框，那麼能夠寫成<span class="input-group-addon"><input type="radio"/"checkbox"></span>來實現。再一個就是當要用按鈕充當輸入框前綴或後綴的狀況，此時應該把.input-group-addon換成.input-group-btn，而總的span寫成<span class="input-group-btn"><button type="button" class="btn btn-default">Button</button></span>。下面是一個用按鈕充當先後綴的實例：

   <form class="bs-example bs-example-form" role="form">
      <div class="row">
         <div class="col-lg-6">
            <div class="input-group">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button">
                     Go!                  </button>
               </span>
               <input type="text" class="form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         <div class="col-lg-6">
            <div class="input-group">
               <input type="text" class="form-control">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button">
                     Go!                  </button>
               </span>
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
   </form>

　　獲得效果：

　　除了文字，選框，按鈕，甚至能夠用下拉菜單當作輸入框的先後綴，這時用來包裹輸入框組的變成一個.input-group-btn的div（以前用的都是span），在這個div裏面咱們能夠設置一個下拉項和一個選項列表，和這個div平級的位置添加input標籤，最後再用.input-group的div來總括整個輸入框組。例子以下：

            <div class="input-group">
               <div class="input-group-btn">
                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Button<span class="caret"></span></button>
                   <ul class="dropdown-menu" role="menu">
                       <li role="presentation">
                           <a href="#" role="menuitem">Item1</a>
                       </li>
                       <li role="presentation">
                           <a href="#" role="menuitem">Item2</a>
                       </li>
                       <li role="presentation" class="divider"></li>
                       <li role="presentation">
                           <a href="#" role="menuitem">Exit</a>
                       </li>
                   </ul>
               </div>
                <input type="text" class="form-control" />
            </div>

　　效果：

　　若是想要作一個分隔的下拉菜單，即下拉按鈕和提示文字兩個不是同一個按鈕的話，就要在.input-group-btn中添加兩個按鈕就行了，一個是普通.btn btn-default按鈕，另外一個就要有.dropdown-toggle和data-toggle="dropdown"，且一般在這個按鈕中再加上一個<span class="caret">（不然只要空白按鈕沒有圖標）

　　和按鈕組同樣，輸入框組能夠總體調節大小，調節的方法就是把.input-group換成.input-group-lg/sm/xs等

■　　導航菜單

　　最簡單的導航菜單構造是這樣的：

　　<ul class="nav nav-xxx"><li><a href="..."></a></li><li>....</li></ul>，也就是說直接在一個無序列表上面添加類.nav（全部導航元素的基礎類）和一個nav-xxx（決定導航菜單樣式）便可。導航菜單的樣式有

　　nav-tabs　　標籤型菜單

　　nav-pills　　膠囊型菜單

　　nav-stacked　　跟在nav-pills後面的話能夠獲得豎直堆疊的膠囊型菜單。

　　nav-justified　　跟在某個樣式後面，可讓整個導航菜單擴展到父元素基於的寬度，而且按此寬度平均分配每一個菜單項的寬度。也就是讓菜單和父元素兩端對齊

　　對於無序列表中的每一個li元素（也就是導航菜單中的每一個項）能夠有.active和.disabled等類。active使某個菜單項處於被選中狀態的樣式，而disabled則使某個項處於被禁用的樣式。可是須要注意的是這裏說的只是樣式，並非真的選中或者禁用了某個項。換句話說，即便我設置了某個菜單項是disabled，鼠標移動過去後會變成禁止圖標，點擊後依然會引起超連接，這和以前接觸過的input以及button這類元素的disabled不一樣，超連接a的disabled是須要用JS來進行實質上的禁用的。

　　嚮導航菜單中添加一個下拉列表：

　　由於通常下拉列表都是以按鈕做爲基體的，可是在導航菜單中全部的元素都是超連接a，不是button，添加一個button會很突兀。不過好在，咱們能夠直接爲a添加類.dropdown-menu以及data-toggle="dropdown"來讓某個菜單項直接變成一個下拉菜單的載體。結合前面提到的導航元素相關的內容給出下面這個實例：

            <ul class="nav nav-pills">
                <li class="active"><a href="#">Item1</a></li>
                <li class="disabled"><a href="http://www.baidu.com/">Item2</a></li>
                <li><a href="#">Item3</a></li>
                <li>
                    <a class="dropdown-toggle" data-toggle="dropdown">Item4<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li role="presentation"><a href="http://www.126.com/">郵箱</a></li>
                        <li role="presentation"><a href="http://www.baidu.com/">百度</a></li>
                    </ul>
                </li>
            </ul>

　　獲得的效果：

　　能夠看到頁面中，點擊Item2會跳轉到百度，點擊Item4下的百度也會跳轉到百度，說明了active和disabled只是形式上而非實質上。

　　● 關於導航頁面切換的一點小捷徑

　　導航只是提供了前端的組件，具體咱們點擊那個導航項，又能導航到什麼界面一般須要咱們本身實現。然而當中又是問題多多。一種比較樸素的想法是點擊某個導航項以後對下方的一些導航頁面作相關的hide和show操做，從而使導航邏輯在頁面內就實現。下面帶來一種jQuery（或者是bootstrap.js？）自帶的一種導航實現的捷徑：

        <ul class="nav nav-tabs" id="dbTabs">
            <li role="presentation"><a href="#oracle">Oracle</a></li>
            <li role="presentation"><a href="#db2">DB2</a></li>
            <li role="presentation"><a href="#mysql">MySQL</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane" id="oracle"><!-- 一些oracle頁面內容 --></div>
            <div class="tab-pane" id="db2"><!-- 一些db2頁面內容 --></div>
            <div class="tab-pane" id="mysql"><!-- 一些mysql頁面內容 --></div>
        </div>

　　基於上面的這種頁面，再在js中寫這樣的邏輯：

$(document).ready(function(){
    $('#dbTabs a:first').tab('show');  //默認顯示某個頁面
    $('#dbTabs a').click(function(event){
        event.preventDefault(); //防止進行<a>的默認跳轉行爲
        $(this).tab('show'); //點擊哪一個tab就顯示哪一個tab對應內容
    });
});

　　能夠看到，js中的tab方法配合頁面中的id="xxx"和href="#xxx"的方式較快地實現了tab（包括其餘的如pill導航）導航邏輯。

　　而上文中的tab方法實則實現了hide&show邏輯，若是有須要也能夠靈活地使用各類CSS選擇器來進行靈活的導航換頁好比$('#dbTabs li:eq(2) a').tab('show')顯示第二個tab的內容。

■　　導航欄

　　導航欄和導航菜單很像，可是他們的區別是，導航菜單能夠出如今某個小div中的某個位置，用來導航這個部分的頁面，而導航欄是出如今整個頁面的最上方，是用來導航整個頁面甚至整個站點的存在。

　　一個比較典型的導航欄是這樣的：【導航欄老是弄很差。。碰到的幾個坑：1.確保用的是bootstrap3框架而且有至少v4以上的jQuery支持 2.摺疊式導航欄不是加上那個button就行了，還要對菜單項div增長.collapse navbar-collapse】

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java 
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的連接</a></li>
               <li class="divider"></li>
               <li><a href="#">另外一個分離的連接</a></li>
            </ul>
         </li>
      </ul>
   </div></nav>

　　能夠看到，咱們用nav元素總起整個導航欄，而且賦予其類.navbar navbar-default使得它具備BS特色的導航欄，另外還指定了其role是navigation。在導航欄最開始，用了一個.navbar-header的div來建立一個導航欄頭，也就是整個導航欄最左邊的，字體比較大一點的，一般是用來體現站點名字和logo的部分。在這個div裏面添加一個.navbar-brand的a以承載文字。完成導航欄頭後就開始建立導航欄菜單。導航欄菜單和上面說過的導航菜單挺像的。只不過ul的類是.nav navbar-nav。據我觀察，這個navbar-nav和nav-pills等的區別就在於navbar-nav的菜單項會自動充滿其須要充滿的地方而且是矩形，而若是這裏用了nav-pills的話就會是一些四角圓矩形的菜單項，並且並不相對導航欄總體垂直居中，很醜。總之在導航欄裏的話儘可能使用navbar-nav類的ul是沒錯的。

　　總之上面這段代碼獲得的導航欄效果：

　　響應式導航欄

　　其實就是一個可摺疊的導航欄，當窗口寬度減少，導航欄已經沒法顯示所有導航菜單的內容的時候，若是設置的是個響應式導航欄那麼導航欄會自動摺疊起來，用戶還能夠點擊按鈕打開導航欄進行導航。響應式導航欄和普通導航欄的區別在於如下幾點：

　　首先，響應式導航欄的.navbar-header的div中應該要加上如下這段代碼

       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>

　　這段代碼爲可能出現的導航欄寬度不夠的狀況提供了一個打開導航欄更多菜單項的按鈕。三個.icon-bar的span的意思是窗口變小出如今導航欄右邊的那個「更多」的按鈕有幾條橫槓= =。。。通常三條比較美觀因此就三條。。另外data-target要指向包裹了全部菜單項的那個div，本例中因爲div是有id定義的，因此data-target用了"#id"這種方式進行指向。

　　第二點不一樣就是剛纔說的包裹了全部菜單項的那個div，以前的默認導航欄中的div（上面默認導航欄實例代碼第五行）沒有帶任何屬性，可是若是想要其變成響應式導航欄，必須爲這個div加上.collapse navbar-collapse以及id="example"以配合以前在導航欄頭中設置的button的data-target屬性。（或者能夠在前面那個data-target屬性那寫.navbar-collapse）

　　改造了這兩點以後就可使導航欄變成一個響應式的導航欄了。效果：

　　表單導航欄

　　咱們經常能夠看見在導航欄裏面有個輸入框和按鈕用於在全站查找一些信息，這就是一個帶表單的導航欄。作法也很簡單，只須要在包裹全部導航菜單項的div中新增長一個form元素便可，這個form能夠這樣寫：

       <form class="navbar-form navbar-right" role="search">
           <div class="form-group">
               <input type="text" class="form-control" placeholder="tipe here"/>
           </div>
           <button type="submit" class="btn btn-default btn-sm">Submit</button>
       </form>

　　form自己的類是.navbar-form navbar-right，navbar-right是爲了讓這個表單在整個導航欄的最右邊出現，也能夠設置navbar-left。另外試了一下發現也能夠用pull-left和pull-right。關於對齊方式還會在組件對齊中細講。form內部就是一個普通的表單該怎麼寫就怎麼寫

　　帶有獨立按鈕/文本/連接的導航欄

　　上面表單導航欄中的按鈕是隸屬於表單而存在於導航欄中，若是須要創建一個獨立的按鈕，能夠以正常方式在包裹全部導航菜單項的div中添加一個button元素，只須要在其相似.btn btn-default的基礎上爲其再添加一個.navbar-btn的類便可（若是不添加不想對導航欄垂直居中）。

　　另外若是想在導航欄中獨立添加一些文本，能夠到添加一些文本標籤如<p>再給它個.navbar-text的類，這個類也會給文本一些格式而後把它相對導航欄垂直居中。

　　還有，若是想要在導航欄中添加一個獨立的鏈接（而不是像導航欄中的那些鏈接同樣被整合成導航欄中的一個方塊的樣式），那麼在a元素中加入.navbar-link就能夠了。BS會自動爲它調整樣式。

　　關於導航欄的水平對齊方式

　　正如剛上面說的，.navbar-right和.navbar-left能夠應用於包裹了全部導航欄菜單項的那個div的全部一級子元素（包括多項菜單項的集合ul，表單form，以及獨立的button，p，a等等）。應用以後至關因而讓這些元素朝着指定的方向浮動。順便，就導航欄這方面而言彷佛沒有辦法能夠直接讓某個元素水平居中顯示。

　　導航欄位置

　　一般導航欄處在頁面的頂部，而且隨着頁面向下滾動就會消失在屏幕上方。可是若是爲nav標籤增長了.navbar-fixed-top/bottom能夠把導航欄給釘死在窗口的上方或者下方，不隨着窗口滾動變化而消失。使用fixed位置時要注意，此時的導航欄已經退出了整個文檔流，因此有可能會遮住導航欄以後的文檔內容。

　　導航欄配色

　　把nav中的nav-default換成nav-inverse能夠將導航欄的配色變成黑底白字而不是白底黑字。

　　● 導航欄項目的active屬性設置

　　前面有提到過導航欄中的li元素能夠設置active這個class來讓它呈現出被選中的狀態。可是在用腳本實現時發現有些問題。後來發現，若是採用li.click(function)這種模式的話並不會讓導航欄菜單項有active的效果。仔細想了一下發現是由於大多導航欄指向的都是一個連接，點擊後儘管能夠爲導航欄菜單項加上active的class，可是瀏覽器又跳轉到一個新窗口刷新了界面，因此最終是沒有效果的。

　　一個解決的辦法是採用另外一種思路，好比用each方法遍歷每個導航欄菜單項，分析其指向的path，若是和當前url相同，那麼就設置其爲active的。

        $("ul.nav>li").each(function(){
            var a = $(this).find("a:first")[0];
            if ($(a).attr("href") === location.pathname){
                $(this).addClass("active");
            }
            else{
                $(this).removeClass("active");
            }
        });

　　● 懸浮導航欄時自動拉下菜單的CSS解決方案

　　以往說到網頁上的一些動態變化，第一個想到的就是經過JS去實現。誠然這麼作是能夠的，可是有一些更加方便的作法能夠說是讓我有了種「還有這種操做」的感受。好比要在鼠標移動到某個導航欄項目時該導航欄項目的菜單能夠自動拉下來。導航欄自帶下拉菜單這個並不複雜，上面也提到過了，HTML能夠這麼寫：

    <div class="navbar navbar-inverse" role="navigation" style="border-radius:0px;">
        <!--div class="navbar-header">導航欄brand，這部份內容省略</div-->
        <div class="collapse navbar-collapse navbar-toggle-menu">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">培訓</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">新建培訓</a></li>
                        <li><a href="#">查詢培訓歷史</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">人員</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">查詢人員</a></li>
                        <li><a href="#">錄入人員</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

　　這樣出來的下拉菜單仍是要咱們點擊導航欄項目纔會出來，此時若是要求咱們懸浮就會自動拉出下拉菜單的話，極可能我就會寫一個js函數好比$('xxx').mouseenter(function...)，可是其實咱們能夠簡單的在CSS中添加這樣一個：

.navbar .nav > li .dropdown-menu{
margin: 0;
}
.navbar .nav > li:hover .dropdown-menu{
    display: block;
}

　　只要頁面包括進了這個CSS，就能夠成功實現自動下拉的這個效果了。

■　　麪包屑導航

　　又是個什麼鬼翻譯= =。。目的論呢，對等論呢，都被忘光了嘛！好吧。。麪包屑(breadcrumbs)導航是指路徑導航。咱們瀏覽頁面的時候有時的邏輯就是像一級一級目錄同樣逼近咱們想要的內容，好比博客裏可能首先找到主頁，再進入某個年份，某個月份，某一天，最後進入某篇文章。若是在頁面上可以顯示出這樣一種路徑的話咱們就能夠點擊路徑中的任意一個節點來到達以前到過的某一層。BS的麪包屑導航很是簡單，只要一個有序列表ol，爲這個ol標籤添加上.breadcrumb類便可。這個ol標籤中的全部li元素都會被視爲一個路徑節點，且BS會把它們顯示在一行裏並用斜槓隔開。帶有.active的li元素是灰色的，表明當前所在節點。實例：

        <ol class="breadcrumb">
            <li><a href="/home">Home</a></li>
            <li><a href="/home?year=2017">2017</a></li>
            <li><a href="/home/year2017?month=may">May</a></li>
            <li><a href="/home/year2017/may?day=5">5th</a></li>
            <li class="active"><a href="/home/year2017/may/5/MyBirthday">My Birthday</a></li>
        </ol>