آموزش کلاس های کاربردی (Utilities) در بوت استرپ

بوت استرپ کلاس های کاربردی و کمکی زیادی دارد تا المان ها را به سرعت و بدون نیاز به استفاده از کد css استایل دهی کنید.

در این آموزش انواع کلاس های Utilities در بوت استرپ را به شما کاربران خواهیم آموخت.

هر کلاس کاربردی (Utilities) آماده و زیبا در بوت استرپ ۴ را با ذکر مثال برایتان توضیح میدهیم.

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

در این مطلب با آموزش مبحث کلاس های کاربردی (Utilities) در بوت استرپ همراه ما باشید.

Borders :

از کلاس های برای افزودن یا حذف border در یک المان استفاده کنید.

برای توضیح بیشتر مثال زیر را دنبال کنید:

کدهای قسمت style

[php]

<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>

[/php]

کدهای قسمت body

[php]

<div class=”container”>
<h2>Borders</h2>
<p>Use the border classes to add or remove borders from an element:</p>
<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>
</div>

[/php]

خروجی کدهای مثال بالا :

borders

Border Color :

با هر یک از کلاس های متنی رنگ جدول یک رنگ به حاشیه ی border اضافه کنید.

برای مثال :

[php]

<div class=”container”>
<h2>Borders</h2>
<p>Use a contextual border color to add a color to the border:</p>
<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>
</div>

[/php]

تصویر خروجی مثال بالا :

border colors

Border Radius :

شما میتوانید گوشه های جدول را با استفاده از کلاس rounded گرد کنید.

برای مثال :

کدهای قسمت style

[php]

<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>

[/php]

کدهای قسمت body

[php]

<div class=”container”>
<h2>Borders</h2>
<p>Round the corner of an element with the rounded classes:</p>
<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>
</div>

[/php]

تصویر زیر خروجی مثال بالا :

border radios

Float and Clearfix :

با استفاده از کلاس float. میتوانید یک المان را در سمت راست یا سمت چپ قرار دهید.

مثال :

[php]

<div class=”container”>
<h2>Float</h2>
<p>Float an element to the right with the .float-right class or to the left with .float-left, and clear floats with the .clearfix class.</p>
<div class=”clearfix”>
<span class=”float-left”>Float left</span>
<span class=”float-right”>Float right</span>
</div>
</div>

[/php]

خروجی مثال بالا :

float

Responsive Floats :

میتوانید حالت float را به صورت ریسپانسیو بر اساس سایز صفحه تنظیم کنید.

برای توضیح به مثال زیر توجه کنید :

[php]

<div class=”container”>
<h2>Responsive Floats</h2>
<p>Float an element to the left or to the right depending on screen width, with the responsive float classes .float-*-left|right (where * is sm, md, lg or xl).</p>
<p>Resize the browser window to see the effect.</p>
<div class=”clearfix”>
<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>
</div>
</div>

[/php]

تصویر مثال ریسپانسیو :

responsive floats

Center Align :

یک عنصر را با استفاده از کلاس mx-auto. در قسمت وسط صفحه قرار دهید.

برای مثال :

[php]

<div class=”container”>
<h1>Horizontal Centering</h1>
<p>Center an element with the .mx-auto class:</p>
<div class=”mx-auto bg-warning” style=”width:150px”>Centered</div>
</div>

[/php]

تصویر خروجی مثال بالا :

centered

Width :

عرض هر المان را با استفاده از کلاس w-*. تعیین نمایید: مثلا w-25.

مثال زیر را دنبال کنید:

[php]

<div class=”container”>
<h1>Width Utilities</h1>
<p>Set the width of an element with the w-* classes:</p>
<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>
</div>

[/php]

تصویر خروجی مثال بالا :

width utilities

Height :

ارتفاع عناصر را با استفاده از کلاس h-* تعیین نمایید: مثلا  h-25.

مثال زیر را ببینید :

[php]

<div class=”container”>
<h1>Height Utilities</h1>
<p>Set the height of an element with the w-* classes:</p>
<div style=”height:200px;background-color:#ddd”>
<div class=”h-25 d-inline-block p-2 bg-warning”>Height 25%</div>
<div class=”h-50 d-inline-block p-2 bg-warning”>Height 50%</div>
<div class=”h-75 d-inline-block p-2 bg-warning”>Height 75%</div>
<div class=”h-100 d-inline-block p-2 bg-warning”>Height 100%</div>
<div class=”mh-100 d-inline-block p-2 bg-warning” style=”height:500px”>Max Height 100%</div>
</div>
</div>

[/php]

خروجی مثال بالا :

height utilities

Spacing :

بوت استرپ ۴ دارای طیف گسترده ای از کلاس های کاربردی padding و margin است.

