تصاویر

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳


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

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


گوشه های گرد

کلاس .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> ایجاد می‌شوند.

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

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

مثال

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

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


نگارخانه

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

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

مثال

 1 <div class="row">
 2   <div class="col-md-4">
 3     <div class="thumbnail">
 4       <a href="/w3images/lights.jpg">
 5         <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
 6         <div class="caption">
 7           <p>Lorem ipsum...</p>
 8         </div>
 9       </a>
10     </div>
11   </div>
12   <div class="col-md-4">
13     <div class="thumbnail">
14       <a href="/w3images/nature.jpg">
15         <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
16         <div class="caption">
17           <p>Lorem ipsum...</p>
18         </div>
19       </a>
20     </div>
21   </div>
22   <div class="col-md-4">
23     <div class="thumbnail">
24       <a href="/w3images/fjords.jpg">
25         <img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
26         <div class="caption">
27           <p>Lorem ipsum...</p>
28         </div>
29       </a>
30     </div>
31   </div>
32 </div>

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


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

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

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

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

مثال

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

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

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

نسبت ابعاد یک تصویر رابطه نسبی بین عرض و ارتفاع آن را توصیف می‌کند. دو نسبت ابعاد متداول ویدیو ۴:۳ (فرمت جهانی ویدیو در قرن بیستم) و ۱۶:۹ (جهانی برای تلویزیون HD و تلویزیون دیجیتال اروپایی).

شما می‌توانید بین دو نسبت ابعاد انتخاب کنید:

1 <!-- 16:9 aspect ratio -->
2 <div class="embed-responsive embed-responsive-16by9">
3   <iframe class="embed-responsive-item" src="..."></iframe>
4 </div>
5 
6 <!-- 4:3 aspect ratio -->
7 <div class="embed-responsive embed-responsive-4by3">
8   <iframe class="embed-responsive-item" src="..."></iframe>
9 </div>

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


تمرین

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

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


منابع آموزشی