Cards ใน Bootstrap 4

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: Cards ใน Bootstrap 4

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) Viewed 6241 times
เราสามารถเพิ่มรูปภาพใน 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) Viewed 6241 times
นอกจากนั้นแล้ว เราสามารถเพิ่มลูกเล่นต่างๆของ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) Viewed 6241 times
เราสามารถปรับสีหรือธีมตามต้องการได้ เพียงแค่ เพิ่มชื่อคลาสกำหนดสีของ 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) Viewed 6241 times
จากผลลัพธ์เราสามารถไปปรับแต่งเพิ่มเติมได้ตามความต้องการ

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

ข้างบน