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

부트 스트랩 레이아웃은 반응 형 웹 개발을 단순화하기 위해 재사용 가능한 구성 요소를 제공하는 프론트 엔드 프레임 워크입니다. 레이아웃 시스템은 12 열 그리드를 기반으로합니다. 응답 클래스 (.col- {size}-{cols})는 장치 크기에 따라 열 크기를 조정할 수 있습니다. 정렬 클래스 (.text-)는 요소를 정렬하는 데 사용되며 오프셋 클래스 (.offset-*)는 그리드의 시작부터 열을 상쇄 할 수 있습니다.

부트 스트랩 레이아웃 : 가이드

부트 스트랩 레이아웃이란 무엇입니까?

Bootstrap은 반응 형 웹 페이지의 개발을 단순화하도록 설계된 재사용 가능한 HTML 및 CSS 구성 요소 세트를 제공하는 인기있는 프론트 엔드 프레임 워크입니다. 레이아웃 시스템을 통해 개발자는 그리드 기반 웹 페이지를 쉽게 만들 수 있습니다.

부트 스트랩이있는 레이아웃

부트 스트랩 레이아웃을 사용하려면 다음이 필요합니다.

1. 부트 스트랩 라이브러리 포함 :

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"></code>

2. 그리드 시스템 사용 :

부트 스트랩 그리드 시스템은 행과 12 개의 열로 구성됩니다. .row 및 .col-* 클래스를 사용하여 행과 열을 만들 수 있습니다.

 <code class="html"><div class="row"> <div class="col-sm-6">内容</div> <div class="col-sm-6">内容</div> </div></code>

3. 응답 크기를 지정합니다.

Bootstrap은 다른 장치 크기에 응답하기위한 응답 클래스를 제공합니다. .col-*-* 의 형태로 클래스를 사용 하고 각각 장치 크기와 열 크기를 나타냅니다.

 <code class="html"><div class="col-md-4">内容（在中型设备上占4 列）</div></code>

4. 요소 정렬 :

.Text .text-left .text-* 클래스와 같은 .Text .text-center .text-right 와 요소를 정렬 할 수 있습니다.

 <code class="html"><p class="text-center">居中文本</p></code>

5. 오프셋 열 : .OffSet-*`클래스를 사용하면 그리드의 시작에 대해 열을 상쇄 할 수 있습니다.

 <code class="html"><div class="offset-md-4">内容（在中型设备上从第5 列开始）</div></code>

샘플 레이아웃

간단한 레이아웃 예는 다음과 같습니다.

 <code class="html"><div class="container"> <div class="row"> <div class="col-sm-3">侧边栏</div> <div class="col-sm-9">正文区域</div> </div> </div></code>

이 레이아웃은 작은 화면의 3 열 사이드 바 및 9 열 메인 영역을 보여 주며, 4 열 사이드 바 및 8 열 메인 영역은 더 큰 화면입니다.

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