جستجو برای:
سبد خرید 0
  • خانه
  • آموزش وردپرس
  • قالب وردپرس
  • افزونه وردپرس
  • آموزش html
  • آموزش php
  • فتوشاپ
  • آموزش MY SQL
  • آموزش css
  • آموزش bootstrap
  • برنامه نویسی php
  • JQuery
  • وردپرس
  • درباره ما
  • تماس با ما
  • آموزش ++C
  • آموزش JavaScript
  • آموزش اندروید

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • 09339562980
  • info@parniantarh.ir
perm_identity
سبد خرید 0
  • آخرین محصولات
  • آخرین مطالب آموزشی
0
پرنیان طرح
  • خانه
  • وردپرس
    • آموزش وردپرس
    • قالب وردپرس
    • افزونه وردپرس
  • آموزش برنامه نویسی
    • آموزش bootstrap
    • آموزش android
    • آموزش php
    • آموزش html
    • آموزش css
    • آموزش ++C
    • آموزش #C
    • آموزش JQuery
    • آموزش JavaScript
    • آموزش My SQL
    • آموزشات اینستاگرام
    • مقالات آموزشی
    • Microsoft Word
    • Computer
    • PowerPoint
  • آموزش فتوشاپ
  • تماس با ما
  • درباره ما
ورود و ثبت نام

وبلاگ

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

access_time1398-08-17
perm_identity ارسال شده توسط بهاره حسنی
folder_open آموزش bootstrap
visibility 2.24k بازدید
کلاس های کاربردی

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

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

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

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

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

Borders :

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

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

کدهای قسمت style

PHP
1
2
3
4
5
6
7
8
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>

کدهای قسمت body

PHP
1
2
3
4
5
6
7
8
9
10
<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>

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

جداول
borders

Border Color :

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

برای مثال :

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

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

رنگ جداول
border colors

Border Radius :

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

برای مثال :

کدهای قسمت style

PHP
1
2
3
4
5
6
7
8
9
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>

کدهای قسمت body

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

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

حاشیه گرد
border radios

Float and Clearfix :

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

مثال :

PHP
1
2
3
4
5
6
7
8
<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>

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

کلاس float
float

Responsive Floats :

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

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
<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>

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

ریسپانسیو floats
responsive floats

Center Align :

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

برای مثال :

PHP
1
2
3
4
5
<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>

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

وسط چین
centered

Width :

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

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

PHP
1
2
3
4
5
6
7
8
9
<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>

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

عرض عناصر
width utilities

Height :

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

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

PHP
1
2
3
4
5
6
7
8
9
10
11
<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>

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

ارتفاع عناصر
height utilities

Spacing :

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

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

PHP
1
2
3
4
5
6
7
<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>

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

فاصله عناصر
spacing

Shadows :

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

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

PHP
1
2
3
4
5
6
7
8
<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>

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

سایه ها
shadows

Vertical Align :

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

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

مثال :

PHP
1
2
3
4
5
6
7
8
9
10
<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>

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

جهت عمودی
vertical align

Visibility :

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

مثال :

PHP
1
2
3
4
5
6
<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>

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

قابلیت مشاهده
visibility

Position :

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

مثال :

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

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

fix ماندن در بالای صفحه
fixed-top

نکته :

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

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

Close icon :

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

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

مثال :

PHP
1
2
3
<div class="clearfix">
<button type="button" class="close">&times;</button>
</div>

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

آیکون بستن پنجره
close icon

Screenreaders :

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

مثال :

PHP
1
2
3
4
5
<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>

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

خوانندگان صفحه
screen readers

Colors :

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

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

مثال :

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

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

رنگ های متنی
contexual colors

Background Colors :

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

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

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

رنگ پس زمینه متنی
contexual background

Block Elements :

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

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

PHP
1
2
3
4
5
6
7
8
9
10
<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>

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

عنصر بلاک
display utilites
5 / 5 ( 1 امتیاز )
برچسب ها: center alignPOSITIONshadowsspacingutilitiesvertical alignvisibilityکلاس های کاربردی


