web前端-bootstrap响应式布局的心路历程（二、栅格系统实际演练）
【摘要】 在第一小节里，我们介绍里bootstrap，那么我们在这里就通过bootstrap来写一个小的页面，下面就是一个bootstrap最基本的框架里，那么我们注意到下面还需要导入jQuery和bootstrap.js。那么在这个框架上我先写了一个co-md例子，通过这个例子我们可以和上一篇结合起来，（看博客没用，还是得看官网啊）。注意以下几点：栅格系统用于通过一系列的行（row）与列（colum...
在第一小节里，我们介绍里bootstrap，那么我们在这里就通过bootstrap来写一个小的页面，下面就是一个bootstrap最基本的框架里，那么我们注意到下面还需要导入jQuery和bootstrap.js。
那么在这个框架上我先写了一个co-md例子，通过这个例子我们可以和上一篇结合起来，（看博客没用，还是得看官网啊）。注意以下几点：
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列通过“行（row）”在水平方向创建一组“列（column）”
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素
栅格系统中的列是通过指定1到12的值来表示其跨越的范围
<!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-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row the2">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row the3">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row the4">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<script src="jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="bootstrap.min.js"></script>
</body>
</html>
这个代码的结果就是：
从这个图中我们可以看出，我们每一行根据我们样式的不同被分成了12分、2份、3份、2份。每份的间距也不一样。是不是很神奇，不用自己写display，也不用管别的其它，哈哈。下一个案例在这个基础上加上xs的样式，来演示响应式布局的厉害之处。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）