آموزش Offcanvas در بوت استرپ

0 دیدگاه

در این بخش به معرفی کامپوننت Offcanvas در بوت استرپ می پردازیم. کامپوننت Offcanvas این امکان را فراهم می‌کند که یک پنل کشویی یا نوار جانبی طراحی کنید که از لبه های صفحه به صورت کشویی ظاهر یا پنهان می‌شود.

از این قابلیت معمولا برای ساخت منوی ناوبری، پنل های محتوایی یا نمایش اطلاعات تکمیلی استفاده می‌شود؛ بدون آن که فضای کامل صفحه را اشغال کند.

مروری بر قابلیت های Offcanvas در بوت استرپ

در ادامه، ویژگی های اصلی کامپوننت Offcanvas را مشاهده می‌کنید. یادگیری این قابلیت یکی از بخش های مهم در آموزش طراحی سایت با بوت استرپ محسوب می‌شود، زیرا به شما امکان می‌دهد تجربه کاربری بهتری در صفحات واکنش گرا ارائه دهید:

فعال سازی: برای باز یا بسته کردن پنل Offcanvas می‌توانید از دکمه تغییر وضعیت (Toggle) یا یک لینک استفاده کنید. این کار با کمک جاوا اسکریپت یا ویژگی های داده ای (data attributes) انجام می‌شود.
موقعیت: شما می‌توانید این پنل را در سمت چپ، راست، بالا یا پایین صفحه قرار دهید. این انتخاب به نیازهای طراحی بستگی دارد.
محتوا: می‌توانید انواع محتوای HTML دلخواه را داخل این پنل قرار دهید. برای نمونه: منوی ناوبری، متن، تصویر، فرم یا سایر کامپوننت ها.
دسترس پذیری: بوت استرپ این کامپوننت را با نرم افزارهای صفحه خوان (Screen Readers) و ناوبری با صفحه کلید سازگار طراحی کرده است. این موضوع باعث می‌شود کامپوننت با استانداردهای دسترس پذیری هماهنگ باشد.
رفتار واکنش گرا: کامپوننت Offcanvas به طور پیش فرض واکنش گرا است. این پنل به خوبی با اندازه های مختلف صفحه سازگار می‌شود. در صفحه های کوچک تر می‌توانید آن را به تمام صفحه تبدیل کنید. همچنین امکان فعال کردن اسکرول داخلی وجود دارد.
رویدادها: بوت استرپ مجموعه ای از رویدادهای جاوا اسکریپت برای این کامپوننت ارائه می‌دهد. با این رویدادها می‌توانید هنگام باز یا بسته شدن پنل، کدهای دلخواه اجرا کنید. به این ترتیب می‌توانید رفتار پنل را سفارشی سازی نمایید.

استفاده از این کامپوننت به شما کمک می‌کند پنل های کشویی را با سهولت بیشتری طراحی کنید. همچنین با بهینه سازی تجربه کاربری در دستگاه های موبایل، به شما این امکان را می‌دهد که محتوای اضافی یا گزینه های ناوبری را به شکلی منظم و کارآمد نمایش دهید، بدون آن که صفحه اصلی بیش از حد شلوغ به نظر برسد.

نکته: همانند مدال ها (Modals)، در هر زمان فقط یک Offcanvas می‌تواند روی صفحه فعال باشد.

کامپوننت های Offcanvas

کامپوننت های زیر با یکدیگر همکاری می‌کنند تا امکان ایجاد Offcanvas در بوت استرپ را فراهم کنند. به این ترتیب می‌توانید پنل های کشویی طراحی کنید که با کلیک روی یک دکمه تغییر وضعیت (Toggle) یا یک لینک ظاهر می‌شوند و محتوای اضافی یا گزینه های ناوبری را نمایش می‌دهند:

دکمه تغییر وضعیت (Toggle button) یا عنصر محرک (Trigger element)
محفظه پنل Offcanvas
پنل Offcanvas
موقعیت پنل Offcanvas
دکمه بستن Offcanvas
جاوا اسکریپت و ویژگی های داده ای (data attributes)

