آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کار با کلاس های کاربردی Utility Classes در Bootstrap 4

دوره های مرتبط با این مقاله

آموزش کار با کلاس های کاربردی Utility Classes Bootstrap 4:

بوت استرپ 4، دارای تعداد زیادی کلاس کاربردی / کمکی موسوم به Utility Classes است که به شما امکان می دهد بدون استفاده از هیچ کد یا استایل CSS، قالب مورد نظرتان را به المنت هدف، اعمال کنید.

آموزش کار با کلاس خطوط حاشیه border در بوت استرپ 4:

به وسیله کلاس border در بوت استرپ 4، می توانید خطوط حاشیه برای یک المنت اضافه یا حذف نمایید.

شکل زیر، مدل های مختلف تعیین خطوط حاشیه در Bootstrap 4 را نشان می دهد.

آموزش کار با کلاس خطوط حاشیه border در بوت استرپ 4

مثال : در کد مثال عملی زیر، نحوه تعیین خطوط حاشیه به دور یک عنصر را نشان داده ایم. در مثال اول، المنت span در هر چهار طرف دارای خطوط حاشیه خواهد بود ولی در مثال های بعد با اعمال عدد صفر و تعیین جهت، خطوط حاشیه مورد نظر را حذف کرده ایم :

آموزش تعیین رنگ خطوط حاشیه با کلاس border در بوت استرپ 4:

به وسیله کلاس اصلی border و کلاس های متنی رنگی ویژه بوت استرپ 4، می توانید رنگ های خاص و مفهومی را برای خطوط حاشیه المنت تعیین نمایید. در عکس زیر، مدل های مختلف تعیین رنگ برای خطوط حاشیه عنصر، نشان داده شده است :

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

مثال: در کد مثال عملی زیر : برای چندین المنت Span خطوط حاشیه رنگی با استفاده از کلاس متنی رنگی ویژه بوت استرپ 4، تعیین کرده ایم :

آموزش تعیین خطوط حاشیه گرد Border Radius در Bootstrap 4:

در شکل زیر نحوه تعیین و ایجاد گوشه های گرد برای خطوط حاشیه یک عنصر را در حالت های مختلف نشان داده ایم :

آموزش تعیین خطوط حاشیه گرد Border Radius در Bootstrap 4

به وسیله کلاس rounded و سایر کلاس های وابسته می توانید تعیین کنید گوشه های خطوط حاشیه یک عنصر به صورت گرد باشد. با اعمال کلاس rounded، هر چهارگوش عنصر گرد خواهد شد، اما با تعیین جهت بالا (top)، پایین (bottum) و چپ (left) و راست (right) می توانید گرد شدن هر طرف را به صور مجزا مشخص نمایید.

همچنین به وسیله اضافه کردن مقادیری مثل sm یا Lg تعیین کنید فقط در برخی سایز صفحه های نمایش، خطوط حاشیه گرد شوند. انواع حالت های مختلف و خروجی آن ها را در کد مثال عملی زیر، نشان داده ایم :

آموزش تعیین جهت شناوری Float عنصر در بوت استرپ 4:

در شکل زیر، انواع حالت شناوری یک عنصر یا float آن در عنصر دربرگیرنده را نشان داده ایم :

آموزش تعیین جهت شناوری Float عنصر در بوت استرپ 4

به وسیله کلاس float-right می توانید عنصر را در جهت راست و با کلاس float-left، عنصر را در جهت چپ، تراز نمایید.

همچنین به وسیله کلاس clearfix می توانید اعمال هرگونه float به عنصر را از بین برده و حالت پیش فرض را نمایش دهید.

مثال : در کد مثال عملی زیر، انواع حالت float را با مثال و سورس کد نشان داده ایم :

مثال 4

Float left Float right
امتحان کنید

آموزش تعیین float به صورت ریسپانسیو Responsive:

