امکانات

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	شروع
۳	ظرف‌ها
۴	شبکه‌بندی پایه
۵	تایپوگرافی
۶	رنگ‌ها
۷	جدول‌ها
۸	تصاویر
۹	جامبوترون
۱۰	هشدارها
۱۱	کلیدها
۱۲	گروه‌های کلید
۱۳	نشان‌ها (Badges)
۱۴	نوارهای پیشرفت
۱۵	Spinnerها
۱۶	صفحه‌بندی
۱۷	گروه‌های لیست
۱۸	کارت‌ها
۱۹	منوهای کرکره‌ای
۲۰	Collapse
۲۱	Navها
۲۲	Navbar
۲۳	فرم‌ها
۲۴	ورودی‌ها
۲۵	گروه‌های ورودی
۲۶	فرم‌های سفارشی
۲۷	Carousel
۲۸	Modal
۲۹	راهنمای ابزار
۳۰	Popover
۳۱	Toast
۳۲	Scrollspy
۳۳	امکانات
۳۴	Flex
۳۵	آیکن‌ها
۳۶	Media Objects
۳۷	فیلترها
شبکه‌بندی
Theme
مرجع

Utilityهای بوت استرپ ۴

بوت استرپ ۴ کلاس‌های helper / utility زیادی برای استایل دادن سریع به عنصرها بدون استفاده از هیچ کد CSS دارد.

کادرها (به انگلیسی: Borders)

کلاس‌های border برای اضافه یا حذف کادرهای یک عنصر به کار می‌روند:

مثال

1 <span class="border"></span>
2 <span class="border border-0"></span>
3 <span class="border border-top-0"></span>
4 <span class="border border-right-0"></span>
5 <span class="border border-bottom-0"></span>
6 <span class="border border-left-0"></span>

مشاهدهٔ نتیجه

رنگ کادر

با هریک از کلاس‌های متنی رنگ کادر می‌توان کادر را رنگ آمیزی کرد:

مثال

1 <span class="border border-primary"></span>
2 <span class="border border-secondary"></span>
3 <span class="border border-success"></span>
4 <span class="border border-danger"></span>
5 <span class="border border-warning"></span>
6 <span class="border border-info"></span>
7 <span class="border border-light"></span>
8 <span class="border border-dark"></span>
9 <span class="border border-white"></span>

مشاهدهٔ نتیجه

شعاع (به انگلیسی: Radius) کادر

با کلاس‌های rounded می‌توان گوشه‌های گِرد به یک عنصر اضافه کرد:

مثال

1 <span class="rounded-sm"></span>
2 <span class="rounded"></span>
3 <span class="rounded-lg"></span>
4 <span class="rounded-top"></span>
5 <span class="rounded-right"></span>
6 <span class="rounded-bottom"></span>
7 <span class="rounded-left"></span>
8 <span class="rounded-circle"></span>
9 <span class="rounded-0"></span>

مشاهدهٔ نتیجه

Float و Clearfix

با کلاس .float-right می‌توان یک عنصر را به سمت راست یا با کلاس .float-left عنصر را به سمت چپ شناور کرد (به انگلیسی: Float) و با استفاده از کلاس .clearfix ,Floatها را حذف کرد:

مثال

1 <div class="clearfix">
2   <span class="float-left">Float left</span>
3   <span class="float-right">Float right</span>
4 </div>

مشاهدهٔ نتیجه

Floatهای واکنش گرا

با کلاس‌های float واکنش گرا یک عنصر را با توجه به عرض صفحه نمایش به سمت راست یا چپ شناور کنید (.float-*-left|right که * برابر sm (>= ۵۷۶ پیکسل)، md (>= ۷۶۸ پیکسل)، lg (>=۹۹۲ پیکسل) یا xl (>=۱۲۰۰ پیکسل) است):

مثال

1 <div class="float-sm-right">Float right on small screens or wider</div><br>
2 <div class="float-md-right">Float right on medium screens or wider</div><br>
3 <div class="float-lg-right">Float right on large screens or wider</div><br>
4 <div class="float-xl-right">Float right on extra large screens or wider</div><br>
5 <div class="float-none">Float none</div>

مشاهدهٔ نتیجه

حالت وسط چین

یک عنصر با کلاس .mx-auto وسط-چین کنید (حاشیه چپ و حاشیه راست: auto اضافه می‌کند):