اکنون بیایید یک مثال ساده را بررسی کنیم:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</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 mt-3">
		<h4 class="text-success text-start">Offcanvas component</h4>
		<div class="container">
		<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas">
            Open offcanvas
        </button>
    	</div>
      <div class="offcanvas offcanvas-end" id="offcanvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">
                Offcanvas title
            </h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <p>This is an offcanvas component of Bootstrap, which is similar to a modal in functionality.</p>
        </div>
	    </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Offcanvas</title>

</head>

<body>

<h4 class="text-success text-start">Offcanvas component</h4>

Open offcanvas

</button>

</div>

Offcanvas title

</h5>

</div>

<p>This is an offcanvas component of Bootstrap, which is similar to a modal in functionality.</p>

</div>

</body>

</html>

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

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

دمو زنده

شما می‌توانید رفتار کامپوننت Offcanvas را به کمک کلاس های CSS کنترل کنید. این کامپوننت بر اساس وضعیت کلاس ها، به صورت مخفی یا نمایان نمایش داده می‌شود:

.offcanvas (حالت پیش فرض) -> محتوای پنل را مخفی می‌کند.
.offcanvas.show -> محتوای پنل را نمایش می‌دهد.

در واقع، با اضافه یا حذف کردن کلاس .show، می‌توانید وضعیت باز یا بسته بودن پنل Offcanvas را تعیین کنید.

اکنون بیایید یک مثال ساده را مشاهده کنیم:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</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 mt-3">
		<h4 class="text-success text-start">Offcanvas component live demo</h4>
		  <button class="btn btn-primary" type="button" id="trigger-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
			Button click
		  </button>

		  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
			<div class="offcanvas-header">
			  <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5>
			  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
			</div>
			<div class="offcanvas-body">
			  <div>
				The Offcanvas component provides a convenient way to create responsive and mobile-friendly layouts. When triggered, the offcanvas panel slides into view from either the left or right side of the screen, depending on the placement chosen. It overlays the main content, pushing it aside, and provides a smooth transition effect.
			  </div>
			</div>
		  </div>
    </div>
	  <script>
		  //New instance of the collapse element is created
	  	  var offcanvasElement = document.getElementById("offcanvasExample");
	  	  var offcanvas = new bootstrap.Offcanvas(offcanvasElement);

		    let button = document.getElementById("trigger-btn");
	  	  button.addEventListener("click", () => {
		    return offcanvas.show();
		    ;
	 	  });
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Offcanvas</title>

</head>

<body>

<h4 class="text-success text-start">Offcanvas component live demo</h4>

Button click

</button>

<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5>

</div>

<div>

The Offcanvas component provides a convenient way to create responsive and mobile-friendly layouts. When triggered, the offcanvas panel slides into view from either the left or right side of the screen, depending on the placement chosen. It overlays the main content, pushing it aside, and provides a smooth transition effect.

</div>

//New instance of the collapse element is created

var offcanvasElement = document.getElementById("offcanvasExample");

var offcanvas = new bootstrap.Offcanvas(offcanvasElement);

let button = document.getElementById("trigger-btn");

button.addEventListener("click", () => {

return offcanvas.show();

;

});

</script>

</body>

</html>

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

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

اسکرول بدنه (Body Scrolling)

زمانی که یک کامپوننت Offcanvas به همراه پس زمینه تار (Backdrop) فعال است، امکان اسکرول کردن عنصر <body> وجود ندارد.
بوت استرپ به صورت پیش فرض اسکرول صفحه اصلی را در این حالت غیرفعال می‌کند.

اگر بخواهید هنگام نمایش Offcanvas، همچنان امکان اسکرول کردن بدنه صفحه را داشته باشید، می‌توانید از ویژگی data-bs-scroll استفاده کنید.

اکنون بیایید یک مثال از این قابلیت را ببینیم:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</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="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="sidebar" aria-labelledby="offcanvasStartLabel">
        <div class="offcanvas-header">
            <h1 id="offcanvasStartLabel">Offcanvas</h1>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <hr>
        <div class="offcanvas-body">
            <h5>Enable body Scrolling</h5>
            <h5><p>Bootstrap provides features to scroll the page when offcanvas and the backdrop are visible.</p></h5>
        </div>
    </div>
    <div class="container mt-3">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="offcanvasStart">Offcanvas Scrolling Enable</button>
        <center>
          <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="400">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
             </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
			        A website for all the tech-savvy people.
            </h4>
            <h3>
			        Welcome to tutorials point
			        Welcome to tutorials point
            </h3>
			    <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="400">
        </center>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Offcanvas</title>

