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

کتابخانه بوت استرپ دوگانه چپ چین و راست چین
ارائه شده توسط شرکت توسعه فن آوری آریا وندیداد

آریا بوت استرپ، بر پایه بوت استرپ نسخه 4.4.1

آریا بوت استرپ بوت استرپ راست چین بوت استرپ
arya bootstrap bootstrap-rtl bootstrap
bootstrap 4.4.1 2020-02-02
تصاویر در بوت استرپ

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

تصاویر در وب سایت ها از اهمیت بالایی برخوردار هستند که می توانند علاه بر جذابیت و زیبایی به بالا بردن رتبه ی وب سایت در موتور های جستجو کمک نمایند.
ابزارهای کمکی بوت استرپ 1398/07/20 652 4 پیوند مستقیم

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

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

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

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

واکنشگرایی یا رسپانسیو بودن تصاویر به این معنا است که با اضافه کردن کلاس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>
ثبت کننده:حسین خزائی تاریخ ثبت:1398/07/20
ویرایش کننده:حسین خزائی تاریخ ویرایش:1398/07/21

موضوع: ابزارهای کمکی بوت استرپ
تعداد بازدید:652


1 دیدگاه

بهار 1398/07/22 09:10
ممنون از مطلب خوبتون، خلاصه در عین حال مفید طراحی صفحه تون هم ساده در عین حال شیکه

پاسخ به این دیدگاه

آریا وندیداد 1398/10/16 13:01
سلام، خوشحالیم که مورد توجه تون قرار گرفته. موفق باشید

دیدگاه شما

کاربر گرامی خواهشمند است به موارد زیر دقت فرمایید:
• لطفا فارسی تایپ کنید و با حروف لاتین (فینگلیش) ننویسید.
• دیدگاه های ارائه شده پس از بازبینی منتشر می‌شود.
• آدرس ایمیل در سایت نمایش داده نمی شود.