کار با تصاویر image بوت استرپ bootstrap

نحوه استفاده کلاس های css از تصویر عکس image در بوت استرپ bootstrap

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

مقالات

گوشه های گرد

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

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

کلاس .img-rounded گوشه های گرد Rounded Corners را به تصویر اضافه می کند- IE8 از گوشه های گرد پشتیبانی نمی کند

دایره

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

مثال

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

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

بند انگشتی

کلاس .img-thumbnail بوت استرپ تصویر را به تصویر کوچک Thumbnail تبدیل می کند:

مثال

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

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

تصاویر ریستاپنسیو

تصاویر در همه اندازه ها آمده است. تصاویر ریسپانسیو Responsive در بوت استرپ به صورت خودکار بر اساس اندازه صفحه نمایش تنظیم می شوند.

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

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

مثال

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

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

گالری عکس

شما همچنین می توانید با استفاده از کلاس .thumbnail سیستم شبکه Grid Bootstrap را برای ایجاد یک گالری عکس Image Gallery در بوت استرپ ایجاد کنید.

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

<p>Lorem ipsum...</p>

</div>

</a>

</div>

<p>Lorem ipsum...</p>

</div>

</a>

</div>

<p>Lorem ipsum...</p>

</div>

</a>

</div>

توجه: بعدا در این آموزش (درباره چگونگی ایجاد یک طرح با مقدار مختلف ستون) بیشتر درباره سیستم Grid آشنا خواهید شد.

Responsive Embeds

همچنین اجازه دهید فیلم ها و یا نمایش اسلاید به درستی بر روی هر دستگاه مقیاس مناسب نمایش داده شود

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

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

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

<p>Lorem ipsum...</p>

</div>

</a>

</div>

<p>Lorem ipsum...</p>

</div>

</a>

</div>

<p>Lorem ipsum...</p>

</div>

</a>

</div>

نسبت ابعاد چیست؟

نسبت ابعاد تصویر aspect ratio یک رابطه متناسب بین عرض آن و ارتفاع آن را توصیف می کند. دو نسبت تصویر نسبتا ویدئویی 4: 3 (فرمت ویدیویی جهانی قرن بیستم) و 16: 9 )جهانی برای تلویزیون 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>

</div>

</div>

5/5 - (1 امتیاز)

کار با تصاویر image بوت استرپ bootstrap

گوشه های گرد

دایره

بند انگشتی

تصاویر ریستاپنسیو

گالری عکس

Responsive Embeds

نسبت ابعاد چیست؟

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

گوشه های گرد

دایره

بند انگشتی

تصاویر ریستاپنسیو

گالری عکس

Responsive Embeds

نسبت ابعاد چیست؟

مطالب زیر را حتما مطالعه کنید

افزونه و کلاس Carousel در بوت استرپ bootstrap

کلاس collapse در بوت استرپ bootstrap

کلاس jumbotron در بوت استرپ

فیلترهای بوت استرپ

افزونه Affix بوت استرپ

افزونه Scrollspy بوت استرپ

دیدگاهتان را بنویسید لغو پاسخ