의미 UI 그리드 클래스 대부분의 CSS 프레임 워크 그리드 클래스에서

Question

명확하게 예를 들어 부트 스트랩에 대한 정의는 사람이 그들이 무엇인지 알고 있지, 그리드 클래스가하지 않는 것

xs (for phones) 
sm (for tablets) 
md (for desktops) 
lg (for larger desktops) 

는 의미 UI를 통해 독서가?

Answer 1

의미 론적 의미에는 그리드 클래스가 있으며, 그들은 here입니다.

그러나 참조하는 것은 media queries으로 제어되는 크기입니다.

미디어 쿼리는 장치 사양에 따라 일부 규칙을 선택적으로 적용하는 방법입니다. 우리는 부트 스트랩 코드를 보면

우리가 같은 것들을 참조 :

@media (max-width: 767px) { 
    .visible-xs { 
     display: block !important; 
    } 
    table.visible-xs { 
     display: table !important; 
    } 
    tr.visible-xs { 
     display: table-row !important; 
    } 
    th.visible-xs, 
    td.visible-xs { 
     display: table-cell !important; 
    } 
    } 
    @media (max-width: 767px) { 
    .visible-xs-block { 
     display: block !important; 
    } 
    } 
    @media (max-width: 767px) { 
    .visible-xs-inline { 
     display: inline !important; 
    } 
    } 
    @media (max-width: 767px) { 
    .visible-xs-inline-block { 
     display: inline-block !important; 
    } 
    } 

을이 선택적 구성 요소를 보여주는 미디어 쿼리입니다, 지금은 의미 UI는 당신에게 그것의 구성 요소에 대한이 관심을 가지고이 명시 적으로 정의를 제공하지 않지만, 예를 들어 here 의미 UI는 containers에 규칙을 적용하고 동일한 용도로 사용할 수 있습니다

컨테이너가 응답하여 그들이 appearin있는 화면의 크기에 따라 최대 너비를 조정하도록 설계

지.