生活随笔
收集整理的這篇文章主要介紹了
一文带你马上清楚bootstrap的栅格系统
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
bootstrap的柵格系統
我們都知道bootstrap的柵格系統是為了實現網站的響應式布局，但bootstrap提供了一套響應式、移動設備優先的流式柵格系統，它會將網頁分為12等價（寬度），舉個例子，假設你設置最外層div的寬度為1200px，那么每一份就占100px。話不多說，直接上代碼和效果圖吧。
可見代碼中的注釋說明：
例1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstarp 柵格系統
</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"><meta name="viewport" content="width=device-width,initial-scale=1" /><style>.row div{border: 2px solid #ff0000;height: 100px;}</style>
</head>
<body><div class="container"><div class="row"><div style="width:30%">1
</div><div style="width:40%">2
</div><div style="width:30%">3
</div></div><div class="row"><div class="col-4">1
</div><div class="col-4">2
</div><div class="col-4">3
</div></div></div></body>
</html>
如圖：
例2：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstarp 柵格系統
</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"><meta name="viewport" content="width=device-width,initial-scale=1" /><style>.row div{border: 2px solid #ff0000;height: 100px;}</style>
</head>
<body><div class="container"><div class="row"><div class="col-sm-9 col-12">第一行第一列
</div><div class="col-sm-3 col-12">第一行第二列
</div></div></div></body>
</html>
如圖：
根據例2擴展例3：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstarp 柵格系統
</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"><meta name="viewport" content="width=device-width,initial-scale=1" /><style>.row div{border: 2px solid #ff0000;height: 100px;}.container{border: 5px solid yellow;}@media (min-width: 1200px) {.container{max-width: 1300px;}}</style>
</head>
<body><div class="container"><div class="row"><div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 d-none d-sm-block">1
</div><div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">2
</div><div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">3
</div><div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">4
</div></div></div></body>
</html>
好了，到這里你應該已經比較清楚bootstrap的柵格系統是怎么工作的了吧，不妨自己把代碼寫一寫看看各種效果，這樣子會理解得更快。
總結
以上是生活随笔為你收集整理的一文带你马上清楚bootstrap的栅格系统的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