می توانید به وسیله کلاس هایی خاص، شناوری یا Float عنصر را بر حسب سایز صفحه نمایش تغییر دهید. برای این منظور از کلاس float-*-left/right استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته و جهت هم بایستی یا چپ (left) و یا راست (right) باشد :

  • اندازه sm برای صفحه نمایش های بزرگتر از 576 پیکسل.
  • اندازه md برای صفحه نمایش های بزرگتر از 768 پیکسل.
  • اندازه lg برای صفحه نمایش های بزرگتر از 992 پیکسل.
  • اندازه xl برای صفحه نمایش بزرگتر از 1200 پیکسل و ... .

مثال : در کد مثال عملی زیر، نحوه استفاده از انواع کلاس های ریسپانسیو responsive float را در عمل نشان داده ایم :

مثال 5

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float none
امتحان کنید

آموزش تعیین چیدمان وسط Center Align در Bootstrap 4:

نحوه تراز شدن مرکزی یک عنصر در صفحه به شکل زیر است :

آموزش تعیین چیدمان وسط Center Align در Bootstrap 4

با اعمال کلاس mx-auto به یک عنصر (که باعث می شود مارجین چپ و راست آن برابر صفر شود)، وسط چین شده و در مرکز صفحه یا عنصر دربرگیرنده خود، قرار می گیرد. همانند کد مثال عملی زیر :

مثال 6

Centered
امتحان کنید

آموزش تعیین عرض (width) یک عنصر در Bootstrap 4:

در بوت استرپ 4، می توانید با کلاس های خاصی، عرض یک عنصر را سریع تعیین نمایید، همانند شکل زیر :

آموزش تعیین عرض (width) یک عنصر در Bootstrap 4

برای تعیین عرض عناصر در Bootstrap 4، می توانید از کلاس w-* استفاده نمایید که در آن * نشان دهنده میزان درصد عرض عنصر از 100 درصد عرض ممکن است. برای مثال کلاس هایی مثل w-25، w-50، w-100 و یا mw-100 که مورد آخر خلاصه حداکثر عرض مجاز یا max width است.

مثال : در کد مثال عملی زیر، چندین عنصر با عرض های 25 درصد تا 100 درصد، ایجاد کرده ایم :

مثال 7

Width 25%
Width 50%
Width 75%
Width 100%
Max Width 100%
امتحان کنید

آموزش تعیین ارتفاع (Hight) عنصر در بوت ساترپ 4:

به وسیله کلاس های خاصی در Bootstrap 4، می توانید ارتفاع یک عنصر را بسیار ساده تعیین نمایید، مثل شکل زیر :

آموزش تعیین ارتفاع (Hight) عنصر در بوت ساترپ 4

برای تعیین ارتفاع عناصر در Bootstrap 4، می توانید از کلاس h-* استفاده نمایید که در آن * نشان دهنده میزان درصد ارتفاع عنصر از 100 درصد ارتفاع ممکن است. برای مثال کلاس هایی مثل h- 25، h-50، h-75 و یا mh-100 که مورد آخر خلاصه حداکثر ارتفاع مجاز یا Max height است.

مثال : در کد مثال عملی زیر، چندین عنصر با ارتفاع های بین 25 درصد تا 100 درصد را به وسیله کلاس های جدید بوت استرپ 4، ایجاد کرده ایم :

مثال 8

Height 25%
Height 50%
Height 75%
Height 100%
Max Height 100%
امتحان کنید

آموزش تعیین فاصله (Spacing) در Bootstrap 4:

بوت استرپ 4، دارای رنج گسترده ای از کلاس های کمکی ویژه جهت تعیین فاصله بیرونی (margin) و حاشیه درونی (padding) می باشد.

این کلاس ها برای سایزهای مختلف صفحه نمایش به صورت زیر عمل می کند :

  • حالت xs برای صفحات کوچکتر از عرض 576 پیکسل.
  • حالت sm برای صفحات یزرگتر از عرض 576 پیکسل.
  • حالت md برای صفحات بزرگتر از عرض 768 پیکسل.
  • حالت lg برای صفحات بزرگتر از عرض 992 پیکسل.
  • حالت xl برای صفحات یزرگتر از عرض 1200 پیکسل.

