امتیاز دهید:
تصاویر در بوت استرپ

تصاویر در وب سایت بسیار حائز اهمیت هستند به گونه ای که تلاش ما برای ایجاد تصاویری که در device های مختلف دارای اندازه های متناسب با آن device باشد، کاربران بیشتری را به سمت وب سایت ما جذب خواهد کرد.

بوت استرپ یکسری کلاس آماده برای دادن حالات مختلف به تصاویر ایجاد نموده است که در زیر به آنها می پردازیم:

img-rounded : این کلاس تصویری با گوشه های گرد ایجاد میکند

img-circle : این کلاس تصویری به شکل دایره ایجاد میکند

img-thumbnail: تصویری که داری border است و معمولا برای thumbnail تصاویر استفاده می شود ، ایجاد میکند

 

در زیر نمونه هایی از تصاویر بالا را مشاهده میکنید:

نمونه ای از نحوه استفاده از این کلاس را در زیر مشاهده میکنید:

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

img-responsive: این کلاس تصویر را برای نمایش در device های مختلف ریسپانسیو و متناسب میکند

این کلاس به تصاویر 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>

کد بالا تصویری به شکل زیر نمایش میدهد:

 

embed-responsive. : این کلاس تگ های video ، object، embed و iframe  را در حالت ریسپانسیو و همگام با سایزدیوایس های مختلف به تصویر می کشد.

کد  زیر یک ویدئو را با برخورداری از ویژگی ریسپانسیو به نمایش در می آورد.

<div class="embed-responsive embed-responsive-16by9">
   <<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>>
  </div>

  </div>

aspect ratio  چیست؟

این واَژه به معنای نسبت تصویر می باشد و بیانگر میزان ارتباط طول و عرض تصویر و یا ویدئو به گونه ای است که تصویر با حالت طبیعی به نمایش در آید و دچار کشیدگی نشود.

دو مورد از نسبتای استاندارد جهانی 4 به 3 و دیگری 16 به 9 است.

بوت استرپ امکان تعریف نسبت برای تصاویر را توسط کلاس embed-responsive-16by9 فراهم میکند.

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

<h2>Aspect ratio 4:3</h2>
  <div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
  </div>
  
  <h2>Aspect ratio 16:9</h2>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
  </div>

نظرات
نظرات

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )