Bootstrap คือ ตอนที่ 6 : การนำทาง (Navigation)

22ก.ย. 2023 by รับทำแอพ สบายไอที

องค์ประกอบการนำทางคืออะไร
Navs: แท็บ (Tabs) และ Pills
Navbar: Anchor ของการทำเว็บและทำแอพ
Breadcrumb การแบ่งหน้า (Pagination) และป้ายสถานะ (Badges)
แนวทางปฏิบัติที่ดีที่สุดในการทำแอพและทำเว็บ

การนำทางถือเป็นรากฐานสำคัญของการทำแอพหรือทำเว็บไซต์ โดยทำหน้าที่เป็นคู่มือผู้ใช้ นำทางพวกเขาผ่านภูมิประเทศดิจิทัลของผลิตภัณฑ์ของคุณ ในขณะที่คุณพยายามทำให้ประสบการณ์ผู้ใช้ง่ายขึ้นและเพิ่มคุณค่า Bootstrap ก็มาช่วยเหลือคุณด้วยองค์ประกอบการนำทางมากมายที่ปรับแต่งสำหรับทั้งแอพและการทำเว็บ

1. องค์ประกอบการนำทางคืออะไร

ใน Bootstrap ส่วนประกอบการนำทางได้รับการกำหนดสไตล์ไว้ล่วงหน้าและบล็อกโค้ดที่สามารถนำมาใช้ซ้ำได้ ซึ่งเปิดใช้งานการนำทางประเภทต่างๆ สิ่งเหล่านี้มีได้ตั้งแต่แถบนำทางและแท็บธรรมดาไปจนถึงส่วนประกอบที่ซับซ้อนมากขึ้น เช่น ภาพหมุนและโมดอล สไตล์และลักษณะการทำงานในตัวเหล่านี้ทำให้นักพัฒนาสามารถใช้คุณลักษณะการนำทางที่มีประสิทธิภาพและตอบสนองได้ง่ายขึ้น

2. Navs: แท็บ (Tabs) และ Pills

Bootstrap มีแท็บการนำทางหลักสองประเภท: แท็บและ Pills โดยปกติแท็บจะทำหน้าที่เป็นส่วนหัวการนำทางสำหรับเนื้อหา ในขณะที่เม็ดยามักใช้สำหรับรายการการนำทางย่อย

แท็บ (Tabs)

การสร้างแท็บใน Bootstrap นั้นตรงไปตรงมา คุณจะต้องล้อมแต่ละรายการแท็บไว้ใน.navคลาส จากนั้นเพิ่ม.nav-tabsคลาสลงในคอนเทนเนอร์หลัก:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

Pills

หากต้องการเปลี่ยนเป็น Pills ให้แทนที่.nav-tabsด้วย.nav-pills:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <!-- other nav items -->
</ul>

Pills เหมาะสำหรับองค์ประกอบการนำทางรอง และมักใช้ในแดชบอร์ดของผู้ดูแลระบบ ซึ่งเป็นส่วนสำคัญของการทำแอพ

เติม (Fill) และจัดชิดขอบ (Justify)

คุณสามารถเติมหรือจัดแนวรายการนำทางเพื่อใช้พื้นที่แนวนอนที่มีอยู่ได้โดยใช้.nav-fillหรือ.nav-justified:

<!-- Filled nav items -->
<ul class="nav nav-pills nav-fill">
  <!-- nav items -->
</ul>

<!-- Justified nav items -->
<ul class="nav nav-pills nav-justified">
  <!-- nav items -->
</ul>

สิ่งนี้มีประโยชน์เมื่อคุณต้องการกระจายรายการการนำทางอย่างสม่ำเสมอทั่วทั้งแถบนำทาง ช่วยเพิ่มความสวยงามและการใช้งานของอินเทอร์เฟซเว็บหรือแอพของคุณ

3. Navbar: Anchor ของการทำเว็บและทำแอพ

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

แถบนำทาง (Navbar) พื้นฐาน