• (xs (<=576px
• (sm (>=576px
• (md (>=768px
• (lg (>=992px
• (xl (>=1200px

[php]

<div class=”container”>
<h1>Spacing Utilities</h1>
<p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
<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>
</div>

[/php]

خروجی مثال بالا :

spacing

Shadows :

برای سایه دادن به عناصر بوت استرپ از کلاس shadow- استفاده کنید.

برای توضیح بیشتر مثال زیر را دنبال کنید:

[php]

<div class=”container”>
<h1>Shadows</h1>
<p>Use the shadow- classes to to add shadows to an element:</p>
<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>
</div>

[/php]

تصویر خروجی مثال بالا:

shadows

Vertical Align :

از کلاس های align. برای برای تغییر جهت قرار گیری عناصر استفاده نمایید.

نکته : این کلاس فقط روی عناصر درون خطی ، جداول داخلی و جداول سلولی کار میکند.

مثال :

[php]

<div class=”container”>
<h1>Vertical Align</h1>
<p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p>
<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>
</div>

[/php]

خروجی مثال بالا :

vertical align

Visibility :

برای کنترل قابلیت دید عناصر از کلاس های قابل مشاهده یا از کلاس های غیر قابل مشاهده استفاده نمایید.

مثال :

[php]

<div class=”container”>
<h1>Visibility</h1>
<p>Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden to an element:</p>
<div class=”visible bg-success”>I am visible</div>
<div class=”invisible bg-warning”>I am invisible</div>
</div>

[/php]

تصویر خروجی مثال بالا :

visibility

Position :

از کلاس fixed-top. میتوانید برای قرار گرفتن عناصر در سمت بالا ی صفحه استفاده کنید.

مثال :

[php]

<nav class=”navbar navbar-expand-sm bg-dark navbar-dark fixed-top”>
<a class=”navbar-brand” href=”#”>Logo</a>
<ul class=”navbar-nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
</ul>
</nav>

<div class=”container-fluid” style=”margin-top:80px”>
<h3>Top Fixed Navbar</h3>
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
<h1>Scroll this page to see the effect</h1>
</div>

[/php]

خروجی مثال بالا :

fixed-top

نکته :

از کلاس fixed-bottom. برای فیکس کردن عناصر در پایین صفحه استفاده کنید.

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

Close icon :

از کلاس close. برای ایجاد آیکون بستن پنجره برای هشدار ها و ماژول ها استفاده میشود.

این آیکون به طور پیش فرض در سمت راست شناور میشود.

مثال :

[php]

<div class=”clearfix”>
<button type=”button” class=”close”>&times;</button>
</div>

[/php]

تصویر خروجی مثال بالا :

close icon

Screenreaders :

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

مثال :

[php]

<div class=”container mt-3″>
<h2>Screen readers</h2>
<p>Use the .sr-only class to hide an element on all devices, except screen readers:</p>
<span class=”sr-only”>I will be hidden on all screens except for screen readers.</span>
</div>

[/php]

خروجی مثال بالا :

screen readers

Colors :

همانطور که در فصل رنگ ها توضیح داده شده است ، در اینجا لیستی از کلیه کلاس های رنگ متن و پس زمینه آورده شده است.

کلاس های مربوط به رنگ متن : text-danger .text-warning .text-info .text-success  .text-primary  .text-muted. …

مثال :

[php]

<div class=”container”>
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide “meaning through colors”:</p>
<p class=”text-muted”>This text is muted.</p>
<p class=”text-primary”>This text is important.</p>
<p class=”text-success”>This text indicates success.</p>
<p class=”text-info”>This text represents some information.</p>
<p class=”text-warning”>This text represents a warning.</p>
<p class=”text-danger”>This text represents danger.</p>
<p class=”text-secondary”>Secondary text.</p>
<p class=”text-dark”>This text is dark grey.</p>
<p class=”text-body”>Default body color (often black).</p>
<p class=”text-light”>This text is light grey (on white background).</p>
<p class=”text-white”>This text is white (on white background).</p>
</div>

[/php]

خروجی کدهای مثال بالا :

contexual colors

Background Colors :

برای رنگ دادن به پس زمینه میتوانید از کلاس های bg-primary. و bg-success. و …. استفاده کنید.

برای توضیح بیشتر مثال زیر را دنبال کنید:

[php]

<div class=”container”>
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide “meaning through colors”.</p>
<p>Note that you can also add a .text-* class if you want a different text color:</p>
<p class=”bg-primary text-white”>This text is important.</p>
<p class=”bg-success text-white”>This text indicates success.</p>
<p class=”bg-info text-white”>This text represents some information.</p>
<p class=”bg-warning text-white”>This text represents a warning.</p>
<p class=”bg-danger text-white”>This text represents danger.</p>
<p class=”bg-secondary text-white”>Secondary background color.</p>
<p class=”bg-dark text-white”>Dark grey background color.</p>
<p class=”bg-light text-dark”>Light grey background color.</p>
</div>

[/php]

تصویر مثال بالا :

contexual background

Block Elements :

برای تبدیل یک عنصر به عنصر بلاک از کلاس d-block استفاده کنید.

مثال زیر را دنبال کنید:

[php]

<div class=”container mt-3″>
<h2>Display Utilities</h2>
<p>To create a block element, add the d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width.</p>
<p>Resize the browser window to see the effect.</p>
<span class=”d-block bg-success”>d-block</span>
<span class=”d-sm-block bg-success”>d-sm-block</span>
<span class=”d-md-block bg-success”>d-md-block</span>
<span class=”d-lg-block bg-success”>d-lg-block</span>
<span class=”d-xl-block bg-success”>d-xl-block</span>
</div>

[/php]

خروجی مثال بالا :

display utilites