การใส่ Images ใน Bootstrap

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

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

ภาพประจำตัวสมาชิก
jamepiyawat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 903
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

การใส่ Images ใน Bootstrap

โพสต์โดย jamepiyawat » 30/07/2019 4:37 pm

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

โดยโค้ดที่จะเป็นขอบแบบ 3 แบบนั้นก็คือ
img-rounded จะแสดงภาพแบบไม่มีขอบ
img-circle จะแสดงภาพเป็นวงกลม
img-polaroid จะแสดงภาพให้มีกรอมเพิ้มขึ้นมาก
สามารถเขียนโค้ดได้ตามนี้

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

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">


ผลลัพธ์ที่ได้
Selection_999(186).png
Selection_999(186).png (4.93 KiB) เปิดดู 118 ครั้ง


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

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

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

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

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