# 3.柵格系統
介紹的是 4.5.x版本
一行最多放12列
- class類介紹 最外層容器： 1.container-fluid：寬度100%,和body的寬度一樣 2.container：寬度是一個具體數值，但是會根據用戶螢屏大小來改變
行類 1.row：分行
列類： 5個回應層 后面的*表示占據列數,取值從1-12 1.col-*:None(auto);//col為超小屏，螢屏<576px，容器的寬度固定為auto，一行可以永遠設定12個列 2.col-sm-*:540px;//sm為小屏，螢屏>=576px，容器的寬度固定為540px，一行可以設定12個列，螢屏尺寸<576的時候，一行只能設定1列 3.col-md-*:720px;//md為中屏，螢屏>=768px，容器的寬度固定為720px，一行可以設定12個列，螢屏尺寸<768的時候，一行只能設定1列 4.col-lg-*:960px;//lg為大屏，螢屏>=992px，容器的寬度固定為960px，一行可以設定12個列，螢屏尺寸<992的時候，一行只能設定1列 5.col-xl-*:1140px;//xl為超大屏，螢屏>=1200px，容器的寬度固定為1140px，一行可以設定12個列，螢屏尺寸<1200的時候，一行只能設定1列 ```html <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <title>Document</title> <style> .row div{ height:100px; background:green; border:1px solid #000; color:#fff; } </style> </head> <body> <div > <div > <div >第1列</div> <div >第2列</div> <div >第3列</div> <div >第4列</div> <div >第5列</div> <div >第6列</div> <div >第7列</div> <div >第8列</div> <div >第9列</div> <div >第10列</div> <div >第11列</div> <div >第12列</div> </div> <div > <div >占1列</div> <div >占2列</div> <div >占3列</div> <div >占4列</div> <div >占3列</div> </div> <div > <div >占13列</div> </div> </div>
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <title>Document</title> <style> .row div{ height:100px; background:green; border:1px solid #000; color:#fff; } .v-align{ height:100px; background:rgba(255,0,0,0.1); margin:10px -15px; } .v-align div{ height:40px; line-height:40px; background:rgba(86,61,124,0.2); color:#333; } </style> </head> <body> <div > <div > <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> <div >等寬列</div> </div> <!--設定多行等寬列，在希望換行的地方添加一個w-100的class，能夠讓后面的列換行--> <div > <div >等寬列，行1</div> <div >等寬列，行1</div> <div style="height:auto;border:none;"></div> <div >等寬列，行2</div> <div >等寬列，行2</div> </div> <!--設定一個列寬，剩下的自動平分--> <div > <div >在小屏下占7列</div> <div >自動平分剩余的寬度</div> <div >自動平分剩余的寬度</div> <div >自動平分剩余的寬度</div> </div> <!--設定根據內容調整列的寬度，使用.col-{breakpoint}-auto，breakpoint代指5個回應層--> <div > <div >在中等螢屏下內容撐開寬度</div> </div> <!--設定所有尺寸下，都占同樣的列數，使用.col-* --> <div > <div >所有尺寸下都占8列</div> <div >所有尺寸下都占4列</div> </div>
<!-- 混合排列或組合模式 1.超大螢屏下一行顯示6個div，一個div占2列 2.大螢屏下一行顯示4個div，一個div占3列 3.中螢屏下一行顯示3個div，一個div占4列 4.小螢屏下一行顯示2個div，一個div占6列 5.超小螢屏下一行顯示1個div，一個div占12列 --> <div > <div >超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div> <div >超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div> <div >超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div> <div >超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div> <div >超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div> <div >超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div> </div> <!-- 對齊 垂直對齊： 1.行對齊方式 align-items-start:頂對齊 align-items-center:中間對齊 align-items-end:底對齊 2.列的單獨對齊方式 align-self-start:頂對齊 align-self-center:中間對齊 align-self-end:底對齊 --> <div > <div >垂直對齊-頂部對齊-行的對齊方式</div> <div >垂直對齊-頂部對齊-行的對齊方式</div> <div >垂直對齊-頂部對齊-行的對齊方式</div> </div> <div > <div >垂直對齊-中間對齊-行的對齊方式</div> <div >垂直對齊-中間對齊-行的對齊方式</div> <div >垂直對齊-中間對齊-行的對齊方式</div> </div> <div > <div >垂直對齊-底部對齊-行的對齊方式</div> <div >垂直對齊-底部對齊-行的對齊方式</div> <div >垂直對齊-底部對齊-行的對齊方式</div> </div> <div > <div >垂直對齊-頂部對齊-列的對齊方式</div> <div >垂直對齊-中間對齊-列的對齊方式</div> <div >垂直對齊-底部對齊-列的對齊方式</div> </div> <!--水平對齊 1.justify-content-start 左對齊 2.justify-content-center 居中對齊 3.justify-content-end 右對齊 4.justify-content-around 分散居中對齊（每個元素兩側的間距是相等的） 5.justify-content-between 左右兩端對齊（元素之間的間距是自動平分的） --> <div > <div >水平對齊-左對齊-行的對齊方式</div> <div >水平對齊-左對齊-行的對齊方式</div> </div> <div > <div >水平對齊-居中對齊-行的對齊方式</div> <div >水平對齊-居中對齊-行的對齊方式</div> </div> <div > <div >水平對齊-右對齊-行的對齊方式</div> <div >水平對齊-右對齊-行的對齊方式</div> </div> <div > <div >水平對齊-分散居中對齊-行的對齊方式</div> <div >水平對齊-分散居中對齊-行的對齊方式</div> </div> <div > <div >水平對齊-左右兩端對齊-行的對齊方式</div> <div >水平對齊-左右兩端對齊-行的對齊方式</div> </div> <!-- 列排序：使用，order-{breakpoint}-* 3.X的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-* 來排序 --> <div > <div >第一列</div> <div >第二列</div> <div >第三列</div> </div> <div > <div >第一列</div> <div >第二列</div><!--只有當螢屏尺寸>=1200的時候，才會進行排序--> <div >第三列</div> </div> <div > <div >第一列</div> <div >第二列</div><!--order-first代表排在第一位，order-last代表排在最后一位--> <div >第三列</div> </div> <!--列偏移：使用offset-{breakpoint}-* --> <div > <div >第一列</div> <div >往右偏移4列</div> </div> <div > <div >第一列</div><!--第一列偏移，后面的格子都會偏移，和下面的現象區分--> <div >第二列</div> </div> <div > <div >第一列</div><!--第一列偏移，后面的格子都會偏移，和上面的現象區分--> <div >第二列</div> </div> <div > <div >小屏占5列，中屏占6列</div><!--第一列偏移，后面的格子都會偏移，和上面的現象區分--> <div >小屏偏移3列，中屏偏移5列</div> </div> <!--間距：使用margin工具可以讓列之間產生間距 margin-right 和 margin-left mr-{breakpoint}-auto 使右側的列遠離到最右邊 ml-{breakpoint}-auto 使左側的列遠離到最左邊 --> <div > <div >第一列</div> <div >第二列，跑到最右邊</div> </div> <div > <div >在中屏下，離左邊距離自動計算</div> <div >在中屏下，離左邊距離自動計算</div> </div> <div > <div >寬度由內容撐開</div> <div >寬度由內容撐開</div> </div> <!--嵌套：每個列里面可以再繼續進行放行，那嵌套里面的元素就會以父級的寬度為基準，再分12列--> <div > <div > 父級的第一列 <div > <div >子級的第一列，小屏下占8列，超小屏下占6列</div> <div >子級的第一列，小屏下占8列，超小屏下占6列</div> </div> </div> <div style="height:150px;background:pink;">父級的第二列</div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> </body> </html> ``` 以上是markdown格式的筆記
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34098.html
標籤：Html/Css