تصاویر

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< Bootstrap:Tutorial(تغییرمسیر از Bootstrap:تصاویر)
پرش به ناوبری پرش به جستجو


اَشکال تصویر در بوت استرپ

گوشه‌های گرد: دایره: کوچک:

گوشه های گرد

کلاس .img-rounded گوشه‌های گرد را به تصویر اضافه می‌کند (Internet Explorer8 گوشه‌های گرد را پشتیبانی نمی‌کند):[۱]

مثال

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">


مشاهدهٔ نتیجه


دایره

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

مثال

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre">


مشاهدهٔ نتیجه


تصویر کوچک (Thumbnail)

کلاس .img-thumbnail تصویر را به شکل تصویر کوچک درمی‌آورد:

مثال

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">


مشاهدهٔ نتیجه


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

تصویر‌ها در هر اندازه‌ای وجود دارند. همینطور صفحه نمایش‌ها. تصویرهای واکنش گرا بطور خودکار متناسب با اندازه صفحه سازگار می‌شوند.

تصاویر واکنش گرا با اضافه کردن کلاس .img-responsive به تگ <img> ایجاد می‌شوند.

سپس تصویر به خوبی با عنصر والد مقیاس می‌شود.

کلاس .img-responsive استایل display: block;، max-width: 100%; و height: auto; را به تصویر اعمال می‌کند:

مثال

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


مشاهدهٔ نتیجه


نگارخانه

شما می‌توانید سیستم شبکه ای بوت استرپ را به همراه کلاس .thumbnail برای ایجاد گالری تصویر نیز استفاده کنید.

نکته: در ادامهٔ این آموزش در مورد سیستم شبکه ای بیشتر خواهید آموخت (چگونه می‌توان چیدمانی با تعداد متفاوت ستون‌ها ایجاد کرد).

مثال

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


مشاهدهٔ نتیجه


تعبیه های (Embeds) واکنش گرا

همچنین می‌توان ویدیوها یا نمایش اسلایدها را بطور مناسب در هر دستگاهی مقیاس کرد.

کلاس‌ها را می‌توان مستقیماً بر عنصرهای <iframe> ،<embed> ،<video> و <object> اعمال کرد.

مثال زیر یک ویدیو ی واکنش گرا را با اضافه‌کردن کلاس .embed-responsive-item به یک تگ <iframe> ایجاد کرد. (سپس ویدیو بخوبی با عنصر والد مقیاس می‌شود). <div> دربردارنده، نسبت ابعاد ویدیو را تعیین می‌کند:

مثال

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


مشاهدهٔ نتیجه


تمرین

مرجع کامل تصویر در بوت استرپ

برای دستیابی به مرجع همهٔ کلاس‌های تصویر، به مرجع کامل تصویر بوت استرپ ما مراجعه کنید.

منابع آموزشی