Bootstrap แถบนำทาง
แถบนำทาง
แถบนำทางคือส่วนหัวของการนำทางที่วางอยู่ที่ด้านบนของหน้า:
ด้วย Bootstrap แถบนำทางสามารถขยายหรือยุบได้ ขึ้นอยู่กับขนาดหน้าจอ
แถบนำทางมาตรฐานถูกสร้างขึ้นด้วย<nav class="navbar navbar-default">.
ตัวอย่างต่อไปนี้แสดงวิธีการเพิ่มแถบนำทางที่ด้านบนของหน้า:
ตัวอย่าง
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
หมายเหตุ:ตัวอย่างทั้งหมดในหน้านี้จะแสดงแถบนำทางที่ใช้พื้นที่มากเกินไปในหน้าจอขนาดเล็ก (อย่างไรก็ตาม แถบนำทางจะอยู่ในบรรทัดเดียวบนหน้าจอขนาดใหญ่ เนื่องจาก Bootstrap ตอบสนองได้) ปัญหานี้ (ด้วยหน้าจอขนาดเล็ก) จะได้รับการแก้ไขในตัวอย่างสุดท้ายในหน้านี้
แถบการนำทางกลับด้าน
หากคุณไม่ชอบสไตล์ของแถบนำทางเริ่มต้น Bootstrap จะให้แถบนำทางสีดำแทน:
เพียงเปลี่ยน.navbar-defaultคลาสเป็น.navbar-inverse:
ตัวอย่าง
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
แถบนำทางพร้อมดรอปดาวน์
แถบนำทางยังสามารถถือเมนูแบบเลื่อนลง
ตัวอย่างต่อไปนี้จะเพิ่มเมนูแบบเลื่อนลงสำหรับปุ่ม "หน้า 1":
ตัวอย่าง
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
แถบการนำทางชิดขวา
คลาส.navbar-rightนี้ใช้เพื่อจัดปุ่มแถบนำทางให้ชิดขวา
ในตัวอย่างต่อไปนี้ เราจะใส่ปุ่ม "ลงทะเบียน" และปุ่ม "เข้าสู่ระบบ" ทางด้านขวาในแถบนำทาง นอกจากนี้เรายังเพิ่มสัญลักษณ์บนปุ่มใหม่สองปุ่ม:
ตัวอย่าง
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
ปุ่มแถบนำทาง
ในการเพิ่มปุ่มในแถบนำทาง ให้เพิ่ม.navbar-btnคลาสบนปุ่ม Bootstrap:
ตัวอย่าง
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
แบบฟอร์มแถบนำทาง
ในการเพิ่มองค์ประกอบแบบฟอร์มภายในแถบนำทาง ให้เพิ่ม.navbar-formคลาสไปยังองค์ประกอบแบบฟอร์มและเพิ่มอินพุต โปรดทราบว่าเราได้เพิ่ม.form-groupคลาสไปยังคอนเทนเนอร์ div ที่มีอินพุต สิ่งนี้จะเพิ่มการเติมที่เหมาะสมหากคุณมีอินพุตมากกว่าหนึ่งรายการ (คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับสิ่งนี้ในบทของฟอร์ม)
ตัวอย่าง
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
คุณยังสามารถใช้.input-groupและ.input-group-addonคลาสเพื่อแนบไอคอนหรือข้อความช่วยเหลือที่อยู่ถัดจากช่องป้อนข้อมูล คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับคลาสเหล่านี้ในบท Bootstrap Inputs
ตัวอย่าง
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
ข้อความแถบนำทาง
ใช้.navbar-textคลาสเพื่อจัดแนวองค์ประกอบใดๆ ในแถบนำทางที่ไม่ใช่ลิงก์ในแนวตั้ง (ตรวจสอบให้แน่ใจว่ามีการเติมช่องว่างและสีข้อความที่เหมาะสม)
ตัวอย่าง
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
แถบนำทางคงที่
แถบนำทางสามารถแก้ไขได้ที่ด้านบนหรือด้านล่างของหน้า
แถบการนำทางคงที่ยังคงมองเห็นได้ในตำแหน่งคงที่ (บนหรือล่าง) โดยไม่ขึ้นกับการเลื่อนหน้า
คลาส.navbar-fixed-topทำให้แถบการนำทางคงที่ที่ด้านบน:
ตัวอย่าง
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
คลาส.navbar-fixed-bottomทำให้แถบการนำทางอยู่ที่ด้านล่าง:
ตัวอย่าง
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
การยุบแถบการนำทาง
แถบนำทางมักใช้พื้นที่มากเกินไปบนหน้าจอขนาดเล็ก
เราควรซ่อนแถบนำทาง และแสดงเมื่อจำเป็นเท่านั้น
ในตัวอย่างต่อไปนี้ แถบนำทางจะถูกแทนที่ด้วยปุ่มที่มุมบนขวา เฉพาะเมื่อมีการคลิกปุ่ม แถบนำทางจะปรากฏขึ้น:
ตัวอย่าง
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>