부트스트랩 래스터화란 무엇입니까?

부트스트랩에서 래스터화란 브라우저의 행을 12개의 열로 나눈 다음 개발된 페이지의 필요에 따라 해당 요소가 차지하는 열 너비를 할당하는 것을 의미합니다. 각 세그먼트는 고정 너비, 백분율 및 미디어 쿼리를 통한 반응형 레이아웃입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 5, DELL G3 컴퓨터

부트스트랩 래스터화란 무엇입니까

부트스트랩에서 래스터화의 원리는 크기에 따라 각 세그먼트를 분할하는 것입니다. 장치. 비율 및 미디어 쿼리를 통한 고정 너비, 반응형 레이아웃을 통해 동일한 페이지 세트를 다양한 해상도의 장치에 적용할 수 있습니다.

그리드 레이아웃의 기본 원리: 그리드는 페이지를 가로 방향으로 특정 개수(n으로 가정)의 기본 너비 열로 나눕니다.

그러면 개발자는 페이지의 해당 요소가 필요에 따라 m 열을 차지하도록 설정할 수 있습니다. 너비. (m

내 이해: 래스터화는 브라우저의 행을 12개의 열로 나누고 열을 직접 할당하는 것입니다.

그리드 시스템 개요

그리드 시스템은 웹 페이지 레이아웃에 고정된 그리드를 사용하는 명확하고 깔끔한 디자인 스타일입니다. 그리드 시스템은 인쇄 매체에서 처음 사용되었습니다. 인쇄 레이아웃은 여러 개의 그리드로 나누어져 있어 조판에 매우 편리합니다.

나중에 웹 페이지 레이아웃에 그리드 시스템이 적용되었습니다. 페이지 레이아웃에 반응형 그리드 시스템을 사용하면 웹 페이지는 다양한 디스플레이 터미널에 따라 다른 페이지 구조를 표시할 수 있습니다. 예를 들어 일부 모듈은 작은 화면 장치에서 다르게 배열되거나 숨겨집니다.

부트스트랩 그리드 시스템의 기본 사용법.

1. Bootstrap 그리드 시스템은 다양한 화면 너비에 대해 다양한 클래스를 정의합니다. 클래스 이름을 요소에 직접 추가하면 됩니다.

2. 행은 적절하게 정렬되고 채워질 수 있도록 레이아웃 컨테이너에 포함되어야 합니다.

3. 행을 통해 가로 방향으로 열 그룹을 만들 수 있으며 열만 행의 직계 하위 요소로 사용할 수 있습니다.

4. 행에는 .row 스타일을 사용하고 열에는 .col-*-* 스타일을 사용하세요. 열 수가 12개보다 많으면 새 행이 정렬됩니다.

학생 정보 양식 케이스

케이스 구현 아이디어:
1. 먼저 클래스 이름 행이 있는 p 요소를 레이아웃 컨테이너의 행으로 생성해야 합니다.
2. 그런 다음 행 컨테이너 내부에 열을 생성합니다. 레이아웃 컨테이너의 행과 열은 그리드 시스템을 형성합니다.
3. 그리드 시스템의 행과 열은 테이블의 행과 열과 유사합니다.

1. HTML 코드 작성

    <p>
        </p><p>
            </p><p>姓名</p>
            <p>年龄</p>
            <p>性别</p>
        
        <p>
            </p><p>张三</p>
            <p>25</p>
            <p>男</p>
        
    

2. CSS 스타일 작성

    .row {
        background-color: #eee;
        font-size: 30px;
    }
    .col-md-4 {
        border: 1px solid #fff;
        text-align: center;
    }

브라우저 표시 너비가 992px보다 큰 경우 효과는 다음과 같습니다.

브라우저 너비가 768px보다 큰 경우 효과는 다음과 같습니다. 다음:

브라우저 너비가 768px 미만인 경우 효과는 다음과 같습니다.

관련 권장 사항: 부트스트랩 튜토리얼

위 내용은 부트스트랩 래스터화란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!