부트 스트랩에서 col-lg- *, col-md- * 및 col-sm- *의 차이점은 무엇입니까?
무엇 사이의 차이 col-lg-*, col-md-*그리고 col-sm-*트위터 부트 스트랩에?
2019 업데이트 ...
부트 스트랩 3 그리드에서 오는 4 개 계층 (또는 "중단") ...
- 초소형 (스마트 폰용
.col-xs-*) - 소형 (태블릿 용
.col-sm-*) - 중간 (노트북 용
.col-md-*) - 대형 (노트북 / 데스크톱 용
.col-lg-*).
이러한 격자 크기를 사용하면 다른 너비에서 격자 동작을 제어 할 수 있습니다. 다른 계층은 CSS 미디어 쿼리에 의해 제어됩니다 .
부트 스트랩의 12 열 그리드에서
col-sm-3일반적인 작은 장치 너비 (> 768 픽셀)에서 너비 가 12 열 중 3 열 (25 % )
col-md-3일반적인 중간 장치 너비 (> 992 픽셀)에서 너비 가 12 열 중 3 열 (25 % )
작은 단계 ( xs, sm또는 md)도 대형 스크린 폭의 크기를 정의한다 . 따라서 모든 티어 에서 동일한 크기의 열에 대해 가장 작은 뷰포트의 너비를 설정하십시오.
<div class="col-lg-3 col-md-3 col-sm-3">..</div> 와 같다,
<div class="col-sm-3">..</div>
더 큰 계층이 암시됩니다. 때문에 col-sm-3수단 3 units on sm-and-up, 구체적 않는 다른 크기를 사용하는 더 큰 단계 재정의.
xs(기본)> 재정의 sm> 재정의 md> 재정의lg
클래스를 결합 하여 서로 다른 격자 크기 에서 열 너비 변경을 사용하십시오 . 반응 형 레이아웃이 만들어집니다.
<div class="col-md-3 col-sm-6">..</div>
sm, md및 lg그리드 스크린 / 뷰포트에 수직으로 모든 "스택"이하 768 이상 것이다. 여기에서 xs격자가 맞습니다. col-xs-*클래스 를 사용하는 열은 세로로 쌓이지 않고 가장 작은 화면에서 계속 축소됩니다.
이 데모를 사용 하여 브라우저 크기를 조정 하면 격자 크기 조정 효과가 나타납니다.
부트 스트랩 4
에서 부트 스트랩 4 거기에 새로운 -xl-크기 볼 이 데모를 . 또한 -xs-중위가 제거 된 작은 열 단순히 그래서 col-1, col-2.. col-12, 등 ..
col-*-0 (xs)
col-sm-*-576px
col-md-*-768px
col-lg-*-992px
col-xl-*- 1200px
또한 Bootstrap 4에는 새로운 자동 레이아웃 열이 포함되어 있습니다 . 이들은 또한 반응 중단 점 (이 col, col-sm, col-md, 등을),하지만 정의 %의 폭이 없습니다. 따라서 자동 레이아웃 열 은 행에서 동일한 너비 를 채 웁니다 .
이 기사는 부트 스트랩 그리드에 대해 더 자세히 설명합니다.
부트 스트랩 문서 는 그것을 설명하지만 그것을 얻는 데 여전히 시간이 걸렸습니다. 두 가지 방법 중 하나로 자신에게 설명 할 때 더 의미가 있습니다.
열이 가로로 시작한다고 생각하면 열을 쌓을 시간을 선택할 수 있습니다 .
예를 들어 열로 시작하는 경우 : ABC
언제 다음과 같이 쌓아야하는지 결정합니다.
ㅏ
비
씨
col-lg를 선택하면 너비가 1200px 미만일 때 열이 쌓입니다.
col-md를 선택하면 너비가 <992px 일 때 열이 쌓입니다.
col-sm을 선택하면 너비가 768px 미만일 때 열이 쌓입니다.
col-xs를 선택하면 열이 누적되지 않습니다.
다른 한편으로, 열이 쌓이는 것을 생각하면 수평이 될 지점을 선택할 수 있습니다 .
col-sm을 선택하면 너비가> = 768px 일 때 열이 수평이됩니다.
col-md를 선택하면 너비가 ≥ = 992px 일 때 열이 수평이됩니다.
col-lg를 선택하면 너비가> = 1200px 일 때 열이 수평이됩니다.
에서 트위터 부트 스트랩 문서 :
- 작은 격자 (≥ 768px) =
.col-sm-*, - 중간 눈금 (≥ 992px) =
.col-md-*, - 큰 격자 (≥ 1200px) =
.col-lg-*.
이것의 혼란스러운 측면은 BootStrap 3이 모바일 우선 응답 시스템이며 이것이 Bootstrap 문서의 해당 부분에서 col-xx-n 계층에 어떤 영향을 미치는지 설명하지 못한다는 것입니다. 따라서 더 큰 장치의 값을 선택하면 더 작은 장치에서 어떤 일이 발생하는지 궁금해하고 여러 값을 지정해야하는지 궁금해집니다. (넌 아니야)
낮은 입자 유형 (xs, sm)은 작은 화면에서 레이아웃 모양을 유지하려고 시도하고 큰 유형 (md, lg)은 큰 화면에서만 올바르게 표시되지만 작은 장치에서는 열을 줄 바꿈합니다. 이전 예제에서 인용 된 값은 사용 가능한 화면 영역에 맞도록 부트 스트랩이 모양을 저하시키는 임계 값을 나타냅니다.
이것이 실제로 의미하는 것은 col-xs-n 열을 만들면 아주 작은 화면에서도 창이 너무 제한적이어서 페이지를 올바르게 표시 할 수 없을 때까지 정확한 모양을 유지한다는 것입니다. 이는 너비가 768px 이하인 장치는 성능이 저하되지 않은 (단일 또는 랩핑 된 열 형식이 아닌) 설계대로 테이블을 표시해야 함을 의미합니다. 분명히 이것은 여전히 열의 내용에 달려 있으며 이것이 요점입니다. 페이지가 큰 화면의 여러 열을 작은 화면에 나란히 표시하려고하면 열을 고려하지 않으면 열이 자연스럽게 끔찍하게 줄 바꿈됩니다. 따라서 열 내의 데이터에 따라 컨텐츠를 적절하게 표시하기 위해 레이아웃이 희생되는 지점을 결정할 수 있습니다.
예를 들어 페이지에 3 개의 col-sm-n 열이 포함 된 경우 페이지 너비가 992px 아래로 떨어지면 부트 스트랩이 열을 행으로 줄 바꿈합니다. 즉, 데이터는 여전히 표시되지만 데이터를 보려면 세로 스크롤이 필요합니다. 레이아웃이 저하되지 않게하려면 xs를 선택하십시오 (데이터가 저해상도 장치에 3 열로 적절히 표시 될 수있는 한).
데이터의 가로 위치가 중요한 경우 시각적 특성을 유지하기 위해 더 작은 입도 값을 선택해야합니다. 위치가 덜 중요하지만 모든 장치에서 페이지를 볼 수 있어야하는 경우 더 높은 값을 사용해야합니다.
col-lg-n을 선택하면 화면 너비가 xs 임계 값 1200px 아래로 떨어질 때까지 열이 올바르게 표시됩니다.
장치 크기 및 클래스 접두사 :
- 초소형 휴대 전화 (<768px)-
.col-xs- - 소형 장치 태블릿 (≥768px)-
.col-sm- - 중형 장치 데스크톱 (≥992px)-
.col-md- - 대형 장치 데스크톱 (≥1200px)-
.col-lg-
그리드 옵션 :
참조 : 그리드 시스템
.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up
TL; DR
.col-X-Y수단 화면 크기 X 최대에는 , Y 열을 채우기 위해이 요소를 스트레칭 .
부트 스트랩은마다 12 열의 그리드를 제공 .row하므로 Y = 3은 너비 = 25 %를 의미합니다.
xs, sm, md, lg 스마트 폰, 태블릿, 노트북, 데스크톱의 크기입니다.
다른 화면 크기에서 다른 너비를 지정하는 것은 작은 화면에서 더 크게 만들 수 있도록하는 것입니다.
예
<div class="col-lg-6 col-xs-12">
의미 : 데스크톱의 경우 너비 50 %, 모바일, 태블릿 및 랩톱의 경우 100 % 너비
특별한 경우 : 부트 스트랩 그리드 시스템을 학습하기 전에 브라우저 확대 / 축소가 100 % (100 %)로 설정되어 있는지 확인하십시오. 예를 들어 : 화면 해상도가 (1600px x 900px)이고 브라우저 확대 / 축소가 175 %이면 "bootstrap-ped"요소가 쌓입니다.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">class="col-lg-4"</div>
<div class="col-lg-4">class="col-lg-4"</div>
</div>
</div>
크롬 줌 100 %
크롬 줌 175 %
화면 크기에 따라 행에 몇 개의 열을 배치할지 부트 스트랩에 알리는 데 사용됩니다.
col-xs-2
sm이 작은 화면 md (medium sized), lg (large sized)를 정의하는 것과 같은 방식으로 여분의 small (xs) 화면에서 행에 2 개의 열만 표시하지만 부트 스트랩에 따라 작은 첫 번째 규칙에 따르면
xs-col-2 md-col-4
그런 다음 xs에서 sm (included)까지의 화면 크기에 대해 2 개의 열이 각 행에 표시되고 다음 크기에 도달하면 변경됩니다 (예 : md에서 lg (included)까지). 화면 크기를 더 잘 이해하려면 다양한 화면 모드에서 실행하십시오. 크롬의 개발자 모드 (ctr + shift + i)와 다양한 픽셀 또는 장치를 사용해보십시오
'development' 카테고리의 다른 글
| 파이썬에서 상대적 가져 오기를 수행하는 방법? (0) | 2020.02.12 |
|---|---|
| 파이썬에서 쿼리 문자열을 urlencode하는 방법은 무엇입니까? (0) | 2020.02.11 |
| JavaScript eval 함수를 사용하는 것이 좋지 않은 이유는 무엇입니까? (0) | 2020.02.11 |
| 파이썬 try-else (0) | 2020.02.11 |
| node.js 파일 제거 (0) | 2020.02.11 |