Bootstrap 4 Navs
เมนูนำทาง
หากคุณต้องการสร้างเมนูแนวนอนอย่างง่าย ให้เพิ่ม
.navคลาสลงใน<ul>องค์ประกอบ ตามด้วย.nav-item
สำหรับแต่ละ คลาส <li>และเพิ่ม.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>
นำทางที่สอดคล้อง
เพิ่ม.justify-content-centerคลาสเพื่อให้ nav อยู่ตรงกลาง และ.justify-content-endคลาสจะจัด nav ให้ชิดขวา
ตัวอย่าง
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
การนำทางแนวตั้ง
เพิ่ม.flex-columnคลาสเพื่อสร้างการนำทางแนวตั้ง:
ตัวอย่าง
<ul class="nav
flex-column">
แท็บ
เปลี่ยนเมนูการนำทางให้เป็นแท็บการนำทางกับ.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>
ยาเม็ด
เปลี่ยนเมนูนำทางให้กลายเป็นยานำทางกับ.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>
แท็บที่เหมาะสม / ยา
ปรับแท็บ/ยาเม็ดด้วย.nav-justifiedคลาส (ความกว้างเท่ากัน):
ตัวอย่าง
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
ยาเม็ดแบบเลื่อนลง
ตัวอย่าง
<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-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>
แท็บที่มีรายการแบบเลื่อนลง
ตัวอย่าง
<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-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>
แท็บสลับ / ไดนามิก
บ้าน
ความเจ็บปวดนั้นสำคัญ แต่ความเจ็บปวดนั้นเพิ่มขึ้นด้วยกระบวนการอ้วน แต่ฉันให้เวลากับมันเพื่อลดความเจ็บปวดลง เพื่อที่ฉันจะได้ทำงานอย่างเต็มที่และเจ็บปวด
หากต้องการให้แท็บสลับได้ ให้เพิ่มdata-toggle="tab"แอตทริบิวต์ไปยังแต่ละลิงก์ จากนั้นเพิ่ม.tab-paneคลาสที่มี ID เฉพาะสำหรับทุกแท็บ และรวมไว้ภายใน
องค์ประกอบ ที่<div>มี class.tab-content
หากคุณต้องการให้แท็บค่อยๆ เข้าและออกเมื่อคลิกที่แท็บ ให้เพิ่ม
.fadeคลาสไปที่.tab-pane:
ตัวอย่าง
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
ยาสลับ / ไดนามิก
บ้าน
ความเจ็บปวดนั้นสำคัญ แต่ความเจ็บปวดนั้นเพิ่มขึ้นด้วยกระบวนการอ้วน แต่ฉันให้เวลากับมันเพื่อลดความเจ็บปวดลง เพื่อที่ฉันจะได้ทำงานอย่างเต็มที่และเจ็บปวด
รหัสเดียวกันนี้ใช้กับยาเม็ด เปลี่ยนแอตทริบิวต์ data-toggle เป็นdata-toggle="pill":
ตัวอย่าง
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
ทำการอ้างอิง Bootstrap 4 Nav ให้สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกแท็บ วิธีการ และเหตุการณ์ทั้งหมด ไปที่ Bootstrap 4 JS Tab Referenceของเรา