bootstrap柵格化的概念是什么

本篇內容主要講解“bootstrap柵格化的概念是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“bootstrap柵格化的概念是什么”吧!

在bootstrap中，柵格化指的是將瀏覽器的一行分為12列，根據開發的頁面需要再去分配相應元素所占據的列寬；也即根據設備的尺寸進行分段，每段寬度固定，通過百分比和媒體查詢實現響應式布局。

本教程操作環境：Windows10系統、bootstrap5版、DELL G3電腦

什么是bootstrap柵格化

在bootstrap中，柵格化的原理就是根據設備的尺寸進行分段，每段寬度固定，通過百分比和媒體查詢實現響應式布局；這樣就可以讓同一套頁面可以適應不同分辨率的設備。

柵格化布局基本原理：柵格化把頁面在水平方向等分為一定數目（假設為n）的基本寬度列

然后開發人員可根據需要給頁面里的相應元素設置它應占據m個列寬。（m<=n）

我的理解：柵格化就是把瀏覽器的一行分為12列，自己去分配列。

柵格系統概述

柵格系統（Grid Systems），即網格系統，它是一種清晰、工整的設計風格，用固定的格子進行網頁布局。柵格系統最早應用于印刷媒體上，一個印刷版面上劃分了若干個格子，非常方便排版。

后來，柵格系統被應用于網頁布局中，使用響應式柵格系統進行頁面布局時，可以讓網頁根據不同的顯示終端展示不同頁面結構。例如，在小屏幕設備上有某些模塊將按照不同的方式排列或者被隱藏。

Bootstrap柵格系統的基本使用方式。

1、Bootstrap柵格系統為不同屏幕寬度定義了不同的類，直接為元素添加類名即可。

2、行必須包含在布局容器中，以便為其賦予合適的排列和內補。

3、通過行可以在水平方向創建一組列并且只有列可以作為行的直接子元素。

4、行使用樣式.row，列使用樣式.col-*-*，內容應當放置于列內，列大于12時，將會另起一行排列。

學生信息表格案例

案例實現思路：
1、首先需要在布局容器中創建一個類名為row的p元素作為行；
2、然后在行的容器內部創建列。布局容器中的行和列就構成了柵格系統。
3、柵格系統中的行和列類似于表格中的行和列。

1、編寫HTML代碼

    <p class="container">
        <p class="row">
            <p class="col-md-4">姓名</p>
            <p class="col-md-4">年齡</p>
            <p class="col-md-4">性別</p>
        </p>
        <p class="row">
            <p class="col-md-4">張三</p>
            <p class="col-md-4">25</p>
            <p class="col-md-4">男</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時，效果如下：

到此，相信大家對“bootstrap柵格化的概念是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！