ارسال این مطلب برای دوستان خود :
مطالب زیر را حتما بخوانید
  • جستجو
    آموزش Filters در بوت استرپ

    2.16k بازدید

  • اشیا رسانه ای
    آموزش اشیاء رسانه ای در بوت استرپ

    2.16k بازدید

  • آیکون ها
    آیکون ها (Icons) در بوت استرپ

    2.25k بازدید

  • جعبه ی محتوا
    آموزش Flexbox در بوت استرپ

    2.22k بازدید

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

    2.17k بازدید

جدید تر آموزش Scrollspy (لینک های پرشی) در بوت استرپ
قدیمی تر آموزش Flexbox در بوت استرپ

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:

  • جدید
  • محبوب
  • دیدگاه ها
قبلی بعدی
فروش ویژه
  • بازی دوز دانلود سورس کد بازی دوز دونفره 11,000 تومان 7,000 تومان
  • دانلود رایگان سورس کد نمایش گرافیکی کارت ویزیت ها 10,000 تومان 5,000 تومان
  • فهرست پیشرفته و زیبا برای سایت فهرست پیشرفته و زیبا برای لبه های راست و چپ سایت 10,000 تومان 5,000 تومان
  • فرم لاگین (ورود) متحرک و جذاب ورژن 1 - Login form 15,000 تومان 1,000 تومان
  • سورس کد شبیه سازی بخش استارت ویندوز 8 در html و css 7,000 تومان 5,000 تومان
  • GRID VIEW دانلود سورس کد طرح شبکه بندی grid برای وب سایت و وبلاگ 13,000 تومان 6,000 تومان
  • افزونه Livicons برای وردپرس افزونه Livicons برای وردپرس - نسخه 2.7.3 69,000 تومان 19,000 تومان
  • داشبورد سورس کد قالب داشبورد و پروفایل کاربری با امکان شخصی سازی رایگان!
دسته‌ها
  • #ویدئوها
  • Computer
  • JQuery
  • Microsoft Word
  • PowerPoint
  • آموزش
  • آموزش #C
  • آموزش ++C
  • آموزش bootstrap
  • آموزش css
  • آموزش html
  • آموزش JavaScript
  • آموزش MY SQL
  • آموزش اندروید
  • آموزش قالب
  • آموزش های دامنه
  • آموزشات اینستاگرام
  • اخبار وردپرس
  • برنامه نویسی php
  • دسته‌بندی نشده
  • سئو و بهینه سازی
  • فتوشاپ
  • قالب های html – css
  • کسب و کار آنلاین
  • مقاله ها
  • هاست سی پنل Cpanel
  • وردپرس
جدیدترین نوشته ها
  • چگونه یک طراح و برنامه نویس حرفه ای وب شوید ؟ 1398-08-17
  • ۵ نکته مهم در تولید محتوای اینستاگرام – ویدئوی آموزشی 1398-08-17
  • تکنیک های تصمیم گیری سریع 1398-08-17
  • چند ایده خوب برای ساختن پست اینستاگرام 1398-08-17
  • کسب درآمد در خانه بدون سرمایه 1398-08-17
  • سایت های طراحی رایگان لوگو 1398-08-17
  • مهم ترین معیارهای آنالیز اینستاگرام چیست ؟ 1398-08-17
  • معرفی ۴ سایت مدیریت شبکه اجتماعی 1398-08-17

درباره پرنیان طرح

ما در پرنیان طرح به دنبال جلب رضایت مشتری و تبدیل کاربران موقت به کاربران دائمی هستیم و با تیمی 4 نفره همه روزه در تلاشیم تا بهترین کیفیت و خدمات را برای شما محیا سازیم.




  • location_on
    زنجان ، میدان شورا ، مرکز رشد جهاد ، واحد 15
  • phone_android
    024-33763920
  • perm_phone_msg
    09190605638
  • email
    info@parniantarh.ir
تمامی حقوق متعلق به وبسایت پرنیان طرح میباشد.
طراحی شده با ❤️ در پرنیان طرح
keyboard_arrow_up