[技術博客] 導航欄顯示與窗口縮放

導航欄顯示與窗口縮放

一般當我開發前端網頁的時候，我會在一個固定的瀏覽器中，以一個固定的窗口大小和縮放比例對呈現效果進行觀察。若是以爲，誒！很漂亮！那麼我就會心滿意足的結束這項工做並轉身離開。但實際上，這樣是存在隱患的。若是咱們沒有細心設置頁面佈局與組件的位置，那麼在改變窗口大小或者縮放比例時，就可能會出現組件重疊、部份內容沒法顯示等問題。

在縮小瀏覽器窗口大小的狀況下，導航欄上的導航標籤沒法在同一行中徹底顯示，因爲其自己的性質決定了導航欄沒法成爲兩欄。在此狀況下，本項目採用摺疊導航欄navbar-collapse元素與按鈕navbar-toggler元素相配合的方式實現這一功能。

導航欄大小適應

.collapse 的做用是當瀏覽器的窗口寬度小於768px的時候，將設置爲collapse樣式的div元素內的全部其它元素都摺疊起來，以一個列表的形式顯示。

.navber-collapse 的做用則是將該div元素設置爲摺疊起來的導航欄各列表項的父元素。

實際使用代碼以下，這是一個id名爲navbarsExample07的導航欄，在該欄中便是所要展現的導航標籤列表：

<div class="collapse navbar-collapse" id="navbarsExample07">
    <ul class="navbar-nav mr-auto" th:with="view=${#httpServletRequest.getServletPath()}">
        <li class="nav-item" th:classappend="${view=='/'||#strings.startsWith(view,'/index')? 'active' : ''}">
            <a class="nav-link mx-2" href="/index">首頁</a>
        </li>
        <li class="nav-item"  th:classappend="${#strings.startsWith(view,'/report-center')? 'active' : ''}">
            <a class="nav-link mx-2" href="/report-center">實驗報告中心</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mx-2" href="/question">
                題庫
            <span th:if="${#strings.startsWith(view,'/#')}" class="sr-only">(current)</span>
            </a>
        </li>
    </ul>
</div>

當瀏覽源碼時，就會發現以下語句：

@media (min-width: 768px) {

  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  ···
}

因而可知，只有當寬度大於等於768px時，纔可顯示該元素，不然將會定義以下屬性：

.collapse {
    display: none;
}

便是說不顯示（摺疊）該元素（導航欄）

導航欄摺疊後的菜單按鈕

除此以外，咱們還須要該導航欄摺疊後，能經過點擊按鈕的方式，以形以下拉菜單的方式展開以供選擇。項目代碼以下：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" 
aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon">
    </span>

</button>

navbar-toggle 與 collapse 相相似，在基礎樣式設定上都實現了達到必定寬度後改變顯示狀態的功能。

data-toggle 與 data-target 分別指定了觸發事件的類型和事件的目標元素，在這裏意味着點擊按鈕將會對上文的導航欄進行摺疊操做。

aria-controls字符串表明了空格分隔的id屬性值列表，即navbarsExample07。

aria-expanded表明了導航欄摺疊後，初始狀態是不顯示仍是顯示出來的。當其值爲false時，表示初始狀態是摺疊的。

aria-label爲標記該元素的字符串值。