مثال

<div class="mx-auto bg-warning" style="width:150px">Centered</div>

مشاهدهٔ نتیجه

عرض

عرض یک عنصر با کلاس‌ها w-* تنظیم می‌شود (.w-25 ,.w-50 ,.w-75 ,.w-100, .mw-100):

مثال

1 <div class="w-25 bg-warning">Width 25%</div>
2 <div class="w-50 bg-warning">Width 50%</div>
3 <div class="w-75 bg-warning">Width 75%</div>
4 <div class="w-100 bg-warning">Width 100%</div>
5 <div class="mw-100 bg-warning">Max Width 100%</div>

مشاهدهٔ نتیجه

ارتفاع

ارتفاع یک عنصر با کلاس‌های h-* تنظیم می‌شود (.h-25 ,.h-50 ,.h-75 ,.h-100, .mh-100):

مثال

1 <div style="height:200px;background-color:#ddd">
2   <div class="h-25 bg-warning">Height 25%</div>
3   <div class="h-50 bg-warning">Height 50%</div>
4   <div class="h-75 bg-warning">Height 75%</div>
5   <div class="h-100 bg-warning">Height 100%</div>
6   <div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
7 </div>

مشاهدهٔ نتیجه

فاصله گذاری (به انگلیسی: Spacing)

بوت استرپ ۴، طیف وسیعی از کلاس کاربردی برای حاشیه درونی (به انگلیسی: Padding) و حاشیه (به انگلیسی: Margin) دارد:

این کلاس‌ها برای همه breakpointها کار می‌کنند: (xs، (<=576px), sm، (>=576px), md، (>=768px), lg، (>=992px) یا xl (>=1200px)):

کلاس‌ها در این فرمت‌های: {property}{sides}-{size} برای xs و فرمت‌های {property}{sides}-{breakpoint}-{size} برای sm ,md ,lg و xl استفاده می‌شوند.

بطوری‌که property یکی از موارد زیر است:

• m - تنظیم حاشیه (به انگلیسی: Margin)

• p - تنظیم حاشیه درونی (به انگلیسی: Padding)

و side یکی از موارد زیر است:

• t - تنظیم margin-top یا padding-top

• b - تنظیم margin-bottom یا padding-bottom

• l - تنظیم margin-left یا padding-left

• r - تنظیم margin-right یا padding-right

• x - تنظیم margin-left و margin-right یا padding-left و padding-right

• y - تنظیم margin-bottom و margin-top یا padding-bottom و padding-top

• blank - تنظیم margin یا padding در هر ۴ طرف عنصر

و size یکی از موارد زیر است:

• 0 - تنظیم margin یا padding برابر 0

• 1 - تنظیم margin یا padding برابر .25rem است (۴ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)

• 2 - تنظیم margin یا padding برابر ..5rem است (۸ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)

• 3 - تنظیم margin یا padding برابر 1rem است (۱۶ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)

• 4 - تنظیم margin یا padding برابر 1.5rem است (۲۴ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)

• 5 - تنظیم margin یا padding برابر 3rem است (۴۸ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)

• auto - تنظیم margin برابر با auto

نکته: با اضافه کردن “n” جلوی سایز، marginها می‌توانند مقدار منفی هم بگیرند:

• n1 - تنظیم margin برابر با -.25rem است (۴- پیکسل اگر سایز خط ۱۶ پیکسل باشد)

• n2 - تنظیم margin برابر با -.5rem است (۸- پیکسل اگر سایز خط ۱۶ پیکسل باشد)

• n3 - تنظیم margin برابر با -1rem است (۱۶- پیکسل اگر سایز خط ۱۶ پیکسل باشد)

• n4 - تنظیم margin برابر با -1.5rem است (۲۴- پیکسل اگر سایز خط ۱۶ پیکسل باشد)

• n5 - تنظیم margin برابر با -3rem است (۴۸- پیکسل اگر سایز خط ۱۶ پیکسل باشد)

مثال

1 <div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
2 <div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
3 <div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>

مشاهدهٔ نتیجه

مثال‌های بیشتر از فاصله گذاری

