ภาพขนาดย่อบูต
บทนี้จะอธิบายภาพขนาดย่อ Bootstrap เว็บไซต์ส่วนใหญ่จำเป็นต้องมีการจัดวางภาพ, วิดีโอ, ข้อความ ฯลฯ ในตาราง ภาพขนาดย่อสำหรับบูตนี้มีวิธีที่ง่าย ต้องการใช้เงินทุนสร้างภาพดังต่อไปนี้:
- เพิ่ม <a> รอบแท็กภาพที่มี .thumbnailชั้นเรียน
- นี้จะเพิ่มช่องว่าง (ช่องว่าง) สี่พิกเซลและขอบสีเทา
- เมื่อเลื่อนเมาส์ไปที่ภาพเคลื่อนไหวจะแสดงเค้าร่างของภาพ
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงภาพขนาดย่อเริ่มต้น:
ตัวอย่าง
<div class = "แถว">
<div class = "Col-SM-6 Col-MD-3">
<a href = "#" class = "ย่อ">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "ทั่วไปยึดภาพขนาดย่อ">
</ A>
</ div>
<div class = "Col-SM-6 Col-MD-3">
<a href = "#" class = "ย่อ">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "ทั่วไปยึดภาพขนาดย่อ">
</ A>
</ div>
<div class = "Col-SM-6 Col-MD-3">
<a href = "#" class = "ย่อ">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "ทั่วไปยึดภาพขนาดย่อ">
</ A>
</ div>
<div class = "Col-SM-6 Col-MD-3">
<a href = "#" class = "ย่อ">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "ทั่วไปยึดภาพขนาดย่อ">
</ A>
</ div>
</ div>
ลอง»
ผลมีดังนี้
เพิ่มเนื้อหาที่กำหนดเอง
ตอนนี้เรามีภาพขนาดย่อพื้นฐานเราสามารถเพิ่มความหลากหลายของเนื้อหาที่จะย่อ HTML เช่นหัวย่อหน้าหรือปุ่ม เฉพาะขั้นตอนดังต่อไปนี้:
- ป้าย <a> กับ .thumbnailระดับการเปลี่ยนแปลง <div>
- ในส่วน <div> ภายในคุณสามารถเพิ่มสิ่งที่คุณต้องการที่จะเพิ่ม ตั้งแต่นี้เป็น <div> เราสามารถใช้ค่าเริ่มต้นกฎการตั้งชื่อขึ้นอยู่กับช่วงเวลาในการปรับขนาด
- หากคุณต้องการจัดกลุ่มภาพหลายภาพโปรดใส่ไว้ในรายการเรียงลำดับและรายการแต่ละรายการที่เหลือลอย
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงจุดนี้:
ตัวอย่าง
<div class = "แถว">
<div class = "Col-SM-6 Col-MD-3">
<div class = "ย่อ">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "ทั่วไปยึดภาพขนาดย่อ">
<div class = "คำบรรยายภาพ">
แท็บ <h3> รูปขนาดเล็ก </ h3>
<p> ข้อความตัวอย่างบางส่วน ข้อความตัวอย่างบางส่วน </ p>
<p>
<a href = "#" class = "BTN BTN หลัก" บทบาท = "ปุ่ม"> ปุ่ม </ a>
<a href = "#" class = "btn BTN เริ่มต้น" บทบาท = "ปุ่ม"> ปุ่ม </ a>
</ p>
</ div>
</ div>
</ div>
<div class = "Col-SM-6 Col-MD-3">
<div class = "ย่อ">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "ทั่วไปยึดภาพขนาดย่อ">
<div class = "คำบรรยายภาพ">
แท็บ <h3> รูปขนาดเล็ก </ h3>
<p> ข้อความตัวอย่างบางส่วน ข้อความตัวอย่างบางส่วน </ p>
<p>
<a href = "#" class = "BTN BTN หลัก" บทบาท = "ปุ่ม"> ปุ่ม </ a>
<a href = "#" class = "btn BTN เริ่มต้น" บทบาท = "ปุ่ม"> ปุ่ม </ a>
</ p>
</ div>
</ div>
</ div>
<div class = "Col-SM-6 Col-MD-3">
<div class = "ย่อ">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "ทั่วไปยึดภาพขนาดย่อ">
<div class = "คำบรรยายภาพ">
แท็บ <h3> รูปขนาดเล็ก </ h3>
<p> ข้อความตัวอย่างบางส่วน ข้อความตัวอย่างบางส่วน </ p>
<p>
<a href = "#" class = "BTN BTN หลัก" บทบาท = "ปุ่ม"> ปุ่ม </ a>
<a href = "#" class = "btn BTN เริ่มต้น" บทบาท = "ปุ่ม"> ปุ่ม </ a>
</ p>
</ div>
</ div>
</ div>
<div class = "Col-SM-6 Col-MD-3">
<div class = "ย่อ">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "ทั่วไปยึดภาพขนาดย่อ">
<div class = "คำบรรยายภาพ">
แท็บ <h3> รูปขนาดเล็ก </ h3>
<p> ข้อความตัวอย่างบางส่วน ข้อความตัวอย่างบางส่วน </ p>
<p>
<a href = "#" class = "BTN BTN หลัก" บทบาท = "ปุ่ม"> ปุ่ม </ a>
<a href = "#" class = "btn BTN เริ่มต้น" บทบาท = "ปุ่ม"> ปุ่ม </ a>
</ p>
</ div>
</ div>
</ div>
</ div>
ลอง»
ผลมีดังนี้
