Bootstrap框架
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-width: 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>