این کلاس با فرمت های زیر، برای انواع اندازه صفحه نمایش به کار می روند :

  • فرمت حالت xs: {properts} {sides} -{size} = {خاصیت} {جهت ها}- {اندازه}
  • - فرمت حالت های sm، md، lg و xl :
  • {property} {sides} -{brealpoint} -{size} = {خاصیت} {جهت ها}{سایز صفحه نمایش}- {اندازه}

در فرمول فوق، property یا خاصیت می تواند یکی از دو مقدار زیر را داشته باشد :

  • مقدار m که تنظیم کننده حاشیه بیرونی یا margin است.
  • مقدار p که تنظیم کننده حاشیه درونی یا padding است.

همچنین مقدار sides یا جهت ها هم می تواند یکی از مقادیر زیر را داشته باشد :

  • مقدار t که تنظیم کننده حاشیه درونی بالا padding-top یا حاشیه بیرونی بالا margin-top است.
  • مقدار b که تعیین کننده حاشیه درونی پایین padding-bottom یا حاشیه بیرونی پایین margin-bottom است.
  • مقدار l که تنظیم کننده حاشیه درونی چپ padding-left و حاشیه بیرونی چپ margin-left است.
  • مقدار r که تعیین کننده حاشیه درونی راست padding-right و حاشیه بیرونی راست margin-right است.
  • مقدار x که می تواند هر دو حاشیه درونی راست و چپ (padding-right و padding-left) و هر دو حاشیه بیرونی راست و چپ (margin-right و margin-left) را تنظیم نماید.
  • مقدار y که می تواند هر دو حاشیه درونی بالا وپایین (padding-top و padding-bottom) و هر دو حاشیه بیرونی بالا و پایین (margin-top و margin-left) را تنظیم نماید.
  • مقدار خالی، اگر مقداری برای آن تعیین نشود، حاشیه درونی (padding) و حاشیه بیرونی (margin) هر 4 طرف عنصر را به اندازه تعیین شده، به صورت یکسان تنظیم می کند.

همچنین پارامتر اندازه یا Size نیز می تواند یکی از مقادیر زیر را داشته باشد :

  • مقدار 0، که حاشیه درونی (padding) و حاشیه بیرونی (margin) را برابر صفر، تنظیم می کند.
  • مقدار 1، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 0.25rem یا معادل 4 پیکسل در حالتی که اندازه فوت 16 پیکسل باشد، تنظیم می کند.
  • مقدار 2، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر با مقدار 0.5rem یا معادل 8 پیکسل، در حالتی که اندازه فونت 16 پیکسل باشد، تنظیم می کند.
  • مقدار 3، که حاشیه بیرونی (margin) و حاشیه درونی (padding) عنصر را برابر مقدار 1rem یا معادل 16 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.
  • مقدار 4، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 1.5rem یا معادل 24 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.
  • مقدار 5، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 3rem یا معادل 48 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.
  • مقدار auto که مارجین و padding عنصر را به صورت اتوماتیک تنظیم می کند.
نکته :

حاشیه بیرونی یا margin می تواند مقادیر منفی نیز داشته باشد. برای این منظور بایستی عدد n را در مقابل سایز هدف، قرار دهید، به صورت زیر :

  • مقدار n1، که مارجین را برابر مقدار منفی 0.25 rem یا منفی 4 پیکسل تعیین می کند.
  • مقدار n2، که مارجین را برابر مقدار منفی -0.5 rem یا منفی 8 پیکسل تعیین می کند.
  • مقدار n3، که مارجین را برابر مقدار منفی -1 rem یا منفی 16 پیکسل تعیین می کند.
  • مقدار n4، که مارجین را برابر مقدار منفی 1.5 rem یا منفی 24 پیکسل تعیین می کند.
  • مقدار n5، که مارجین را برابر مقدار منفی 3 rem یا منفی 48 پیکسل تعیین می کند.

مثال : در کد مثال عملی زیر، چند مثال از کلاس کاربردی ویژه تعیین فاصله را به کار برده و خروجی آن را نشان داده ایم :

مثال 9

