如何用柵格系統布局頁面？你說的頁面是什么意思？讓我們使用bootstrap框架，它是一個網格系統框架您好，設置方法如下：首先，讓我們簡單介紹一下bootstrap，它是一個前端CSS框架，在它的庫中集

如何用柵格系統布局頁面？

你說的頁面是什么意思？讓我們使用bootstrap框架，它是一個網格系統框架

您好，設置方法如下：

首先，讓我們簡單介紹一下bootstrap，它是一個前端CSS框架，在它的庫中集成了許多CSS樣式。我們可以使用這個框架進行響應式布局。因為它可以幫助我們快速響應頁面布局，所以有很多方法可以設置它的寬度。

引導是一種網格布局。無論屏幕的寬度是多少，bootstrap都會將屏幕水平劃分為12列，但每列的寬度是不同的

在bootstrap中，您可以使用col LG-*、col MD-*和col SM-*四個類名，列XS-*在庫文件中設置Div的寬度。這四個名稱對應于屏幕的四個寬度范圍。我們需要將適當的類應用于適當的屏幕。這四個可以成對組合，也可以多個或全部組合。

如果是成對組合，當屏幕寬度改變時，只有一個CSS將起決定性作用。例如，我們合并了col SM和col MD。當這兩個類合并時，col MD-*用于設置div在大于或等于992像素時占用的列數。列SM-*用于確定div小于或等于992且大于或等于768像素時占用的列數。當小于768px時，div的默認寬度是父元素寬度的100%

一般來說，我們會設置MD-*列或SM-*列作為頁面桌面布局的div寬度，但這兩個類的區別是，如果只設置MD-*列，當屏幕寬度小于992時，它將直接是col-xs-12。如果col SM-*小于768px，將是移動版的樣式。我們需要特別注意這一點。通常，當它小于768時，就是移動頁面。