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

یکی از عناصر مهم در محتوای وب سایت که به جذابیت وب سایت‌ها کمک می‌کند تصاویر هستند.

اگر محتوا وب سایت تصویر داشته باشد از دید موتورهای جستجو ارزش بالاتری دارند و می‌تواند رتبه‌ی وب سایت را بالا ببرد.

یکی از مهم ترین ویژگی‌ها برای تصاویر وب سایت خاصیت واکنشگرا بودن آن‌هاست که با استفاده از آریا بوت استرپ می‌توان تصاویر وب سایت را واکشنگرا  نمود.

واکنشگرایی یا رسپانسیو بودن تصاویر به این معنا است که با اضافه کردن کلاسimg-responsive   به تگ <img>  تصاویر با تغییر سایز صفحه نمایش هماهنگ شده و سبک‌های (css) زیر به تصویر اعمال می‌شود:

display: block;

max-width: 100%;

height: auto;

 مانند تگ زیر:

<img src="flower.jpg" class="img-responsive" alt="flower" />

در بوت استرپ می‌توان تصاویر را به 3 صورت دایره‌ای، گوشه گرد و بند انگشتی (thumbnail) نمایش داد که در ادامه کدهای هرکدام نوشته شده است.

تصاویر دایره‌ای

برای دایره‌ای کردن تصاویر در بوت استرپ از اضافه کردن کلاس img-circle به تگ <img>  استفاده می‌کنیم؛ مانند تگ زیر:

<img src="flower.jpg" class="img-circle" alt="flower" />

برای دایره‌ای شدن تصویر باید عرض و ارتفاع عکس یکسان بوده در غیر این صورت تصویری بیضی شکل ایجاد می‌شود.

تصاویر گوشه گرد 

برای گرد کردن گوشه‌های عکس در بوت استرپ کلاس img-rounded به تگ <img> اضافه می‌نماییم؛ مانند تگ زیر:

<img src="flower.jpg" class="img-rounded" alt="flower" />

تصاویر بند انگشتی (thumbnail)

با استفاده از کلاس img-thumbnail می‌توان به تصاویر یک حاشیه (border) 0.25rem اضافه نمود؛ مانند تگ زیر:

<img src="flower.jpg" class="img-thumbnail" alt="flower" />

 نکته : مرورگر IE8 از تصاویر دایره‌ای و گوشه گرد پشتیبانی نمی‌کند.

با استفاده از کلاس thumbnail و قابلیت Grid در بوت استرپ می‌توانید گالری تصاویر ایجاد نمایید، برای این منظور می‌توانید از کدهای زیر استفاده کنید:

<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="lights.jpg">
        <img src="lights.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="nature.jpg">
        <img src="nature.jpg" alt="Nature" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="fjords.jpg">
        <img src="fjords.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
</div>