Bootstrap組件之響應式導航條

響應式導航條：在PC和平板中默認要顯示所有的內容；但在手機中導航條中默認只顯示“LOGO/Brand”，以及一個“菜單折疊展開按鈕”，只有單擊折疊按鈕后才顯示所有的菜單項。

  基礎class： .navbar   

 1、Bootstrap中導航條的按位置：

　　1)頂部導航條

　　2)底部導航條

 　　 Bootstrap中導航條的按顏色：

　　　　1)淺色底深色的字 .navbar-default

　　　　2)深色底淺色的字 .navbar-inverse

  　　Bootstrap中導航條的按定位：

　　　　1)相對定位position: relative 默認值

　　　　2)固定定位position: fixed      .navbar-fixed-top/bottom

 2、導航條的結構：

  <div class="navbar  顏色 定位">  

　　<div class="container">

　　　　<!--導航條的頭部：商標+按鈕-->

　　　　<div class="navbar-header">

　　　　　　<a class="navbar-brand">

　　　　　　<button class="navbar-toggle">

　　　　</div>

　　　　<!--導航條折疊菜單：菜單、按鈕、搜索框、鏈接、文本...-->

　　　　<div class="navbar-collapse">

　　　　　　<ul class="nav navbar-nav">

　　　　　　<form class="navbar-form">

　　　　　　<button class="navbar-btn">

　　　　　　<span class="navbar-text">

　　　　　　<a class="navbar-link  navbar-text">

　　　　</div>

　　</div>

 </div>