bootstrap入門

參考網站:http://tianmaying.com/tutorial/bootstrap-navbar
完成我的第一個基於bootstrap的頁面,爲bootstrap全局css組件練習
1.完成後的代碼如下:

<html>
  <head>
      <meta charset="utf-8">
      <title>博客首頁</title>
      <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel="stylsheet" href="./homepage.css">
      <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
      <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </head>
  <body>
      <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
              <div class="navbar-header">
                  <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Blog</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                      <li><a href="#">我的首頁</a></li>
                      <li><a href="#">賬號管理</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                              賬號管理
                              <span class="caret"></span>
                              <ul class="dropdown-menu">
                                  <li class="dropdown-header">管理</li>
                                  <li><a href="#">博客信息</a></li>
                                  <li><a href="#">創建博文</a></li>
                                  <li><a href="#">博客管理</a></li>
                                  <li class="divider"></li>
                                  <li class="dropdown-header">賬號</li>
                                  <li><a href="#">博客信息</a></li>
                                  <li><a href="#">退出登錄</a></li>
                              </ul>
                          </a>
                      </li>
                  </ul>
                  <form class="navbar-form navbar-right">
                      <div class="form-group">
                          <input type="text" class="form-control" placeholder="關鍵詞">
                      </div>
                      <button type="submit" class="btn btn-default">搜索</button>
                  </form>
              </div>
          </div>
      </nav>
  </body>
</html>

總結:
2.在head裏引入http://bootcss.com/ 網站下的bootstrap技術的css文件、jquery和js。
3.一個class屬性可以有多個值,各個值由空格隔開。
4.參考“極客學院”,制定bootstrap的學習路徑:(1)起步(2)全局CSS樣式(3)組件(4)JavaScript插件(5)實例實戰(6)進階。後面要對各個部分進行學習和實驗。
5.http://www.bootcss.com/ 這個網站是學習bootstrap的一個很好的中文網站。
6.關於bootstrap裏css部分我的感覺是,那麼多標籤,如何快速記住

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章