집 >웹 프론트엔드 >CSS 튜토리얼 >부트스트랩 그리드 레이아웃 시스템 예

부트스트랩 그리드 레이아웃 시스템 예

PHPz원래의: 2018-06-28 16:40:464827검색

1. 기본 원칙:

1. 화면을 가로 및 세로 방향을 따라 질서정연한 그리드/그리드/셀/구성으로 생각하세요.#🎜 🎜#

2. 모든 데이터는 그리드에 배치되어야 합니다;

3. 반응형 레이아웃 사용, 모바일 설정 우선

2. 화면 해상도 분할 기준

1. ( 화면 < 768px ): 초소형 화면 col-xs-x

2. (768px <= 화면 < 992px): 소형 화면 col-sm -x

3 .(992px 4. (1200 2. 구현 원칙

1. 첫 번째 단계: 컨테이너를 생성해야 합니다, class="container"

2. 두 번째 단계: 행을 생성해야 합니다, 클래스 ="row"

3. 3단계: 그리드를 생성해야 합니다. class="col-md-x". 중형 화면을 예로 들면 중요한 점은 992px

입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <script src="jquery-3.2.1.js"></script>
    <script src="dist/js/bootstrap.js"></script>
    <title>栅格布局系统</title>
    <style>
        .grid {
            border: 1px solid #696969;
            border-radius: 5px;
            background-color: lightskyblue;
            min-height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .green {
           background-color: lightgreen;
        }
        .pink {
            background-color: lightpink;
        }
    </style>
</head>
<body>
<div class="container">
    <h4>整行:</h4>
    <div class="row">
        <div class="col-md-12 grid">内容</div>
    </div>
    <h4>二等分:</h4>
    <div class="row">
        <!--<div class="col-md-6 grid">内容</div>-->
        <!--大屏39分-->
        <!--<div class="col-md-6 col-lg-3 grid green">内容</div>-->
        <!--小屏48分-->
        <div class="col-md-6 col-lg-3 col-sm-4 grid green">内容</div>
        <!--<div class="col-md-6 col-sm-8  grid">内容</div>-->
        <!--<div class=" col-md-6 grid">内容</div>-->
        <!--<div class=" col-md-6 col-lg-9 grid pink">内容</div>-->
        <div class=" col-md-6 col-lg-9 grid col-sm-8 pink">内容</div>
        <!--<div class=" col-md-6 col-sm-4 grid">内容</div>-->
    </div>
    <h4>三等分:</h4>
    <div class="row">
        <div class="col-md-4 grid">内容</div>
        <div class="col-md-4 grid">内容</div>
        <div class="col-md-4 grid">内容</div>
    </div>
    <h4>四等分:</h4>
    <div class="row">
        <div class="col-md-3 grid">内容</div>
        <div class="col-md-3 grid">内容</div>
        <div class="col-md-3 grid">内容</div>
        <div class="col-md-3 grid">内容</div>
    </div>
    <!--<h4>五等分:12除5除不尽,不用五等分</h4>-->
    <h4>六等分:</h4>
    <div class="row">
        <div class="col-md-2 grid">内容</div>
        <div class="col-md-2 grid">内容</div>
        <div class="col-md-2 grid">内容</div>
        <div class="col-md-2 grid">内容</div>
        <div class="col-md-2 grid">内容</div>
        <div class="col-md-2 grid">内容</div>
    </div>
    <h4>四八开:</h4>
    <div class="row">
        <div class="col-md-4 grid">内容</div>
        <div class="col-md-8 grid">内容</div>
    </div>
    <h4>三九开:</h4>
    <div class="row">
        <div class="col-md-3 grid">内容</div>
        <div class="col-md-9 grid">内容</div>
    </div>
</div>
</body>
</html>

【관련 영상 추천 :

부트스트랩 튜토리얼】

위 내용은 부트스트랩 그리드 레이아웃 시스템 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：부트스트랩 다운로드 및 가져오기 예제다음 기사：부트스트랩 다운로드 및 가져오기 예제