نویسنده پشتیبانی وب یار

امتیاز مطلب

تعداد بازدید 5213

تاریخ بروزرسانی ۳۰ فروردین ۱۴۰۱

آموزش تصاویر در بوت استرپ

ایجاد عکس واکنش گرا در بوت استرپ

با سلام به همراهان همیشگی وب یار، این جلسه مبحث تصاویر در بوت استرپ را به شما آموزش می دهیم. در این مقاله به مباحثی از جمله تصویر با لبه های گرد – عکس دایره ای – عکس بندانگشتی، ایجاد عکس واکنش گرا در بوت استرپ و ایجاد گالری تصاویر پرداخته می شود. در ادامه با وب یار همراه باشید تا با نحوه ایجاد تصاویر در بوت استرپ آشنا شوید.

تصاویر در بوت استرپ با.img-fluid. max-width: 100%; وheight: auto;به تصویر اعمال می شود تا با عنصر والد مقیاس شود.

انواع تصاویر

استفاده از تصاویر در سایت به دلیل جذب مخاطبان اهمیت ویژه ای دارد. بوت استرپ کلاس هایی را برای تصاویر در نظر گرفته که با استفاده از این کلاس ها حالت های متفاوتی را برای تصاویر ایجاد می کند. این کلاس ها به شرح زیر می باشد.
کلاس img-rounded باعث گرد شدن گوشه های عکس می شود.
کلاس img-circle عکس را به صورت دایره نمایش می دهد.
کلاس img-thumbnail عکس مورد نظر را به صورت یک عکس بند انگشتی در می آورد.
در کد زیر می توانید با نحوه ی استفاده از این کلاس ها آشنا شوید.

<img src="img/index.jpg" class="img-rounded" alt="tabiat" width="200" height="140">
<img src="img/images.jpg" class="img-circle" alt="tabiat" width="140" height="140">
<img src="img/index.jpg" class="img-thumbnail" alt="tabiat" width="200" height="140">

1

2

3

در شکل زیر می توانید انواع تصاویر را که با کد بالا ایجاد می شود را ببینید.

ایجاد عکس واکنش گرا در بوت استرپ

عکس واکنش گرا به طور اتوماتیک با تغییر سایز نمایشگر تغییر پیدا می کند. برای ایجاد عکس واکنش گرا در بوت استرپ کافی است کلاس img-responsive را به تگ img اضافه کنید. این کلاس در واقع کد max-width:100% و height:auto را به عکس اضافه می کند. در کد زیر نحوه ی استفاده از این کلاس نشان داده شده است.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src="img/MhCNf4uuGg.jpg" class="img-responsive" alt="tabiat" width="500" height="420">
</div>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

این کد را در ++notepad بنویسید، سپس سایز مرورگرتان را تغییر دهید و نتیجه را مشاهده کنید.

ایجاد گالری تصاویر

برای ایجاد گالری می توان از سیستم شبکه بندی بوت استرپ و کلاس thumbnail استفاده کرد. برای مثال فرض کنید که می خواهیم برای نمونه کارهای سایت وب یار یک گالری تصاویر ایجاد کنیم که در یک سطر، سه نمونه کار نشان داده شود. برای این کار در یک div با کلاس row ، سه div با کلاس col-md-4 قرار می دهیم زیرا می خواهیم در یک سطر سه نمونه کار قرار دهیم. سپس در هر کدام از این سه div یک div با کلاس thumbnail می گذاریم و در آن نمونه کار را قرار می دهیم. به کد زیر دقت کنید.

<div class="container" style="padding:5px 50px;">
<div class="row">
 <div class="col-md-4">
   <div class="thumbnail">
     <a href="https://www.webyar.net/category/sample-webdesign/" target="_blank">
     <img src="img/1.PNG" alt="نمونه کار وب یار" width="150" height="100"><br>
     <div class="caption">
      <p style="text-align:center;">طراحی سایت مشاور املاک</p>
     </div>
     </a>
   </div>
 </div>
 <div class="col-md-4">
  <div class="thumbnail">
     <a href="https://www.webyar.net/category/sample-webdesign/" target="_blank">
     <img src="img/2.PNG" alt="نمونه کار وب یار" width="150" height="100">
     <div class="caption">
      <p style="text-align:center;">طراحی سایت فروش ساعت</p>
     </div>
     </a>
  </div>
 </div>
 <div class="col-md-4">
  <div class="thumbnail">
   <a href="https://www.webyar.net/category/sample-webdesign/" target="_blank">
   <img src="img/3.PNG" alt="نمونه کار وب یار" width="150" height="100"><br>
   <div class="caption">
    <p style="text-align:center;">طراحی سایت صنعتی توربو</p>
   </div>
   </a>
  </div>
  </div>
 </div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<p style="text-align:center;">طراحی سایت مشاور املاک</p>

</div>

</a>

</div>

<p style="text-align:center;">طراحی سایت فروش ساعت</p>

</div>

</a>

</div>

<p style="text-align:center;">طراحی سایت صنعتی توربو</p>

</div>

</a>

</div>

با استفاده از کلاس caption می توان برای عکس ها یک توضیح ارائه داد. خروجی به صورت زیر است.

تصویر

اگر از عنصر <picture> برای تعیین چندین عنصر <source> برای یک <img> خاص استفاده می‌کنید، مطمئن شوید که کلاس‌های .img-* را به <img> و نه به تگ <picture> اضافه می‌کنید.

اگر به یادگیری بوت استرپ علاقمند هستید می توانید مطالب مرجع آموزش بوت استرپ را هم مطالعه کنید.

آموزش تصاویر در بوت استرپ

ایجاد عکس واکنش گرا در بوت استرپ

انواع تصاویر

ایجاد عکس واکنش گرا در بوت استرپ

ایجاد گالری تصاویر

تصویر

مقالات مرتبط

راهنمای سیستم شبکه بندی بوت استرپ

طراحی سایت ارزان قیمت در اصفهان با وب یار

آموزش کدهای وردپرس در طراحی سایت

لغو پاسخ