• Q&A
  • 회원가입
  • 로그인

[grid] BS3 - grid CSS (BS그리드CSS = BS반응형CSS = BS노출CSS) + BS프린트클래스 ★★★★★

BS 반응형 Hidden Visible 클래스
Class Extra  Small
(<768px)
Small
(≥768px)
Medium
(≥992px)
Large
 (≥1200px)
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
Visible Hidden Hidden Hidden
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
Hidden Visible Hidden Hidden
.visible-md-block
.visible-md-inline
.visible-md-inline-block
Hidden Hidden Visible Hidden
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
Hidden Hidden Hidden Visible
.hidden-xs Hidden Visible Visible Visible
.hidden-sm Visible Hidden Visible Visible
.hidden-md Visible Visible Hidden Visible
.hidden-lg Visible Visible Visible Hidden

PS.
 
1.
BS v.3.2.0 변경사항 (Amina빌더: BS v3.2.0)
① .visible-xs, .visible-sm, .visible-md , .visible-lg 클래스 폐기예고. (단, table 관련 요소 토글링엔 사용)
② visible-기기-diplay성질 형식 클래스로 대체됨.
 
2.
visible의 Display 상태별 CSS
클래스 CSS display
.visible-*-block  (기존: .visible-*) display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;
 
 
Print Class (프린트 클래스)
클래스  브라우저  프린트 
.visible-print-block
.visible-print-inline
.visible-print-inline-block 
Hidden  Visible 
.hidden-print  Visible  Hidden 
 
BS v.3.2.0 변경사항
.visible-print 클래스는 BS v3.2.0 부터 폐기예고되고, .visible-print-block 클래스로 대체됨.
.visible-print 클래스 <table> 관련 요소처럼 특수한 경우엔 여전히 사용.

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012