</head>

<body>

<h1 id="offcanvasStartLabel">Offcanvas</h1>

</div>

<hr>

<h5>Enable body Scrolling</h5>

<h5><p>Bootstrap provides features to scroll the page when offcanvas and the backdrop are visible.</p></h5>

</div>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="offcanvasStart">Offcanvas Scrolling Enable</button>

<h3>Example for body scrolling in offcanvas component</h3>

<h4>

A website for all the tech-savvy people.

</h4>

<h3>

Welcome to tutorials point

</h3>

<h4>

A website for all the tech-savvy people.

</h4>

<h3>

Welcome to tutorials point

</h3>

</center>

</div>

</body>

</html>

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

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

اسکرول بدنه همراه با پس زمینه تار (Backdrop)

شما می‌توانید اسکرول بدنه صفحه (<body>) را فعال کنید، در حالی که پس زمینه تار (Backdrop) همچنان روی صفحه قابل مشاهده باشد.

اکنون بیایید یک مثال از این حالت را بررسی کنیم:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</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="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Enable backdrop with scrolling</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
		<hr>
        <div class="offcanvas-body">
            <h5><p>Bootstrap provides features to scroll the page  and the backdrop are visible.</p></h5>
			<img src="/bootstrap/images/profile.jpg" alt="GFG" width="200" height="200">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
             </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
			  A website for all the tech-savvy people.
            </h4>
            <h3>
			  Welcome to tutorials point
			  Welcome to tutorials point
            </h3>
			<img src="/bootstrap/images/profile.jpg" alt="GFG" width="200" height="200">
        </div>
    </div>
    <div class="container mt-3">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasStart">Enabled scrolling with backdrop</button>
        <center>
          <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
             </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
			        A website for all the tech-savvy people.
            </h4>
            <h3>
			        Welcome to tutorials point
			        Welcome to tutorials point
            </h3>
			    <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
            </center>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Offcanvas</title>

</head>

<body>

<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Enable backdrop with scrolling</h5>

</div>

<hr>

<h5><p>Bootstrap provides features to scroll the page and the backdrop are visible.</p></h5>

<h3>Example for body scrolling in offcanvas component</h3>

<h4>

A website for all the tech-savvy people.

</h4>

<h3>

Welcome to tutorials point

</h3>

<h4>

A website for all the tech-savvy people.

</h4>

<h3>

Welcome to tutorials point

</h3>

</div>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasStart">Enabled scrolling with backdrop</button>

<h3>Example for body scrolling in offcanvas component</h3>

<h4>

A website for all the tech-savvy people.

</h4>

<h3>

Welcome to tutorials point

</h3>

<h4>

A website for all the tech-savvy people.

</h4>

<h3>

Welcome to tutorials point

</h3>

</center>

</div>

</body>

</html>

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

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

پس زمینه ایستا (Static Backdrop)

زمانی که پس زمینه (Backdrop) در کامپوننت Offcanvas روی حالت Static تنظیم می‌شود، با کلیک روی ناحیه بیرون از پنل، پنل بسته نخواهد شد.

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</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 mt-3">
		<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
			Static Offcanvas
		  </button>
		  <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
			<div class="offcanvas-header">
			  <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
			  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
			</div>
			<div class="offcanvas-body">
			  <div>
				The offcanvas component will not get closed when you click outside it.
			  </div>
			</div>
		  </div>
          <center>
          <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
            </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
      				A website for all the tech-savvy people.
            </h4>
            <h3>
			        Welcome to tutorials point
			        Welcome to tutorials point
            </h3>
            <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
          </center>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Offcanvas</title>

</head>

<body>

Static Offcanvas

</button>

<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>

</div>

<div>

The offcanvas component will not get closed when you click outside it.

</div>

<h3>Example for body scrolling in offcanvas component</h3>

<h4>

A website for all the tech-savvy people.

</h4>

<h3>

Welcome to tutorials point

</h3>

<h4>

A website for all the tech-savvy people.

</h4>

<h3>

Welcome to tutorials point

</h3>

</center>

</div>

