这是我在工作中第一次遇到的技术点,我一定要好好学习。
bootstrap框架真的很方便,也能很好的适应移动端的像素
学习bootstrap主要有以下几步,这篇文章,主要讲第一步:
1.安装bootstrap
在bootstrap官网下载最新的bootstrap文档,然后将相应的bootstrap文档导入要写的界面代码中,如下:
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
必须是html5文档类型
<!doctype html>
匹配移动端的真实高度:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
布局容器(bootstrap自带居中容器):.container 自适应屏幕大小
栅格参数:
在bootstrap框架里面,一个.row里面包含12个栅格,这些栅格通过设置参数:col-md-参数 来设置一个元素占用几个栅格,来设置排版。
col-md-offset-参数,来设置左边空几个栅格再放置元素。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<style type="text/css">
.container{
background: #ccc;
}
.row{
margin-bottom: 15px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="logo.png" width=100%>
</div>
<div class="col-md-4">
<img src="logo.png" width=100%>
</div>
<div class="col-md-4">
<img src="logo.png" width=100%>
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="logo.png" width=100%>
</div>
<div class="col-md-3">
<img src="logo.png" width=100%>
</div>
<div class="col-md-3">
<img src="logo.png" width=100%>
</div>
<div class="col-md-3">
<img src="logo.png" width=100%>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<img src="logo.png" width=100%>
</div>
</div>
</div>
</body>
</html>