انگلیسی
فرانسوی
اسپانیایی
آلمانی
ایتالیایی
مرزها
مرزبندی
با استفاده از کلاس هایی مانند، مرزها را در بوت استرپ اعمال کنید مرز برای یک مرز کامل، .border-top برای یک حاشیه بالا، .حاشیه-پایین برای حاشیه پایین، و کلاس های مشابه برای چپ و راست. این کلاس ها به افزایش چیدمان و جداسازی عناصر کمک می کنند.
مرز.border-top.مرز-شروع.حاشیه-پایین.border-endعرض مرز
ضخامت حاشیه را در Bootstrap با استفاده از کلاس هایی مانند کنترل کنید مرز برای یک حاشیه پیش فرض و .border-2 برای حاشیه ضخیم تر همچنین می توانید استفاده کنید .border-0 برای حذف کامل مرزها این کلاس ها به شما کمک می کنند وزن بصری عناصر را به راحتی تنظیم کنید.
.border-0.border.border-2.border-3.border-4.border-5سبک مرزی
سفارشی کردن سبک های حاشیه در بوت استرپ با استفاده از کلاس هایی مانند مرز برای یک مرز محکم، .حاشیه چین خورده برای یک مرز شکسته، و .مرز نقطه دار برای حاشیه نقطه چین این سبک ها به افزودن جذابیت بصری به اجزای شما کمک می کنند.
.مرز جامد.حاشیه چین خورده.مرز نقطه دار.border-outsetرنگ حاشیه
تغییر رنگ حاشیه در بوت استرپ با استفاده از کلاس هایی مانند .border-primary, .مرزی-ثانویه، و .مرز-خطر. همچنین می توانید از کلاس های رنگی سفارشی برای مطابقت با طرح خود استفاده کنید. این کلاسها به شما این امکان را میدهند که به راحتی به مرزهای اجزای خود استایل بدهید.
.border-primary.مرزی-ثانویه.مرز-موفقیت.border-info.هشدار مرزی.مرز-خطر.مرز-تاریک.مرز-نورکدورت مرزی
با استفاده از کلاس هایی مانند کدورت مرزی را در بوت استرپ تنظیم کنید .border-opacity-10 به .border-opacity-100. این کلاسها به شما امکان میدهند شفافیت حاشیهها را کنترل کنید و سبک بصری اجزای خود را تقویت کنید و در عین حال خوانایی را حفظ کنید.
.border-opacity-10.border-opacity-20.border-opacity-30.border-opacity-40.border-opacity-50.border-opacity-60.border-opacity-70.border-opacity-80.border-opacity-90.border-opacity-100شعاع مرزی
کنترل شعاع مرز در بوت استرپ با استفاده از .گرد کلاس برای گرد کردن پیش فرض، .بالا گرد, .پایین گرد کلاس ها برای جهت های خاص، دایره گرد برای عناصر دایره ای، و .rounded-0-5 برای یک مقدار شعاع خاص این کلاس ها جذابیت بصری اجزای شما را افزایش می دهند.
قرارگیری شعاع مرزی
.گرد.بالا گرد.گرد گرد.پایین گرد.گرد-شروعدایره گرد.قرص گرداندازه شعاع مرزی
.rounded-0گرد-1گرد-2گرد-3گرد-4گرد-5نقاط شکست
نقاط شکست بوت استرپ به شما این امکان را می دهد که با اعمال کلاس هایی مانند، طرح بندی های پاسخگو ایجاد کنید .col-sm-*, .col-md-*، و .col-lg-*. این کلاسها اندازه ستونها را در عرضهای مختلف صفحه تنظیم میکنند و اطمینان میدهند که طراحی شما در همه دستگاهها عالی به نظر میرسد.
| نقطه شکست | پسوند کلاس | ابعاد |
|---|---|---|
| فوق العاده کوچک | هیچ کدام | 576px |
| کوچک | اس ام |
≥576px |
| متوسط | md |
≥768px |
| بزرگ | ال جی |
≥992px |
| فوق العاده بزرگ | xl |
≥1200px |
| فوق العاده بزرگ | xxl |
≥1400px |
ظروف
از کلاس های کانتینر بوت استرپ برای ایجاد ظروف با عرض ثابت یا سیال پاسخگو استفاده کنید. کلاس هایی مانند .کانتینر یک عرض ثابت ارائه دهید، در حالی که .ظرف مایع تا عرض کامل صفحه می رود، با استفاده از اندازه صفحه اصلاح می شود.
| محتوا | فوق العاده کوچک <576px
|
کوچک ≥576px
|
متوسط ≥768px
|
بزرگ ≥992px
|
ایکس لارج ≥1200px
|
XX-Large ≥1400px
|
|---|---|---|---|---|---|---|
.کانتینر |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.ظرف مایع |
100% | 100% | 100% | 100% | 100% | 100% |
رنگ های تم
با استفاده از کلاس هایی مانند، از رنگ های تم بوت استرپ استفاده کنید .text-primary و .bg-ثانویه به عناصر این کلاس ها به شما این امکان را می دهد که به راحتی پالت رنگی از پیش تعریف شده را ترکیب کنید و از طراحی ثابت در سراسر پروژه خود اطمینان حاصل کنید.
رنگ های متن
رنگ تم متن
تغییر رنگ متن در بوت استرپ با استفاده از کلاس هایی مانند .text-primary, .text-secondary، و دیگران. این کلاس ها بر اساس پالت تم بوت استرپ، رنگ های مختلفی را به متن اعمال می کنند.
متن-سفید
.text-primary
.text-secondary
.text-light
.text-موفقیت
متن-اطلاعات
متن هشدار
.متن خطر
.text-dark
متن قطع شده است
متن رنگ خاکستری
استفاده کنید متن خاکستری-* کلاس هایی در Bootstrap برای اعمال سایه های مختلف خاکستری به متن. ستاره (*) سایه های مختلف را نشان می دهد و به شما امکان می دهد رنگ متن را برای ظاهری ملایم تر تنظیم کنید.
.text-gray-100
.text-gray-200
.text-gray-300
.text-gray-400
متن خاکستری-500
.text-gray-600
.text-gray-700
.text-gray-800
.text-gray-900
پس زمینه
رنگ تم پس زمینه
با استفاده از کلاس هایی مانند، رنگ های تم پس زمینه را در بوت استرپ اعمال کنید .bg-primary, .bg-ثانویه، و دیگران. این کلاس ها بر اساس پالت تم بوت استرپ به پس زمینه رنگ اضافه می کنند.
.bg-light
.bg-primary
.bg-ثانویه
.bg-موفقیت
.bg-info
.bg-warning
.bg- خطر
.bg-dark
.bg-body
رنگ نور پس زمینه
استفاده کنید bg-*-subtle کلاس هایی در بوت استرپ برای اعمال رنگ های روشن پس زمینه. ستاره (*) هر رنگی را از پالت رنگ Bootstrap نشان می دهد و لحن ظریف و ملایمی را به عناصر شما ارائه می دهد.
.bg-light-subtle
bg-primary-subtle
.bg-secondary-subtle
bg-success-subtle
.bg-info-subtle
.bg-warning-subtle
.bg- خطر- ظریف
.bg-dark-subtle
کدورت پس زمینه
کدورت پس زمینه را در بوت استرپ با استفاده از .bg-opacity-* کلاسها، که در آن * میتواند مقداری از 0 تا 100 باشد. این کار شفافیت رنگ پسزمینه را کنترل میکند و امکان افکتهای لایهبندی را فراهم میکند.
انتخاب متن
مدیریت انتخاب متن در بوت استرپ با استفاده از کلاس هایی مانند .user-select-all برای انتخاب تمام متن، .user-select-none برای غیرفعال کردن انتخاب، و .user-select-auto برای رفتار پیش فرض
این پاراگراف با کلیک کاربر به طور کامل انتخاب می شود.
این پاراگراف دارای رفتار انتخاب پیش فرض است.
این پاراگراف با کلیک کاربر قابل انتخاب نخواهد بود.
رویدادهای اشاره گر
کنترل رویدادهای اشاره گر در بوت استرپ با استفاده از .pe-none برای غیرفعال کردن تعاملات و .pe-auto to enable them. These classes manage whether elements can be clicked or hovered.
این لینک نمی توان کلیک کرد.
این لینک می توان کلیک کرد (این رفتار پیش فرض است).
این لینک نمی توان کلیک کرد زیرا اشاره گر رویدادها دارایی از پدر و مادرش به ارث می رسد. با این حال، این لینک has a pe-auto کلاس و قابل کلیک کردن است.
سایه ها
با استفاده از کلاس هایی مانند، افکت های سایه را به عناصر در بوت استرپ اضافه کنید .shadow-sm برای سایه های کوچک، سایه برای سایه های معمولی و .shadow-lg برای سایه های بزرگتر
سایه-هیچکدام.shadow-smسایه.shadow-lgپشته ها - عمودی
استفاده کنید vstack کلاس در Bootstrap برای چیدن عناصر به صورت عمودی، تراز کردن آنها در یک ستون با فاصله بین آیتم ها.
پشته ها - افقی
استفاده کنید hstack کلاس در Bootstrap برای چیدن عناصر به صورت عمودی با فاصله ساده.
را ms-auto کلاس در Bootstrap یک حاشیه سمت چپ خودکار اعمال می کند و عنصر را به سمت راست فشار می دهد.
کوتاه کردن متن
استفاده کنید متن کوتاه کردن کلاس در Bootstrap برای کوتاه کردن متن با بیضی. آن را با .max-w-200px کلاس برای محدود کردن متن به حداکثر عرض 200 پیکسل، اطمینان حاصل شود که در داخل ظرف قرار می گیرد.
متن کوتاه کردن کلاس در Bootstrap برای کوتاه کردن متن با بیضی. آن را با .max-w-200px کلاس برای محدود کردن متن به حداکثر عرض 200 پیکسل، اطمینان حاصل شود که در داخل ظرف قرار می گیرد.
استفاده کنید
.text-truncate-2 کلاس در بوت استرپ برای محدود کردن متن به دو خط و اضافه کردن بیضی اگر محتوا از این محدودیت خارج شود. این اطمینان حاصل می کند که متن خلاصه و در مکان مشخص قرار می گیرد.
شناور
استفاده کنید متن کوتاه کردن کلاس در Bootstrap برای کوتاه کردن متن با بیضی. آن را با .max-w-200px کلاس برای محدود کردن متن به حداکثر عرض 200 پیکسل، اطمینان حاصل شود که در داخل ظرف قرار می گیرد.
سرریز
را تنظیم کنید سرریز ویژگی در پرواز با چهار مقدار و کلاس پیش فرض.این کلاس ها به طور پیش فرض پاسخگو نیستند.
.سرریز-خودکار روی یک عنصر با ابعاد تعیین شده عرض و ارتفاع. با طراحی، این محتوا به صورت عمودی اسکرول می شود.
متن برای پر کردن این مکان دارای چند کلمه است متن برای پر کردن این مکان دارای چند کلمه است متن برای پر کردن این مکان دارای چند کلمه است .سرریز-پنهان روی یک عنصر با ابعاد تعیین شده عرض و ارتفاع.
متن برای پر کردن این مکان دارای چند کلمه است متن برای پر کردن این مکان دارای چند کلمه است متن برای پر کردن این مکان دارای چند کلمه است .سرریز-قابل مشاهده روی یک عنصر با ابعاد تعیین شده عرض و ارتفاع.
متن برای پر کردن این مکان دارای چند کلمه است متن برای پر کردن این مکان دارای چند کلمه است متن برای پر کردن این مکان دارای چند کلمه است .overflow-scroll روی یک عنصر با ابعاد تعیین شده عرض و ارتفاع.
متن برای پر کردن این مکان دارای چند کلمه است متن برای پر کردن این مکان دارای چند کلمه است متن برای پر کردن این مکان دارای چند کلمه است سرریز-x-auto مثال روی یک عنصر.سرریز-x-مخفی مثالسرریز-x-visible مثال سرریز-x-scroll مثال روی یک عنصر