Bootstrap,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的,本博客将从基础开始讲解,逐步学习。
参考链接:https://www.runoob.com/bootstrap/bootstrap-grid-system.html
步骤:
一.搭建Bootstrap环境,有以下两种方式可供参考:
(1)通过下载对应的文件到本地通过相对路径引入
(2)通过官网链接直接引入(该方法可以根据引入文件版本的更新来下载对应文件,但在运行过程中速度可能会受到网络影响)
二.网格系统
1.绘制网格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网格系统</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body{
margin:30px;
}
.container{
outline:1px solid black;
}
.col-md-1,.col-md-3,.col-md-9{
outline:1px solid black;;
padding: 10px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-1">第1列</div>
<div class="col-md-1">第2列</div>
<div class="col-md-1">第3列</div>
<div class="col-md-1">第4列</div>
<div class="col-md-1">第5列</div>
<div class="col-md-1">第6列</div>
<div class="col-md-1">第7列</div>
<div class="col-md-1">第8列</div>
<div class="col-md-1">第9列</div>
<div class="col-md-1">第10列</div>
<div class="col-md-1">第11列</div>
<div class="col-md-1">第12列</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-9">col-md-9</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果如图:
2.网格系统的偏移列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网格偏移列</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body{
margin:30px;
}
.container{
outline:1px solid black;
}
.col-md-3{
outline:1px solid black;;
padding: 10px;
background:orange;
}
.col-md-2{
outline:1px solid black;;
padding: 10px;
background:pink;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-2">col-md-3</div>
<div class="col-md-3 col-md-offset-2">col-md-3</div>
<div class="col-md-2 col-md-pull-4">col-md-4</div>
<div class="col-md-2 col-md-offset-3">col-md-4</div>
</div>
</div>
</body>
</html>
效果图:
col-md-2是设置宽度为2份的网格宽度 ,使用.col-md-offset-* 类向右偏移对应列数。要实现偏移还有两种方式:
(1)col-md-pull偏移数值 //向左偏移
(2)col-md-push-偏移数值 //向右偏移
在网格系统系统中,列排序就是通过 .col-md-push-* 和 .col-md-pull-* 类来实现的。
3.网格系统的嵌套列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网格嵌套</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body{
margin:30px;
}
.container{
outline:1px solid black;
}
.col-md-4,.col-md-8{
outline:1px solid black;
background:orange;
height:40px;
}
.col-md-6{
outline:1px solid black;;
background:#9cff;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<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 class="row">
<div class="col-md-6 ">col-md-6</div>
<div class="col-md-6 ">col-md-6</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果图:
至此,网格系统的简单学习完成。