بوت استرپ دارای قابلیت های جذابی است که بدون نیاز به نوشتن خط کد css می توانید از آن استفاده کنید .
در این قسمت از آموزش بوت استرپ 4 قرار است با هم در رابطه با Utilities صحبت کنیم .
پیشنهاد می کنم قبل از ورود به این قسمت ، قسمت های پیشین دوره رایگان بوت استرپ 4 را مطالعه فرمایید.
Utilities یا راهنماهای کمکی
بوت استرپ 4 دارای کلاسهای کمکی زیادی است که به شما کمک می کند در کمترین زمان بدون استفاده از نوشتن خط کد css به نتیجه ی دلخواه خود برسید.
حاشیه ها ( Borders )
برای افزودن یا حذف کردن حاشیه ها می توانید از کلاس .border استفاده کنید. برای درک بهتر به قطعه کد زیر توجه کنید.
|
1 2 3 4 5 6 |
<span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-right-0"></span> <span class="border border-bottom-0"></span> <span class="border border-left-0"></span> |
حاشیه های رنگی
تعریف کردن حاشیه های رنگی طبق آموزش جلسه چهارم بوت استرپ کار ساده ای است برای تعریف کردن انواع رنگ کافی است به قطعه کد زیر توجه کنید.
|
1 2 3 4 5 6 7 8 9 |
<span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> <span class="border border-info"></span> <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></span> |
شعاع مرزی ( Border Radius )
با استفاده از کلاس rounded می توانید حاشیه های گرد به المان خود اضافه کنید . برای درک بهتر قطعه کد زیر را اجرا کنید.
|
1 2 3 4 5 6 7 8 9 |
<span class="rounded-sm"></span> <span class="rounded"></span> <span class="rounded-lg"></span> <span class="rounded-top"></span> <span class="rounded-right"></span> <span class="rounded-bottom"></span> <span class="rounded-left"></span> <span class="rounded-circle"></span> <span class="rounded-0"></span> |
حالت شناور و ثابت کردن ( Float and Clearfix )
برای شناور کردن المان به سمت راست از کلاس .float-right ، برای شناور کردن المان به سمت چپ از کلاس .float-left و ثابت کردن و از بین بردن حالت شناور از کلاس باید استفاده کرد ، برای درک بهتر به قطعه کد زیر توجه کنید:
|
1 2 3 4 |
<div class="clearfix"> <span class="float-left">Float left</span> <span class="float-right">Float right</span> </div> |
حالت واکنشگرای شناور ( Responsive Floats )
شناورکردن یک المان به سمت راست یا چپ براساس عرض مانیتور ، با استفاده از کلاس های واکنشگرا .float-*-left|right اتفاق می افتد. ( بجای علامت ستاره از عبارت های sm برای عرض های کوچکتر یا مساوی 576px و md برای عرض های کوچتر یا مساوی 768px و lg برای عرض های کوچکتر یا مساوی 992px و xl برای عرضهای کوچکتر یا مساوی 1200px استفاده می شود.)
برای درک بهتر به قطعه کد زیر توجه کنید.
|
1 2 3 4 5 |
<div class="float-sm-right">Float right on small screens or wider</div><br> <div class="float-md-right">Float right on medium screens or wider</div><br> <div class="float-lg-right">Float right on large screens or wider</div><br> <div class="float-xl-right">Float right on extra large screens or wider</div><br> <div class="float-none">Float none</div> |
وسط چین
با استفاده از کلاس .mx-auto المان خود را وسط چین کنید ( این کلاس هم از سمت راست و هم از سمت چپ حالت شناور اتوماتیک اضافه میکند ، float-right:auto; float-left:auto;
برای درک بهتر به قطعه کد زیر توجه کنید:
|
1 |
<div class="mx-auto bg-warning" style="width:150px">Centered</div> |
عرض
برای تنظیم کردن عرض کافی است از کلاس w-* استفاده کنیم . (.w-25, .w-50, .w-75, .w-100, .mw-100 ) برای درک بهتر به قطعه کد زیر توجه کنید :
|
1 2 3 4 5 |
<div class="w-25 bg-warning">Width 25%</div> <div class="w-50 bg-warning">Width 50%</div> <div class="w-75 bg-warning">Width 75%</div> <div class="w-100 bg-warning">Width 100%</div> <div class="mw-100 bg-warning">Max Width 100%</div> |
ارتفاع
برای تنظیم کردن ارتفاع هم باید مانند عرض عمل کرد با این تفاوت که کلاس ارتفاع h-* است. ( .h-25, .h-50, .h-75, .h-100, .mh-100 ) برای درک بهتر به قطعه کد زیر توجه کنید :
|
1 2 3 4 5 6 7 |
<div style="height:200px;background-color:#ddd"> <div class="h-25 bg-warning">Height 25%</div> <div class="h-50 bg-warning">Height 50%</div> <div class="h-75 bg-warning">Height 75%</div> <div class="h-100 bg-warning">Height 100%</div> <div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div> </div> |
فاصله
بوت استرپ 4 دارای طیف گسترده ای از کلاسهای مفید margin و padding واکنشگرا است. کلاسهای دارای نقاطی برای تغییر شرایط هستند : xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):
کلاسها در قالب روبرو استفاده می شوند : {اندازه}-{جهت}{ویژگی} برای حالت xs ، برای باقی حالت از قالب {اندازه}-{نقطه تغییر}-{جهت}{ویژگی} استفاده می شود.
برخی از ویژگی ها :
- m برای margin
- p برای padding
برخی از جهت ها:
- t برای margin-top یا padding-top
- b برای margin-bottom یا padding-bottom
- l برای margin-left یا padding-left
- r برای margin-right یا padding-right
- x برای padding-left و padding-right یا margin-left و margin-right
- y برای padding-top و padding-bottom یا margin-top و margin-bottom
- هنگامی که المان جهت خالی باشد برای چهارجهت margin یا padding اعمال می شود.
برخی از اندازه ها:
- 0 برای قراردادن margin یا padding برابر 0 است.
- 1 برای قراردادن margin یا padding برابر .25rem (4px اگر فونت باشد 16px) است.
- 2 برای قراردادن margin یا padding برابر .5rem (8px اگر فونت باشد 16px) است.
- 3 برای قراردادن margin یا padding برابر 1rem (16px اگر فونت باشد 16px) است.
- 4 برای قراردادن margin یا padding برابر 1.5rem (24px اگر فونت باشد 16px) است.
- 5 برای قراردادن margin یا padding برابر 3rem (48px اگر فونت باشد 16px) است.
- auto برای قراردادن margin:auto; است.
به یاد داشته باشید که margin را می توانید با استفاده از کلاس n1 , n2 , n3 ,n4 و n5 منفی کنید.
برای درک بهتر استفاده از فاصله ها به قطعه کد زیر توجه کنید :
|
1 2 3 |
<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div> <div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div> <div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div> |
سایه ها
برای افزودن سایه به المان ها کافی است از کلاس shadow- استفاده کنید. برای درک بهتر به قطعه کد زیر توجه کنید :
|
1 2 3 4 |
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div> <div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div> <div class="shadow p-4 mb-4 bg-white">Default shadow</div> <div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div> |
تراز عمودی
از کلاسهای align- برای تغییر ترازبندی عناصر استفاده کنید (فقط در عناصر درون خطی ، بلوک درون خطی ، جدول درون جدول و سلول جدول کار می کند):
|
1 2 3 4 5 6 |
<span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align-middle">middle</span> <span class="align-bottom">bottom</span> <span class="align-text-top">text-top</span> <span class="align-text-bottom">text-bottom</span> |
Embed واکنشگرا
Embedهای ویدئویی واکنشگرا یا اسلایدشو را بر اساس عرض والدین ایجاد کنید. آیتم .embed-responsive را به هر عنصر تعبیه شده (مانند < iframe > یا < video >) در یک عنصر والد با .embed-responsive و نسبت ابعاد مورد نظر خود اضافه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- 21:9 aspect ratio --> <div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 1:1 aspect ratio --> <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="..."></iframe> </div> |
نمایش
با استفاده از کلاس های .visible یا .invisible قابلیت نمایش المان را کنترل کنید. به یاد داشته باشید که این کلاس ها مقدار نمایش CSS را تغییر نمی دهند آنها فقط ویژگی visibility:visible یا visibility:hidden را به المان اضافه می کنند.
|
1 2 |
<div class="visible">I am visible</div> <div class="invisible">I am invisible</div> |
موقعیت ها
با استفاده از کلاس .fixed-top می توانید یک المان را ثابت در بالای صفحه ی خود داشته باشید .
|
1 2 3 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav> |
با استفاده از کلاس .fixed-bottom می توانید یک المان را ثابت در پایین صفحه ی خود داشته باشید.
|
1 2 3 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav> |
با استفاده از کلاس .sticky-top می توانید یک المان را هنگامی که صفحه از روی المان عبور می کند ( اسکرول می کند ) ثابت در بالا نگه دارید . به یاد داشته باشید که این کلاس در IE11 و نسخه های قبلی کار نمی کند.
|
1 2 3 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav> |
نماد بستن
برای سبک کردن یک نماد بسته از کلاس .close استفاده کنید. این اغلب برای هشدارها و روشهای معمول استفاده می شود. توجه داشته باشید که ما از & times؛ نماد برای ایجاد نماد واقعی (“x” با ظاهر بهتر). همچنین توجه داشته باشید که به طور پیش فرض درست شناور است:
|
1 |
<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> |
رنگ ها
در رابطه با انواع رنگ ها در قسمت چهارم آموزش بوت استرپ به صورت کامل توضیحاتی داده ایم پیشنهاد میکنم برای اطلاعات بیشتر به آموزش جلسه چهارم بوت استرپ مراجعه فرمایید.
عناصر بلوک
برای ایجاد یک عنصر به یک عنصر بلوک ، کلاس .d-block را اضافه کنید. برای کنترل زمانی که عنصر باید یک عنصر بلوک در یک عرض خاص صفحه باشد ، از هر یک از کلاس های d-*-block استفاده کنید:
فلکس
برای کنترل طرح با flexbox از کلاسهای .flex-* استفاده کنید.
جلسه ی بعدی توضیحات کاملتری در رابطه با فلکس ها باهم بررسی خواهیم کرد.
سخن پایانی
پیشنهاد میکنم برای دریافت اطلاعات بیشتر به سایت getbootstrap مراجعه کنید . همچنین می توانید از سایر جلسات دوره رایگان بوت استرپ 4 استفاده کیند.
