ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Tabs and Pills


เมนู

หน้าเว็บส่วนใหญ่มีชนิดของเมนูบาง

ใน 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 แท็บอ้างอิง