bootstrap中有柵格佈局嗎

bootstrap中有柵格佈局；柵格佈局指的是將一行分為12個柵格，將12個柵格分配給不同的div元素來進行佈局，可以透過設定列所佔有的柵格的個數來設定列的寬度，是透過列數來定義模組化的頁面佈局方式。

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

bootstrap中有柵格佈局嗎

bootstrap中有柵格佈局

1.什麼是柵格佈局？

以前的網頁製作佈局用的是tabel佈局，透過把表格分成大大小小的表格，再從表格中填入元素。後來發展為div css佈局。透過div css浮動。 flaot:right和float:left.佈局。

現在bootstrap運用的是柵格佈局。簡單來說就是把一行分為12個柵格。將12個柵格分配給不同的DIV元素來進行佈局。

• 在Bootstrap中引入了柵格佈局，將頁面分成類似於表格一樣的佈局

• 每一行由12列組成，可以透過設定列所佔有的列的個數來設定列的寬度

• 支援響應式佈局，分別有5種響應尺寸，分別對應不同的裝置寬度

• 使用flexbox串流佈局來實作頁面佈局

• 使用div來實作容器、行、列的佈局

2.如何實作柵格佈局?

首先，使用bootstrap由很多方式，webpack載入或使用CND引用等。我是直接從CDN下載3.37版本到本地。再透過link標籤引用。這點和引用Jquery類似。

其次，根據佈局指派柵格。舉個例子，比如說要實現水平的三列等大佈局。那就給每個DIV分配12/3=4個柵格，

如果是三列不等大的，左邊大約為3個柵格，中間為5個，右邊為4個

具體操作：

• 首先佈置一個容器div用來存放柵格，為div添加container類別實作容器

• 為子元素加入row類別實作行的佈局，而列的佈局使用col-*來實現

• #當類別名為container-fluid的話，預設佔據的寬度為100%，佔據整個頁面

• 使用col-時，不設定的大小，會預設智慧平分寬度，設定*的大小會依照比例分割頁面空間

• 但是同一行中*的大小不能超過12，可以小於12，會存在空白；當超過12時，會將超過的部分放在下一行中

  
  
  
  
  
  
  




  

    
第一列
    
第二列
    
第三列
  



  

    
第一列
    
第二列
    
第三列
  



  

    
第一列
    
第二列
    
第三列
  



  

    
第一列
    
第二列
    
第三列
  



  

    
第一列
    
第二列
    
第三列
  

3.柵格佈局class參數是什麼意思?

柵格的class有四個col-lg-1，col-md-1，col-sm-1,col-xs- 1,分別對應大螢幕（large)，中等螢幕（middl），小螢幕（smll），極小（xs）。其中col表示列的意思column，中間為尺寸的縮寫，最後是div分配的柵格大小（例子是佔用的是1/12）

相關推薦：bootstrap教程

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