เมนู
หน้าเว็บส่วนใหญ่มีชนิดของเมนูบาง
ใน HTML, เมนูมักจะถูกกำหนดไว้ในรายการเรียงลำดับ <ul> (และสไตล์หลังจากนั้น) เช่นนี้
<ul>
<li><a href="#">Home</a></li>
<li><a
href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> หากคุณต้องการที่จะสร้างเมนูแนวนอนของรายการข้างต้นเพิ่ม .list-inline ระดับ <ul> :
<ul class="list-inline"> ลองตัวเอง» หรือคุณสามารถแสดงเมนูข้างต้นด้วย Bootstraps' Tabs and Pills (ดูด้านล่าง)
หมายเหตุ: โปรดดูตัวอย่างสุดท้ายในหน้านี้ที่จะหาวิธีที่จะทำให้แท็บและยา toggleable / แบบไดนามิก
แท็บ
แท็บถูกสร้างขึ้นด้วย <ul class="nav nav-tabs"> :
เคล็ดลับ: นอกจากนี้ยังทำเครื่องหมายหน้าปัจจุบันด้วย <li class="active">
ตัวอย่างต่อไปนี้สร้างแท็บนำทาง:
ตัวอย่าง
<ul class="nav nav-tabs">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
ลองตัวเอง» แท็บที่มีเมนูแบบเลื่อนลง
แท็บยังสามารถถือเมนูแบบเลื่อนลง
ตัวอย่างต่อไปนี้จะเพิ่มเมนูแบบเลื่อนลงที่ "เมนู 1":
ตัวอย่าง
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
ลองตัวเอง» Pills
ยาถูกสร้างขึ้นด้วย <ul class="nav nav-pills"> นอกจากนี้ยังทำเครื่องหมายหน้าปัจจุบันด้วย <li class="active"> :
ตัวอย่าง
<ul class="nav nav-pills">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> ลองตัวเอง» แนวตั้ง Pills
Pills นอกจากนี้ยังสามารถแสดงผลในแนวตั้ง เพียงแค่เพิ่ม .nav-stacked ชั้น:
ตัวอย่าง
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
ลองตัวเอง» แนวตั้ง Pills ในแถว
ข้อความ ...
ข้อความ ...
ข้อความ ...
ตัวอย่างต่อไปนี้สถานเมนูยาแนวตั้งภายในคอลัมน์สุดท้าย ดังนั้นในหน้าจอขนาดใหญ่เมนูจะปรากฏขึ้นไปทางด้านขวา แต่ในหน้าจอขนาดเล็กเนื้อหาจะปรับตัวเองโดยอัตโนมัติในรูปแบบคอลัมน์เดียว:
ตัวอย่าง
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> ลองตัวเอง» Pills ด้วยเมนูแบบเลื่อนลง
Pills ยังสามารถถือเมนูแบบเลื่อนลง
ตัวอย่างต่อไปนี้จะเพิ่มเมนูแบบเลื่อนลงที่ "เมนู 1":
ตัวอย่าง
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
ลองตัวเอง» ศูนย์กลาง Tabs and Pills
เพื่อให้เป็นศูนย์กลาง / ปรับแท็บและ pills ใช้ .nav-justified ชั้น
โปรดทราบว่าบนหน้าจอที่มีขนาดเล็กกว่า 768px ในรายการที่ซ้อนกัน (เนื้อหาจะยังคงเป็นศูนย์กลาง):
ตัวอย่าง
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu
3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills
nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
ลองตัวเอง» Toggleable / แบบไดนามิก Tabs
บ้าน
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua
เพื่อให้ toggleable แท็บเพิ่ม data-toggle="tab" แอตทริบิวต์แต่ละลิงก์ แล้วเพิ่ม .tab-pane ชั้นที่มีรหัสเฉพาะสำหรับแท็บทุกคนและห่อไว้ภายใน <div> องค์ประกอบที่มีระดับ .tab-content
หากคุณต้องการให้แท็บจะจางหายไปและเมื่อคลิกที่พวกเขาเพิ่ม .fade ชั้น .tab-pane :
ตัวอย่าง
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
ลองตัวเอง» Toggleable / แบบไดนามิก Pills
รหัสเดียวกันกับ pills ; เพียงเปลี่ยนแอตทริบิวต์ข้อมูลสลับไปยัง data-toggle="pill" :
ตัวอย่าง
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 » ออกกำลังกาย 6 »
กรอก Bootstrap นำร่องอ้างอิง
สำหรับอ้างอิงที่สมบูรณ์ของการเรียนนำทางให้ไปที่เราสมบูรณ์ Bootstrap นำร่องอ้างอิง
สำหรับการอ้างอิงสมบูรณ์ของตัวเลือกแท็บทุกวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap JS แท็บอ้างอิง