สอนใช้งาน Bootstrap 4

Bootstrap 4 การใช้งาน Nav

Bootstrap 4 เป็นเฟรมเวิร์กยอดนิยมที่ช่วยในการออกแบบเว็บไซต์ โดยเฉพาะการสร้างเมนูนำทาง (Navigation) ที่สวยงามและตอบสนองได้ดี ในบทความนี้ เราจะอธิบายการใช้งาน Nav ด้วย Bootstrap 4 พร้อมยกตัวอย่างการใช้งานในรูปแบบต่าง ๆ ที่สามารถประยุกต์ใช้ได้

Nav Menus

การสร้างเมนูนำทางพื้นฐานสามารถทำได้โดยใช้คลาส nav ของ Bootstrap

HTML
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Features</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
</ul>

Aligned Nav

เพื่อจัดแนวเมนูให้ไปทางซ้าย ขวา หรือกลาง สามารถใช้คลาส justify-content-*

HTML
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
</ul>

Vertical Nav

หากต้องการทำเมนูแนวตั้ง สามารถใช้ nav ร่วมกับ flex-column

HTML
<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Services</a>
  </li>
</ul>

Tabs

การสร้างแท็บสามารถทำได้โดยใช้คลาส nav-tabs

HTML
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">Home Content</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">Profile Content</div>
</div>

Pills

การสร้างเมนูแบบ Pills สามารถทำได้โดยใช้คลาส nav-pills

HTML
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#profile">Profile</a>
  </li>
</ul>

Justified Tabs/Pills

สามารถใช้ nav-justified เพื่อทำให้แท็บหรือ Pills ขยายให้เต็มความกว้าง

HTML
<ul class="nav nav-tabs nav-justified">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
  </li>
</ul>

Pills with Dropdown

การสร้าง Pills ที่มี Dropdown

HTML
<ul class="nav nav-pills">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
    </div>
  </li>
</ul>

Tabs with Dropdown

การสร้างแท็บที่มี Dropdown

HTML
<ul class="nav nav-tabs">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="dropdownTab" data-toggle="dropdown">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#home" data-toggle="tab">Home</a>
      <a class="dropdown-item" href="#profile" data-toggle="tab">Profile</a>
    </div>
  </li>
</ul>

Toggleable / Dynamic Tabs

การสร้างแท็บที่สามารถสลับได้

HTML
<ul class="nav nav-tabs" id="dynamicTab">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="home">Home Content</div>
  <div class="tab-pane fade" id="profile">Profile Content</div>
</div>

Toggleable / Dynamic Pills

การสร้าง Pills ที่สามารถสลับได้

HTML
<ul class="nav nav-pills" id="dynamicPills">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#profile">Profile</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="home">Home Content</div>
  <div class="tab-pane fade" id="profile">Profile Content</div>
</div>

สรุป

การใช้งาน Nav ด้วย Bootstrap 4 ทำให้การออกแบบเว็บไซต์มีความสวยงามและตอบสนองได้ดี โดยสามารถปรับเปลี่ยนรูปแบบได้หลากหลายตามความต้องการ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