I only have a top padding (1.5rem = 24px)
I have a padding on all sides (3rem = 48px)
I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)
امتحان کنید

سایر کلاس های تعیین مارجین و Padding در بوت استرپ 4، به صورت زیر هستند :

مرحله
توضیحات
کلاس m-#/m-*-#
مارجین را برای کلیه جستجوهای عنصر تعیین می کند.
کلاس mt-#/mt-*-#
مارجین بالا (margin-top) را برای عنصر، تعیین می کند.
کلاس mb-#/mb-*-#
مارجین پایین (margin-bottom) را برای عنصر، تعیین می کند.
کلاس ml-#/ml-*-#
مارجین چپ (margin-left) را برای عنصر، تنظیم می کند.
کلاس mr-#/mr-*-#
مارجین راست(right-margin) را برای عنصر، تنظیم می کند.
کلاس mx-#/mx-*-#
این کلاس، مارجین را برای هر دو جهت راست و چپ به صورت یکسان، تعیین می کند.
کلاس my-#/my-*-#
این کلاس، مارجین را برای هر دو جهت بالا و پایین به صورت یکسان، تعیین می کند.
کلاس p-#/p-*-#
این کلاس، padding را برای هر چهار طرف عنصر، به صورت یکسان، تنظیم می کند.
کلاس pt-#/pt-*-#
این کلاس، حاشیه درونی بالا (padding-top) را برای عنصر، تعیین می کند.
کلاس pb-#/pb-*-#
این کلاس، حاشیه درونی پایین (padding-bottom) را برای عنصر، تعیین می کند.
کلاس pl-#/pl-*-#
حاشیه درونی چپ (padding-left) را عنصر، تعیین می کند.
کلاس pr-#/pr-*-#
حاشیه درونی راست (padding-right) را برای عنصر،تعیین می کند.
کلاس py-#/py-*-#
حاشیه درونی را برای جهت های بالا و پایین، به صورت یکسان، تعیین می کند.
کلاس px-#/px-*-#
حاشیه درونی را برای هر دو جهت راست و چپ، به صورت یکسان، تعیین می کند.

آموزش تعیین سایه Shadow برای عنصر در Bootstrap 4:

شکل زیر، انواع حالت های ایجاد سایه برای یک عنصر را در بوت استرپ 4، نشان می دهد :

آموزش تعیین سایه Shadow برای عنصر در Bootstrap 4

از کلاس های shadow-*، می توانید برای تعیین سایه یک عنصر در Bootstrap 4 استفاده نمایید که در آن، * می تواند یکی از مقادیر زیر باشد :

  • مقدار none: در این حالت عنصر فاقد سایه یا shadow خواهد بود.
  • مقدار sm: در این حالت عنصر دارای سایه ی کوچک خواهد بود.
  • بدون مقدار : حالت پیش فرض بوده و عنصر دارای سایه یا shadow با اندازه معمول است.
  • مقدار Lg: در این حالت، عنصر دارای سایه ی بزرگتر از حالت معمول می شود.

مثال: در کد مثال عملی زیر : نحوه مختلف تعیین سایه یا shadow را برای یک عصنر آموزش داده ایم :

مثال 10

No shadow
Small shadow
Default shadow
Large shadow
امتحان کنید

آموزش ترازبندی عمومی Vertical Align در بوت استرپ 4:

به وسیله کلاس های align-*، می توانید ترازبندی عمودی عناصر را در یک خط، تعیین نمایید (این کلاس ها فقط بر روی عناصر درون خطی Inline، درون خطی تمام عرض inline-block، درون خطی جدولی Inline-table و عناصر درون خانه های جدول اثر دارد). مقدار * می تواند یکی از مقادیر زیر باشد :

مرحله
توضیحات
baseline
حالت پیش فرص – عنصر در راستای خط و حالت اصلی خود نمایش داده می شود.
top
عنصر در بالای خط نوشته قرار می گیرد.
middle
عنصر در وسط خط نوشته قرار می گیرد.
bottom
عنصر در پایین خط نوشته قرار می گیرد.
text-top
نوشته در حالت baseline نشان داده می شود.
text-bottom
نوشته بالاتر از حالت baseline نمایش داده می شود.

