web前端-bootstrap响应式布局的心路历程（三、响应式布局）
【摘要】 通过上一个案例，我们实现了通过栅格系统对div进行行列的布局：那么我们这一小节就再次扩展这个内容，上个内容我们只是使用里.col-md-*的类，也就是中等屏幕大小的布局，我们这次添加上.col-xs-*的类来实现响应式布局，那么bootstrap是怎么区分中小屏幕的呢？看下表（通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的）。那么看出来了吧，bootstra...
通过上一个案例，我们实现了通过栅格系统对div进行行列的布局：
那么我们这一小节就再次扩展这个内容，上个内容我们只是使用里.col-md-*的类，也就是中等屏幕大小的布局，我们这次添加上.col-xs-*的类来实现响应式布局，那么bootstrap是怎么区分中小屏幕的呢？看下表（通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的）。
那么看出来了吧，bootstrap会根据屏幕大小来确定使用哪种类，当屏幕变小（手机）的时候，md的类不再使用，而使用xs类。
从上图可以看出来，如果我们不设置xs类的话，当屏幕缩小时，所有的div又堆叠在一起了，那么我们现在设置col-xs的类，并将代码贴在下面再看我们的演示效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="bootstrap.min.css" rel="stylesheet" />
<style>
.the1{
background-color:red;
}
.the2{
background-color:greenyellow;
}
.the3{
background-color:bisque;
}
.the4{
background-color:yellow;
}
div{
font-size: larger;
border:#000000 solid 1px;
}
</style>
</head>
<body>
<div class="row the1">
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
</div>
<div class="row the2">
<div class="col-md-8 col-xs-3">.col-md-8</div>
<div class="col-md-4 col-xs-9">.col-md-4</div>
</div>
<div class="row the3">
<div class="col-md-4 col-xs-2">.col-md-4</div>
<div class="col-md-4 col-xs-3">.col-md-4</div>
<div class="col-md-4 col-xs-7">.col-md-4</div>
</div>
<div class="row the4">
<div class="col-md-6 col-xs-9">.col-md-6</div>
<div class="col-md-6 col-xs-3">.col-md-6</div>
</div>
<script src="jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="bootstrap.min.js"></script>
</body>
</html>
现在我将xs类添加进去了，当屏幕缩小到一定程度的时候，我们再来看样式的变化：
我们可以看出来第一行没有变化，因为我设置的xs还是12行。但是我们可以看到第二行在屏幕缩小的时候：第一个div在中等屏幕下占8个位置，小屏幕只占3个位置，我们看代码就会发现是我们设置的
<div class="col-md-8 col-xs-3">.col-md-8</div> <div class="col-md-4 col-xs-9">.col-md-4</div>
生效了。同样的道理，后面两行也发生了改变。这个只是简单的响应式，那么更深层次的我们大家自己研究吧。嘿嘿
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）