สอนใช้งาน Bootstrap 4

Bootstrap 4 การใช้งาน Jumbotron

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

ใน Bootstrap 4 เราสามารถใช้งาน Jumbotron ได้ง่ายและมีหลายรูปแบบให้เลือกประยุกต์ตามความต้องการ

การสร้าง Jumbotron แบบพื้นฐาน

ตัวอย่างการใช้งาน Jumbotron แบบพื้นฐาน สามารถทำได้โดยใช้คลาส .jumbotron ซึ่งจะทำให้ส่วนนี้แสดงเป็นกล่องขนาดใหญ่พร้อมพื้นหลังสีจาง ๆ

HTML
<div class="jumbotron">
  <h1 class="display-4">ยินดีต้อนรับ!</h1>
  <p class="lead">นี่คือพื้นที่สำหรับข้อความที่ต้องการเน้น เช่น การแนะนำเว็บไซต์หรือโปรโมชันสำคัญ</p>
  <hr class="my-4">
  <p>คุณสามารถใส่ข้อมูลเพิ่มเติมที่เกี่ยวข้องได้ในส่วนนี้</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">เรียนรู้เพิ่มเติม</a>
</div>
  • display-4 ใช้เพื่อกำหนดขนาดตัวอักษรให้ใหญ่ขึ้นเหมาะกับการเป็นหัวเรื่อง
  • lead ใช้สำหรับข้อความแนะนำที่มีขนาดใหญ่ขึ้นเล็กน้อย
  • btn btn-primary ใช้เพื่อสร้างปุ่มที่ดูโดดเด่น

การใช้ Jumbotron แบบเต็มหน้า (Full Width Jumbotron)

โดยปกติแล้ว Jumbotron จะมีการเว้นขอบเล็กน้อย แต่หากต้องการให้ Jumbotron ขยายเต็มหน้าจอ (แบบไม่มีขอบ) สามารถใช้คลาส .container-fluid ร่วมกับ .jumbotron ได้

HTML
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">ยินดีต้อนรับสู่เว็บไซต์ของเรา</h1>
    <p class="lead">เว็บไซต์ของเรามีสินค้าที่น่าสนใจหลากหลายชนิดให้คุณได้เลือกสรร</p>
  </div>
</div>
  • jumbotron-fluid ช่วยให้ Jumbotron ขยายเต็มหน้าจอ
  • container ใช้เพื่อจัดเนื้อหาให้อยู่ในกรอบส่วนกลางของหน้าจอ

การใช้ Jumbotron แบบมีพื้นหลังรูปภาพ

นอกจากการใช้พื้นหลังสีพื้น ๆ แล้ว เรายังสามารถเพิ่มรูปภาพเป็นพื้นหลังของ Jumbotron ได้ โดยการใช้ CSS ช่วยในการกำหนดรูปแบบ

HTML
<div class="jumbotron jumbotron-fluid" style="background-image: url('https://example.com/bg.jpg'); background-size: cover; color: white;">
  <div class="container">
    <h1 class="display-4">สินค้าพิเศษ</h1>
    <p class="lead">สินค้ารุ่นใหม่ล่าสุดของเรามาถึงแล้ว! สั่งซื้อได้ทันทีพร้อมโปรโมชั่นสุดพิเศษ</p>
    <a class="btn btn-success btn-lg" href="#" role="button">สั่งซื้อเลย</a>
  </div>
</div>
  • background-image ใช้เพื่อกำหนดรูปภาพพื้นหลัง
  • background-size: cover; ช่วยให้รูปภาพเต็มพื้นที่ Jumbotron โดยไม่ถูกยืดผิดสัดส่วน
  • color: white; ใช้กำหนดสีข้อความให้เด่นชัดบนพื้นหลังรูปภาพ

การใช้ Jumbotron ร่วมกับกริด (Grid System)

เรายังสามารถใช้ Jumbotron ร่วมกับระบบกริดของ Bootstrap เพื่อจัดการกับการวางตำแหน่งเนื้อหาในรูปแบบต่าง ๆ ได้

HTML
<div class="jumbotron">
  <div class="row">
    <div class="col-md-8">
      <h1 class="display-4">โปรโมชั่นพิเศษ</h1>
      <p class="lead">ลดราคาทุกสินค้า 50% วันนี้เท่านั้น!</p>
    </div>
    <div class="col-md-4">
      <a class="btn btn-danger btn-lg" href="#" role="button">สั่งซื้อเดี๋ยวนี้</a>
    </div>
  </div>
</div>
  • ระบบกริดของ Bootstrap ใช้คลาส row และ col-md-* เพื่อแบ่งพื้นที่การแสดงผลของเนื้อหา
  • ในตัวอย่างนี้ เราแบ่งส่วนของเนื้อหาออกเป็น 8 ส่วนสำหรับข้อความและ 4 ส่วนสำหรับปุ่มสั่งซื้อ

การใช้ Jumbotron เพื่อเน้นข้อความสำคัญในเว็บไซต์

Jumbotron สามารถใช้สำหรับเน้นข้อความสำคัญในหน้าต่าง ๆ ของเว็บไซต์ เช่น การประกาศข่าวสาร ข้อมูลอัพเดต หรือการแจ้งเตือน

HTML
<div class="jumbotron">
  <h1 class="display-4">ประกาศด่วน</h1>
  <p class="lead">เว็บไซต์ของเราจะปิดปรับปรุงระบบในวันที่ 25 กันยายน ตั้งแต่เวลา 22:00 ถึง 02:00 น.</p>
  <hr class="my-4">
  <p>ขออภัยในความไม่สะดวก ขอบคุณสำหรับความเข้าใจ</p>
</div>
  • hr ใช้เพื่อเพิ่มเส้นแบ่งระหว่างส่วนเนื้อหาต่าง ๆ

สรุป

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

Jumbotron จึงเป็นเครื่องมือที่มีประโยชน์สำหรับการสร้างความน่าสนใจให้กับผู้เยี่ยมชมเว็บไซต์

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