Bootstrap แท็บและยา
เมนู
หน้าเว็บส่วนใหญ่มีเมนูบางอย่าง
ใน 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 (ดูด้านล่าง)
หมายเหตุ:ดูตัวอย่างสุดท้ายในหน้านี้เพื่อดูวิธีสร้างแท็บและยาเม็ดสลับ/ไดนามิก
แท็บ
แท็บถูกสร้างขึ้นด้วย<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>
ยาเม็ด
ยาถูกสร้างขึ้นด้วย<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>
ยาเม็ดแนวตั้ง
เม็ดยาสามารถแสดงได้ในแนวตั้ง เพียงเพิ่ม.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>
ยาเม็ดแนวตั้งในแถว
ข้อความ...
ข้อความ...
ข้อความ...
ตัวอย่างต่อไปนี้จะวางเมนูยาเม็ดแนวตั้งในคอลัมน์สุดท้าย ดังนั้น บนหน้าจอขนาดใหญ่ เมนูจะแสดงทางด้านขวา แต่ในหน้าจอขนาดเล็ก เนื้อหาจะปรับตัวเองเป็นเค้าโครงแบบคอลัมน์เดียวโดยอัตโนมัติ:
ตัวอย่าง
<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>
ยาเม็ดพร้อมเมนูแบบเลื่อนลง
ยายังสามารถถือเมนูแบบเลื่อนลง
ตัวอย่างต่อไปนี้จะเพิ่มเมนูแบบเลื่อนลงไปที่ "เมนู 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>
แท็บตรงกลางและยา
หากต้องการจัดกึ่งกลาง/ปรับแถบและเม็ดยา ให้ใช้.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>
แท็บสลับ / ไดนามิก
บ้าน
ความเจ็บปวดนั้นสำคัญ แต่ความเจ็บปวดนั้นเพิ่มขึ้นด้วยกระบวนการอ้วน แต่ฉันให้เวลากับมันเพื่อลดความเจ็บปวดลง เพื่อที่ฉันจะได้ทำงานอย่างเต็มที่และเจ็บปวด
หากต้องการให้แท็บสลับได้ ให้เพิ่มdata-toggle="tab"แอตทริบิวต์ไปยังแต่ละลิงก์ จากนั้นเพิ่ม.tab-paneคลาสที่มี ID เฉพาะสำหรับทุกแท็บ และรวมไว้ภายใน
องค์ประกอบ ที่<div>มี class.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>
ยาสลับ / ไดนามิก
รหัสเดียวกันนี้ใช้กับยาเม็ด เปลี่ยนเฉพาะแอตทริบิวต์ data-toggle เป็น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>
การอ้างอิงการนำทาง Bootstrap ที่สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของคลาสการนำทางทั้งหมด ไปที่ Bootstrap Navigation Referenceทั้งหมดของเรา
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกแท็บ วิธีการ และเหตุการณ์ทั้งหมด ไปที่ Bootstrap JS Tab Referenceของเรา