آموزش بوت استرپ – قسمت پنجم – تصاویر در بوت استرپ

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

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

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

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

کلاس img-rounded  گوشه های تصویر را گرد می­کند. (IE8 گوشه های گرد را پشتیبانی نمی کند):

برای مثال کد زیر را ببینید:


<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">

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

کلاس img-circle شکل را دایره به تصویرمی دهد.(IE8 می کند گوشه های گرد را پشتیبانی نمی کند):


<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"  width="304" height="236">

کوچک کردن یا بند انگشتی کردن تصویر

کلاس img-thumbnail تصویر را کوچک یا بندانگشتی می­کند:


<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">

تصاویرواکنشگرا یا ریسپانسیو:

چون صفحه نمایش ها در هر اندازه ای هستند بنابراین تصاویر هم باید اندازه های مختلف باشند. تصاویر واکنشگرا به طور خودکار به تناسب اندازه صفحه نمایش تنظیم می­شوند.

تصاویر واکنشگرا را می توان با اضافه کردن کلاس .img-responsive به تگ img ایجاد کرد. تصویر پس از آن به خوبی در مقیاس عنصر والد خود تنظیم خواهد شد. کلاس img-responsive خصوصیات “display: block” و “max-width: 100%” و “height: auto” را بر تصویر اعمال می کند.
مثال:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

برای استفاده کاربردی تر از این ویژگی بوت استرپ یک مثال براتون می زنم که با استفاده از تصاویر ریسپانسیو و سیستم گرید بوت استرپ می تونید یک گالری از تصاویر رو ایجاد کنید، کد زیر این کار رو برای شما انجام میده:



<div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">


Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.

 
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
  </div>


<div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">


Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".

      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"style="width:150px;height:150px"> 

    </a>
  </div>


<div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">


The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.

 
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
  </div>

</div>

خاصیت بعدی که می تونه در زمینه ریسپانسیو کردن ویدئو یا اسلاید ها خیلی کاربرد داشته باشه خاصیت جاسازی واکنشگرا (Responsive Embeds) است. مثال زیر برای ایجاد یک ویدئو ریسپانسیو به شما کمک زیادی می کنه:


<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

نسبت ابعاد چیست؟
نسبت ابعاد تصویر، رابطه متناسب بین عرض و ارتفاع تصویر را توصیف می کند. دو نسبت ابعاد ویدئو که شایع هستند عبارتند از ۳:۴ (فرمت های ویدئو جهانی از قرن ۲۰)، و ۱۶:۹ (نسبت جهانی برای تلویزیون HD و تلویزیون های دیجیتال اروپا).
شما می توانید بین دو کلاس نسبت ابعاد را انتخاب کنید:

<!-- 16:9 aspect ratio -->

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>


<!-- 4:3 aspect ratio -->

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

امیدوارم این قسمت از آموزش بوت استرپ براتون مفید بوده باشه.

برچسب ها

ممکن است به این موارد نیز علاقه مند باشید:

0 دیدگاه در “آموزش بوت استرپ – قسمت پنجم – تصاویر در بوت استرپ”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی را در کادر زیر بنویسید *