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

آخرین بروز رسانی: مرداد ۲۹, ۱۳۹۶

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

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

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

انواع تصاویر در بوت استرپ

استفاده از تصاویر در سایت به دلیل جذب مخاطبان اهمیت ویژه ای دارد. بوت استرپ کلاس هایی را برای تصاویر در نظر گرفته که با استفاده از این کلاس ها حالت های متفاوتی را برای تصاویر ایجاد می کند. این کلاس ها به شرح زیر می باشد.
کلاس 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">

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

تصاویر در بوت استرپ

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

عکس واکنش گرا به طور اتوماتیک با تغییر سایز نمایشگر تغییر پیدا می کند. برای ایجاد عکس واکنش گرا در بوت استرپ کافی است کلاس 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>

<!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>

<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 می توان برای عکس ها یک توضیح ارائه داد. خروجی به صورت زیر است.

ایجاد گالری تصاویر در بوت استرپ

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