การทำ Collapse โดยใช้ bootstap ซ่อนเนื้อหา กดปุ่มค่อยแสดงทั้งหมด สำหรับเว็บเนื้อหาเยอะๆ ในหนึ่งหน้า

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

chavikat.p
PHP Jr. Member
PHP Jr. Member
Posts: 10
Joined: 04/12/2017 10:25 am

การทำ Collapse โดยใช้ bootstap ซ่อนเนื้อหา กดปุ่มค่อยแสดงทั้งหมด สำหรับเว็บเนื้อหาเยอะๆ ในหนึ่งหน้า

Post by chavikat.p »

Collapse คือการซ่อนหรือเปิด กลุ่มข้อมูลหรือ Content ที่มีเนื่อหาจำนวนมาก
ซึ่ง bootstap ก็ได้มีการ จัด ให้เราเรียกใช้ Collapse ได้โดยง่าย ก่อนอ่านเนื้อหานี้ สามารถปูความรู้เรื่อง css กันได้ก่อนที่นี่

Code: Select all

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
2017-12-04_15-39-42.png
2017-12-04_15-39-42.png (10.04 KiB) Viewed 1210 times
2017-12-04_15-39-55.png
2017-12-04_15-39-55.png (18 KiB) Viewed 1210 times
ศึกษาเพิ่มเติมการนำข้อมูลจากฐานข้อมูลมาแสดง และ แต่งการแสดงผลด้วย CSS
viewtopic.php?f=76&t=44684
  • Similar Topics
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 5 guests