**之前的博客写的是媒体查询 但是自己手写属实很麻烦
那么我们可以使用BootStrap框架提供的class类实现快速的响应式网页**
简介
BootStrap是由Twitter公司开发维护的UI框架，提供大量的css样式，开发者结合HTML以及Javascript，快速开发出响应式网页以及交互效果
中文官网：https://www.bootcss.com/
补充：
1.BootStrap虽然好但是不能满足所有的需求还是需要适当的写css
2.BootStrap版本3.0和4.0 推荐使用稳定版3.0 (3.0足以)
一.下载
使用： 具体的更多方式进去官网查看
1.BootstrapCDN
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">2.通过 npm 进行安装
npm install bootstrap@3二.调用类：
使用BootStrap提供的样式
**container响应式布局的核心板**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<style>
div{height: 200px;background-color: chocolate;}
</style>
<body>
<div class="container">1</div>
</body>
</html>container:的适配
`@media (min-width: 768px)
.container {
width: 750px;}`
`@media (min-width: 992px)
.container {
width: 970px;}`
`@media (min-width: 1200px)
.container {
width: 1170px;}
`
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}BootStrap的栅格系统
栅格是把网页的宽度规划为若干等分 BootStrap3默认把网页分为12等份
模仿BootStrap底层原理
是使用百分比和float：left布局实现响应式适配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<style>
/*
@media (min-width: 768px) .container { width: 750px; }
@media (min-width: 992px) .container { width: 970px; }
@media (min-width: 1200px) .container { width: 1170px; }
*/
/* container 750px 一份占用750px的100%*/
@media (min-width: 768px) {
.container div {
width: 100%;
float: left;
height: 200px;
background-color: chocolate;
}
}
/* container 992px 一份占用970px的33.33%*/
@media (min-width: 992px) {
.container div {
width: 33.33%;
height: 200px;
float: left;
background-color: chocolate;
}
}
/* container 1200px 一份占用1170px的25%*/
@media (min-width:1200px) {
.container div {
float: left;
width: 25%;
height: 200px;
background-color: chocolate;
}
}
</style>
<body>
<div class="container">
<div>111</div>
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</body>
</html>栅格使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<style>
.container div{
height: 200px;background-color: yellow;
}
</style>
<body>
/*
一共是4个元素 分为12等分
col-lg-3 大屏 >=1200px 每一个元素占3份 一行排列4个元素
col-md-4 中屏幕 >=992px 每一个元素占4份 一行排列3个元素
col-sm-6 小屏幕 >=768px 每一个元素占6份 一行排列2个元素
col-xs-12 超小屏幕 <768px 每一个元素占12份 一行排列1个元素
*/
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">22</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">22</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">22</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">22</div>
</div>
</body>
</html>class类
**container默认带有padding 左右15px 自己可以css清楚padding的样式
或者在container中在嵌套一个row类(自带左右的margin为-15px)达到清楚左右边距的效果
container-fluid 宽度为100%自带左右的padding为15px**
代码解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<style>
//方式1
.container{
padding: 0 !important;
height: 100px;background-color: yellow;
}
</style>
<body>
方式1
<div class="container">
wqed
</div>
方式2
<div class="container">
<div class="row">11</div>
</div>
</body>
</html>BootStrap定制
当BootStrap的样式不满足需求时候可以定制
下载好解压到项目 把之前的引入替换点即可
