부트스트랩은 휴대폰을 지원합니까?

bootstrap은 휴대폰을 지원합니다. Bootstrap의 반응형 CSS는 데스크톱, 태블릿 및 휴대폰에 적용할 수 있으며 Bootstrap 3부터 프레임워크에는 전체 라이브러리에 모바일 우선 스타일이 포함됩니다.

이 문서의 운영 환경: Windows 7 시스템, 부트스트랩 버전 2.3.2, Dell G3 컴퓨터.

bootstrap 반응형 레이아웃

Bootstrap은 화면이나 뷰포트 크기가 증가함에 따라 자동으로 최대 12개의 열로 분할되는 반응형 모바일 우선 유동 그리드 시스템을 제공합니다. 여기에는 사용하기 쉬운 사전 정의된 클래스와 더 의미 있는 레이아웃을 생성하기 위한 강력한 믹스인이 포함되어 있습니다.

먼저 그리드 시스템은 행과 열의 일련의 조합을 통해 페이지 레이아웃을 만드는 데 사용됩니다. Bootstrap은 다양한 화면 크기에 따라 다양한 그리드 옵션을 선택합니다. 그리드 옵션에는 초소형 화면(휴대폰), 소형 화면(태블릿), 중형 화면(데스크톱), 대형 화면(초대형 데스크톱)의 4가지 옵션이 있습니다. 그리드 시스템은 12개의 열로 나누어져 있습니다. 즉, 각 행은 최대 12개의 열을 보유할 수 있습니다. .row에 포함된 열 수가 12개보다 크면(즉, 행의 그리드 셀이 12개 셀을 초과하는 경우) 자동으로 조판됩니다. 즉, 행은 최대 12개의 열만 읽을 수 있습니다. 자세한 분석은 나중에.

원리:

CSS3 미디어 쿼리(미디어(장치) 쿼리)를 통해 미디어 쿼리를 사용하면 페이지 콘텐츠가 다양한 미디어 환경에서 실행될 때 다양한 스타일을 표시할 수 있습니다(이 스타일은 물론 당사에서 작성하고 지정합니다).

@media는 CSS3에 지정된 속성으로, 다양한 미디어 장치에 대해 다양한 스타일을 설정하는 목적을 달성할 수 있습니다. 그리고 동일한 장치에서도 브라우저 크기를 재설정하면 브라우저의 너비와 높이에 따라 페이지가 다시 렌더링됩니다.

응용 프로그램:

Bootstrap은 주로 min-width, max-width 및 구문을 사용하여 다양한 해상도에서 다양한 CSS 스타일을 설정합니다.

@media

@media mediatype and|not|only (media feature) {
CSS-Code;
}

의 구문

미디어 유형에는 인쇄(인쇄 장치), 화면(컴퓨터 화면, 태블릿, 스마트폰 등에 사용됨), 음성(화면 판독기 및 기타 사운드 생성 장치에 적용됨)이 포함됩니다. 최대 너비 또는 최소 너비 등을 지정하는 데 사용됩니다.

부트스트랩의 레이아웃 컨테이너 예를 살펴보겠습니다.

Bootstrap에는 페이지 콘텐츠와 그리드 시스템을 래핑하기 위해 .container 컨테이너가 필요합니다.

다음과 같습니다

고정 너비 레이아웃

<div class="container">
...
</div>

또는 유동 레이아웃

<div class="container-fluid">
...
</div>

부트스트랩 CSS 문서에서 @media 속성

1591~1605줄

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
……

위 코드는 너비에 따라 변경되는 컨테이너 컨테이너를 구현합니다. 브라우저 너비도 변경됩니다.

추천: "부트스트랩 비디오 튜토리얼" "css 비디오 튜토리얼"

위 내용은 부트스트랩은 휴대폰을 지원합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!