<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</head>
<body>
<!--布局容器1：container 特点：居中，两端留白-->
<div class="container">
<h1 style="color: red; text-align: center;">container容器</h1>
</div>
<!--布局容器2：container-fluid 特点：占据视口100%宽度-->
<div class="container-fluid">
<h1 style="color: red; text-align: center;">container-fluid容器</h1>
</div>
<!--容器的基本写法必须是：容器-----行-----列-->
<!--定义一个布局容器-->
<div class="container">
<!-- 在布局容器中定义一行 -->
<div class="row">
<!--在行上，定义列-->
<!--如果列元素占用列数总和小于等于12，这些列元素会排列在一行-->
<!--如果列元素占用列数总和大于12，大于12的列元素，就会另起一行排列-->
<div class="col-lg-2">
<h5 style="color: red; text-align: center;">col-lg-2</h5>
</div>
<div class="col-lg-4">
<h5 style="color: red; text-align: center;">col-lg-4</h5>
</div>
<div class="col-lg-6">
<h5 style="color: red; text-align: center;">col-lg-6</h5>
</div>
</div>
</div>
<!--行列可以无限嵌套，嵌套方式必须为 列---行---列---行....-->
<div class="container">
<div class="row">
<div class="col-lg-11">
<h5 style="color: red; text-align: center;">外层col-lg-11</h5>
<div class="row">
<div class="col-lg-11" style="border: 1px solid blue;">
<h5 style="color: red; text-align: center;">内层col-lg-11</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
div{
border: 1px solid red;
}
</style>效果图：
| lg | PC大屏 |
| md | PC小屏 |
| sm | 平板屏幕 |
| xs | 智能手机 |
注：若要PC大屏或PC小屏多支持只需在class后面加空格
如果设置了一个屏幕尺寸，比这个尺寸大的屏幕，继承了当前设置
比这个尺寸小的屏幕，默认一个元素占一行
列偏移：
若在一行中需要向右偏移1格 仅需在后面加入关键字col-lg-offset-1
例如：
<div class="col-lg-2 col-lg-offset-1"></div>bootStrap中文文档下载地址：https://share.weiyun.com/5NMiufl
扫一扫
1032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