.m-# / m-*-#	حاشیه در همهٔ اضلاع	مشاهدهٔ نتیجه
.mt-# / mt-*-#	حاشیه بالا	مشاهدهٔ نتیجه
.mb-# / mb-*-#	حاشیه پایین	مشاهدهٔ نتیجه
.ml-# / ml-*-#	حاشیه چپ	مشاهدهٔ نتیجه
.mr-# / mr-*-#	حاشیه راست	مشاهدهٔ نتیجه
.mx-# / mx-*-#	حاشیه چپ و راست	مشاهدهٔ نتیجه
.my-# / my-*-#	حاشیه بالا و پایین	مشاهدهٔ نتیجه
.p-# / p-*-#	padding در همهٔ اضلاع	مشاهدهٔ نتیجه
.pt-# / pt-*-#	padding بالا	مشاهدهٔ نتیجه
.pb-# / pb-*-#	padding پایین	مشاهدهٔ نتیجه
.pl-# / pl-*-#	padding چپ	مشاهدهٔ نتیجه
.pr-# / pr-*-#	padding راست	مشاهدهٔ نتیجه
.py-# / py-*-#	padding بالا و پایین	مشاهدهٔ نتیجه
.px-# / px-*-#	padding راست و چپ	مشاهدهٔ نتیجه

سایه ها (به انگلیسی: Shadows)

از کلاس‌های shadow- برای اضافه کردن سایه به یک عنصر استفاده کنید:

مثال

1 <div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
2 <div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
3 <div class="shadow p-4 mb-4 bg-white">Default shadow</div>
4 <div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>

مشاهدهٔ نتیجه

Align عمودی

از کلاس‌های align- برای تغییر نحوه قرارگیری (به انگلیسی: alignment) عناصر استفاده کنید (فقط برروی عنصرهای inline, inline-block, inline-table و table cell اجرا می‌شود):

مثال

1 <span class="align-baseline">baseline</span>
2 <span class="align-top">top</span>
3 <span class="align-middle">middle</span>
4 <span class="align-bottom">bottom</span>
5 <span class="align-text-top">text-top</span>
6 <span class="align-text-bottom">text-bottom</span>

مشاهدهٔ نتیجه

Embedهای واکنش گرا

Embedهای ویدیویی یا اسلاید شو براساس عرض عنصر والد می‌سازد.

.embed-responsive-item را به هر عنصر embed (مانند <iframe> یا <video>) در عنصر والد با .embed-responsive و یک نسبت ابعاد انتخاب خود اضافه کنید:

مثال

 1 <!-- 21:9 aspect ratio -->
 2 <div class="embed-responsive embed-responsive-21by9">
 3   <iframe class="embed-responsive-item" src="..."></iframe>
 4 </div>
 5 
 6 <!-- 16:9 aspect ratio -->
 7 <div class="embed-responsive embed-responsive-16by9">
 8   <iframe class="embed-responsive-item" src="..."></iframe>
 9 </div>
10 
11 <!-- 4:3 aspect ratio -->
12 <div class="embed-responsive embed-responsive-4by3">
13   <iframe class="embed-responsive-item" src="..."></iframe>
14 </div>
15 
16 <!-- 1:1 aspect ratio -->
17 <div class="embed-responsive embed-responsive-1by1">
18   <iframe class="embed-responsive-item" src="..."></iframe>
19 </div>

مشاهدهٔ نتیجه

قابلیت دیدن (به انگلیسی: Visibility)

از کلاس .visible یا .invisible برای کنترل قابلیت مشاهده عناصر استفاده می‌شود.   نکته:این کلاس‌ها مقدار نمایش css را تغییر نمی‌دهد. آنها visibility:visible یا visibility:hidden را اضافه می‌کنند:

مثال

1 <div class="visible">I am visible</div>
2 <div class="invisible">I am invisible</div>

مشاهدهٔ نتیجه

مکان

از کلاس .fixed-top برای ایجاد ثابت نگه داشتن عنصر در بالای صفحه استفاده می‌شود:

مثال

1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
2   ...
3 </nav>

مشاهدهٔ نتیجه

از کلاس .fixed-bottom برای ایجاد ثابت نگه داشتن عنصر در پایین صفحه استفاده می‌شود:

مثال

1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
2   ...
3 </nav>

مشاهدهٔ نتیجه

از کلاس .sticky-top برای ثابت کردن یک عنصر هنگام پیمایش، در بالای صفحه استفاده می‌شود.

  نکته:این کلاس در IE11 و نسخه‌های قدیمی‌تر اجرا نمی‌شود (با آن بعنوان position:relative برخورد می‌شود).

مثال

