<a class="btn btn-primary me-2 mb-2" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
	لینک با href
</a>
<button class="btn btn-primary me-2 mb-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
	دکمه با data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
	<div class="offcanvas-header">
		<h5 class="offcanvas-title" id="offcanvasExampleLabel">آف بوم</h5>
		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
		<div>
			مقداری متن به عنوان مکان‌نما. در زندگی واقعی می توانید عناصری را که انتخاب کرده اید داشته باشید. مانند، متن، تصاویر، لیست ها و غیره
		</div>
		<div class="dropdown mt-3">
			<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
			دکمه کشویی
			</button>
			<ul class="dropdown-menu">
				<li><a class="dropdown-item" href="javascript:void(0);">اقدام</a></li>
				<li><a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a></li>
				<li><a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a></li>
			</ul>
		</div>
	</div>
</div>

<button class="btn btn-primary me-2 mb-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">پیمایش بدنه را فعال کنید</button>
			
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
	<div class="offcanvas-header">
		<h5 class="offcanvas-title" id="offcanvasScrollingLabel">خارج از بوم با پیمایش بدنه</h5>
		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
		<p>سعی کنید بقیه صفحه را اسکرول کنید تا این گزینه را در عمل ببینید.</p>
	</div>
</div>

<button class="btn btn-primary me-2 mb-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">پیمایش و پس‌زمینه را فعال کنید</button>
												
<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">پس زمینه با پیمایش</h5>
		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
		<p>Try scrolling the rest of the page to see this option in اقدام.</p>
	</div>
</div>

<button class="btn btn-primary me-2 mb-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop"">
	تغییر حالت استاتیک 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">
			اگر بیرون از من کلیک کنید، نمی بندم.
		</div">
	</div">
</div">

<button class="btn btn-primary me-2 mb-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">جابجایی صفحه نمایش بالا</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
	<div class="offcanvas-header">
		<h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
	ذهن آماده انتقاد از کلیشه است، زیرا اینگونه است که ما تری ریچاردسون را به زندگی بالا در ماهی مرکب متهم می کنیم. 3 سرویس ماه گرگ، اما نه به میل برانچ هوشمند اسکیت برد. کینوا کامیون مواد غذایی در مورد تنقلات مانند آن چیزی نمی داند.
  ذهن آماده انتقاد از کلیشه است، زیرا اینگونه است که ما تری ریچاردسون را به زندگی بالا در ماهی مرکب متهم می کنیم. 3 سرویس ماه گرگ، اما نه به میل برانچ هوشمند اسکیت برد. کینوا کامیون مواد غذایی در مورد تنقلات مانند آن چیزی نمی داند.
	</div>
</div>

<button class="btn btn-primary me-2 mb-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">جابجایی سمت راست از روی کانواس</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
	<div class="offcanvas-header">
		<h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
	ذهن آماده انتقاد از کلیشه است، زیرا اینگونه است که ما تری ریچاردسون را به زندگی بالا در ماهی مرکب متهم می کنیم. 3 سرویس ماه گرگ، اما نه به میل برانچ هوشمند اسکیت برد. کینوا کامیون مواد غذایی در مورد تنقلات مانند آن چیزی نمی داند.
  ذهن آماده انتقاد از کلیشه است، زیرا اینگونه است که ما تری ریچاردسون را به زندگی بالا در ماهی مرکب متهم می کنیم. 3 سرویس ماه گرگ، اما نه به میل برانچ هوشمند اسکیت برد. کینوا کامیون مواد غذایی در مورد تنقلات مانند آن چیزی نمی داند.
	</div>
</div>

<button class="btn btn-primary me-2 mb-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">خاموش کردن صفحه پایین</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
	<div class="offcanvas-header">
		<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body small">
	ذهن آماده انتقاد از کلیشه است، زیرا اینگونه است که ما تری ریچاردسون را به زندگی بالا در ماهی مرکب متهم می کنیم. 3 سرویس ماه گرگ، اما نه به میل برانچ هوشمند اسکیت برد. کینوا کامیون مواد غذایی در مورد تنقلات مانند آن چیزی نمی داند.
  ذهن آماده انتقاد از کلیشه است، زیرا اینگونه است که ما تری ریچاردسون را به زندگی بالا در ماهی مرکب متهم می کنیم. 3 سرویس ماه گرگ، اما نه به میل برانچ هوشمند اسکیت برد. کینوا کامیون مواد غذایی در مورد تنقلات مانند آن چیزی نمی داند.
	</div>
</div>