عکس ها در بوت استرپ
انواع عکس ها در بوت استرپ
گوشه های گرد شده:
دایره:
بند انگشتی:
عکس با گوشه های گرد شده در بوت استرپ
کلاس img-rounded. ویژگی گوشه های گرد شده را به یک عکس اضافه می کند(IE8 از گوشه های گرد شده پشتیبانی نمی کند).
مثال (عکس های بوت استرپ)
خودتان امتحان کنید »
عکس های دایره ای در بوت استرپ
کلاس img-circle. عکس مورد نظر را به شکل یک دایره در می آورد(IE8 از عکس گرد شده پشتیبانی نمی کند).
مثال (عکس های بوت استرپ)
خودتان امتحان کنید »
عکس های بند انگشتی در بوت استرپ
کلاس img-thumbnail عکس موردنظر را بصورت یک عکس بند انگشتی در می آورد.
مثال (عکس های بوت استرپ)
خودتان امتحان کنید »
عکس های واکنش گرا در بوت استرپ
عکس ها در هر اندازه ای وجود دارند. عکس های واکنش گرا به طور اتوماتیک برای جا شدن در صفحه نمایش، تنظیم می شوند.
می توانید با اضافه کردن کلاس img-responsive. به تگ <img>، عکس های واکنش گرا را ایجاد کنید. سپس خواهید دید که عکس مورد نظر بخوبی در عنصر والد خود مقیاس دهی خواهد شد.
کلاس img-responsive. در واقع کد max-width: 100% و height: auto را به عکس اضافه می کند:
مثال (عکس های بوت استرپ)
خودتان امتحان کنید »
گالری عکس در بوت استرپ
شما همچنین می توانید از سیستم شبکه بندی بوتسترپ برای اتصال با کلاس thumbnail. برای ایجاد یک گالری عکس استفاده کنید:
مثال (عکس های بوت استرپ)
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<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">
<p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>
<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">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
<img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div>
خودتان امتحان کنید »
embed های واکنش گرا در بوت استرپ
کلاس embed به ویدئو ها و اسلایدشو ها اجازه ی مقیاس بندی درست، در هر وسیله ای را می دهد.
این کلاس ها می توانند به طور مستقیم بر روی عناصر <iframe> و <embed> و <video> و <object> اعمال شوند.
مثال زیر، یک ویدئوی واکنش گرا را با اضافه کردن یک کلاس embed-responsive-item. به یک تگ <iframe> ایجاد می کند(سپس ویدئو ی مورد نظر به خوبی نسبت به عنصر والد خود مقیاس بندی می شود).
محتوای عنصر <div> زیر نسبت ابعاد ویدئو را تعریف می کند:
مثال (عکس های بوت استرپ)
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
خودتان امتحان کنید »
 |
نسبت ابعاد چیست؟ نسبت ابعاد یک عکس، ارتباط مناسب بین عرض و ارتفاع را توصیف می کند. |
|---|
شما می توانید هر یک از دو نسبت ابعاد را به دلخواه انتخاب کنید:
<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>
مرجع کامل عکس های بوت استرپ
برای دیدن یک مرجع کامل از تمام کلاس های عکس می توانید مقاله ی مرجع عکس های بوت استرپ را مطالعه نمایید.
- نوشته شده توسط احسان عباسی
- بازدید: 21465
دیدگاه‌ها
سلام و خسته نباشید . تفاوت class="thumbnai l" رو با class="img-thum bnail بهم میگید من نم یفهمم فرقشون رو
سلام ممنون. از کلاس thumbnail برای ایجاد یک گالری عکس استفاده میشه(به خودتان امتحان کنید ها دقت کنید). اما از کلاس img-thumbnail برای تبدیل یک عکس به عکس بندانگشتی استفاده میشه.
سلام عکسی رو میخام درون صفحه مرورگرم قراربدم که کل عرض صفحه رو پوشونده باشه. ممنون میشم راهنماییم کنید.
سلام. لطفا ابتدا این مقاله رو مطالعه نمایید و سپس اگر سوالی باقی موند، مطرح کنید:
www.beyamooz.com/css/595-css-responsive/4932-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-css-%D8%B9%DA%A9%D8%B3-%D9%87%D8%A7
سپاس از لطفتون. توضیحات کامل. مشکل برطرف شد. ممنونم بابت پاسخگویی