<!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="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
扫一扫
849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
