การใช้งาน Tabs(แท็บ) ใน Bootstrap 4(บูตสแตบ 4)

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1400
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้งาน Tabs(แท็บ) ใน Bootstrap 4(บูตสแตบ 4)

โพสต์โดย Parichat » 15/01/2018 12:37 pm

Tabs(แท็บ) คือ แท็บการนำทางโดยการใช้งาน Class(คลาส) .nav-tabs โดยในการใช้งานแท็บจะมี 2 รูปแบบให้เลือกใน Bootstrap 4(บูตสแตบ 4) คือ 1.Pills(เพล) หากต้องการใช้แบบนี้ให้เราใช้ Class(คลาส) .nav-pills และ 2.Justified Tabs(จัสติไฟล์แท็บ) หากต้องการที่ใช้แบบนี้เราใช้ Class(คลาส) .nav-justified โดยสามารถดูตัวอย่างได้ดังตัวอย่างด้านล่าง
ตัวอย่าง

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="en">
<head>
  <title>ทดสอบการใช้งานแบบ Justified Tabs และ Pills</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>ทดสอบการใช้งานแบบ Justified Tabs และ Pills</h2>
  <p>การใช้งานแบบ Pills Tabs:</p>
  <ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
   <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">รายละเอียด</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">รายละเอียด 1</a>
        <a class="dropdown-item" href="#">รายละเอียด 2</a>
        <a class="dropdown-item" href="#">รายละเอียด 3</a></div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">ประวัติ</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">งาน</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">ไม่แสดงผล</a>
    </li>
  </ul><br>

  <p>การใช้งานแบบ Justified tabs:</p>
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
   <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">รายละเอียด</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">รายละเอียด 1</a>
        <a class="dropdown-item" href="#">รายละเอียด 2</a>
        <a class="dropdown-item" href="#">รายละเอียด 3</a></div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">ประวัติ</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">งาน</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">ไม่แสดงผล</a>
    </li>
  </ul>
</div>

</body>
</html>

ผลลัพธ์
f8.JPG


อ้างอิง : https://www.w3schools.com/bootstrap4/bootstrap_navs.asp
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน