Bootstrap Chapter 3: การสร้าง Thumbnails

     ปกติถ้าเราต้องการย่อขนาดของรูป (Thumbnail) ที่เรานำเสนอบนเว็บไซด์ให้เข้ากับตำแหน่งที่เราเตรียมไว้ เราต้องกำหนดขนาดพิกเซลให้กับขนาดของรูป หรือเราจำเป็นที่ต้องเปลี่ยนแปลง (re-size) ขนาดรูปภาพด้วยโปรแกรมต่าง เพื่อให้มีขนาดพอดีกับตำแหน่งที่เราได้จัดเตรียมไว้  แต่ถ้าเราใช้ Bootstrap การย่อขนาดของรูปให้มีความเหมาะสมกับขนาดที่เราได้จัดเตรียมไว้ก็จะมีความง่ายมากยิ่งขึ้น นอกจากนี้ Bootstrap ยังตกแต่งรูปที่ถูกย่อขนาดให้มีความสวยงาม ด้วยการใส่กรอบรูป และใส่เอฟเฟกต์โดยการเปลี่ยนสีกรอบเป็นสีน้ำเงิน เมื่อรูปภาพนั้นถูกนั้นเมาส์ไปชี้




     สำหรับ syntax ของการสร้าง Thumbnail บน Bootstrap สามารถเขียนได้ง่ายดังนี้

<a href="#" class="thumbnail">
 <img src="icon/wallpaper-2484042.jpg" />
</a>

     จากโค้ดตัวอย่างด้านบนจะสังเกตเห็นว่ารูปภาพที่เราต้องการย่อขนาดตัองอยู่ภายใต้คลาส "thumbnail" โดยในตัวอย่างที่จะนำเสนอในวันนี้คือการสร้างรูปภาพขนาดย่อบนคอลลัมน์ 4 คอลลัมน์ ดังนั้นเพื่อแสดงผลให้มีความสวยงาม คลาสของแต่ละคอลัมน์ที่เราจะใช้ในแต่ละคอลัมน์ของตัวอย่างนี้คือ "col-xs-3"  ดังที่เคยกล่าวไว้ในเรื่อง "การสร้าง Grid system" ดังนั้นโค้ดตัวอย่างของการสร้าง Bootstrap ด้านล่าง

<div class="row">
 <div class="col-xs-3">
  <a href="#" class="thumbnail">
   <img src="icon/wallpaper-2484042.jpg" />
  </a>
 </div>
 <div class="col-xs-3">
  <a href="#" class="thumbnail">
   <img src="icon/wallpaper-2497766.jpg" />
  </a>
 </div>
 <div class="col-xs-3">
  <a href="#" class="thumbnail">
   <img src="icon/wallpaper-2499155.jpg" />
  </a>
 </div>
 <div class="col-xs-3">
  <a href="#" class="thumbnail">
   <img src="icon/wallpaper-2500281.jpg" />
  </a>
 </div>
</div>

     โดยผลลัพธ์ของโค้ดจากด้านบน แสดงในรูปที่ 1 นอกจากนี้เราลองเอาไปชี้ที่รูปใดรูปหนึ่ง จะสังเกตเห็นว่าที่บริเวณกรอบของรูปภาพนั้นจะเปลี่ยนเป็นสีฟ้า

รูปที่ 1

     นอกจากนี้แล้วใน Thumbnail ของ Bootstrap  เรายังสามารถใส่ข้อความอธิบาย (caption) ในแต่ละภาพได้อีกด้วย โดยวิธีการใส่ข้อความอธิบายรูปภาพแสดงในโค้ดตัวอย่างด้านล่าง

<a href="#" class="thumbnail">
 <img src="icon/wallpaper-2484042.jpg" />
</a>
<div class="caption">
  <h3> Caption 1 </h3>   
</div>

     จากโค้ดด้านบนจะสังเกตเห็นว่า ข้อความที่เป็นคำอธิบายรูปภาพจะต้องถูกกับกับด้วยคลาส "caption" คราวนี้เราลองมาใส่คำอธิบายรูปภาพของแต่ละรูปภาพให้กับตัวอย่างของเรา ซึ่งโค้ดตัวอย่างของการใส่คำอธิบายรูปภาพของ 4 รูปภาพแสดงโค้ดด้านล่าง และผลลัพธ์ของการใส่คำอธิบายรูปภาพแสดงในรูปที่ 2

<div class="row">
 <div class="col-xs-3">
  <a href="#" class="thumbnail">
   <img src="icon/wallpaper-2484042.jpg" />
  </a>
  <div class="caption">
   <h3> Caption 1 </h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec metus libero, congue ac euismod consectetur, sollicitudin ut mauris. Nullam sed dolor sollicitudin, hendrerit lectus blandit, aliquam libero.</p>
   <p><a href="#" class="btn btn-primary">Read more</a></p>
  </div>
 </div>
 <div class="col-xs-3">
  <a href="#" class="thumbnail">
   <img src="icon/wallpaper-2497766.jpg" />
  </a>
  <div class="caption">
   <h3> Caption 2 </h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec metus libero, congue ac euismod consectetur, sollicitudin ut mauris. Nullam sed dolor sollicitudin, hendrerit lectus blandit, aliquam libero.</p>
   <p><a href="#" class="btn btn-primary">Read more</a></p>
  </div>
 </div>
 <div class="col-xs-3">
  <a href="#" class="thumbnail">
   <img src="icon/wallpaper-2499155.jpg" />
  </a>
  <div class="caption">
   <h3> Caption 3 </h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec metus libero, congue ac euismod consectetur, sollicitudin ut mauris. Nullam sed dolor sollicitudin, hendrerit lectus blandit, aliquam libero.</p>
   <p><a href="#" class="btn btn-primary">Read more</a></p>
  </div>
 </div>
 <div class="col-xs-3">
  <a href="#" class="thumbnail">
   <img src="icon/wallpaper-2500281.jpg" />
  </a>
  <div class="caption">
   <h3> Caption 4 </h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec metus libero, congue ac euismod consectetur, sollicitudin ut mauris. Nullam sed dolor sollicitudin, hendrerit lectus blandit, aliquam libero.</p>
   <p><a href="#" class="btn btn-primary">Read more</a></p>
  </div>
 </div>
</div>

รูปที่ 2

Reference

-  Rahman, Syed Fazle. Jump start Bootstrap get up to speed with Bootstrap in a weekend. Collingwood, VIC, Australia: SitePoint, 2014. Print.