مثال 11

baseline
top
middle
bottom
text-top
text-bottom
امتحان کنید

آموزش ایجاد فایل های embed ریسپانسیو در Bootstrap4:

در بوت استرپ 4، می توانید فایل های الحاق شده به صفحه یا embed، مثل ویدیو یا اسلاید شو را به صورت ریسپانسیو و بر حسب عرض عنصر مادر آن نمایش دهید.

برای این منظور بایستی کلاس embed-responsive-item را به عنصر الحاق شده (embed) مثل تگ video یا iframe اضافه کرده آن را در یک عنصر مادر یا دربرگیرنده که دارای کلاس embed-responsive-* قرار دهید. علامت * هم تعيين كننده نسبت نمايش عرض و طول مثلا 16 در 9 يا 4 در 3 و ... مي باشد.

مثال : در کد مثال زیر، انواع حالت های نمایش یک ویدیو را با نسبت های مختلف و به صورت ریسپانسیو در عنصر مادر، نشان داده ایم :

آموزش نمایش یا عدم نمایش آیتم (Visibility) در Bootstrap 4:

به وسیله کلاس های visible (نمایان) و invisible (مخفی)، می توانید نمایش یا عدم نمایش عنصر را در بوت استرپ 4، کنترل نمایید.

نکته :

کلاس های visible و invisible، مقدار خاصیت CSS display را تغییر نمی دهند. آن ها فقط حالت عنصر را به visibility برابر visible یا hidden تغییر می دهند.

مثال : در کد مثال زیر، عنصر اول را نمایان و عنصر دوم را مخفی کرده ایم :

مثال 13

I am visible
امتحان کنید

آموزش تعیین موقعیت Position عنصر در بوت استرپ 4:

می توانید با استفاده از کلاسfixed-top در بوت استرپ 4 ، کاری کنید که عنصر به بالای صفحه چسبیده و همواره (حتی با اسکرول صفحه به پایین)، در جای خود ثابت نشان داده شود.

در کد مثال زیر، منوی navbar را با کلاس fixed-top، در بالای صفحه ثابت کرده ایم :

مثال 14

امتحان کنید

همچنین با استفاده از کلاس fixed-bottom، می توانید یک عنصر را در پایین صفحه چسبانده و همواره (حتی با اسکرول صفحه به بالا)، به طور ثابت در انتهای صفحه نمایش دهید.

در کد مثال دوم، منوی navbar را به انتهای صفحه، چسبانده ایم :

مثال 15

امتحان کنید

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

نکته :

این کلاس در مرورگر IE 11 کار نمی کند.

مثال : در کد مثال زیر، به منوی navbar کلاس sticky-top داده ایم. هنگامی که کاربر به پایین اسکرول کرده و موقعیت صفحه به آن می رسد، به بالای صفحه پرش کرده و به صورت ثابت در آنجا نمایش داده می شود :

مثال 16

امتحان کنید

آموزش ساخت دکمه بستن Close Icon در بوت استرپ 4:

می توانید از کلاس close، برای ایجاد یک دکمه بستن استفاده کنید. معمولا از این دکمه ها در کادرهای هشدار alert یا پیام modal، استفاده می شود.

اگر به مثال عملی زیر دقت نمایید، ما از کاراکتر ویژه × برای ایجاد یک ضربدر (×) که نمایانگر دکمه بستن است، استفاده کرده ایم. همچنین، علامت × به صورت پیش فرض، در سمت راست عنصر قرار می گیرد :

مثال 17


امتحان کنید

آموزش تعیین متن برای دستگاه های نابینایان Screen readers :

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

مثال 18

I will be hidden on all screens except for screen readers.
امتحان کنید

آموزش کار با رنگ ها Colors در بوت استرپ 4:

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

