부트 스트랩을 레이아웃하는 방법

부트 스트랩을 사용하여 웹 사이트를 레이아웃하려면 페이지를 컨테이너, 행 및 열로 나누는 그리드 시스템이 필요합니다. 먼저 컨테이너를 추가 한 다음 행에 행을 추가하고 행 내 열을 추가 한 다음 마지막으로 열에 내용을 추가하십시오. 부트 스트랩의 반응 형 레이아웃 함수는 중단 점 (XS, SM, MD, LG, XL)에 따라 레이아웃을 자동으로 조정합니다. 응답 형 클래스를 사용하여 다른 화면 크기의 다른 레이아웃을 달성 할 수 있습니다.

부트 스트랩 레이아웃 안내

레이아웃에 부트 스트랩을 사용하는 방법?

Bootstrap은 대응적인 모바일 우선 웹 사이트 및 응용 프로그램의 신속한 개발을위한 CSS 프레임 워크입니다. 웹 사이트 레이아웃을 쉽게 작성할 수 있도록 다양한 사전 구축 클래스 및 구성 요소를 제공합니다.

부트 스트랩 레이아웃 구조

부트 스트랩은 페이지를 수평 행과 수직 열로 나누는 그리드 시스템을 사용하여 컨텐츠를 구성합니다. 기본 메쉬 구조는 다음과 같습니다.

• 컨테이너 : 전체 페이지 컨텐츠가 포함되어 있습니다.
• 행 : 열이 포함 된 수평 행을 정의합니다.
• 열 : 행의 내용 너비를 지정합니다.

레이아웃을 만드는 단계

1. 컨테이너 추가 : <div class="container"> 사용하여 컨테이너를 만듭니다.<li> <strong>행 추가 :</strong> <code><div class="row"> 사용하여 컨테이너에 행을 만듭니다.<li> <strong>열 추가 :</strong> <code><div class="col-*"> 사용하여 열을 연속으로 추가합니다. 여기서 <code>* 열 너비를 지정합니다 (예 : col-6 6/12 너비를 요점으로 한 열을 나타냅니다).
2. 내용 설정 : 열에 컨텐츠를 추가하십시오.

부트 스트랩 반응 형 레이아웃

Bootstrap의 반응 형 레이아웃 기능을 사용하면 웹 사이트가 브라우저 또는 장치 크기에 따라 자동으로 조정할 수 있습니다. Bootstrap은 중단 점을 사용하여 화면 크기 범위를 정의하고 각 중단 점의 레이아웃을 조정합니다. 중단 점은 다음과 같습니다.

중단 점	화면 너비
xs	≤575px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px

부트 스트랩 응답 클래스 사용의 예

중간 화면에 3 개의 열에 배치 된 컨테이너와 작은 화면의 단일 열을 만듭니다.

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-4 col-lg-4">列1</div> <div class="col-md-4 col-lg-4">列2</div> <div class="col-md-4 col-lg-4">列3</div> </div> </div></code>