امکانات
محتویات
- ۱ 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-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
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>
مثالهای بیشتر از فاصله گذاری
سایه ها (به انگلیسی: 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
برای پنهان کردن یک عنصر در همهٔ دستگاهها به جز صفحه خوانها استفاده میشود:
مثال
<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-*
با هم استفاده کنید.
مثال
کلاسهای متن/ تایپوگرافی
همانطور که در بخش تایپوگرافی توضیح داده شد، لیستی از کلاسهای متن/ تایپوگرافی به شرح زیر است:
عنصرهای بلاک (به انگلیسی: 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) دیگر
کلاسهای نمایش دیگری نیز وجود دارند:
Flex
از کلاسهای .flex-*
برای کنترل چیدمان با flexbox استفاده میشود.
مثال
منابع آموزشی