Bootstrap - Navigation Demo

什麼是導航列？

各位有抱負的網頁開發者，大家好！今天，我們將要進入Bootstrap導航列的精彩世界，或者我們喜歡稱之為「導航列」。想像你正在蓋一個房子 - 導航列就像連接所有房間的走廊。它是幫助訪客輕鬆瀏覽你的網站的中心樞紐。

導航列是一個強大的導航組件，位於你的網頁頂部，提供連結到你的網站不同部分或頁面的鏈接。它就像是一張地圖，引導訪客穿過你的數字風景。

為什麼要用Bootstrap來做導航列？

Bootstrap，我的朋友們，就像是一個為網頁開發者準備的超級英雄工具包。它內建了許多預設的組件，讓我們的生活更簡單。使用Bootstrap來做導航列意味著：

在不同設備上的一致性（響應式設計）
容易自定義
內建支持各種導航模式

現在，讓我們捋起袖子開始建造吧！

基本導航列結構

這裡是一個Bootstrap導航列的基本結構：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">你的品牌</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切換導航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首頁 <span class="sr-only">(目前)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">價格</a>
</li>
</ul>
</div>
</nav>

讓我們來分解這個：

<nav class="navbar navbar-expand-lg navbar-light bg-light">：這是我們主要的導航列容器。類別定義了它的外觀和行為。
<a class="navbar-brand" href="#">：這裡是你的品牌名稱或標誌。
<button class="navbar-toggler">：這個按鈕在小屏幕上會出現，用於切換導航列。
<div class="collapse navbar-collapse">：這個包含導航項目，在小屏幕上會折疊。
<ul class="navbar-nav">：這個無序列表包含我們的導航項目。
<li class="nav-item">：每一個列表項目代表一個導航項目。

自定義你的導航列

改變顏色

Bootstrap提供了多種顏色方案。我們來試試深色導航列：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- 導航列內容 -->
</nav>

在這裡，我們將navbar-light bg-light改為navbar-dark bg-dark。這就像給你的導航列一個時尚的夜間外觀！

添加搜索表單

想要添加搜索功能？這樣做：

<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>

將這個添加到你的navbar-collapse div中。這就像在導航走廊上添加了一個放大鏡！

下拉菜單

讓我們來為導航列添加一個下拉菜單：

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜單
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">動作</a>
<a class="dropdown-item" href="#">另一個動作</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">在這裡的另一些東西</a>
</div>
</li>

這會在你的導航列中創建一個下拉菜單。這就像在導航走廊中添加了一個秘密房間！

响應式行為

Bootstrap導航列默認是響應式的。在小屏幕上，導航列會折疊成一個切換按鈕（通常稱為「漢堡菜單」）。這樣可以確保你的導航在各種設備上都可以使用。

要看到這個效果，試著調整你的瀏覽器窗口大小。你會發現導航項目消失並出現切換按鈕。點擊這個按鈕會以下拉格式顯示導航項目。

最佳實踐

保持簡單：不要用太多的選項來壓垮用戶。
使用清晰的標籤：確保你的導航項目容易理解。
突出當前頁面：使用active類別來顯示用戶所在的頁面。
考慮你的品牌：選擇與整體設計相匹配的顏色和樣式。

結論

恭喜你！你剛剛建立了你的第一個Bootstrap導航列。記住，熟練是由練習而來的。嘗試不同的組合，玩轉顏色，最重要的是，玩得開心！

這裡是一個總結我們使用過的Bootstrap類別的表格：

類別	用途
navbar	定義主要的導航列容器
navbar-expand-lg	設定導航列展開的斷點
navbar-light/dark	設定導航列的顏色方案
bg-light/dark	設定導航列的背景顏色
navbar-brand	設定品牌/標誌區域的樣式
navbar-toggler	創建小屏幕上的切換按鈕
navbar-nav	設定導航項目的列表樣式
nav-item	設定個別導航項目的樣式
nav-link	設定導航項目中的鏈接樣式
dropdown-toggle	創建下拉切換按鈕
dropdown-menu	設定下拉菜單容器的樣式
dropdown-item	設定下拉菜單中的項目樣式

現在去創造令人驚奇的導航列吧！記住，每一個偉大的網站都從偉大的導航開始。開心地編程！

Credits: Image by storyset