</body>

</html>

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

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

Offcanvas دارک در بوت استرپ

از نسخه ۵.۳.۰ به بعد، بوت استرپ استفاده از نسخه های دارک برای کامپوننت ها را منسوخ کرده است. دلیل این تغییر، اضافه شدن قابلیت حالت های رنگی می‌باشد.

به جای اضافه کردن کلاس های دارک به صورت دستی، توصیه می‌شود از ویژگی data-bs-theme="dark" استفاده کنید. می‌توانید این ویژگی را به عنصر ریشه، عنصر والد یا خود کامپوننت Offcanvas اعمال کنید.

کلاس های واکنش گرا در Offcanvas

کلاس های واکنش گرا (Responsive) در Offcanvas به شما اجازه می‌دهند محتوای پنل را از یک نقطه شکست مشخص به پایین، پنهان کنید. در مقابل، در صفحه هایی با اندازه بزرگتر از آن Breakpoint، این محتوا به صورت عادی نمایش می یابد.

برای مثال، اگر از کلاس .offcanvas-lg استفاده کنید:

در اندازه صفحه کوچکتر از Breakpoint lg -> محتوا به صورت Offcanvas (مخفی و قابل باز شدن) نمایش داده می‌شود.
در اندازه صفحه بزرگتر از Breakpoint lg -> محتوا به صورت عادی و بدون Offcanvas نمایش داده می‌شود.

نکته: برای مشاهده رفتار واکنش گرا، باید اندازه پنجره مرورگر خود را تغییر دهید.

اکنون بیایید یک مثال از این قابلیت ها را بررسی کنیم:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</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 mt-3">
		<h4 class="text-success text-start">Responsive offcanvas</h4>
		<div class="container">
			<button class="btn btn-success d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Show offcanvas</button>
			<div class="alert alert-warning d-none d-lg-block">Resize your screen / viewport to show the responsive offcanvas.</div>
			<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
			  <div class="offcanvas-header">
				<h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
				<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
			  </div>
			  <div class="offcanvas-body">
				<p class="mb-0">This content can be verified when the screen size is below the breakpoint lg (.offcanvas-lg).</p>
			  </div>
			</div>
		</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Offcanvas</title>

</head>

<body>

<h4 class="text-success text-start">Responsive offcanvas</h4>

<button class="btn btn-success d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Show offcanvas</button>

<div class="alert alert-warning d-none d-lg-block">Resize your screen / viewport to show the responsive offcanvas.</div>

<h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>

</div>

<p class="mb-0">This content can be verified when the screen size is below the breakpoint lg (.offcanvas-lg).</p>

</div>

</body>

</html>

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

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

کلاس های مربوط به Offcanvas در تمام Breakpoint ها در دسترس هستند. با استفاده از این کلاس ها می‌توانید مشخص کنید Offcanvas در چه اندازه صفحه ای فعال شود:

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

موقعیت Offcanvas در بوت استرپ

برای تعیین موقعیت نمایش Offcanvas، باید یکی از کلاس های موقعیت دهی (Modifier Classes) را به کامپوننت اضافه کنید.
توجه داشته باشید که برای Offcanvas، موقعیت پیش فرض وجود ندارد و شما باید آن را مشخص کنید.

در ادامه می‌توانید گزینه های موجود برای تعیین موقعیت Offcanvas را مشاهده کنید:

.offcanvas-start → Offcanvas را در سمت چپ صفحه (Viewport) قرار می‌دهد.
.offcanvas-end → Offcanvas را در سمت راست صفحه قرار می‌دهد.
.offcanvas-top → Offcanvas را در بالای صفحه قرار می‌دهد.
.offcanvas-bottom → Offcanvas را در پایین صفحه قرار می‌دهد.

اکنون بیایید یک مثال از موقعیت Top (بالا) را بررسی کنیم:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</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 mt-3">
		<h4 class="text-success text-start">Offcanvas placement - Top</h4>
    <p>Resize the viewport size to see the offcanvas</p>
		<div class="container">
			<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Top offcanvas</button>
			<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  			<div class="offcanvas-header text-bg-primary">
    		<h5 class="offcanvas-title" id="offcanvasTopLabel">Top offcanvas</h5>
    		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  			</div>
  			<div class="offcanvas-body bg-primary-subtle">
				<p>This is an example for an offcanvas whose placement is at the top of the viewport.</p>
  			</div>
			</div>
		</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Offcanvas</title>

