visible-** และ hidden-** ใน Bootstrap v4

21 ก.ย. 2017 , 4,572 Views   , หมวดหมู่ WebDesign โค๊ดดิ้ง   , ป้ายกำกับ:


The hidden-* and visible-* classes no longer exist in Bootstrap 4 Beta. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* display classes accordingly. Remember xs is the default (implied) breakpoint, unless overridden by a larger breakpoint.

  • hidden-xs-down = d-none d-sm-block
  • hidden-sm-down = d-none d-md-block
  • hidden-md-down = d-none d-lg-block
  • hidden-lg-down = d-none d-xl-block
  • hidden-xl-down = d-none (same as hidden)
  • 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 = d-xl-none
  • 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 (only) = 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 (only) = d-none d-xl-block

Demo of this responsive display classes in Bootstrap 4 beta

Also note that d-*-block can be replaced with d-*-inlined-*-flex, etc.. depending on the display type of the element. More on the display classes in beta

 

ดูเพิ่มเติม

https://stackoverflow.com/a/45844579


ป้ายกำกับ: