รับทําเว็บไซต์ รับทําseo
 
รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การสร้าง List Group ใน Bootstrap

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

     

    List group แบบพื้นฐาน

    <ul class="list-group">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>

     

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

     

    List group แบบใส่ลิงค์

    <div class="list-group">
      <a href="#" class="list-group-item active">
        Cras justo odio
      </a>
      <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item">Morbi leo risus</a>
      <a href="#" class="list-group-item">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item">Vestibulum at eros</a>
    </div>

     

    จะเห็นว่าเราต้องเปลี่ยนแท็ก "<ul>"  เป็นแท็ก "<div>" และใช้แท็ก "<a>" แทนที่แท็ก "<li>"

     

    List group กำหนดสีพื้นหลัง List

    <ul class="list-group">
      <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
      <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
      <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
    </ul>
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
      <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
    </div>

     

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

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com