부트스트랩에서 반응형 레이아웃을 구현하는 방법

반응형 레이아웃 개념:

반응형 웹 레이아웃을 사용하면 사용자가 다양한 크기의 브라우저를 탐색할 수 있습니다. 좋은 시력을 얻으려면. 현재 널리 사용되는 레이아웃 방법입니다.

bootstrap 반응형 레이아웃 구현 원칙:

CSS3 미디어 쿼리(미디어(장치) 쿼리)를 통해 미디어 쿼리는 페이지 콘텐츠를 서로 다르게 만듭니다. 스타일은 다양한 미디어 환경에서 실행될 때 표시될 수 있습니다(이 스타일은 물론 우리가 작성하고 지정합니다).

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

Application:

Bootstrap은 주로 다양한 해상도에 대한 최소 너비, 최대 너비 및 구문을 사용합니다. 다른 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;
  }
}
……

위 코드는 브라우저 너비 컨테이너 컨테이너의 너비도 변경됩니다.

권장: 부트스트랩 입문 튜토리얼

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