แถบนำทางพื้นฐานอาจมีลักษณะดังนี้:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <!-- other nav items -->
    </ul>
  </div>
</nav>

การนำทางที่ตอบสนอง (Responsive Navigation)

คุณสมบัติที่สำคัญของ Bootstrap navbar คือความสามารถในการออกแบบที่ตอบสนอง รายการการนำทางจะยุบลงในเมนูแบบเลื่อนลงโดยอัตโนมัติสำหรับขนาดหน้าจอที่เล็กลง การตอบสนองในตัวนี้มีคุณค่าอย่างยิ่งในยุคของขนาดหน้าจอที่แตกต่างกัน ทำให้ผู้ใช้ได้รับประสบการณ์ที่ยอดเยี่ยมบนอุปกรณ์ทุกเครื่อง

ธีม (Themes) และการวางตำแหน่ง (Positioning)

Bootstrap ช่วยให้คุณกำหนดธีมแถบนำทางของคุณให้ตรงกับความสวยงามโดยรวมของแอพหรือเว็บไซต์ของคุณ คลาส.bg-*และ.navbar-darkหรือ.navbar-lightให้คุณเล่นกับโทนสีได้ คุณยังสามารถวาง ตำแหน่งแถบนำทางโดยใช้คลาสต่างๆ เช่น.fixed-top, .fixed-bottomและ.sticky-top

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <!-- navbar content -->
</nav>

นอกจาก navs และ navbars แล้ว Bootstrap ยังมี breadcrumbs สำหรับการนำทางแบบลำดับชั้น การแบ่งหน้าสำหรับการนำทางเนื้อหา และป้ายสถานะสำหรับการติดป้ายกำกับข้อมูล

Breadcrumb

การนำทาง Breadcrumb คือชุดลิงก์ที่ระบุตำแหน่งของผู้ใช้ภายในแอปหรือเว็บไซต์

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

การแบ่งหน้า (Pagination)

องค์ประกอบการแบ่งหน้าของ Bootstrap ช่วยในการนำทางผ่านรายการยาวๆ เป็นองค์ประกอบที่สำคัญสำหรับเว็บไซต์อีคอมเมิร์ซและเว็บแอปประเภทต่างๆ

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <!-- other page items -->
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

ป้ายสถานะ (Badges)

ป้ายให้ข้อมูลเพิ่มเติมแก่รายการการนำทาง โดยปกติจะใช้เพื่อระบุข้อความที่ยังไม่ได้อ่าน การแจ้งเตือน หรือคุณลักษณะเพิ่มเติม

<span class="badge badge-primary">New</span>

5. แนวทางปฏิบัติที่ดีที่สุดในการทำแอพและทำเว็บ

แม้ว่า Bootstrap จะมีตัวเลือกมากมายสำหรับการนำทาง แต่จำเป็นอย่างยิ่งที่จะต้องคำนึงถึงประสบการณ์ของผู้ใช้ด้วย ตรวจสอบให้แน่ใจว่าองค์ประกอบการนำทางของคุณไม่เกะกะเกินไป รักษาความสอดคล้องของภาพ และยืนยันว่าพฤติกรรมการตอบสนองสอดคล้องกับเป้าหมายการออกแบบของคุณ

ส่วนประกอบการนำทางของ Bootstrap เป็นเครื่องมือที่ขาดไม่ได้ในการทำแอพและทำเว็บไซต์สมัยใหม่ ช่วยประหยัดเวลาและมีองค์ประกอบการนำทางที่มีประสิทธิภาพและตอบสนองต่อมือถือซึ่งสามารถรวมเข้าด้วยกันได้อย่างง่ายดาย ด้วยการใช้ประโยชน์จากส่วนประกอบเหล่านี้ นักพัฒนาสามารถมุ่งเน้นไปที่ฟังก์ชันการทำงานได้มากขึ้น และลดการสร้างองค์ประกอบการนำทางตั้งแต่เริ่มต้น นำไปสู่วงจรการพัฒนาที่เร็วขึ้นและขั้นตอนการทำงานที่มีประสิทธิภาพมากขึ้น