Bootstrap 4 แถบนำทาง
แถบนำทาง
แถบนำทางคือส่วนหัวของการนำทางที่วางอยู่ที่ด้านบนของหน้า:
แถบนำทางพื้นฐาน
ด้วย Bootstrap แถบนำทางสามารถขยายหรือยุบได้ ขึ้นอยู่กับขนาดหน้าจอ
แถบนำทางมาตรฐานถูกสร้างขึ้นพร้อมกับ.navbar
คลาส ตามด้วยคลาสการยุบแบบตอบสนอง: .navbar-expand-xl|lg|md|sm
(สแต็คแถบนำทางในแนวตั้งบนหน้าจอขนาดใหญ่พิเศษ ขนาดใหญ่ กลาง หรือเล็ก)
หากต้องการเพิ่มลิงก์ภายในแถบนำทาง ให้ใช้<ul>องค์ประกอบที่มีclass="navbar-nav". จากนั้นเพิ่ม<li>องค์ประกอบที่มี.nav-itemคลาสตามด้วย<a>องค์ประกอบที่มี.nav-linkคลาส:
ตัวอย่าง
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
แถบนำทางแนวตั้ง
ลบ.navbar-expand-xl|lg|md|smคลาสเพื่อสร้างแถบนำทางแนวตั้ง:
ตัวอย่าง
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Navbar กึ่งกลาง
เพิ่ม.justify-content-centerชั้นเรียนเพื่อให้แถบนำทางอยู่ตรงกลาง
ตัวอย่างต่อไปนี้จะทำให้แถบนำทางอยู่ตรงกลางหน้าจอขนาดกลาง ขนาดใหญ่ และขนาดใหญ่พิเศษ บนหน้าจอขนาดเล็ก จะแสดงในแนวตั้งและชิดซ้าย (เนื่องจากคลาส .navbar-expand-sm):
ตัวอย่าง
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
แถบนำทางสี
ใช้.bg-colorคลาสใดก็ได้เพื่อเปลี่ยนสีพื้นหลังของแถบนำทาง ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkและ.bg-light)
เคล็ดลับ:เพิ่ม สีข้อความสี ขาวให้กับลิงก์ทั้งหมดในแถบนำทางที่มี.navbar-darkชั้นเรียน หรือใช้.navbar-lightชั้นเรียนเพื่อเพิ่ม
สี ข้อความสีดำ
ตัวอย่าง
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
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>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
สถานะใช้งาน/ปิดใช้งาน : เพิ่ม.activeคลาสไปยัง
<a>องค์ประกอบเพื่อเน้นลิงก์ปัจจุบัน หรือ.disabledคลาสเพื่อระบุว่าลิงก์นั้นคลิกไม่ได้
แบรนด์ / โลโก้
คลาส.navbar-brandนี้ใช้เพื่อเน้นแบรนด์/โลโก้/ชื่อโครงการของเพจของคุณ:
ตัวอย่าง
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
เมื่อใช้.navbar-brandคลาสกับรูปภาพ Bootstrap 4 จะจัดรูปแบบรูปภาพให้พอดีกับแถบนำทางในแนวตั้งโดยอัตโนมัติ
ตัวอย่าง
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
การยุบแถบการนำทาง
บ่อยครั้ง โดยเฉพาะอย่างยิ่งบนหน้าจอขนาดเล็ก คุณต้องการซ่อนลิงก์การนำทางและแทนที่ด้วยปุ่มที่ควรเปิดเผยเมื่อคลิก
ในการสร้างแถบการนำทางที่ยุบได้ ให้ใช้ปุ่มที่มี จากนั้นห่อเนื้อหาแถบนำทาง (ลิงก์ ฯลฯ) ไว้ในองค์ประกอบ div ด้วยตามด้วยรหัสที่ตรงกับปุ่ม " thetarget "class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
ตัวอย่าง
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-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>
</ul>
</div>
</nav>
เคล็ดลับ:คุณยังสามารถลบคลาส .navbar-expand-md เพื่อซ่อนลิงก์ navbar เสมอ และแสดงปุ่มสลับ
แถบนำทางพร้อมดรอปดาวน์
แถบนำทางยังสามารถถือเมนูแบบเลื่อนลง:
ตัวอย่าง
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</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>
</ul>
</nav>
แบบฟอร์มและปุ่มแถบนำทาง
เพิ่ม<form>องค์ประกอบกับclass="form-inline"กลุ่มอินพุตและปุ่มแบบเคียงข้างกัน:
ตัวอย่าง
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
คุณยังสามารถใช้คลาสอินพุตอื่นๆ เช่น.input-group-prependหรือ.input-group-appendเพื่อแนบไอคอนหรือข้อความช่วยเหลือที่อยู่ถัดจากฟิลด์อินพุต คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับคลาสเหล่านี้ในบท Bootstrap Inputs
ตัวอย่าง
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
ข้อความแถบนำทาง
ใช้.navbar-textคลาสเพื่อจัดแนวองค์ประกอบใดๆ ในแถบนำทางที่ไม่ใช่ลิงก์ในแนวตั้ง (ตรวจสอบให้แน่ใจว่ามีการเติมช่องว่างและสีข้อความที่เหมาะสม)
ตัวอย่าง
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
แถบนำทางคงที่
แถบนำทางสามารถแก้ไขได้ที่ด้านบนหรือด้านล่างของหน้า
แถบการนำทางคงที่ยังคงมองเห็นได้ในตำแหน่งคงที่ (บนหรือล่าง) โดยไม่ขึ้นกับการเลื่อนหน้า
คลาส.fixed-topทำให้แถบการนำทางคงที่ที่ด้านบน :
ตัวอย่าง
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
ใช้.fixed-bottomคลาสเพื่อทำให้แถบนำทางอยู่ที่ด้านล่างของหน้า:
ตัวอย่าง
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>