این کلاس ها به همراه توضیح مختصری راجع به آن ها، عبارتند از :

  • text-muted : رنگ خاکستری.
  • text-primary : رنگ آبی معمولا برای نمایش اطلاعات.
  • text-success : رنگ سبز که معمولا به معنای موفقیت است.
  • text-info : رنگ آبی متمایل به سبز، جهت نمایش اطلاعات.
  • text-warning : رنگ زرد معمولا برای نمایش هشدار به کاربر.
  • text-danger : رنگ قرمز برای نمایش اخطار به کاربر.
  • text-secondary : رنگ خاکستری.
  • text-white : رنگ سفید در نوشته.
  • text-dark : رنگ تیره.
  • text-body : رنگ پیش فرض body صفحه که معمولا مشکی است.
  • text-light : رنگ خاکستری بسیار کم رنگ.

مثال : در کد مثال عملی زیر، نحوه استفاده از کلیه کلاس های رنگی ویژه بوت استرپ 4 را نشان داده ایم :

مثال 19

Contextual Colors

Use the contextual classes to provide "meaning through colors":

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

This text is dark grey.

Default body color (often black).

This text is light grey (on white background).

This text is white (on white background).

امتحان کنید

کلاس های رنگی متنی ویژه بوت استرپ 4 را می توانید درون لینک ها (تگ a یا Link) نیز به کار ببرید. در این صورت، در هنگام عبور موس از روی نوشته (hover)، رنگ نوشته لینک کمی تیره تر هم می شود. همانند مثال عملی زیر :

همچنین می توانید با استفاده از کلاس های text-black-50 و text-white-50 به نوشته های سیاه یا سفید، پس زمینه و مقدار وضوح 50 درصد بدهید. نحوه کاربرد این کلاس ها را در کد مثال عملی زیر، نشان داده ایم :

مثال 21

Opacity Text Colors

Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Black text with 50% opacity on white background

White text with 50% opacity on black background

امتحان کنید

آموزش کار با رنگ های پس زمینه background Colors در بوت استرپ 4:

از کلاس های متنی رنگی ویژه بوت استرپ، برای تعیین رنگ پس زمینه عناصر می توانید استفاده نمایید. این کلاس ها استفاده از رنگ های محبوب را سریع کرده و همچنین بر حسب رنگ خود، پیام های مفهومی به کاربران القا می کنند. فقط توجه داشته باشید که کلاس های رنگ پس زمینه، رنگ نوشته عنصر را تعیین نمی کنند، بنابراین لازم است تا گاهی آن ها را به همراه یک کلاس text-* برای تعیین رنگ نوشته به کار ببرید.

کلاس های رنگی مخصوص پس زمینه در بوت استرپ 4 به همراه توضیح مختصر آن ها به شرح زیر هستند :

  • bg-primary : رنگ آبی و برای اعلام مطالب مهم.
  • bg-success : رنگ سبز و معمولا به معنای موفقیت.
  • bg-info : رنگ آبی متمایل به سبز برای نمایش داده ها.
  • bg-warning : رنگ زرد و معمولا برای صدور اخطار به کاربر.
  • bg-danger : رنگ قرمز و برای نمایش خطر.
  • bg-secondary : رنگ خاکستری.
  • bg-dark : رنگ تیره (که باید با رنگ نوشته روشن استفاده شود).
  • bg-light : رنگ خاکستری بسیار کم رنگ.

مثال : در کد مثال عملی زیر، انواع کلاس های مختلف رنگی بوت استرپ 4 برای پس زمینه را در عمل به کار برده ایم :

مثال 22

Contextual Backgrounds

Use the contextual background classes to provide "meaning through colors".

Note that you can also add a .text-* class if you want a different text color:

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

امتحان کنید

بررسی کلاس کار با متن و فن چاپ در بوت استرپ 4 :

همانطور که در بخش آموزش کار با متن و فن چاپ در Bootstrap 4 نشان داده ایم، از کلاس های ویژه typography برای کار با متن و نوشته در بوت استرپ 4 استفاده می شود. لیست زیر، تمامی این کلاس ها را به ترتیب معرفی کرده است :