1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
2   ...
3 </nav>

مشاهدهٔ نتیجه

آیکون بستن (به انگلیسی: Close)

از کلاس .close برای استایل دادن به یک آیکون بستن استفاده می‌شود. اغلب این کلاس برای هشدارها (به انگلیسی: Alerts) و modalها به کار می‌رود. دقت کنید که از سمبل × برای ایجاد این آیکون استفاده می‌کنیم (“x” با ظاهر بهتر). همچنین دقت داشته باشید که این آیکون بطور پیش فرض در سمت راست قرار می‌گیرد:

مثال

<button type="button" class="close">&times;</button>

مشاهدهٔ نتیجه

صفحه خوان ها (به انگلیسی: Screenreaders)

از کلاس .sr-only برای پنهان کردن یک عنصر در همهٔ دستگاه‌ها به جز صفحه خوان‌ها استفاده می‌شود:

مثال

<span class="sr-only">I will be hidden on all screens except for screen readers.</span>

مشاهدهٔ نتیجه

رنگها

همانطور که در بخش رنگ‌ها توضیح داده شد، لیستی از کلاس‌های رنگ پیش زمینه و متن به شرح زیر است:

کلاس‌های رنگ‌های متن عبارتند از: .text-muted ,.text-primary, .text-success, .text-info ,.text-warning ,.text-danger ,.text-secondary ,.text-white, .text-dark ,.text-body (رنگ بدنهٔ پیش‌فرض / اغلب سیاه) و .text-light:

مثال

مشاهدهٔ نتیجه

کلاس‌های متن contextual را می‌توان برای لینک‌ها هم استفاده کرد، که یک hover با رنگ تیره‌تر ایجاد می‌کند:

مثال

مشاهدهٔ نتیجه

همچنین می‌توانید با کلاس .text-black-50 یا .text-white-50 شفافیت ۵۰٪ برای متن‌های سفید یا سیاه ایجاد کرد:

مثال

مشاهدهٔ نتیجه

رنگهای پیش زمینه

کلاس‌های رنگ‌های پیش زمینه عبارتند از: .bg-primary ,.bg-success, .bg-info ,.bg-warning ,.bg-danger ,.bg-secondary ,.bg-dark و .bg-light.

دقت کنید که رنگ‌های پیش زمینه، رنگ متن را تعیین نمی‌کنند، بنابراین در بعضی موارد ممکن است بخواهید آنها را با کلاس .text-* با هم استفاده کنید.

مثال

مشاهدهٔ نتیجه

کلاسهای متن/ تایپوگرافی

همان‌طور که در بخش تایپوگرافی توضیح داده شد، لیستی از کلاس‌های متن/ تایپوگرافی به شرح زیر است:

کلاس	توضیحات	مثال
.display-*	عنوان‌های نمایشی کمی متفاوت تر از عنوان‌های عادی هستند (اندازه خط بزرگتر و پهنای قلم (به انگلیسی: font-weight) کمتر) و چهار کلاس برای آنها وجود دارد: .display-1 ,.display-2 ,.display-3 ,.display-4	نتیجه
.font-weight-bold	متن برجسته (به انگلیسی: Bold)	نتیجه
.font-weight-bolder	متن برجستهٔ برجسته تر	نتیجه
.font-weight-normal	متن معمولی	نتیجه
.font-weight-light	متن سبک (پهنای قلم کمتر)	نتیجه
.font-weight-lighter	متن سبک‌تر	نتیجه
.font-italic	متن Italic	نتیجه
.lead	پاراگراف را برجسته می‌کند	نتیجه
.small	متن را کوچکتر می‌کند (به اندازه ۸۵٪ اندازه والد تنظیم می‌شود)	نتیجه
.text-break	از شکسته شدن چیدمان متن طولانی جلوگیری می‌کند	نتیجه
.text-center	متن را وسط-چین نشان می‌دهد	نتیجه
.text-decoration-none	خط زیرین را لینک‌ها حدف می‌کند	نتیجه
.text-left	متن را چپ‌چین می‌کند	نتیجه
.text-justify	متن را بصورت justify شده نشان می‌دهد	نتیجه
.text-monospace	متن Monospace شده	نتیجه
.text-nowrap	متن را بدون پوشش نشان می‌دهد	نتیجه
.text-lowercase	متن را با حروف کوچک نشان می‌دهد	نتیجه
.text-reset	رنگ متن یا یک لینک را Reset می‌کند (رنگ عنصر والد را به ارث می‌برد)	نتیجه
.text-right	متن را راست‌چین نشان می‌دهد	نتیجه
.text-uppercase	متن را با حروف بزرگ نشان می‌دهد	نتیجه
.text-capitalize	حروف اول کلمات را تبدیل به حروف بزرگ می‌کند	نتیجه
.initialism	متن درون عنصر <abbr> را با اندازه خط کمی کوچکتر نشان می‌دهد	نتیجه
.list-unstyled	استایل لیست پیش فرض و حاشیه چپ را از روی آیتم‌های لیست حذف می‌کند (بر روی هر دو تگ <ul> و <ol> عمل می‌کند). این کلاس فقط برروی فرزندان بلافاصلهٔ آیتم‌های لیست اعمال می‌شود (برای حذف استایل‌های لیست پیش فرض از هر لیست تو در تو، این کلاس را روی همه لیست‌های تو در تو اعمال کنید)	نتیجه
.list-inline	همهٔ آیتم‌های لیست را در یک خط قرار می‌دهد (با .list-inline-item در هر عنصر <li> با هم استفاده می شوند)	نتیجه
.pre-scrollable	یک عنصر <pre> را قابل پیمایش می‌کند	نتیجه

