Bootstrap คือ ตอนที่ 7 : ส่วนประกอบ (Components) ของ Bootstrap

23ก.ย. 2023 by รับทำแอพ สบายไอที
  1. การแจ้งเตือน (Alerts)
  2. ป้าย (Badges)
  3. Breadcrumbs
  4. การ์ด (Cards)
  5. Carousel
  6. เมนูแบบเลื่อนลง (Dropdowns), Modals, Popovers และคำแนะนำเครื่องมือ (Tooltips)

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

1. การแจ้งเตือน (Alerts)

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

<div class="alert alert-success" role="alert">
  Success! Your action has been completed.
</div>

ที่นี่ .alert เริ่มต้นส่วนประกอบ และ .alert-success ให้พื้นหลังสีเขียว ส่งสัญญาณถึงความสำเร็จ มีคลาสอื่นๆ เช่น .alert-info, .alert-warning และ .alert-danger เพื่อระบุข้อมูล คำเตือน และข้อผิดพลาด ตามลำดับ

การโต้ตอบของจาวาสคริปต์ (JavaScript Interaction)

ด้วย Bootstrap คุณยังสามารถเพิ่มคุณสมบัติเชิงโต้ตอบให้กับการแจ้งเตือน ซึ่งทำให้สามารถปิดการแจ้งเตือนได้

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning! Check this out.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

เมื่อใช้ data-bs-dismiss="alert" แอตทริบิวต์ กล่องการแจ้งเตือนจะถูกยกเลิกได้

2. ป้าย (Badges)

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

<button class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

ในตัวอย่างนี้ คลาส .badge และ .bg-secondary ถูกใช้เพื่อสร้างป้ายขนาดเล็กที่ระบุว่ามีการแจ้งเตือนสี่รายการ

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

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

ในการทำแอพและทำเว็บ breadcrumbs สามารถช่วยปรับปรุงประสบการณ์ผู้ใช้ด้วยการจัดทำแผนงานและทำให้การนำทางง่ายขึ้น

4. การ์ด (Cards)

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

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Card content goes here.</p>
  </div>
</div>

รูปแบบการ์ด (Card Variations)

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

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

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
  </ol>

  <!-- Slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" alt="Image 1">
      <div class="carousel-caption">Caption 1</div>
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" alt="Image 2">
      <div class="carousel-caption">Caption 2</div>
    </div>
  </div>

  <!-- Controls -->
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

Carousel ของ Bootstrap สามารถปรับแต่งได้สูง ทำให้สามารถใส่ภาพเคลื่อนไหว คำบรรยาย และการควบคุมได้หลากหลาย

Bootstrap ยังมีส่วนประกอบต่างๆ เช่น เมนูแบบเลื่อนลง โมดอลสำหรับการซ้อนทับเนื้อหา และคำแนะนำเครื่องมือและป๊อปโอเวอร์สำหรับการแสดงข้อมูลเพิ่มเติมเมื่อโฮเวอร์หรือคลิก แต่ละองค์ประกอบเหล่านี้มีบทบาทเฉพาะในการปรับปรุงการโต้ตอบในการทำแอพและทำเว็บ

เมนูแบบเลื่อนลง (Dropdowns)

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Modals

Modals ซ้อนทับเนื้อหาเหนือ UI หลัก โดยปกติแล้วใช้สำหรับบันทึกอินพุตของผู้ใช้หรือแสดงข้อความ

<!-- Button to Open Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Modal body text goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Popovers และคำแนะนำเครื่องมือ (Tooltips)

คำแนะนำเครื่องมือและป๊อปโอเวอร์ให้ข้อมูลเพิ่มเติมเมื่อผู้ใช้วางเมาส์เหนือหรือคลิกองค์ประกอบ

<!-- Tooltip -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

<!-- Popover -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="Popover body content goes here.">
  Popover
</button>

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

Bootstrap คืออะไร

Bootstrap คือ ตอนที่ 6 : การนำทาง (Navigation)
Bootstrap คือ ตอนที่ 8 : ยูทิลิตี้ (Utilities)