부트스트랩은 적응형인가요?

Bootstrap은 적응형입니다. 화면이 아무리 크더라도 줄을 줄이지 않고 수평으로 크기를 조정하는 것을 의미합니다. Bootstrap은 울타리 시스템을 통해 적응형이며 컨테이너의 크기를 정의하여 부분으로 나눕니다. 12개의 동일한 부분에 대해 브라우저는 자체 적응을 달성하기 위해 행과 열로 구분됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 5, DELL G3 컴퓨터

부트스트랩은 적응형입니까?

부트스트랩은 적응형입니다

적응형은 화면이 아무리 크더라도 줄 바꿈을 하지 말고 수평으로만 크기를 조절하세요. Boostrap은 "울타리 시스템"을 통해 적응합니다.

펜스 시스템은 컨테이너의 크기를 정의하고 이를 일련의 행과 열을 통해 12개의 동일한 부분으로 나누고 미디어 쿼리와 결합하여 강력한 반응형 그리드 시스템을 만드는 방식으로 만들어집니다.

Boosttrap의 적응형 기능의 기본은 브라우저를 행과 열로 나누는 "펜스" 모드입니다. 총 12개의 열이 있으며 표시하려는 요소에 따라 행 수를 사용자 정의합니다. 각 요소의 크기가 범위를 초과하면 자동으로 행이 변경됩니다. 각 열의 크기는 현재 브라우저의 크기에 따라 Boostrap에 의해 자동으로 균등하게 할당됩니다.

작동 방식:

데이터 행(행)은 .container(고정 너비) 또는 .container-fluid(100% 너비)에 포함되어야 합니다. 적절한 정렬과 패딩을 제공하기 위해.

행을 통해 가로 방향의 열 집합을 만듭니다. 화면이나 뷰포트 크기가 커지면 시스템이 자동으로 최대 12개의 열로 나눕니다. .

열(행)별로 padding 속성을 설정하여 열 사이에 공간을 만듭니다. .container 요소에 의해 설정된 패딩을 오프셋하기 위해 .row로 음수 여백을 설정합니다(소개, 행(행)에 포함된 열(열)이 패딩을 오프셋하는데, 이것이 다음 예에서 바깥쪽으로 돌출된 이유입니다).

열이 12개 이상이면 추가 열이 새 행에 배치됩니다

부스트랩의 적응형 기능

사실 펜스 모드를 이해하고 나면 크기에 따라 적응형 기능이 훨씬 간단해집니다. 브라우저의 Boosttrap에는 4개의 울타리 클래스 이름이 제공됩니다. 사용법은 CSS 스타일 시트 클래스 이름 선택기 스타일 호출과 동일합니다:

xs: col-xs-1 ~ col-xs-12, 여러 열은 항상 한 줄에.

sm: col-sm-1 ~ col-sm-12, 여러 열은 브라우저 픽셀 너비가 768px보다 크거나 같은 경우에만 한 줄에 있을 수 있습니다.

md: col-md-1 ~ col-md-12, 브라우저 픽셀 너비가 992px보다 크거나 같은 경우에만 여러 열이 한 줄에 있을 수 있습니다.

lg: col-lg-1 ~ col-lg-12, 브라우저 픽셀 너비가 1200px 이상인 경우에만 여러 열이 한 줄에 있을 수 있습니다.

나는 의사 코드를 게시합니다:

<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>
    <div class="col-sm-4  col-md-10"></div>
</div>

이것은 브라우저 너비가 768-992 사이일 때 4:4:4 모드로 표시된다는 것입니다. 브라우저 너비가 992보다 클 때, 1:1:10 모드 프레젠테이션.

물론 네 가지를 모두 사용할 수도 있으며, 어떤 경우에도 Boostrap은 원하는 프레젠테이션 모드에 맞게 브라우저 너비에 따라 열 너비를 자동으로 할당합니다.

관련 권장 사항: 부트스트랩 튜토리얼

위 내용은 부트스트랩은 적응형인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!