1.下载Bootstrap
2.Bootstrap文档结构
预编译的:
源码:
3.媒体查询
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
//窗口设定
name =”viewport”
//页面大小屏幕等宽
content = “width=device-width”
//初始缩放比例100%,保证清晰度
initial-scale
//允许缩放的最小比例
mininum-scale
//允许缩放的最大比例
//用户是否可以缩放,no表示不可以
user-scalable=no
4.创建Bootstrap页面
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<!--媒体查询-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 加载 css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<!--加载 jquery库 ,必须在bootstrap核心库之前-->
<script src="js/jquery/min.js"></script>
<!--加载 bootstrap核心库-->
<script src="js/bootstrap.min.js"></script>
</body>
</html>