1、引入bootsrap真的好好看
效果展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入css，开发版本-->
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<!-- 生产版本 -->
<!-- <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">-->
</head>
<body>
<!--引入样式之后好好看！！！-->
<input type="button" value="提交">
<input type="button" value="提交" class="btn-primary">
<input type="button" value="提交" class="btn-success">
<input type="button" value="提交" class="btn-danger btn-xs">
</body>
</html>
2、引入步骤
- 下载bootsrap
- 将bootsrap解压文件加到对应目录下(如plugins)
3、栅格
效果预览
<div class="col-xs-2" style="background-color: pink">aa</div>
<div class="col-xs-9" style="background-color: blueviolet">bb</div>
- 栅格分类：
- 响应式：
- 非响应式:固定比例，改变浏览器宽高，格子会随之改变
- 响应式：
<div class="col-xs-2" style="background-color: pink">aa</div>
<div class="col-xs-9" style="background-color: blueviolet">bb</div>
- 列偏移：
# 偏移两个格
<div class="col-sm-offset-2 col-lg-2" style="background-color: pink">ss</div>
4、container
样式一：
<div class ="container-fluid">
<div class="col-sm-3">左边</div>
<div class="col-sm-3">右边</div>
</div>
样式二：
<div class ="container">
<div class="col-sm-3">左边</div>
<div class="col-sm-3">右边</div>
</div>