عنصرهای بلاک (به انگلیسی: Block)

بوسیلهٔ کلاس .d-block یک عنصر را به یک عنصر بلاک تبدیل کنید. از هر یک از کلاس‌های d-*-block برای کنترل زمانی که عنصر باید در صفحه نمایش با اندازه خاصی بلاک شود، استفاده کنید:

مثال

1 <span class="d-block bg-success">d-block</span>
2 <span class="d-sm-block bg-success">d-sm-block</span>
3 <span class="d-md-block bg-success">d-md-block</span>
4 <span class="d-lg-block bg-success">d-lg-block</span>
5 <span class="d-xl-block bg-success">d-xl-block</span>

مشاهدهٔ نتیجه

کلاسهای نمایش (به انگلیسی: Display) دیگر

کلاس‌های نمایش دیگری نیز وجود دارند:

کلاس	تعریف	مثال
.d-none	یک عنصر را پنهان می‌کند	نتیجه
.d-*-none	عنصری را در صفحه نمایش با اندازه خاصی پنهان می‌کند	نتیجه
.d-inline	عنصری را درون خطی می‌کند	نتیجه
.d-*-inline	عنصر را در صفحه نمایش با اندازه خاص، درون خطی می‌کند	نتیجه
.d-inline-block	عنصر را به بلاک درون خطی تبدیل می‌کند	نتیجه
.d-*-inline-block	عنصر را در صفحه نمایش با اندازه خاص، به بلاک درون خطی تبدیل می‌کند	نتیجه
.d-table	عنصری را به شکل جدول درمی‌آورد	نتیجه
.d-*-table	عنصر را در صفحه نمایش با اندازه خاص، به شکل جدول درمی‌آورد	نتیجه
.d-table-cell	عنصری را به سلول جدول تبدیل می‌کند	نتیجه
.d-*-table-cell	عنصر را در صفحه نمایش با اندازه خاص، به یک سلول جدول تبدیل می‌کند	نتیجه
.d-table-row	عنصری را به ردیف جدول تبدیل می‌کند	نتیجه
.d-*-table-row	عنصر را در صفحه نمایش با اندازه خاص، به یک ردیف جدول تبدیل می‌کند	نتیجه
.d-flex	یک ظرف flexbox ایجاد کرده و فرزندان بی واسطه را به آیتم‌های flex تبدیل می‌کند	نتیجه
.d-*-flex	یک ظرف flexbox در صفحه نمایش با اندازه خاص تولید می‌کند	نتیجه
.d-inline-flex	یک ظرف flexbox درون خطی ایجاد می‌کند	نتیجه
.d-*-inline-flex	یک ظرف flexbox درون خطی در صفحه نمایش با اندازه خاص تولید می‌کند	نتیجه

Flex

از کلاس‌های .flex-* برای کنترل چیدمان با flexbox استفاده می‌شود.

در مورد Flex در بوت استرپ ۴ در بخش بعدی بیشتر خواهید آموخت.

مثال

صفحهٔ بعد»

«صفحهٔ قبل