ホームページ > 記事 > ウェブフロントエンド > ブートストラップグリッドレイアウトシステムの例

ブートストラップグリッドレイアウトシステムの例

PHPzオリジナル: 2018-06-28 16:40:464775ブラウズ

1. 基本原則:

1. 画面を水平方向と垂直方向に沿って整然と配置されたグリッド/グリッド/セル/コンポジションとして考えます

2. すべてのデータはグリッドメディアに配置する必要があります。

3. レスポンシブなレイアウトを採用し、最初にモバイル設定を採用します

2. 画面解像度分割ベース

1. (画面 2. (768ピクセル 3. (992px <= 画面 4. (1200 2. 実装原則

1. 最初のステップ: コンテナーを作成する必要があります、class="container"

2. 2 番目のステップ: 行を作成する必要があります、class="row"

3 .Step 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>

【関連ビデオの推奨:

Bootstrap チュートリアル】

以上がブートストラップグリッドレイアウトシステムの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ブートストラップのダウンロードとインポートの例次の記事：ブートストラップのダウンロードとインポートの例

続きを見る

ブートストラップラスター解析