适应所有阈值的bootstrap栅格布局小案例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. 导入bootstrap的css文档-->
<link rel="stylesheet" href="static/css/bootstrap.css">
<title>适应所有阈值的栅格布局小案例</title>
<style>
.grid {
border: 1px solid #696969;
border-radius: 5px;
/*background-color: wheat;*/
min-height: 50px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<!--<p>1. 大屏幕: 大桌面显示器 (>=1200px)</p>-->
<!--<!– col-lg: 阈值是1200px, 大于等于1200按水平排列,小于1200垂直堆叠–>-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col-lg-4 grid bg-info">col-lg-4</div>-->
<!--<div class="col-lg-8 grid bg-warning">col-lg-8</div>-->
<!--</div>-->
<!--</div>-->
<!--<hr>-->
<!--<p>2.中等屏幕 桌面显示器 (≥992px)</p>-->
<!--<!– col-md: 阈值是992px, 大于等于992按水平排列,小于992垂直堆叠–>-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col-md-4 grid bg-info">col-md-4</div>-->
<!--<div class="col-md-8 grid bg-warning">col-md-8</div>-->
<!--</div>-->
<!--</div>-->
<!--<hr>-->
<!--<p>3. 小屏幕: 平板 (>=768px)</p>-->
<!--<!–col-sm: 阈值是768px, 大于等于768水平排列,小于768垂直堆叠–>-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col-sm-4 grid bg-info">col-sm-4</div>-->
<!--<div class="col-sm-8 grid bg-warning">col-sm-8</div>-->
<!--</div>-->
<!--</div>-->
<!--<hr>-->
<!--<p>4. 超小屏幕: 手机 (<768px)</p>-->
<!--<!– col-xs: 阈值是768px, 总是水平排列,不会产生垂直堆叠–>-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col-xs-4 grid bg-info">col-xs-4</div>-->
<!--<div class="col-xs-8 grid bg-warning">col-xs-8</div>-->
<!--</div>-->
<!--</div>-->
<!--<hr>-->
<p>5. 综合实战: 多种阈值共存时的布局</p>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-7 col-sm-3 col-xs-6 grid bg-info">左</div>
<div class="col-lg-8 col-md-5 col-sm-9 col-xs-6 grid bg-danger">右</div>
</div>
</div>
<!--2. 导入支持文件: jquery.js-->
<script src="static/js/jquery-3.4.1.js"></script>
<!--3. 导入bootstrap的js文件-->
<script src="static/js/bootstrap.js"></script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
