عناصر رابط کاربری
دکمه ها
پایه ای
بوت استرپ شامل شش سبک دکمه از پیش تعریف شده است که هر کدام هدف معنایی خود را انجام می دهند.
طرح کلی
کلاس های اصلاح کننده پیش فرض را با the جایگزین کنید.btn-outline-* ones to remove all background images and colors on any button.
گرد شده
از کلاس استفاده کنید.btn-rounded for button round.
اندازه ها
اضافه کردن.btn-lg or .btn-sm for additional sizes.
عرض
اضافه کردن.w-xs, .w-sm, .w-md and .w-lg class for additional buttons width.
برچسب ها
این.btn
classes are designed to be used with the <button> element.
However, you can also use these classes on <a> or <input> elements (though
some browsers may apply a slightly different rendering).
نشان ها
پایه ای
برای تغییر ظاهر یک نشان، هر یک از کلاس های اصلاح کننده زیر را اضافه کنید.
قرص
استفاده کنید.rounded-pill modifier class to make badges more rounded.
سبک کردن
استفاده کنید.bg-soft-* class for a badge lighten.
قرص نرم
استفاده کنید.bg-soft-* class for a pill badge.
نشان ها در دکمه ها
نشان ها را می توان به عنوان بخشی از پیوندها یا دکمه ها برای ارائه شمارنده استفاده کرد.
نمونه های موقعیت نشان ها
نمونه ای از موقعیت نشان ها
کشویی
پایه ای
هر مجردی.btn can be turned into a dropdown
toggle with some markup changes. Here’s how you can put them to work
with either <button>
elements:
گونه
بهترین بخش این است که می توانید این کار را با هر نوع دکمه ای نیز انجام دهید:
دکمه تقسیم
بهترین بخش این است که می توانید این کار را با هر نوع دکمه ای نیز انجام دهید:
سایز بندی
کشویی دکمه ها با دکمه های کار می کنند\n
کشویی تاریک
برای مطابقت با نوار پیمایش تیره یا سبک سفارشی با افزودن، گزینه‌های کشویی تیره‌تر را انتخاب کنید.dropdown-menu-dark onto an existing .dropdown-menu. No changes are required to the dropdown items.
تراز منو
اضافه کردن.dropdown-menu-end
to a .dropdown-menu to right
align the dropdown menu.
گزینه تراز منو
با در نظر گرفتن اکثر گزینه های نشان داده شده در بالا، در اینجا یک نسخه ی نمایشی سینک آشپزخانه کوچک از گزینه های مختلف تراز کشویی در یک مکان وجود دارد.
رفتار بسته خودکار
به طور پیش فرض، هنگام کلیک کردن در داخل یا خارج از منوی کشویی، منوی کشویی بسته می شود. autoClose option to change this behavior of the dropdown.
محتوای منو
نمونه ای از منوی کشویی سرصفحه ها، متن، محتوای فرم ها
تنوع قطره ای
منوهای کشویی بالای عناصر را فعال کنید\n .dropup to the parent
element.
تنوع Dropright
با افزودن، منوهای کشویی را در سمت راست عناصر فعال کنید.dropend to the parent element.
تغییر قطره ای
با افزودن، منوهای کشویی را در سمت چپ عناصر فعال کنید.dropend to the parent element.
تصاویر
گرد و دایره
از کلاس ها استفاده کنید.rounded and .rounded-circle.
ریز عکسها
علاوه بر ابزارهای شعاع مرزی ما، می توانید استفاده کنید.img-thumbnail to give an image a
rounded 1px border appearance.
اندازه ها
.avatar-sm
.avatar-md
.avatar-lg
.avatar-sm
.avatar-md
.avatar-lg
شی رسانه
تصاویر یا رسانه های دیگر می تواند باشد\n
رسانه با تراز بالا
Cras sit amet nibh libero، در gravida nulla.
رسانه تراز مرکزی
Cras sit amet nibh libero، در gravida nulla.
رسانه با تراز پایین
Cras sit amet nibh libero، در gravida nulla.
کارت ها
عنوان کارت
این یک کارت گسترده تر با محتوای اضافی است.
آخرین به روز رسانی 3 دقیقه قبل
عنوان کارت
این یک کارت گسترده تر با محتوای اضافی است.
آخرین به روز رسانی 3 دقیقه قبل
رنگ پس زمینه کارت
کارت اصلی
اگر چند زبان ادغام شوند، دستور زبان فرد حاصل
کارت موفقیت
اگر چند زبان ادغام شوند، دستور زبان فرد حاصل
کارت اطلاعات
اگر چند زبان ادغام شوند، دستور زبان فرد حاصل
رنگ حاشیه کارت
کارت طرح هشدار
عنوان کارت
اگر چند زبان ادغام شوند، دستور زبان فرد حاصل
کارت طرح خطر
عنوان کارت
اگر چند زبان ادغام شوند، دستور زبان فرد حاصل
کارت موفقیت
عنوان کارت
اگر چند زبان ادغام شوند، دستور زبان فرد حاصل
سقوط - فروپاشی
فروپاشی اساسی
می توانید از یک لینک با استفاده ازhref attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="collapse" is required.
سقوط افقی اساسی
افزونه collapse از جمع شدن افقی نیز پشتیبانی می کند. .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element.
چندین هدف فرو می ریزند
آ<button> or <a> can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute.
زبانه ها و آکاردئون ها
زبانه های اساسی
نمونه ای از زبانه های پیش فرض Nav
جین خام احتمالاً در مورد آنها شورت جین آستین نشنیده اید.\n
لوکاور فیکسی کامیون مواد غذایی، مارفا نولا accusamus mcsweeney's\n
Etsy mixtape wayfarers، اخلاقی wes anderson tofu قبل از آنها\n
صندوق امانی seitan letterpress، کیتار خام جین کفیه اتسی\n
قرص های اولیه Nav
نمونه ای از قرص های پیش فرض Nav
جین خام احتمالاً در مورد آنها شورت جین آستین نشنیده اید.\n
لوکاور فیکسی کامیون مواد غذایی، مارفا نولا accusamus mcsweeney's\n
Etsy mixtape wayfarers، اخلاقی wes anderson tofu قبل از آنها\n
صندوق امانی seitan letterpress، کیتار خام جین کفیه اتسی\n
برگه های Nav سفارشی
نمونه ای از برگه های Nav سفارشی
جین خام احتمالاً در مورد آنها شورت جین آستین نشنیده اید.\n
لوکاور فیکسی کامیون مواد غذایی، مارفا نولا accusamus mcsweeney's\n
Etsy mixtape wayfarers، اخلاقی wes anderson tofu قبل از آنها\n
صندوق امانی seitan letterpress، کیتار خام جین کفیه اتسی\n
زبانه‌های ناوبری عمودی
استفاده کنیدflex-column class to create Vertical nav tabs.
آکاردئون های پایه
رفتار فرو ریختن پیش‌فرض را برای ایجاد آکاردئون گسترش دهید.
آکاردئون فلاش
اضافه کردن.accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
.accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content..accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.خارج از بوم
نسخه ی نمایشی
از دکمه های زیر برای نمایش و پنهان کردن یک عنصر offcanvas از طریق جاوا اسکریپت استفاده کنید که این عنصر را تغییر می دهد.show class on an element with the .offcanvas class.
خارج از بوم
تعیین سطح
نمونه قرارگیری متفاوت در خارج از بوم: چپ، راست و پایین
بالای بوم
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.
رنگی با پیمایش
سعی کنید بقیه صفحه را اسکرول کنید تا این گزینه را در عمل ببینید.
خارج از بوم با پس زمینه
.....
پس زمینه با پیمایش
سعی کنید بقیه صفحه را اسکرول کنید تا این گزینه را در عمل ببینید.
مدال ها
پایه ای
با کلیک کردن روی دکمه زیر، یک نسخه آزمایشی مودال کار را تغییر دهید.
اندازه های اختیاری
مدال‌ها دارای سه اندازه اختیاری هستند که از طریق کلاس‌های اصلاح‌کننده در دسترس هستند تا روی a قرار بگیرند.modal-dialog.
جابه‌جایی بین حالت‌ها
جابه‌جایی بین چند حالت با چند قرار دادن هوشمندانهdata-bs-target and data-bs-toggle attributes.
عمودی در مرکز
اضافه کردن.modal-dialog-centered to .modal-dialog to vertically center the modal.
قابل پیمایش
همچنین می‌توانید یک مدال قابل پیمایش ایجاد کنید که با افزودن، بدنه مدال را اسکرول کنید.modal-dialog-scrollable to .modal-dialog.
پس زمینه ایستا
وقتی پس‌زمینه روی استاتیک تنظیم می‌شود، مودال هنگام کلیک کردن در خارج از آن بسته نمی‌شود.
صفحه بندی
پایه ای
پیوندهای صفحه بندی نشان می دهد که یک سری محتوای مرتبط در چندین صفحه وجود دارد.
سفارشی
اضافه کردن.pagination-rounded with .pagination class for rounded pagination.
سایز بندی
اضافه کردن.pagination-lg or .pagination-sm for pagination additional
sizes.
جای جای
پایه ای
از متغیرهای بارگیری برای مؤلفه ها یا صفحات خود استفاده کنید تا نشان دهید ممکن است چیزی همچنان در حال بارگیری باشد
عنوان کارت
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
برو یه جاییعرض
شما می توانید تغییر دهیدwidth through grid column classes, width utilities,
or
inline styles.
سایز بندی
اندازه ی.placeholders are based on the typographic style of the
parent
element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm,
or
.placeholder-xs.
رنگ
به طور پیش فرض،placeholder uses currentColor. This can be overriden with a custom color or utility class.
انیمیشن Glow Placeholder
متحرک سازی مکاندارها با.placeholder-glow to better convey the perception of something being actively loaded.
انیمیشن Wave Placeholder
متحرک سازی مکاندارها با.placeholder-wave to better convey the perception of something being actively loaded.
پیش رفتن
پایه ای
اجزای پیشرفت با دو ساخته شده است\n
ارتفاعات
ما فقط یک را تنظیم کردیمheight value on the .progress-bar, so if you change
that value the outer .progress
will automatically resize accordingly.
راه راه و متحرک
اضافه کردن.progress-bar-striped
to any .progress-bar to apply a
stripe via CSS gradient over the progress bar’s background color.
نکات ابزار و پاپاورها
نکات ابزار
برای دیدن نکات ابزار، نشانگر را روی پیوندهای زیر نگه دارید.
پاپاورها
محتوای همپوشانی کوچک، مانند آنچه در iOS یافت می‌شود، به هر عنصری برای نگهداری اطلاعات ثانویه اضافه کنید.
اسپینرها
مرز
از اسپینرهای حاشیه برای نشانگر بارگیری سبک استفاده کنید.
تنوع رنگ
اضافه کردنtext-* color for a Spinner color variation.
در حال رشد
به رشد اسپینر بروید. این رشد مکرر ادامه دارد!
تنوع رنگ
اضافه کردنtext-* color for a Spinner color variation.
توری
ببینید چگونه جنبه های شبکه بوت استرپ\n
| xs \u003c576 پیکسل |
اس ام ≥576 پیکسل |
md ≥768 پیکسل |
ال جی ≥992 پیکسل |
xl ≥1200 پیکسل |
xxl ≥1400 پیکسل |
|
|---|---|---|---|---|---|---|
| رفتار شبکه | افقی در همه حال | برای شروع جمع شد، افقی بالای نقاط شکست | ||||
| حداکثر عرض ظرف | هیچکدام (خودکار) | 540 پیکسل | 720 پیکسل | 960 پیکسل | 1140 پیکسل | 1320 پیکسل |
| پیشوند کلاس | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| # ستون | 12 | |||||
| عرض ناودان | 24 پیکسل (12 پیکسل در هر طرف یک ستون) | |||||
| ناودان های سفارشی | آره | |||||
| تودرتو | آره | |||||
| افست | آره | |||||
| ترتیب ستون | آره | |||||
ویدیو
پاسخگو جاسازی ویدیو 16:9
نسبت ابعاد را می توان با کلاس های اصلاح کننده سفارشی کرد.
پاسخگو جاسازی ویدیو 21:9
نسبت ابعاد را می توان با کلاس های اصلاح کننده سفارشی کرد.
پاسخگو جاسازی ویدیو 4:3
نسبت ابعاد را می توان با کلاس های اصلاح کننده سفارشی کرد.
پاسخگو جاسازی ویدیو 1:1
نسبت ابعاد را می توان با کلاس های اصلاح کننده سفارشی کرد.
خدمات رفاهی
مرز ها
از ابزارهای حاشیه برای افزودن یا حذف حاشیه های یک عنصر استفاده کنید.
عرض مرز
.border.border-1
.border.border-2
.border.border-3
.border.border-4
.border.border-5
رنگ لبه
.border-primary
.border-secondary
.border-success
.border-info
.border-warning
.border-danger
.border-dark
.border-light
افزودنی
.border
.border-top
.border-end
.border-bottom
.border-start
کاهشی
.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0
کدورت مرزی
.border-opacity-10
.border-opacity-25
.border-opacity-50
.border-opacity-75
.border
شعاع مرزها
از کلاس زیر برای یک عنصر استفاده کنید تا گوشه های آن را به راحتی گرد کنید.
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill
اندازه
از کلاس زیر برای یک عنصر استفاده کنید تا گوشه های آن را به راحتی گرد کنید.
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-4
.rounded-5
سایه جعبه
در حالی که سایه‌های روی کامپوننت‌ها به‌طور پیش‌فرض در Bootstrap غیرفعال هستند و می‌توان آنها را از طریق $enable-shadows فعال کرد، همچنین می‌توانید به سرعت سایه‌ای را با ما اضافه یا حذف کنید.box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).
.shadow-none No shadow.shadow-sm Small shadow.shadow Regular shadow.shadow-lg Larger shadowانتخاب متن
نحوه انتخاب محتوا را در هنگام تعامل کاربر با آن تغییر دهید.
این پاراگراف با کلیک کاربر به طور کامل انتخاب می شود.
این پاراگراف دارای رفتار انتخاب پیش فرض است.
این پاراگراف با کلیک کاربر قابل انتخاب نخواهد بود.
عرض
ابزارهای عرض و ارتفاع از API ابزار در تولید می شوند_utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.
ارتفاع
ابزارهای عرض و ارتفاع از API ابزار در تولید می شوند_utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.