적응형 부트스트랩을 구현하는 방법

적응형: 화면이 아무리 크더라도 줄을 줄이지 말고 가로로 크기를 조정하세요.

Boostrap의 "울타리" 모드 (추천 학습: Bootstrap 비디오 튜토리얼)

Boosttrap의 적응형 기능의 기본은 브라우저를 행과 열로 나누는 "울타리" 모드입니다: 총 12개 열과 행의 수 표시하려는 요소에 따라 필요한 열 수인 각 요소의 표시 크기를 결정합니다. 범위를 초과하면 자동으로 행이 변경됩니다. 각 열의 크기는 현재 브라우저의 크기에 따라 Boostrap에 의해 자동으로 균등하게 분배됩니다.

부스트랩의 적응형 기능

사실 펜스 모드를 이해하고 나면 부스트랩은 브라우저의 크기에 따라 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은 원하는 프레젠테이션 모드에 맞게 브라우저 너비에 따라 열 너비를 자동으로 할당합니다.

어떻게 진행되는지는 걱정하지 않으셔도 됩니다. 휴대폰에서의 웹페이지 프리젠테이션 스타일이나 PC에서의 프리젠테이션 스타일만 고려하시면 됩니다. .

Bootstrap과 관련된 더 많은 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요!

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