- คลาส 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>
โค้ด: เลือกทั้งหมด
<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>
โค้ด: เลือกทั้งหมด
<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>
-รูปแบบของ Buttons
-รูปแบบของ Dropdowns