امکانات
محتویات
- ۱ Utilityهای بوت استرپ ۴
- ۲ کادرها (به انگلیسی: Borders)
- ۳ رنگ کادر
- ۴ شعاع (به انگلیسی: Radius) کادر
- ۵ Float و Clearfix
- ۶ Floatهای واکنش گرا
- ۷ حالت وسط‌چین
- ۸ عرض
- ۹ ارتفاع
- ۱۰ فاصله گذاری (به انگلیسی: Spacing)
- ۱۱ مثال‌های بیشتر از فاصله گذاری
- ۱۲ سایه ها (به انگلیسی: Shadows)
- ۱۳ Align عمودی
- ۱۴ Embedهای واکنش گرا
- ۱۵ قابلیت دیدن (به انگلیسی: Visibility)
- ۱۶ مکان
- ۱۷ آیکون بستن (به انگلیسی: Close)
- ۱۸ صفحه خوان‌ها (به انگلیسی: Screenreaders)
- ۱۹ رنگ‌ها
- ۲۰ رنگ‌های پیش زمینه
- ۲۱ کلاس‌های متن/ تایپوگرافی
- ۲۲ عنصرهای بلاک (به انگلیسی: Block)
- ۲۳ کلاس‌های نمایش (به انگلیسی: Display) دیگر
- ۲۴ Flex
- ۲۵ منابع آموزشی
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-topb- تنظیمmargin-bottomیاpadding-bottoml- تنظیمmargin-leftیاpadding-leftr- تنظیمmargin-rightیاpadding-rightx- تنظیمmargin-leftوmargin-rightیاpadding-leftوpadding-righty- تنظیمmargin-bottomوmargin-topیاpadding-bottomوpadding-top- blank - تنظیم
marginیاpaddingدر هر ۴ طرف عنصر
و size یکی از موارد زیر است:
0- تنظیمmarginیاpaddingبرابر01- تنظیمmarginیاpaddingبرابر.25remاست (۴ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)2- تنظیمmarginیاpaddingبرابر ..5remاست (۸ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)3- تنظیمmarginیاpaddingبرابر1remاست (۱۶ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)4- تنظیمmarginیاpaddingبرابر1.5remاست (۲۴ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)5- تنظیمmarginیاpaddingبرابر3remاست (۴۸ پیکسل اگر سایز خط برابر ۱۶ پیکسل باشد)auto- تنظیمmarginبرابر با auto
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">×</button>
صفحه خوان‌ها (به انگلیسی: Screenreaders)
از کلاس .sr-only برای پنهان کردن یک عنصر در همهٔ دستگاه‌ها به جز صفحه خوان‌ها استفاده می‌شود:
مثال
1 <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 استفاده می‌شود.
مثال
منابع آموزشی