<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>利用柵格系統佈局</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container">
<h1>流式容器（使用.container實現），會根據瀏覽器窗口大小限制自身寬度</h1>
<h2>屏幕級別</h2>
<p>在超小屏幕（寬度小於576px）下，流式容器的最大寬度爲none或auto</p>
<p>在小屏幕sm（寬度在大於等於576px小於768px）下，流式容器的最大寬度爲540px</p>
<p>在中等屏幕md（寬度大於等於768px小於992px）下，流式容器的最大寬度爲720px</p>
<p>在大屏幕lg（寬度大於等於992px小於1200px）下，流式容器的最大寬度爲960px</p>
<p>在超大屏幕xl（寬度大於等於1200px）下，流式容器的最大寬度爲1140px</p>
<hr>
<p>三等分容器</p>
<div class="row">
<div class="col">左：4/12</div>
<div class="col">中：4/12</div>
<div class="col">右：4/12</div>
</div>
<p>在一個row裏分出兩行兩列，w-100可以理解爲換行符，或者在row上添加row-cols-2，前者可以靈活設置每行分別有幾列，後者規定每行要填夠列數，最後一行不夠的默認從左到右擺放</p>
<div class="row">
<div class="col">1</div>
<div class="w-100"></div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row row-cols-2">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<p>三分容器，寬度比爲8:2:2</p>
<div class="row">
<div class="col-8">左：8/12</div>
<div class="col-2">中：2/12</div>
<div class="col-2">右：2/12</div>
</div>
<p>三分容器，寬度比爲3:6:3，只適用於小屏幕及以上</p>
<div class="row">
<div class="col-sm-3">左：3/12</div>
<div class="col-sm-6">中：6/12</div>
<div class="col-sm-3">右：3/12</div>
</div>
<p>三分容器，中等屏幕時寬度比爲3:6:3，大屏幕和超大屏幕時寬度比爲5:2:5</p>
<div class="row">
<div class="col-md-3 col-lg-5">中等屏幕時：左：3/12；大屏幕和超大屏幕時：左：5/12</div>
<div class="col-md-6 col-lg-2">中等屏幕時：中：6/12；大屏幕和超大屏幕時：中：2/12</div>
<div class="col-md-3 col-lg-5">中等屏幕時：右：3/12；大屏幕和超大屏幕時：右：5/12</div>
</div>
<hr>
</div>
<div class="container" style="height: 50px;">
<div class="row align-items-center" style="height: 50px;">
<div class="col">align-items-start是垂直靠頂</div>
<div class="col">align-items-center是垂直居中</div>
<div class="col">align-items-end是垂直靠底</div>
<div class="col">container和row需要指定相同的高度</div>
</div>
</div>
<div class="container">
<div class="row justify-content-end no-gutters">
<div class="col">justify-content-start是水平居左</div>
<div class="col">justify-content-center是水平居中</div>
<div class="col">justify-content-end是水平居右</div>
<div class="col">justify-content-between是兩端對齊</div>
<div class="col">justify-content-around是平均分佈</div>
<div class="col">no-gutters是清除內容邊距</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col">做了排序的元素位於沒做排序的元素後面</div>
<div class="col">可以將沒做排序的元素理解爲order-0</div>
<div class="col order-md-4">第3個元素是order-4，只適用於中等屏幕及以上</div>
<div class="col order-1">第4個元素是order-1</div>
</div>
<div class="row">
<div class="col-3 offset-3">偏移的單位不是像素，是元素</div>
<div class="col-3">提供比對齊更靈活的頁面佈局</div>
</div>
</div>
<div class="container-fluid">
<h1>固定容器（使用.container-fluid實現），不會隨瀏覽器窗口大小自動調整寬度</h1>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
</body>
</html>
