ریسپانسیو

Bulma یک فریمورک mobile-first است.


به طور پیش فرض عمودی #

هر عنصر در mobile-first Bulma است و به صورت عمودی بهینه می شود، بنابراین به طور پیش فرض در تلفن همراه:

  • columns به صورت عمودی مرتب می شوند.
  • زیرمجموعه های کامپوننت level به صورت عمودی مرتب می شوند.
  • منوی nav پنهان خواهد شد.

با این وجود می توانید با افزودن اصلاح کننده is-mobile طرح افقی را برای هر دو columns یا level اعمال کنید.


نقاط شکست #

bulma دارای 5 نقطه شکست است:

  • mobile: تا 768px
  • tablet: از 769px
  • desktop: از 1024px
  • widescreen: از 1216px
  • fullhd: از 1408px

Bulma از 9 ترکیب ریسپانسیو استفاده می کند:

  • =mobile
    تا 768px
  • =tablet
    از 769px
  • =tablet-only
    از 769px تا 1023px
  • =touch
    تا 1023px
  • =desktop
    از 1024px
  • =desktop-only
    از 1024px تا 1215px
  • =widescreen
    از 1216px
  • =widescreen-only
    از 1216px تا 1407px
  • =fullhd
    از 1408px
Mobile
بزرگتر از 768px
Tablet
مابین 769px و 1023px
Desktop
مابین 1024px و 1215px
Widescreen
مابین 1216px و 1407px
FullHD
1408px و بیشتر

mobile

-

-

tablet

-

desktop

-

widescreen

-

fullhd

-

tablet-only

-

-

desktop-only

-

-

widescreen-only

-

touch

-

until-widescreen

-

until-fullhd

-


غیرفعال کردن نقاط شکست #

Since 0.7.0

به طور پیش فرض نقاط شکست $widescreen و $fullhd فعال هستند. شما می توانید با تنظیم کردن مقدار false آنها را غیرفعال کنید:

// Disable the widescreen breakpoint
$widescreen-enabled: false
                        
// Disable the fullhd breakpoint
$fullhd-enabled: false

متغیرها #

اینها متغیرهایی با یک مقدار هستند که به متغیر دیگری ارجاع می دهند

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$gap size 32px
$tablet size 769px
$desktop computed 960px + (2 * $gap)
$widescreen computed 1152px + (2 * $gap)
$fullhd computed 1344px + (2 * $gap)