اندازهی قلم متن
تخمین مدت زمان مطالعهی مطلب:
چهار دقیقه
بوت استرپ 4 به همراه کلاسهای کمکی مفیدی برای کار با تصاویر نیز میباشد؛ مانند:
- کلاس img-fluid که سبب ایجاد تصاویر واکنشگرا میشود. به این معنا که اگر این کلاس به تصویری انتساب داده شد، عرض آن با عرض container آن، تطابق پیدا میکند.
- کلاس rounded-dir برای گرد کردن گوشههای تصاویر کاربرد دارد. در اینجا ذکر dir اختیاری است و میتواند مقادیر زیر را داشته باشد:
top, right, bottom, left, circle
همچنین اگر تصویری دارای گوشههای گرد است (توسط کلاس css دیگری تنظیم شدهاست)، میتوان با اعمال کلاس rounded-0، آنرا لغو کرد.
- کلاس img-thumbnail نیز تصویری را با گوشههای گرد و همچنین با حاشیهای به ضخامت 1px، ایجاد میکند.
- کلاسهای float-left و float-right حالت پیشفرض نمایش inline تصاویر را لغو کرده و آنها را در جهتهای دلخواهی نمایش میدهند.
- اگر حالت نمایش تصویر inline است، میتوان مانند متون با استفاده از کلاس text-center، آنها را در میانهی container، نمایش داد.
- اگر تصویر به صورت block نمایش داده میشود (display:block)، کلاس mx-auto میتواند آنرا در میانهی container نمایش دهد.
مثالی از تصاویر واکنشگرا
در اینجا با اعمال کلاس img-fluid به یک تصویر، سبب خواهیم شد تا عرض آن با عرض container تطابق پیدا کند:
همانطور که مشاهده میکنید، این کلاس، یک تصویر بزرگ را متناسب با عرض دربرگیرندهی آن، نمایش میدهد.
مثال تصویر با گوشههای گرد
در همین مثال اگر بخواهیم گوشههای تصویر را گرد کنیم، فقط کافی است کلاس rounded را نیز به آن اضافه کنیم:
با این خروجی:
مثال تصویر با گوشههای گرد در جهتی خاص
و یا اگر جهتی را نیز به آن اعمال کنیم:
برای مثال فقط گوشههای بالای آن گرد میشوند:
و یا نتیجهی اعمال جهت دایرهای به تصویر:
بیضی شکلی به صورت زیر است:
مثال نمایش تصویر در گوشهای خاص از صفحه
اگر بخواهیم تصویر را برای مثال در سمت چپ صفحه نمایش دهیم:
خروجی آن به صورت زیر خواهد بود:
برای نمایش تصویر در وسط صفحه:
در اینجا با استفاده از کلاس text-center، تصویر را به میانهی صفحه منتقل کردهایم.
کار با عناصر figure جهت نمایش بهتر تصاویر و متون ذیل آنها
برای کار بهتر با عناصر figure در بوت استرپ، ابتدا کلاس figure را به آنها انتساب میدهیم. سپس میتوان کلاس figure-img را به تصاویر داخل آنها افزود. این مورد سبب میشود تا تصاویر با اندکی فاصله نسبت به متن داخل آن نمایش داده شوند. در آخر میتوان به figcaption، کلاس figure-caption را افزود تا رنگ و فاصلهی مناسبی را به آن اعمال کند:
با این خروجی:
کلاس figure-img سبب شدهاست تا تصویر، با متن، اندکی فاصله پیدا کند. همچنین کلاس figure-caption، متن ذیل تصویر را اندکی روشنتر نمایش میدهد.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_03.zip
- کلاس img-fluid که سبب ایجاد تصاویر واکنشگرا میشود. به این معنا که اگر این کلاس به تصویری انتساب داده شد، عرض آن با عرض container آن، تطابق پیدا میکند.
- کلاس rounded-dir برای گرد کردن گوشههای تصاویر کاربرد دارد. در اینجا ذکر dir اختیاری است و میتواند مقادیر زیر را داشته باشد:
top, right, bottom, left, circle
همچنین اگر تصویری دارای گوشههای گرد است (توسط کلاس css دیگری تنظیم شدهاست)، میتوان با اعمال کلاس rounded-0، آنرا لغو کرد.
- کلاس img-thumbnail نیز تصویری را با گوشههای گرد و همچنین با حاشیهای به ضخامت 1px، ایجاد میکند.
- کلاسهای float-left و float-right حالت پیشفرض نمایش inline تصاویر را لغو کرده و آنها را در جهتهای دلخواهی نمایش میدهند.
- اگر حالت نمایش تصویر inline است، میتوان مانند متون با استفاده از کلاس text-center، آنها را در میانهی container، نمایش داد.
- اگر تصویر به صورت block نمایش داده میشود (display:block)، کلاس mx-auto میتواند آنرا در میانهی container نمایش دهد.
مثالی از تصاویر واکنشگرا
<body> <div class="container"> <section class="content" id="testimonials"> <h2>Testimonials</h2> <figure> <img class="img-fluid" src="images/testimonial-johnb.jpg" alt="John B Photo"> <figcaption>The staff at Wisdom worked tirelessly to determine why our three-year old Golden Retriever, Roxie, started going into sudden kidney failure. They stabilized her and provided fluids until her kidneys were again functioning normally.</figcaption> </figure> </section> </div> </body>
همانطور که مشاهده میکنید، این کلاس، یک تصویر بزرگ را متناسب با عرض دربرگیرندهی آن، نمایش میدهد.
مثال تصویر با گوشههای گرد
در همین مثال اگر بخواهیم گوشههای تصویر را گرد کنیم، فقط کافی است کلاس rounded را نیز به آن اضافه کنیم:
<img class="img-fluid rounded" src="images/testimonial-johnb.jpg" alt="John B Photo">
مثال تصویر با گوشههای گرد در جهتی خاص
و یا اگر جهتی را نیز به آن اعمال کنیم:
<img class="img-fluid rounded-top" src="images/testimonial-johnb.jpg" alt="John B Photo">
و یا نتیجهی اعمال جهت دایرهای به تصویر:
<img class="img-fluid rounded-circle" src="images/testimonial-johnb.jpg" alt="John B Photo">
مثال نمایش تصویر در گوشهای خاص از صفحه
اگر بخواهیم تصویر را برای مثال در سمت چپ صفحه نمایش دهیم:
<img class="img-fluid rounded-circle float-left" width="200px" src="images/testimonial-lorraines.jpg" alt="Lorraine Photo">
برای نمایش تصویر در وسط صفحه:
<body> <div class="container"> <section class="content" id="testimonials"> <h2>Testimonials</h2> <figure class="text-center"> <img class="img-fluid rounded-circle" src="images/testimonial-mcphersons.jpg" alt="McPhersons Photo" width="200px"> <figcaption>When Samantha, our Siamese cat, began sleeping all the time and urinating excessively, we brought her to see the specialists at Wisdom. Now, two years later, Samantha is still free from any complications of diabetes, and her blood sugar regularly tests normal.</figcaption> </figure> </section> </div> </body>
کار با عناصر figure جهت نمایش بهتر تصاویر و متون ذیل آنها
برای کار بهتر با عناصر figure در بوت استرپ، ابتدا کلاس figure را به آنها انتساب میدهیم. سپس میتوان کلاس figure-img را به تصاویر داخل آنها افزود. این مورد سبب میشود تا تصاویر با اندکی فاصله نسبت به متن داخل آن نمایش داده شوند. در آخر میتوان به figcaption، کلاس figure-caption را افزود تا رنگ و فاصلهی مناسبی را به آن اعمال کند:
<body> <div class="container"> <section class="content" id="testimonials"> <h2>Testimonials</h2> <figure class="figure"> <img class="img-fluid figure-img rounded" src="images/testimonial-lorraines.jpg" alt="Lorraine Photo"> <figcaption class="figure-caption">Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments. When our 13-year old Comet goldfish, McAllister, turned from silvery white to an angry red, we called around, urgently trying to find a veterinarian who could help. Wisdom not only got us in the same day, but also was able to diagnose McAllister as having a severe case of septicemia.</figcaption> </figure> </section> </div> </body>
کلاس figure-img سبب شدهاست تا تصویر، با متن، اندکی فاصله پیدا کند. همچنین کلاس figure-caption، متن ذیل تصویر را اندکی روشنتر نمایش میدهد.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_03.zip