简介，布局容器，栅格系统，排版，对齐，表格，表单
Bootstarp简介
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
我们使用bootstrap库可以很方便的写一些好看的样式，他的内部给我们封装了很多很多的css样式和一些非常好的js事件，以后我们只需要把他的类库文件引入到我们的文档中就能使用
我们在使用的过程中，只需要通过增加和删除class属性值就能够达到某种特殊效果
如何使用：https://www.bootcss.com/在百度中搜索
bootstrap的版本：v3、v4、v5我们推荐使用v3就行
v3版本依赖 jQuery，v4、v5版本不依赖jQuery
如何使用
# 下载bootstrap的类库文件
# 使用CDN
"""要想使用bootstrap有两部分，css部分，js部分"""
# 如果你只想使用css样式，那么，你就只引入css文件即可
# 如果你想使用它提供的一些动作，就需要引入外部的js文件
# 你在引入js文件的时候，一定要先引入jQuery文件，bootstrap的js文件是依赖于jQuery的js
# 在v3版本，在v4、v5版本就不需要了
Normalize.css
# 一个CSS 重置样式库。
布局容器
<div class="container c1">
</div>
<div class="container-fluid c1">
</div>
# 以后我在写页面的时候，会上来就是一个div然后加一个class=container
栅格系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<style>
.c1 {
height: 100px;
border: 1px solid coral;
}
</style>
</head>
<body>
<div class="container c1">
<div class="row">
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
</div>
<div class="row">
<div class="col-md-4 c1"></div>
<div class="col-md-8 c1"></div>
</div>
</div>
<!--<div class="container-fluid c1"></div>-->
</body>
</html>
排版
标题
<body>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</body>
副标题
<body>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
</body>
对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
表格
以后加这些就OK了:table table-bordered table-striped table-hover
<table class="table table-bordered table-striped table-hover">
<tr class="danger">
<th>姓名</th>
<th>年龄</th>
<th>学历</th>
<th>薪资</th>
<th>入职时间</th>
</tr>
<tr >
<td>小夏</td>
<td>16</td>
<td>高中</td>
<td>8000</td>
<td>2022-5-15</td>
</tr>
<tr class="info">
<td>小徐</td>
<td>23</td>
<td>初中</td>
<td>10000</td>
<td>2023-4-23</td>
</tr>
<tr >
<td>小黄</td>
<td>22</td>
<td>大学</td>
<td>10000</td>
<td>2018-4-23</td>
</tr>
<tr class="warning">
<td>小杨</td>
<td>26</td>
<td>博士</td>
<td>22000</td>
<td>2017-4-23</td>
</tr>
<tr>
<td>小任</td>
<td>29</td>
<td>大学</td>
<td>15000</td>
<td>2020-7-23</td>
</tr>
<tr class="success">
<td>小陈</td>
<td>27</td>
<td>研究生</td>
<td>25000</td>
<td>2017-2-23</td>
</tr>
</table>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">登入页面</h1>
<form>
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入你的用户名">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入你的密码">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">登入</button>
</form>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号