Bootstrap 3은 모바일 우선입니다. 이러한 의미에서 부트 스트랩 코드는 작은 화면 장치 (예 : 모바일 장치, 태블릿)로 시작한 다음 대형 스크린 장치 (예 : 랩톱, 데스크톱)의 구성 요소 및 그리드로 확장합니다.
1. 모바일 장치 우선 순위 전략
1. 내용 : 가장 중요한 것이 무엇인지 결정합니다.
2. 레이아웃
더 작은 너비의 우선 디자인.
기본 CSS는 모바일 장치에 선호되며 미디어 쿼리는 태블릿 및 데스크탑 컴퓨터를 대상으로합니다.
3. 점차적으로 향상되었습니다
화면 크기가 증가함에 따라 요소를 추가하십시오.
화면 또는 뷰포트 크기가 증가함에 따라 시스템은 자동으로 최대 12 개의 열로 나뉩니다. 아래 그림과 같이 :
2. 부트 스트랩 그리드 시스템의 작동 원리 (그리드 시스템)
그리드 시스템은 일련의 행과 컨텐츠를 포함하는 열을 통해 페이지 레이아웃을 만듭니다. 다음은 부트 스트랩 메쉬 시스템의 작동 방식에 대한 목록입니다.
1. 적절한 정렬 및 패딩을 얻으려면 행을 .Container 클래스에 배치해야합니다.
2. 행을 사용하여 수평 그룹을 만듭니다.
3. 내용은 열에 배치해야하며 열만 행의 직접 자식 요소가 될 수 있습니다.
4. .row 및 .col-xs-4와 같은 사전 정의 된 그리드 클래스를 사용하여 그리드 레이아웃을 신속하게 만들 수 있습니다. 더 많은 의미 론적 레이아웃에는 덜 하이브리드 클래스를 사용할 수 있습니다.
5. 열은 패딩을 통해 열 내용 사이에 간격을 만듭니다. 이 내부 마진은 .ROWS의 여백에 의해 음수이며, 6 번째, 첫 번째 열 및 마지막 열의 행 오프셋을 나타냅니다.
7. 그리드 시스템은 스팬하려는 12 개의 사용 가능한 열을 지정하여 생성됩니다. 예를 들어, 3 개의 동일한 열을 만들려면 3 개의 .col-xs-4를 사용하십시오.
3. 미디어 조사
미디어 쿼리는 매우 세련된 "조건부 CSS 규칙"입니다. 규정 된 특정 조건에 따라 일부 CSS에만 적용됩니다. 해당 조건이 충족되면 해당 스타일이 적용됩니다.
Bootstrap의 미디어 쿼리를 사용하면 뷰포트 크기에 따라 콘텐츠를 이동, 표시 및 숨길 수 있습니다. 다음 미디어 쿼리는 적은 파일에 사용되어 부트 스트랩 그리드 시스템에서 중요한 중단 점 임계 값을 만듭니다.
/* Ultra-Small 장치 (휴대 전화, 768px 미만)* //** 부트 스트랩*//* 작은 장치 (768px에서 시작)*/ @media (min-width : @screen-sm-min) {...}/* 중형 장치 (992px에서 시작)*/* minedth (min-width : @scree-md-min)} 장치 (1200px부터 시작하는 대형 데스크탑) */ @media (min-width : @screen-lg-min) {...}우리는 때때로 미디어 쿼리 코드에 Max width를 포함하여 CSS의 영향을 더 작은 화면 크기로 제한합니다.
@Media (max-width : @screen-xs-max) {...} @media (min-width : @screen-sm-min) 및 (max-width : @screen-sm-max) {...} @media (min-width : @screen-md-min) 및 (max-width : @screen-md-max) {} @medth : @minwidth : @min-lidth : @미디어 쿼리에는 두 가지 부분, 먼저 장치 사양 및 크기 규칙이 있습니다. 위의 경우 다음 규칙이 설정됩니다.
다음 코드 줄을 살펴 보겠습니다.
@Media (min-width : @screen-sm-min) 및 (max-width : @screen-sm-max) {...}
Min-Width : @Screen-SM-Min이있는 모든 장치의 경우 화면 너비가 @Screen-Sm-Max보다 작은 경우 일부 처리가 수행됩니다.
4. 그리드 옵션
다음 표는 부트 스트랩 메쉬 시스템이 여러 장치에서 어떻게 작동하는지 요약합니다.
5. 기본 그리드 구조
부트 스트랩 그리드의 기본 구조는 다음과 같습니다.
감
특정 코드 예는 다음과 같습니다.
<div> <h1> Hello, World! </h1> <div> <!-작은 장치 휴대 전화 (<768px)-> <div style = "background : #f00"> 1 </div> <div style = "background : #b2b0b0"> 2 </div style = "background : #ff6a00"> 3 </div> <배경 " 스타일 = "배경 : #4cff00"> 5 </div> <div style = "background : #0ff"> 6 </div> <div style = "배경 : #0094ff"> 7 </div> <div style = "background : #0094ff"> 7 </div> <div style = "background : #b200ff"> 8 </div> <배 스타일 = "배경 : #ff006e"> 10 </div> <div style = "배경 : #ac5050"> 11 </div> <div style = "배경 : #54bd4f"> 12 </div> </div> <div> <!-작은 장치 태블릿 (≥768px)-> <div 스타일 = "배경 : #b2b0b0"> #ffd800">1</div> <div style="background: #ac5050">1</div> </div> <div> <!--Medium-sized desktop computer (≥992px) --> <div style="background: #ac5050">1</div> <div style="background: #54bd4f">1</div> </div> <div> <!--Large-sized desktop computer (≥1200px) -> <div style = "background : #ac5050"> 1 </div> <div style = "배경 : #54bd4f"> 1 </div> </div> </div> </div>>
6. 오프셋 열
오프셋은보다 전문적인 레이아웃에 유용한 기능입니다. 기둥을위한 더 많은 공간을 만드는 데 사용될 수 있습니다. 예를 들어, .col-xs =* 클래스는 오프셋을 지원하지 않지만 빈 셀을 사용하여 단순히이를 달성 할 수 있습니다.
대형 화면 모니터에서 오프셋을 사용하려면 .col-md-offest-* 클래스를 사용하십시오. 이 클래스는 열의 왼쪽 가장자리를 * 열 씩 증가시킵니다. 여기서 * 범위는 1에서 11입니다.
아래의 예에서는 <div> .. </div>가 있으며 .col-md-offset-3 클래스를 사용 하여이 div를 중심으로합니다.
<div> <div> <div style = "back 스타일 = "배경 : #ffd800"> 4 </div> <div style = "배경 : #4cff00"> 5 </div> <div style = "배경 : #0ff"> 6 </div> <div style = "background : #0094ff"> 7 </div> <div style = "background : #b200ff"> </div> <배 스타일 = "배경 : #ff006e"> 10 </div> <div style = "배경 : #ac5050"> 11 </div> <div style = "배경 : #54bd4f"> 12 </div> </div> </div>
디스플레이 효과 :
7. 중첩 된 열
컨텐츠의 기본 그리드를 중첩하려면 새 .ROW를 추가하고 기존 .Col-MD-* 열 내에 .col-md-* 열 세트를 추가하십시오. 중첩 행에는 열 세트가 포함되어야하며,이 열 세트의 열 수는 12를 초과 할 수 없습니다 (실제로 12 열을 점유해야 할 요구 사항은 없습니다).
다음 예에서 레이아웃에는 두 개의 열이 있고 두 번째 열은 두 개의 행과 4 개의 상자로 나뉩니다.
<div> <div> <div style = "background : #b2b0b0"> 첫 번째 열 < /div> <div style = "background : #dedef8"> 두 번째 열-두 번째 열이 있습니다. </div> <div> <div> <div style = "background : #ff00dc"> 나는 내용입니다.
디스플레이 효과 :
8. 열 정렬
부트 스트랩 메쉬 시스템의 또 다른 완벽한 기능은 한 순서로 열을 쉽게 작성한 다음 다른 순서로 표시 할 수 있다는 것입니다.
.col-md-push-* 및 .col-md-pull-* 클래스로 내장 그리드 열의 순서를 쉽게 변경할 수 있습니다. 여기서*는 1에서 11 사이입니다.
아래의 예에는 두 개의 열 레이아웃이 있으며 왼쪽 열은 사이드 바로 좁습니다. 우리는 .col-md-push-* 및 .col-md-pull-* 클래스를 사용하여 두 열의 순서를 교환합니다.
<div> <div> <div style = "background : #ff00dc"> 왼쪽 </div> <div style = "background : #ff006e"> 오른쪽 </div> </div> </div>
디스플레이 효과 :
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.