布局响应式 Bootstrap框架

布局
- 区别：
响应式布局
- 技术原理：媒体查询
UI框架
响应式UI框架 Boostrap
- 使用步骤：
栅格系统
- 屏幕种类
- 辅助类：
  - 小技巧

布局

pc端布局、移动端、响应式、自适应、flex布局、百分比、流式布局…….
都是为了屏幕适配的布局：
可参考https://juejin.cn/post/6844903881915252744#heading-20

区别：

百分比布局、流式布局、flex布局、弹性布局效果等价

💥div 盒子、图片随着屏幕改变
flex布局一定使用flex
流式布局也等于百分比布局，指的是页面上大部分的容器和元素的宽度都不是定死
百分比布局百分百单位

自适应：流式布局 + vw/rem ：flex + vw/rem
响应式布局：
当屏幕改变到一定的区间，布局才会发生改变；
一套代码同时应用到PC端和移动端；
利用媒体查询media

响应式布局
一套代码，可以运行在pc端和移动端，同时提供比较友好的体验
例如vs code、三星中国等
适用网站：节约成本；PC端和移动端体验不如两套体验好；主要做信息展示的公司
如何判断网站是否使用响应式布局使用？
比较这个网站在PC端和移动端上的体验；可参考vscode官网

技术原理：媒体查询
css语法，可以根据当前屏幕的宽度不同，去加载对应的一套css代码
可之前参考： https://www.yuque.com/yunguo-fqpqd/mqqodm/nr9aqf

UI框架
方便快速实现页面布局

响应式UI框架 Boostrap
应用于pc端和移动端
官网：https://www.bootcss.com/

使用步骤：
```
1. 先下载框架的文件 (fonts css js )
2. HTML文件先引入  bootstrap.css
                  再引入 jquery.js
                   再引入bootstrap.js
3. 再拷贝一段 需要的代码
```
栅格系统
官网：https://v3.bootcss.com/css/#grid

先写容器
使用关键代码

特别注意：栅格系统把屏幕，一行分成了12份（列），每一列占一份
常用：1. container 版心宽度 container-fluid满屏
2.写 .row
3.根据屏幕种类写每一列的份数 col-屏幕种类-份数

屏幕种类

🌈bootstrap按照屏幕的宽度不同，分成4个种类
大屏幕 lg > 1200px
中等屏幕 md 992 - 1200px
小屏幕 sm 768 - 992px
极小屏幕 xs < 768px
如图显示：
布局响应式 Bootstrap框架 - 图1
参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
     content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
 <title>栅格.html</title>
 <!-- 引入bootstrap.css  -->
 <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
 <style>
     .row>div {
         border: 2px solid black;
     }
 </style>
</head>
<body>
 <div class="container-fluid">
     <div class="row">
         <div class="col-xs-3  col-md-4  col-lg-6">6</div>
         <div class="col-xs-3  col-md-4  col-lg-6">6</div>
         <div class="col-xs-3  col-md-4  col-lg-6">6</div>
         <div class="col-xs-3  col-md-4  col-lg-6">6</div>
     </div>
 </div>
 <!-- 引入jquery.js -->
 <script src="./bootstrap-3.4.1-dist/jquery.js"></script>

  <!-- 和jquery.js 一块使用，标签名上随时显示屏幕种类和尺寸大小-->
 <script src="./bootstrap-3.4.1-dist/jquery.js"></script>

 <!-- 引入bootstrap.js -->
 <script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

🔥🔥🔥未设置较大屏幕样式的时候，较大屏幕会沿用较小屏幕的样式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta
   name="viewport"
   content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
 />
 <title>08-较大屏幕会沿用较小屏幕栅格的设置</title>
 <link
   rel="stylesheet"
   href="./lib/bootstrap-3.4.1-dist/css/bootstrap.css"
 />
 <style>
   .row > div {
     box-shadow: 0px 0px 1px 1px black;
   }
 </style>
</head>
<body>
 <!-- 
   1 如果 我只设置了较大屏幕 的栅格，  较小屏幕的 相等于没设置栅格一样 一个列占一行
   2 如果 我只设置了较小屏幕 的栅格，比它大的屏幕都会沿用较小屏幕的设置
     1 col-xs-3  相当于 
       col-xs-3 = col-xs-3 col-sm-3 col-md-3 col-lg-3

     2 col-md-3  =  col-md-3  col-lg-3     
  -->
 <div class="container-fluid">
   <div class="row">
     <div class="col-xs-3">1</div>
     <div class="col-xs-3">2</div>
     <div class="col-xs-3">3</div>
     <div class="col-xs-3">4</div>
   </div>
 </div>
 <script src="./lib/jquery.js"></script>
 <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

辅助类：

使用一些特定封装好的类，来实现功能
布局响应式 Bootstrap框架 - 图2
案例解析：
布局响应式 Bootstrap框架 - 图3

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
     content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
 <title>team.html</title>
 <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.css">
 <link rel="stylesheet" href="./team.css">
 <style>
     @media screen and (max-width: 768px) {
         写导航的时候注意，选择修改标签，其次注意优先级，看属性是否生效
         .navbar {
             background-color: black !important;
         }

         .navbar-collapse {
             background-color: black;
         }
     }      
/* 3 开源项目 */
     .opensource img {
         width: 100%;
         border-radius: 5px;
     }

     .opensource .row>div {
         margin-bottom: 10px;
     }
 </style>
</head>
<body>
<!-- 开源代码 -->
 <div class="open container">
     <h1 class="text-center">OpenSource/开源项目</h1>
     <p class="text-center">种类众多的开源项目，让爱不释手</p>
 </div>
 <!-- 四小图 -->
 <div class="container">
     <div class="row">
         <div class="col-md-3 col-sm-6">
             <img src="./uploads/pro1.jpg" alt="">
         </div>
         <div class="col-md-3 col-sm-6">
             <img src="./uploads/pro2.jpg" alt="">
         </div>
         <div class="col-md-3 col-sm-6">
             <img src="./uploads/pro3.jpg" alt="">
         </div>
         <div class="col-md-3 col-sm-6">
             <img src="./uploads/pro4.jpg" alt="">
         </div>
     </div>
 </div>

 <script src="./lib/jquery.js"></script>
 <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

 <script src="./lib/showScreen.js"></script>
</body>
</html>

小技巧

为了更快写代码属性，CSS Tress快速生成类名选择器书写，具体功能请自行探索
布局响应式 Bootstrap框架 - 图4
Ctrl + Shift +p 出现框，然后搜索使用
布局响应式 Bootstrap框架 - 图5

布局 响应式 Bootstrap框架

布局

区别：

响应式布局

技术原理：媒体查询

UI框架

响应式UI框架 Boostrap

使用步骤：

栅格系统

屏幕种类

辅助类：

小技巧