前言
根据上一章博客我们讲解了Bootstrap的安装
这一章来讲解一下12栅格系统 排版等等
一，Bootstrap 12栅格系统
1.1，Bootstrap 12栅格系统原理
- 栅格系统是通过一系列的行（row）与列（column）的组合来创建页面布局，设置的内容可以放入这些创建好的布局中
- 实现原理
- 通过定义容器的大小，平分为12份
- 调整内外边距
- 结合媒体查询
1.2，Bootstrap 12栅格系统的使用
- 列组合
- 列偏移
- 列嵌套
- 列排序
1.3，列组合 col-md
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap基础模板</title>
<!-- bootstrap的CSS文件 -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
.row{
border: 1px solid cadetblue;
}
.row>div{
border: 1px solid darkblue;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" >第一行：.col-md-4</div>
<div class="col-md-8">第一行：.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">第二行：.col-md-2</div>
<div class="col-md-10">第二行：.col-md-10</div>
</div>
<div class="row">
<div class="col-md-6">第三行：.col-md-6</div>
<div class="col-md-6">第三行：.col-md-6</div>
</div>
</div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>
- 通过更改数字来合并列就是列组合
1.3，列偏移 col-md-offset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap基础模板</title>
<!-- bootstrap的CSS文件 -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
.row{
border: 1px solid cadetblue;
}
.row>div{
border: 1px solid darkblue;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-1" >第一行：.col-md-4</div>
<div class="col-md-8">第一行：.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1">第二行：.col-md-2</div>
<div class="col-md-4 col-md-offset-1">第二行：.col-md-4</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">第三行：.col-md-10</div>
<div class="col-md-4">第三行：.col-md-4</div>
</div>
</div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>
- 使用 .col-md-offset-* 类可以将列向右侧偏移
- 一行12占满之后会自动下一行
1.3，列嵌套 col-md
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap基础模板</title>
<!-- bootstrap的CSS文件 -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
.row{
border: 1px solid cadetblue;
}
.row>div{
border: 1px solid darkblue;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-10">第一行：.col-md-10</div>
<div class="col-md-2">第一行：.col-md-2</div>
</div>
<div class="row">
<div class="col-md-6">第二行：.col-md-6</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">1-1</div>
<div class="col-md-6">1-2</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">2-1</div>
<div class="col-md-6">2-2</div>
</div>
</div>
<div class="col-md-6">2-2</div>
</div>
</div>
</div>
</div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>
- 为了使用内置的栅格系统将内容再次嵌套，可以在已存在的 .col-md-* 元素内添加一个新的 .row 元素和一系列 .col-md-* 元素。需要注意的是，被嵌套的行所包含的列的个数不能超过12
1.3，列排序 col-md-push | col-md-pull
<!DOCTYPE html>
<html lang
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