مرحله
توضیحات
کلاس display-*
از کلاس های display، برای نمایش متن بزرگتر از تگ های هدر معمولی استفاده می شود (سایز فونت بزرگتر، ولی ضخامت نوشته کمتر) و دارای 4 کلاس است که می توانید از آن ها، انتخاب کنید : کلاس display-1، کلاس display-2، کلاس display-3 و کلاس display-4.
کلاس font-weight-bold
متن نوشته را توپر یا Bold می کند.
کلاس font-weight-bolder
متن نوشته را از حالت Bold هم توپر تر می کند.
کلاس font-weight-normal
متن نوشته را به صورت عادی نشان می دهد.
کلاس font-weight-light
متن نوشته را کمی نازک تر از حالت عادی نشان می دهد.
کلاس font-weight-lighter
متن نوشته را از حالت light، نازک تر نشان می دهد.
کلاس font-italic
نوشته را به صورت کج، نشان می دهد.
کلاس lead
متن یک پاراگراف را از حالت عادی بزرگتر و کمی کم رنگ تر و نازک تر، نشان می دهد تا برجسته شود.
کلاس small
نوشته را کمی از حالت عادی (85 درصد) ، کوچکتر نشان می دهد.
کلاس text-break
نوشته های طولانی را به چند خط تبدیل می کند تا از صفحه یا عنصر دربرگیرنده آن، بیرون نروند.
کلاس text-center
نوشته را وسط چین می کند.
کلاس text-decoration-none
خط زیر را از روی لینک ها حذف می کند.
کلاس text-left
نوشته را چپ چین می کند.
کلاس text-justify
نوشته را به صورت justify (تراز چپ و به طوری که کل خط را پر کند)، نمایش می دهد.
کلاس text-monospace
نوشته را با یک فونت خاصی و با فاصله بیشتر حروف از هم، نشان می دهد.
کلاس text-nowrap
نوشته را به صورت no wrap (همه متن را در یک خط نشان می دهد، حتی اگر از عرض صفحه یا عنصر دربرگیرنده آن بیرون بزند)، نشان می دهد.
کلاس text-lowercase
نوشته را به صورت تمام حروف کوچک نشان می دهد.
کلاس text-reset
رنگ یک متن یا لینک را به حالت اولیه بر می گرداند (در این صورت نوشته رنگ خود را از عنصر مادر به ارث می برد).
کلاس text-right
نوشته را به صورت راست چین، نمایش می دهد.
کلاس text-uppercase
نوشته را به صورت تمام حروف بزرگ نمایش می دهد.
کلاس text-capitalize
نوشته را به صورت حروف Capital (در انگلیسی، حرف اول هر کلمه را به صورت بزرگ در می آورد)، نشان می دهد.
کلاس initialism
نوشته را درون یک تگ abbr قرار داده که باعث می شود تا حروف آن کمی کوچکتر از حالت استاندارد باشند.
کلاس list-unstyled
آیکون های لیست و مارجین پیش فرض آن ها را حذف می کند (بر روی تگ های ul و ol کار می کند). این کلاس فقط بر روی اولین گروه فرزندان لیست تأثیر دارد، برای تأثیرگذاشتن بر لیست های تو در تو، بایستی به آن ها نیز این کلاس، اعمال شود.
کلاس list-inline
تمامی آیتم های لیست را در یک خط افقی قرار می دهد. این کلاس بایستی همراه با کلاس Inline-item برای هر عنصر li درون لیست، به کار رود.
کلاس pre-scrollable
باعث می شود تا یک عنصر تگ pre قابل اسکرول شدن شود.

آموزش کار با عناصر تمام عرض (Block) در بوت استرپ 4:

برای این که یک عنصر به صورت تمام عرض در صفحه یا عنصر دربرگیرنده آن نمایش داده شود، بایستی کلاس d-block را به آن اضافه کنید. همچنین می توانید از کلاس های d-*-block برای کنترل نمایش تمام عرض عنصر در هر یک از سایزهای صفحه نمایش نیز استفاده کنید که در آن * می تواند یکی از مقادیر sm، md، Lg یا xl باشد.

