什麼是bootstrap柵格化

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

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

什麼是bootstrap柵格化

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

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

#然後開發人員可根據需要給頁面裡的對應元素設定它應佔據m個列寬。 （m

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

柵格系統概述

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

後來，柵格系統被應用於網頁佈局中，使用響應式柵格系統進行頁面佈局時，可以讓網頁根據不同的顯示終端展示不同頁面結構。例如，在小螢幕裝置上有某些模組將按照不同的方式排列或隱藏。

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

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

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

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

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

學生資訊表格案例

案例實作想法：
1、首先需要在佈局容器中建立一個類別名為row的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時，效果如下：

相關建議： bootstrap教程

以上是什麼是bootstrap柵格化的詳細內容。更多資訊請關注PHP中文網其他相關文章！