logo small logo dark logo small logo
user-image دومینیک کلر
Helper Icon Image
دسترسی نامحدود

به برنامه ریزی برای دسترسی به گزارش های نامحدود ارتقا دهید

ارتقا دهید
  1. هایپر
  2. رابط کاربری پایه
  3. خارج از بوم

خارج از بوم

خارج از بوم

می توانید از یک لینک با استفاده ازhref attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="offcanvas" is required.

لینک با href
خارج از بوم
برخی از متن ها به عنوان جایگیر.
فهرست کنید
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
  • در vero eos و accusamus و iusto odio dignissimos
  • Et harum quidem rerum facilis
  • Temporibus autem quibusdam et aut officiis
                                                    \u003ca class\u003d\

پس زمینه Offcanvas

اسکرول کردن<body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle <body> scrolling and data-bs-backdrop to toggle the backdrop.

رنگی با پیمایش
برخی از متن ها به عنوان جایگیر.
فهرست کنید
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
  • در vero eos و accusamus و iusto odio dignissimos
  • Et harum quidem rerum facilis
  • Temporibus autem quibusdam et aut officiis
خارج از بوم با پس زمینه
برخی از متن ها به عنوان جایگیر.
فهرست کنید
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
  • در vero eos و accusamus و iusto odio dignissimos
  • Et harum quidem rerum facilis
  • Temporibus autem quibusdam et aut officiis
پس زمینه با پیمایش
برخی از متن ها به عنوان جایگیر.
فهرست کنید
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
  • در vero eos و accusamus و iusto odio dignissimos
  • Et harum quidem rerum facilis
  • Temporibus autem quibusdam et aut officiis
                                                    \u003cbutton class\u003d\

قرار دادن Offcanvas

نمونه های سمت راست و پایین را در زیر امتحان کنید.

  • .offcanvas-start places offcanvas on the left of the viewport (shown above)
  • .offcanvas-end places offcanvas on the right of the viewport
  • .offcanvas-top places offcanvas on the top of the viewport
  • .offcanvas-bottom places offcanvas on the bottom of the viewport
تاپ Offcanvas
برخی از متن ها به عنوان جایگیر.
فهرست کنید
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
Offcanvas درست است
برخی از متن ها به عنوان جایگیر.
فهرست کنید
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
پایین بوم
برخی از متن ها به عنوان جایگیر.
فهرست کنید
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
Offcanvas سمت چپ
برخی از متن ها به عنوان جایگیر.
فهرست کنید
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
                                                    \u003cdiv\u003e\n

تاریک Offcanvas

ظاهر offcanvases را با ابزارهای کاربردی تغییر دهید تا بهتر آنها را با زمینه های مختلف مانند نوارهای ناوبری تاریک مطابقت دهید.\n .text-bg-dark to the .offcanvas and .btn-close-white to .btn-close for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding .dropdown-menu-dark to .dropdown-menu.

تاریک Offcanvas
برخی از متن ها به عنوان جایگیر.
فهرست کنید
  • Nemo enim ipsam voluptatem quia aspernatur
  • Neque porro quisquam est, qui dolorem
  • Quis autem vel eum iure qui in ea
                                                    \u003cbutton class\u003d\
تنظیمات پوسته
Layout را انتخاب کنید
عمودی
افقی
طرح رنگی
سبک
تاریک
حالت چیدمان
مایع
جعبه دار
جدا
رنگ نوار بالای صفحه
سبک
تاریک
موقعیت چیدمان