Cards ใน Bootstrap 4

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

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

abdkode
PHP Super Member
PHP Super Member
โพสต์: 362
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

Cards ใน Bootstrap 4

โพสต์โดย abdkode » 10/01/2019 5:55 pm

Bootstrap ได้มีการปรับเปลี่ยน ชื่อclass จาก ".panel" ที่ใช้ใน bootstrap3 มาเป็น ".card" ใน Bootstrap4
แต่ยังใช้หลัการเหมือนเดิม ที่มีส่วน header , ส่วน body และ ส่วน footer
ตัวอย่าง

โค้ด: เลือกทั้งหมด

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
</div>

โค้ดด้านบนนี้ เป็นการเขียนที่มีเฉพาะส่วน card-header และ card-body ซึ่งมีผลลัพธ์ ดังนี้
card.jpg
card.jpg (19.47 KiB) เปิดดู 1219 ครั้ง


เราสามารถเพิ่มรูปภาพใน card ดังตัวอย่างโค้ดนี้

โค้ด: เลือกทั้งหมด

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="img1.jpg" alt="railway">
  <div class="card-body">
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
     dummy text ever since the 1500s.</p>
  </div>
</div>

ผลลัพธ์
cardimg.png
cardimg.png (164.13 KiB) เปิดดู 1219 ครั้ง


นอกจากนั้นแล้ว เราสามารถเพิ่มลูกเล่นต่างๆของbootstrap ไว้ใน card ได้
เช่น เพิ่ม Navigation หรือ ลิงค์ ได้

โค้ด: เลือกทั้งหมด

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ผลลัพธ์
card-nav.jpg
card-nav.jpg (21.23 KiB) เปิดดู 1219 ครั้ง


เราสามารถปรับสีหรือธีมตามต้องการได้ เพียงแค่ เพิ่มชื่อคลาสกำหนดสีของ bootstrap เช่น
".success" เพื่อให้เป็นสีเขียว
".primary" เพื่อให้เป็นน้ำเงิน
".danger" เพื่อให้เป็นสีแดง
".warning" เพื่อให้เป็นสีเหลือง

ตัวอย่างโค้ดให้เป็นสีน้ำเงิน

โค้ด: เลือกทั้งหมด

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ซึ่งเราได้ใช้คลาส "bg-primary" ผลลัพธ์จะเป็นสีน้ำเงินดังนี้ครับ
card-primary.jpg
card-primary.jpg (24.7 KiB) เปิดดู 1219 ครั้ง


จากผลลัพธ์เราสามารถไปปรับแต่งเพิ่มเติมได้ตามความต้องการ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : bootstrap
-รูปแบบของ Buttons
-รูปแบบของ Dropdowns

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 7 และ บุคคลทั่วไป 0 ท่าน