</head>

<body>

<h4 class="text-success text-start">Offcanvas placement - Top</h4>

<p>Resize the viewport size to see the offcanvas</p>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Top offcanvas</button>

<h5 class="offcanvas-title" id="offcanvasTopLabel">Top offcanvas</h5>

</div>

<p>This is an example for an offcanvas whose placement is at the top of the viewport.</p>

</div>

</body>

</html>

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

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

اکنون بیایید یک مثال از موقعیت Right (سمت راست) را بررسی کنیم:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</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 mt-3">
		<h4 class="text-success text-start">Offcanvas placement - Right</h4>
		<div class="container">
			<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Right offcanvas</button>
			<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  			<div class="offcanvas-header text-bg-success">
    		<h5 class="offcanvas-title" id="offcanvasRightLabel">Right offcanvas</h5>
    		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  			</div>
  			<div class="offcanvas-body bg-success-subtle">
				<p>This is an example for an offcanvas whose placement is at the right of the viewport.</p>
  			</div>
			</div>
		</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Offcanvas</title>

</head>

<body>

<h4 class="text-success text-start">Offcanvas placement - Right</h4>

<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Right offcanvas</button>

<h5 class="offcanvas-title" id="offcanvasRightLabel">Right offcanvas</h5>

</div>

<p>This is an example for an offcanvas whose placement is at the right of the viewport.</p>

</div>

</body>

</html>

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

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

اکنون بیایید یک مثال از موقعیت Bottom (پایین صفحه) را بررسی کنیم:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</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 mt-3">
		<h5 class="text-dark text-start">Offcanvas placement - Bottom</h5>
    <p>Resize the viewport size to see the offcanvas</p>
		<div class="container">
			<button class="btn btn-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Bottom offcanvas</button>
			<div class="offcanvas offcanvas-bottom" data-bs-scroll="true" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  			<div class="offcanvas-header text-bg-danger">
    		<h5 class="offcanvas-title" id="offcanvasBottomLabel">Bottom offcanvas</h5>
    		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  			</div>
  			<div class="offcanvas-body bg-danger-subtle">
				<p>This is an example for an offcanvas whose placement is at the bottom of the viewport.</p>
  			</div>
			</div>
		</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Offcanvas</title>

</head>

<body>

<h5 class="text-dark text-start">Offcanvas placement - Bottom</h5>

<p>Resize the viewport size to see the offcanvas</p>

<button class="btn btn-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Bottom offcanvas</button>

<h5 class="offcanvas-title" id="offcanvasBottomLabel">Bottom offcanvas</h5>

</div>

<p>This is an example for an offcanvas whose placement is at the bottom of the viewport.</p>

</div>

</body>

</html>

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

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

دسترس پذیری Offcanvas در بوت استرپ

برای رعایت اصول دسترس پذیری، حتما باید در عنصر .offcanvas ویژگی aria-labelledby="..." را اضافه کنید. این ویژگی باید به عنوان Offcanvas اشاره کند. دلیل این کار این است که پنل Offcanvas از نظر مفهومی مشابه یک دیالوگ مدال (Modal Dialog) عمل می‌کند. همچنین نیازی نیست ویژگی role="dialog" را به صورت دستی اضافه کنید؛ چون جاوا اسکریپت به طور خودکار این ویژگی را به کامپوننت اضافه می‌کند.

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

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

نظرات

آموزش پروژه محور طراحی سایت با پایتون و جنگو مختص بازار کار

انتشار: ۱۷ خرداد ۱۴۰۴

آموزش Offcanvas در بوت استرپ

مروری بر قابلیت های Offcanvas در بوت استرپ

کامپوننت های Offcanvas

دمو زنده

اسکرول بدنه (Body Scrolling)

اسکرول بدنه همراه با پس زمینه تار (Backdrop)

پس زمینه ایستا (Static Backdrop)

Offcanvas دارک در بوت استرپ

کلاس های واکنش گرا در Offcanvas

موقعیت Offcanvas در بوت استرپ

دسترس پذیری Offcanvas در بوت استرپ

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط