부트스트랩에는 여러 컨테이너가 있습니다-프런트엔드 Q&A-php.cn

부트스트랩에는 여러 컨테이너가 있습니다

青灯夜游

풀어 주다： 2022-01-10 11:39:31

원래의

4053명이 탐색했습니다.

bootstrap에는 두 가지 유형의 컨테이너가 있습니다. 1. 고정 레이아웃 컨테이너, 기본 그리드를 "class="container"" 컨테이너에 넣어 고정 레이아웃을 만듭니다. 2. 유동 레이아웃 컨테이너, 유동 그리드를 유동 레이아웃에 넣을 수 있습니다. "class="container-fluid""를 사용하여 유체 컨테이너에 생성됩니다.

부트스트랩에는 여러 컨테이너가 있습니다

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, DELL G3 컴퓨터

Bootstrap 컨테이너

Bootstrap에서는 컨테이너가 반응형 레이아웃의 기초입니다. 모든 콘텐츠는 컨테이너에 정의되어야 하며, 컨테이너는 부트스트랩 그리드 시스템을 활성화하기 위한 필수 전제 조건입니다.

Bootstrap은 두 가지 유형의 레이아웃 컨테이너를 제공합니다. 하나는 고정 너비 레이아웃 컨테이너이고 다른 하나는 유동 레이아웃 컨테이너입니다. 어떤 종류의 컨테이너에 그리드를 배치하면 그에 따라 레이아웃을 지정할 수 있습니다.

고정 레이아웃

Bootstrap의 기본 그리드를 class="container"인 컨테이너에 넣어 고정 너비 레이아웃을 만듭니다. 고정 레이아웃은 전체 페이지의 중앙에 위치합니다. 예:

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

로그인 후 복사

효과는 아래와 같습니다(Bootstrap 고정 레이아웃 컨테이너):

부트스트랩에는 여러 컨테이너가 있습니다

간단히 말하면 모든 콘텐츠를 클래스="컨테이너"로 컨테이너에 넣어 중앙에 고정된 너비의 컨테이너를 만듭니다. 레이아웃. 구체적인 예는 다음과 같습니다.

<body>
  <div class="container">
    <div class="row">
      <div class="span4">span4</div>
      <div class="span8">span8</div>
    </div>
    <div class="row">
      <div class="span3">span3</div>
      <div class="span6">span6</div>
      <div class="span3">span3</div>
    </div>
  </div>
</body>

로그인 후 복사

레이아웃 효과는 아래 그림과 같습니다(Bootstrap 고정 레이아웃 예).

부트스트랩에는 여러 컨테이너가 있습니다

Flowing 레이아웃

같은 방식으로 Bootstrap의 흐르는 그리드를 클래스에 넣습니다= 흐름 컨테이너에서 "container-fluid"를 사용하면 흐름 레이아웃을 만들 수 있습니다. 유동 레이아웃은 전체 뷰포트 너비를 채웁니다. 예:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

로그인 후 복사

레이아웃 효과는 아래와 같습니다(부트스트랩 흐름 레이아웃):

부트스트랩에는 여러 컨테이너가 있습니다