امکانات

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (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&#125;-{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 برای کنترل قابلیت مشاهده عناصر استفاده می‌شود. <translate> نکته</translate>  نکته:این کلاس‌ها مقدار نمایش 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 برای ثابت کردن یک عنصر هنگام پیمایش، در بالای صفحه استفاده می‌شود.

<translate> نکته</translate>  نکته:این کلاس در 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 در بوت استرپ ۴ در بخش بعدی بیشتر خواهید آموخت.

مثال


منابع آموزشی