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

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

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

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

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

โพสต์โดย abdkode » 10/01/2019 1:37 pm

ใน 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) เปิดดู 672 ครั้ง


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) เปิดดู 672 ครั้ง


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) เปิดดู 672 ครั้ง


ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : bootstrap
-รูปแบบของ Buttons
-รูปแบบของ Dropdowns

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

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

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

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