آموزش figure در بوت استرپ: نمایش تصویر با کپشن

0 دیدگاه

این بخش به بررسی کامپوننت figure در بوت استرپ می‌پردازد. هرگاه نیاز داشتید محتوایی مثل تصویر را همراه با یک کپشن اختیاری نمایش دهید، بهتر است از تگ <figure> استفاده کنید.

معرفی تگ figure در بوت استرپ

تگ <figure> برای نشانه گذاری یک عکس یا تصویر در سند کاربرد دارد و تگ <figcaption> برای تعریف کپشن (عنوان یا توضیح) همان تصویر به کار می‌رود.
کلاس .figure در بوت استرپ برای ایجاد یک کانتینر واکنش گرا (responsive) برای تصاویر، ویدئوها یا دیگر انواع رسانه ها استفاده می‌شود.
این کلاس روشی فراهم می‌کند تا محتوای رسانه‌ای را به همراه کپشن و عناصر مرتبط دیگر به صورت مرتب و منسجم قرار دهید.
کلاس‌های .figure، .figure-img و .figure-caption استایل‌های پایه‌ای و استاندارد را برای تگ‌های <figure> و <figcaption> فراهم می‌کنند.
برای واکنش گرا کردن تصاویر داخل figure، کافی است کلاس .img-fluid را به تگ <img> اضافه کنید؛ زیرا تصاویر در figure اندازه مشخصی ندارند.

در ادامه یک مثال از کاربرد کلاس .figure را مشاهده می‌کنیم:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Figures</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <h4>Figures</h4><br>
        <figure class="figure">
          <img src="/bootstrap/images/scenery.jpg" class="figure-img img-fluid rounded" alt="Image in Figure">
          <figcaption class="figure-caption">A caption for the responsive image.</figcaption>
        </figure>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Figures</title>

</head>

<body>

<h4>Figures</h4><br>

<figcaption class="figure-caption">A caption for the responsive image.</figcaption>

</figure>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تراز نوشته در کپشن را می‌توان با استفاده از ابزارهای متنی بوت استرپ تغییر داد؛ مانند کلاس‌های .text-start برای تراز به سمت چپ، .text-center برای تراز وسط و .text-end برای تراز به سمت راست.

در ادامه یک مثال برای تغییر تراز توضیحات را مشاهده می‌کنیم:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Figures</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <h4>Figure caption alignment</h4><br>
        <figure class="figure">
          <img src="/bootstrap/images/scenery.jpg" class="figure-img img-fluid rounded" alt="Image in Figure">
          <figcaption class="figure-caption text-end">Responsive image</figcaption>
        </figure>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Figures</title>

</head>

<body>

<h4>Figure caption alignment</h4><br>

<figcaption class="figure-caption text-end">Responsive image</figcaption>

</figure>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

اگر علاقه‌مند به یادگیری کامل‌تر و کاربردی‌تر بوت استرپ هستید، می‌توانید از طریق دوره تخصصی بوت استرپ این مهارت را به صورت عملی و پروژه محور یاد بگیرید.

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ

انتشار: ۳۱ اردیبهشت ۱۴۰۴

آموزش figure در بوت استرپ: نمایش تصویر با کپشن

معرفی تگ figure در بوت استرپ

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط