ใน
Bootstrap4 สามารถจัดวางรูปภาพให้เป็นรูปร่างต่างๆได้ ในที่นี้ เราเลือกมาสามรูปแบบที่น่าสนใจ แต่ละรูปแบบเราเพียงแค่ใช้ชื่อคลาส
- คลาส rounded-circle
- คลาส rounded
- คลาส 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 (39.43 KiB) Viewed 4035 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 (36.5 KiB) Viewed 4035 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 (35.86 KiB) Viewed 4035 times
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : bootstrap
-รูปแบบของ Buttons
-รูปแบบของ Dropdowns
ใน [b]Bootstrap4[/b] สามารถจัดวางรูปภาพให้เป็นรูปร่างต่างๆได้ ในที่นี้ เราเลือกมาสามรูปแบบที่น่าสนใจ แต่ละรูปแบบเราเพียงแค่ใช้ชื่อคลาส
[list=1][*]คลาส rounded-circle
[*]คลาส rounded
[*]คลาส img-thumbnail [/list]
เรามาดูตัวอย่าง ดังนี้
[b]1.Class ".rounded-circle" จะเป็นรูปร่าง วงกลม[/b]
[code]
<!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>
[/code]
[b][color=#FF0040]ผลลัพธ์[/color][/b]
[attachment=2]img-circle.jpg[/attachment]
[b]2. Class ".rounded" จะช่วยให้มุมของภาพเป็นโค้งๆ ไม่แหลมหรือไม่เหลี่ยมเกินไป[/b]
[code]<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>[/code]
[b][color=#FF0040]ผลลัพธ์[/color][/b]
[attachment=1]img-rounded.jpg[/attachment]
[b]3. Class ".img-thumbnail" จะแสดงภาพในรูปแบบ [url=https://mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3437-what-is-thumbnail.html]Thumbnail[/url] หรือภาพขนาดย่อ[/b]
[code]<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>[/code]
[b][color=#FF0040]ผลลัพธ์[/color][/b]
[attachment=0]img-thumbnail.jpg[/attachment]
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : bootstrap
[url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=49925]-รูปแบบของ Buttons[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=49922]-รูปแบบของ Dropdowns[/url]