Bootstrap Chapter 3: การสร้าง List Group

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




     สำหรับการสร้าง List group เบื้องต้น นั้นสามารถทำได้อย่างง่ายดายตามโค้ดตัวอย่างที่แสดงไนด้านล่าง

<h1>My MailBox</h1>
 <ul class="list-group">
  <li class="list-group-item">Inbox</li>
  <li class="list-group-item">Sent</li>
  <li class="list-group-item">Drafts</li>
  <li class="list-group-item">Deleted</li>
  <li class="list-group-item">Spam</li>
 </ul>

รูปที่ 1

     จากโค้ดด้านบนและผลลัพธ์ของการสร้าง List group ในรูปที่ 1 จะสังเกตเห็นว่าการสร้าง List group นั้น จะต้องกำหนดคลาส "list-group" ในแท็กของ "<ul>" และข้อความที่แสดงในแต่ละรายการจะถูกสร้างในแท็ก "<li>" และต้องกำหนดด้วยคลาส "list-group-item"

     แต่ถ้าหากต้องการให้ข้อมูลที่แสดงในลิสต์สามารถใส่ลิงค์เพื่อเชิ่อมโยงข้อมูลไปยังหน้าอื่น จะต้องเปลี่ยนแท็ก "<ul>"  เป็นแท็ก "<div>" แทนและกำหนดแท็ก "<a>" แทนที่แท็ก "<li>"

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

• list-group-item-success สำหรับพื้นหลังสีเขียว
• list-group-item-info สำหรับพื้นหลังสีฟ้า
• list-group-item-warning สำหรับพื้นหลังสีเหลือง
• list-group-item-danger สำหรับพื้นหลังสีแดง

     โดยวิธีการใส่สีพื้นหลังเข้าไปในแต่ละรายการสามารถทำได้ดังตัวอย่างโค้ดที่แสดงในด้านหลังโดยผลลัพธ์แสดงในรูปที่ 2

<li class="list-group-item list-group-item-success">Inbox </li>

รูปที่ 2

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

     โดยวิธีการใส่ข้อความที่เหมือนการแจ้งเตือนนั้นทำได้ง่าย โดยเพียงเพิ่มแท็ก "<span>"  ที่กำหนดด้วยคลาส "badge" เข้าไปข้างในแท็ก "<li>" ดังนี้

<li class="list-group-item">Inbox <span class="badge">14</span></li>

     โดยผลลัพธ์ของโค้ดตัวอย่างด้านบนแสดงในรูปที่ 3

รูปที่ 3

     สำหรับการสร้างรายละเอียดของเนื้อหาของแต่ละรายการโดยใช้ List group สามารถทำได้ไม่ยาก โดยการสร้างรายละเอียดของเนื้อหาของแต่ละรายการโค้ดจะแบ่งออกเป็นสองส่วนหลักคือ ส่วนของหัวข้อและส่วนของเนื้อหา โดยโค้ดในส่วนของหัวของจะถูกกำกับด้วยคลาส "list-group-item-heading" และในส่วนของเนื้อหาจะถูกกำกับด้วยคลาส "list-group-item-heading-text" ดังโค้ดแสดงในตัวอย่างด้านล่าง

<li class="list-group-item">
 <h4 class="list-group-item-heading">Heading 1</h4>
 <p class="list-group-item-heading-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.....
 </p>
</li>

     จากโค้ดด้านบนจะสังเกตเห็นว่าในแต่ละรายการของลิสต์ แท็กของหัวข้อของเนื้อหาคือแท็ก "<h4>" ซึ่งถูกกับกับด้วยคลาส "list-group-item-heading" และแท็กของรายละเอียกของเนื้อหาคือแท็ก "<p>" ซึ่งถูกกับกับด้วยคลาส "list-group-item-heading-text" โดยผลลัพธ์แสดงของลูกล่นที่สองแสดงในรูปที่ 4

รูปที่ 4

Reference

-  Rahman, Syed Fazle. Jump start Bootstrap get up to speed with Bootstrap in a weekend. Collingwood, VIC, Australia: SitePoint, 2014. Print.