我耀學IT—day05-Bootstrap下拉菜單與導航

一、Bootstrap5 下拉菜單

下拉菜單是可切換的，是以列表格式顯示鏈接的上下文菜單。

例：

<div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉菜單按鈕</button><div class="dropdown-menu"><a class="dropdown-item" href="#">鏈接 1</a><a class="dropdown-item" href="#">鏈接 2</a><a class="dropdown-item" href="#">鏈接 3</a></div>
</div>

.dropdown 類用來指定一個下拉菜單。

我們可以使用一個按鈕或鏈接來打開下拉菜單，按鈕或鏈接需要添加 .dropdown-toggle 和 data-bs-toggle="dropdown" 屬性。

div 元素上添加 .dropdown-menu 類來設置實際下拉菜單，然后在下拉菜單的選項中添加 .dropdown-item 類。

1.1 下拉菜單中的分割線

.dropdown-divider 類用于在下拉菜單中創建一個水平的分割線：

例：

<li><hr class="dropdown-divider"></hr></li>

1.2 下拉菜單中的標題

.dropdown-header 類用于在下拉菜單中添加標題：

例：

<li><h5 class="dropdown-header">標題 1</h5></li>

1.3 下拉菜單中的可用項與禁用項

.active 類會讓下拉菜單的選項高亮顯示 (添加藍色背景)。

如果要禁用下拉菜單的選項，可以使用.disabled 類。

例:

<a class="dropdown-item" href="#">常規項</a>
<a class="dropdown-item active" href="#">激活項</a>
<a class="dropdown-item disabled" href="#">禁用項</a>

1.4 下拉菜單的定位

如果我們想讓下拉菜單右對齊，可以在元素上的 .dropdown 類后添加 .dropend 或 .dropstart 類。

.dropend 是右對齊， .dropstart 是左對齊。

例:

<!-- 右對齊 --> <div class="dropdown dropend"> ... </div> ? 
<!-- 左對齊 --> <div class="dropdown dropstart"> ... </div>

1.5 下拉菜單彈出方向設置

下拉菜單彈出方向默認為向下，當然我們也可以設置不同的方向。

1.5.1 指定向右彈出的下拉菜單

如果你希望下拉菜單向右下方彈出，可以在 div 元素上添加 .dropdown-menu-end 類:

例:

<!-- 右下方拉菜單按鈕 -->
<div class="dropdown dropdown-menu-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉菜單右下方彈出</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">鏈接 1</a></li><li><a class="dropdown-item" href="#">鏈接 2</a></li><li><a class="dropdown-item" href="#">鏈接 3</a></li></ul>
</div>

1.5.2 指定向上彈出的上拉菜單

如果你希望上拉菜單向上彈出，可以在 div 元素上添加 "dropup" 類:

例:

<!-- 向上菜單 -->
<div class="dropup"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉菜單</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">鏈接 1</a></li><li><a class="dropdown-item" href="#">鏈接 2</a></li><li><a class="dropdown-item" href="#">鏈接 3</a></li></ul>
</div>

1.5.3 指定向左邊彈出的下拉菜單

如果你希望下拉菜單向上彈出，可以在 div 元素上添加 dropstart 類:

例:

<!-- 左邊的下拉菜單 -->
<div class="dropstart">添加一些內容，用于測試向左邊彈出效果。<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉菜單</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">鏈接 1</a></li><li><a class="dropdown-item" href="#">鏈接 2</a></li><li><a class="dropdown-item" href="#">鏈接 3</a></li></ul>
</div>

1.6 下拉菜單設置文本

.dropdown-item-text 類可以設置下拉菜單中的文本項：

例:

<ul class="dropdown-menu"><li><a class="dropdown-item" href="#">鏈接 1</a></li><li><a class="dropdown-item" href="#">鏈接 2</a></li><li><a class="dropdown-item" href="#">鏈接 3</a></li><li><a class="dropdown-item-text" href="#">文本鏈接</a></li><li><span class="dropdown-item-text">僅僅是文本</span></li>
</ul>

1.7 按鈕組中設置下拉菜單

我們可以在按鈕中添加下拉菜單：

例:

<div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Tablet</a></li><li><a class="dropdown-item" href="#">Smartphone</a></li></ul></div>
</div>

垂直按鈕組帶下拉菜單：

例:

<div class="btn-group-vertical"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Tablet</a></li><li><a class="dropdown-item" href="#">Smartphone</a></li></ul></div>
</div>

[我耀學IT] ?Patience is key in life

二、Bootstrap5 導航

如果你想創建一個簡單的水平導航欄，可以在 <ul> 元素上添加 .nav類，在每個 <li> 選項上添加 .nav-item 類，在每個鏈接上添加 .nav-link 類:

例：

<ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

2.1 導航對齊方式

.justify-content-center 類設置導航居中顯示， .justify-content-end 類設置導航右對齊。

例:

<!-- 導航居中 --> <ul class="nav justify-content-center">
<!-- 導航右對齊 --> <ul class="nav justify-content-end"> </div>

2.2 垂直導航

.flex-column 類用于創建垂直導航：

例:

<ul class="nav flex-column">

2.3 選項卡

使用 .nav-tabs 類可以將導航轉化為選項卡。然后對于選中的選項使用 .active 類來標記。

例：

<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

2.4 膠囊導航

.nav-pills 類可以將導航項設置成膠囊形狀。

例:

<ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

2.5 導航等寬

.nav-justified 類可以設置導航項齊行等寬顯示。

例:

<ul class="nav nav-pills nav-justified">..</ul> <ul class="nav nav-tabs nav-justified">..</ul>

2.6 膠囊下拉菜單

例:

<ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a><div class="dropdown-menu"><a class="dropdown-item" href="#">Link 1</a><a class="dropdown-item" href="#">Link 2</a><a class="dropdown-item" href="#">Link 3</a></div></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

2.7 選項卡下拉菜單

例:

<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a><div class="dropdown-menu"><a class="dropdown-item" href="#">Link 1</a><a class="dropdown-item" href="#">Link 2</a><a class="dropdown-item" href="#">Link 3</a></div></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

2.8 動態選項卡

如果你要設置選項卡是動態可切換的，可以在每個鏈接上添加 data-bs-toggle="tab" 屬性。然后在每個選項對應的內容的上添加 .tab-pane 類，對應選項卡的內容的 <div> 標簽使用 .tab-content 類。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade類:

例:

<!-- Nav tabs -->
<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content"><div class="tab-pane active container" id="home">...</div><div class="tab-pane container" id="menu1">...</div><div class="tab-pane container" id="menu2">...</div>
</div>

2.9 膠囊狀動態選項卡

膠囊狀動態選項卡只需要將以上實例的代碼中 data-bs-toggle 屬性設置為 data-bs-toggle="pill":

例:

<!-- Nav pills -->
<ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content"><div class="tab-pane active container" id="home">...</div><div class="tab-pane container" id="menu1">...</div><div class="tab-pane container" id="menu2">...</div>
</div>

[我耀學IT] ?Patience is key in life