แถบนำทาง
แถบนำทางเป็นหัวลูกศรที่ถูกวางไว้ที่ด้านบนของหน้านี้:
ด้วย Bootstrap , แถบนำทางสามารถขยายหรือยุบทั้งนี้ขึ้นอยู่กับขนาดของหน้าจอ
แถบนำทางมาตรฐานถูกสร้างขึ้นด้วย <nav class="navbar navbar-default">
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการเพิ่มแถบนำทางด้านบนสุดของหน้าเว็บ:
ตัวอย่าง
<body>
<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 มีการตอบสนอง) ปัญหานี้ (ที่มีหน้าจอขนาดเล็ก) จะได้รับการแก้ไขในตัวอย่างที่ผ่านมาในหน้านี้
Inverted ป้าย
ถ้าคุณไม่ชอบรูปแบบของแถบนำทางเริ่มต้นที่ Bootstrap ยังมีทางเลือก Navbar สีดำ:
เพียงแค่เปลี่ยน .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>
ลองตัวเอง» คงที่ป้าย
แถบนำทางยังสามารถได้รับการแก้ไขที่ด้านบนหรือด้านล่างของหน้า
แถบนำทางคงอยู่ที่มองเห็นอยู่ในตำแหน่งที่คงที่ (บนหรือด้านล่าง) เป็นอิสระจากการเลื่อนหน้า
.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> ลองตัวเอง» แถบนำทางด้วยแบบเลื่อนลง
แถบนำทางยังสามารถถือเมนูแบบเลื่อนลง
ตัวอย่างต่อไปนี้เพิ่มเมนูแบบเลื่อนลงสำหรับปุ่ม "หน้า 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 ชั้นจะใช้ในการจัดขวาปุ่มแถบนำทาง
ในตัวอย่างต่อไปนี้เราใส่ "Sign Up" และปุ่ม "เข้าสู่ระบบ" ที่ด้านขวาในแถบนำทาง นอกจากนี้เรายังเพิ่ม glyphicon ในแต่ละของทั้งสองปุ่มใหม่:
ตัวอย่าง
<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>
<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> ลองตัวเอง» ยุบป้าย
แถบนำทางใช้พื้นที่มากเกินไปในหน้าจอขนาดเล็ก
เราควรที่จะซ่อนแถบนำทาง; และแสดงเฉพาะเมื่อมันเป็นสิ่งจำเป็น
ในตัวอย่างต่อไปแถบนำทางจะถูกแทนที่ด้วยปุ่มที่มุมขวาด้านบน เฉพาะเมื่อมีการคลิกปุ่มแถบนำทางจะแสดง:
ตัวอย่าง
<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> ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»