小螞蟻學習Bootstrap（1）——導航條的設置和下拉菜單

時間 2019-11-19

標籤螞蟻學習 bootstrap 導航設置下拉菜單欄目 Bootstarp 简体版

原文原文鏈接

久聞Bootstrap的大名，也沒有親手實踐過，真是讓人手癢的。這也難怪，後端的邏輯每每忙活的使人不可開交，平時幾乎沒有機會來作前端的東西。前兩天在動彈裏看到有人吐槽，話說什麼一個java程序員什麼都要作，HTML、js、數據庫等，我想說的是，php程序員纔是這樣的呢，前端程序員不必定要懂後端的技術，可是後端的程序員是必定要懂前端的技術。就用這幾天的空餘時間，對Bootstrap作一個初步的瞭解吧。
php

Bootstrap是移動設備優先的，它針對移動設備的樣式融合進了框架的每一個角落，使得只須要經過簡單的編碼，即可以實現漂亮的響應式佈局。
css

今天的就先了解一下導航條和下拉菜單的製做，手寫了一個小案例，把筆記寫在了註釋之中，這樣看起來比較清晰明瞭。
html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>學PHP的小螞蟻的博客</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        body{
          padding-top: 70px;
        }
    </style>
  </head>
  <body>
  <!--
    navbar 定義了這是一個導航條，它會應用導航條的樣式。
    navbar-default代表引用的是一個默認導航條樣式。
    navbar-fixed-top將導航條固定在頁面的頂部，不會隨着滾動條上移
    navbar-inverse將如今默認樣式的灰色，改成黑色，根據我的審美自定義哈
    role='navigation' 指明這就是一個導航

  -->
    <nav class='navbar navbar-default navbar-fixed-top navbar-inverse' role="navigation">
      <!--
        這裏的類，可使用.container和.container-fluid兩種寫法，那麼這兩種寫法有什麼區別呢?
        container表明導航條自適應瀏覽器大小布局，container-fluid表明固定寬度佈局。
      -->
      <div>
        <!--
          navbar-header 導航條的頭部，就是最右側的小方塊按鈕啦
        -->
        <div>
          <!--
            小方塊按鈕
            navbar-toggle collapsed能夠切換摺疊
          -->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span>Toggle navigation</span>
            <!--
              小方塊中間的小橫線，添加三個比較美觀，自定義也行
            -->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
           
          </button>
          <!--
            .navbar-brand 導航條的品牌？？
            其實能夠理解爲本網頁或者網站的名稱了，固然這個導航的名稱也是能夠的，對，就是個名稱！
          -->
          <a href="http://my.oschina.net/woshixiaomayi/blog">學PHP的小螞蟻博客</a>
        </div>
        <!--
          這裏就是導航的列表欄目了
        -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!--
              導航列表，包含了全部應該出現的欄目。
              這裏和上面的那個button按鈕是對應的，當瀏覽器小於必定比例，這裏就會消失，button就會出現，
              從而實現了響應式佈局
            -->
            <ul class="nav navbar-nav">
              <!--
                .dropdown 欄目的下拉菜單
              -->
              <li>
                <!--
                  .dropdown-toggle 下拉菜單的切換
                  .caret 一個向下的小圖片     
                -->
                <a href="#" data-toggle="dropdown">PHP<span></span></a>
                <!--
                  .dropdown-menu  這裏是一個下拉菜單
                -->
                <ul role='menu'>
                  <li><a href="#">cURL</a></li>
                  <li><a href="#">正則</a></li>
                  <li><a href="#">性能優化</a></li>
                </ul>
              </li>
              <li><a href="#">Mysql</a></li>
              <li><a href="#">Linux</a></li>

            </ul>
        </div>
      </div>
    </nav>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

講一下整體感覺，感受起來就是一些框架規定好的類元素，本身把它們放置到應該放置的地方便可，很簡單，不過框架的好處大概也是這個吧，東西都是現成的，按照框架要求的格式寫，就能夠很好的實現。
前端

學PHP的小螞蟻原創博客 http://my.oschina.net/woshixiaomayi/bloghtml5