<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="jquery-3.2.1.js"></script>
<script src="dist/js/bootstrap.js"></script>
<title>导入bootstrap</title>
<style>
.grid {
border: 1px solid red;
border-radius: 5px;
background-color: #2aabd2;
min-height: 30px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<!--
基本规则
1.将屏幕看做是一个个沿水平方向和垂直方向有序排列的网格、栅格、单元格构成
2.所有数据必须放在栅格中
3.采用响应布局，移动设备优先
4.bootstrap将屏幕水平方向氛围12个等分
屏幕分辨率划分的依据
1.（screen < 768px）超小屏幕：col-xs-x （1-12）
2. （768<=screen < 992px）:小型屏幕：col-sm-x
3. (992px <= screen < 1200):中型屏幕 col-md-x
4. (screen >=1200) : 超大屏幕col-lg-x
三 实现原理和步骤
第一步：必须创建出一个容器：class="container"
第二部：必须创建出一个行：class="row"
第三部：必须创建出栅格：class="col-md-4"
col-md-12 栅格12 col-md-offset-3偏移3列
列排序 col-md-push-3 左拉3 col-md-pull 右拉9
-->
<div class="container">
<h4>整行</h4>
<div class="row">
<div class="col-md-12 grid">内容</div>
</div>
<h4>两等分</h4>
<div class="row">
<div class="col-md-6 col-xs-6 grid">内容</div>
<div class="col-md-6 col-xs-6 grid">内容</div>
</div>
<h4>三等分</h4>
<div class="row">
<div class="col-md-4 grid">内容</div>
<div class="col-md-4 grid">内容</div>
<div class="col-md-4 grid">内容</div>
</div>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
