Bootstrap框架
1.生态环境下载
https://v3.bootcss.com/getting-started/#download
2.CDN简介(内容分发网络)
CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
3.bootstrap文件划分
- js:只需要留一个bootstrap.min.js即可
- css:只需要留一个bootstrap.min.css即可
- fonts:都是必须的,不需要我们手动导入,js文件会自动查找导入对于的fonts文件
注意:bootstrap中的js文件依赖于jQuery,所以使用bootstrap需要先导入jQuery
4.布局容器
<div class='container'>
左右有固定留白
</div>
<div class='container-fluid'>
全屏展示
</div>
5.栅格系统
- row(行)
- col(列)
一个row就表示一行(这一行默认给你均分成了12份,每一份还可以均分成12份)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.c1 {
background-color: red;
height:50px;
border:3px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
</div>
</div>
</body>
</html>
6.媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.c1 {
background-color: red;
height:50px;
border:3px solid black;
}
@media screen and (max- 600px){
.c1 {
background-color: green;
height:50px;
border:3px solid black;
}
} /*当宽度小于600px的时候背景颜色就会变绿*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
</div>
</div>
</body>
</html>
7.列偏移
<div class='col-md-4 col-md-offset-4'>
</div>
8.表格标签
<table class='table table-hover table-bodered table-striped'>
</table>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr class="info "> <!--代表颜色,一共四种-->
<th class="text-center">name</th>
<th class="text-center">password</th>
<th class="text-center">hobby</th>
</tr>
</thead>
<tbody>
<tr class="success"> <!--代表颜色,一共四种-->
<td class="text-center">lucas</td>
<td class="text-center">123</td>
<td class="text-center">学习</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
9.按钮
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<button class="btn btn-success">button</button>
<button class="btn btn-info">button</button>
<button class="btn btn-warning">button</button>
<button class="btn btn-danger">button</button>
<button class="btn btn-primary">button</button>
<a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>
</div>
</div>
</div>
10.快速浮动
<div class='pull-left'></div>
<div class='pull-right'></div>