مثال : در کد مثال عملی زیر، یک عنصر تمام عرض (Block) و چند عنصر دیگر که در صفحه نمایش های مختلف تمام عرض هستند را ایجاد کرده ایم :

مثال 23

d-block
d-sm-block
d-md-block
d-lg-block
d-xl-block
امتحان کنید

معرفی سایر کلاس های نمایش Display عنصر در Bootstrap 4 :

سایر کلاس های کنترل نمایش (Display) عناصر در بوت استرپ 4 را در جدول زیر معرفی کرده ایم :

مرحله
توضیحات
کلاس d-none
عنصر را مخفی (hide) می کند.
کلاس d-*-none
به وسیله این کلاس ها، می توانید تعیین کنید عنصر در چه اندازه صفحه نمایش های مخفی یا hide باشد.
کلاس d-inline
عنصر را به صورت نمایش درون خطی یا inline نشان می دهد.
کلاس d-*-inline
به وسیله این کلاس ها، می توانید تعیین کنید عنصر مورد نظر در چه صفحه نمایش هایی (بر حسب اندازه)، به صورت خطی یا inline نمایش داده شود.
کلاس d-inline-block
به وسیله این کلاس یک عنصر به صورت درون خطی (inline) و تمام عرض (block) نمایش داده می شود.
کلاس d-*-inline-block
به وسیله این کلاس ها می توانید تعیین کنید تا عنصر مورد نظرتان در چه اندازه صفحه نمایش هایی، به صورت یک خطی یا Inline و تمام عرض یا block، نمایش داده شود.
کلاس d-table
باعث می شود تا یک عنصر به صورت جدول یا Table نمایش داده شود.
کلاس d-*-table
به وسیله این کلاس ها، می توانید تعیین کنید که یک عنصر، در چه صفحه نمایش هایی (بر حسب اندازه)، به صورت جدول یا table، نمایش داده شوند.
کلاس d-table-cell
عنصر را به صورت یک خانه جدول، نمایش می دهد.
کلاس d-*-table-cell
به وسیله این کلاس ها، می توانید تعیین کنید یک عنصر در چه اندازه صفحه نمایش هایی، به صورت یک خانه جدول یا cell نمایش داده شود.
کلاس d-table-row
عنصر مورد نظر را به صورت یک سطر (row) از جدول، نمایش می دهد.
کلاس d-*-table-row
به وسیله این کلاس ها، می توانید تعیین کنید تا در چه اندازه صفحه نمایش هایی ، عنصر مورد نظرتان به صورت یک ردیف یا سطر جدول نمایش داده شود.
کلاس d-flex
یک عنصر دربرگیرنده FlexBox ایجاد می کند که می تواند یک یا چند عنصر فرزند Flex داشته باشد.
کلاس d-*-flex
به وسیله این کلاس ها، می توانید تعیین کنید در چه اندازه صفحه نمایش هایی، عنصر مورد نظرتان به صورت یک عنصر flex در بیاید.
کلاس d-inline-flex
یک عنصر دربرگیرنده فلکس باکس درون خطی (inline) ایجاد می کند.
کلاس d-*-inline-flex
به وسیله این کلاس ها، می توانید تعیین کنید تا یک عنصر، در چه اندازه صفحه نمایش هایی به صورت یک عنصر درون خطی فلکس باکس، نشان داده شود.

آموزش کار با Flex در Bootstrap 4 :

می توانید از کلاس flex-* برای کنترل نحوه نمایش و قالب بندی (layout) یک عنصر توسط FlexBox، استفاده کنید.

برای دریافت اطلاعات بیشتر، به بخش آموزش کاربرد FlexBox در سایت تحلیل داده بروید.

علامت * در کلاس فوق می تواند یکی از مقادیر sm، md، lg و یا xl را داشته باشد که تعیین کننده سایز صفحه نمایش است.

در عکس زیر ، مثال های مختلفی از تراز بندی عناصر با FlexBox را نشان داده ایم :

آموزش کار با Flex در Bootstrap 4
  • 35
  •    6
  • تاریخ ارسال :   1398/08/13

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .