وبگرانآموزش وردپرسکلاس های مهم bootstrap 4

کلاس های مهم bootstrap 4

کلاس های مهم bootstrap 4

تقریبا یک سالی هست که بوت استرپ ۴ ارائه شده است ولی بسیاری از کاربران هنوز هم با آن راحت نباشند یا آن را پر از کلاس های اضافی تصور کنند در این مقاله می خواهیم شما را با کلاس های مهم bootstrap 4 آشنا کنیم و بگوییم چقدر این کلاس ها برای طراحان و توسعه دهندگان وب سایت مهم و کاربردی است پس در ادامه با وبگران همراه باشید.

در ابتدا دو کلاس را معرفی می کنیم که برای padding و margin است:

<!-- برای padding و margin به طور کلی -->
pt-x
mx-x

<!-- به قسمت بالا فاطله می دهد -->
pt-x
mt-x

همانطور که احتمالا حدس میزنید pb-x  و tr-x و pl-x هم برای فاصله دادن به پایین و چپ و راست کاربرد دارد.

x هم یک عدد است که بین ۲ تا ۵ می تواند باشد.

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

hidden-xs-down (hidden-xs) = d-none d-sm-block
hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down (n/a 3.x) = d-none (same as hidden)
Show/hide for breakpoint and up:

hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up (n/a 3.x) = d-xl-none
Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (n/a 3.x) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (n/a 3.x) = d-none d-xl-block

شاید بخواهید یک المنتی که در موبایل آخر نشان می دهد را به بالای عنصر کناری آن بیاورید:

order-first order-lg-1

 

 


اشتراگ گذاری در:
اگه خوبه لایکش کن




دیدگاه بگذارید

avatar
  Subscribe  
Notify of