什么是bootstrap柵格化

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

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap5版、DELL G3電腦

什么是bootstrap柵格化

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

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

然后開發(fā)人員可根據(jù)需要給頁面里的相應(yīng)元素設(shè)置它應(yīng)占據(jù)m個(gè)列寬。（m<=n）

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

柵格系統(tǒng)概述

柵格系統(tǒng)（Grid Systems），即網(wǎng)格系統(tǒng)，它是一種清晰、工整的設(shè)計(jì)風(fēng)格，用固定的格子進(jìn)行網(wǎng)頁布局。柵格系統(tǒng)最早應(yīng)用于印刷媒體上，一個(gè)印刷版面上劃分了若干個(gè)格子，非常方便排版。

后來，柵格系統(tǒng)被應(yīng)用于網(wǎng)頁布局中，使用響應(yīng)式柵格系統(tǒng)進(jìn)行頁面布局時(shí)，可以讓網(wǎng)頁根據(jù)不同的顯示終端展示不同頁面結(jié)構(gòu)。例如，在小屏幕設(shè)備上有某些模塊將按照不同的方式排列或者被隱藏。

Bootstrap柵格系統(tǒng)的基本使用方式。

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

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

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

4、行使用樣式.row，列使用樣式.col-*-*，內(nèi)容應(yīng)當(dāng)放置于列內(nèi)，列大于12時(shí)，將會(huì)另起一行排列。

學(xué)生信息表格案例

案例實(shí)現(xiàn)思路：
1、首先需要在布局容器中創(chuàng)建一個(gè)類名為row的p元素作為行；
2、然后在行的容器內(nèi)部創(chuàng)建列。布局容器中的行和列就構(gòu)成了柵格系統(tǒng)。
3、柵格系統(tǒng)中的行和列類似于表格中的行和列。

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;     }

當(dāng)瀏覽器顯示寬度大于992px時(shí)，效果如下：

當(dāng)瀏覽器寬度大于768px時(shí)，效果如下：

當(dāng)瀏覽器寬度小于768px時(shí)，效果如下：