รูปแบบภาพใน Bootstrap4

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

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

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

รูปแบบภาพใน Bootstrap4

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

ใน Bootstrap4 สามารถจัดวางรูปภาพให้เป็นรูปร่างต่างๆได้ ในที่นี้ เราเลือกมาสามรูปแบบที่น่าสนใจ แต่ละรูปแบบเราเพียงแค่ใช้ชื่อคลาส
  1. คลาส rounded-circle
  2. คลาส rounded
  3. คลาส img-thumbnail
เรามาดูตัวอย่าง ดังนี้

1.Class ".rounded-circle" จะเป็นรูปร่าง วงกลม

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

<!DOCTYPE html>
<html lang="en">
<head>
  	<title>Bootstrap Example</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
	div class="container">
  		<h2>Rounded Circle</h2>
 		<p>class "rounded-circle" จะทำให้ภาพเป็นวงกลม</p>            
  		<img src="beach-blur-boardwalk.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="304"> 
	</div>
</body>
</html>
ผลลัพธ์
img-circle.jpg
img-circle.jpg (39.43 KiB) Viewed 4004 times
2. Class ".rounded" จะช่วยให้มุมของภาพเป็นโค้งๆ ไม่แหลมหรือไม่เหลี่ยมเกินไป

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

<div class="container">
  <h2>Rounded Corners</h2>
  <p>class "rounded" จะช่วยให้มุมของภาพเป็นโค้งๆ ไม่แหลมหรือไม่เหลี่ยมเกินไป</p>            
  <img src="beach-blur-boardwalk.jpg" class="rounded" alt="Cinque Terre" width="304" height="236"> 
</div>
ผลลัพธ์
img-rounded.jpg
img-rounded.jpg (36.5 KiB) Viewed 4004 times
3. Class ".img-thumbnail" จะแสดงภาพในรูปแบบ Thumbnail หรือภาพขนาดย่อ

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

<div class="container">
  <h2>Image Thumbnail</h2>
  <p>class "img-thumbnail" จะแสดงภาพในรูปแบบ Thumbnail หรือภาพขนาดย่อ </p>            
  <img src="beach-blur-boardwalk.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
</div>
ผลลัพธ์
img-thumbnail.jpg
img-thumbnail.jpg (35.86 KiB) Viewed 4004 times
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : bootstrap
-รูปแบบของ Buttons
-รูปแบบของ Dropdowns
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 30