响应式网页属性

十七：响应式：
1响应式概念：
随着移动终端的兴起，多种规格终端页面需要展示，响应式可以以让多种终端同时看到相近相同的内容，使用同一套html结构
响应式也叫自适应页面，可以根据浏览器的设备，改变不同的布局，文本，图片效果
根据终端检测变化，同时使用@media媒体查询规则，将不同的css加入到不同的媒体查询中，从而随着页面宽度变化，改变布局样式。

2：视口位置：
视口就是浏览器窗口（不含浏览器控制部分），使用视口约束浏览器窗口大小，让浏览器完全展示在用户面前；

3：媒体类型：

![<style>
    @media screen and (min-width:990px){
        body{background-color: red;}
    }
    @media screen and (max-width:600px){
         body{background-color: aqua;}
    }
    @media screen and (min-width: 600px) and (max-width: 990px){
        body{background-color: burlywood;}
    }
</style>](https://img-blog.csdnimg.cn/66cc33e9943141509763554e98a887f5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGlfZGluZ19kaW5n,size_14,color_FFFFFF,t_70,g_se,x_16)

4：自适应单位：
Vw : viewport width 视口宽度
Vh： viewport height 视口高度
1vw === 视口的1%
1Vh === 视口高度的1%
可视区域的比例大小不含任务栏，底部工作栏，浏览器地址栏

Vw和vh和百分比的区别，百分比是参照父级元素，vw和vh参照浏览器的可视区域
元素的宽/设计图总宽100=？？+vw或vh
元素的高/设计图总高100=？？+vw或vh

Bootstrap4.0
一：bootstrap简介
1：概述：
Bootstrap是twitter的两个设计师设计出来的，基于html，css，js开发的简洁，开源，强大，优雅的ui框架

UI框架是能迅速的构建html架构的框架，它内置了大量的css类，供元素使用

Bootstrap = css+js库组成，因为很多动态效果需要js完成，动态部分使用了jQuery库，它封装了js的很多功能；
https://v4.bootcss.com/docs/versions/

2：准备工作：
1：有个boot的模板
能够快速引入文件，避免路径错误
2：查询手册
了解版本，学习的是4.0版本。版本之间的区别，会有类名，属性名的变化，可能增加，删除，修改，要根据使用的版本进行查询

3：注意事项
-不要背类名和属性，耽误时间
-尽量看源码或者手册方便自定义时迅速解决代码冲突
-自己创建模板，或引用文件时，注意文件顺序
注意：“依赖”
-不改源码，需要自定义时，单独给元素类名进行样式或者功能修改

二：bootstrap基础:
1:容器：
1：container 定宽容器
自适应响应式类，基本需要写在每个部分外层，但注意它始终是版心的作用，因此不会再sm小号以上

2：container-fluid变宽容器
永远保证宽度是父元素的100%，并且有一个左右15px内间距，保证不会让内容紧贴浏览器边缘，一般用于直接写移动端最外层元素

2：文字类：
1：标题字

3:文字颜色：

4:背景颜色：

5：文本的水平对齐：

6字体其他样式：

7：元素尺寸盒子模型
1：宽度和高度
宽度和高度有局限性，尤其是高度，提供了4种宽高的百分比，全部是针对父级宽度高度设置，宽高没有响应式写法

2;边框：

3：圆角：

4：间距和外间距两种：

Day-17：
4：浮动和定位
所有元素一浮动就变成了块级元素

5：定位

6：显示：

7：列表标签：

三：布局：

1：table 表格

2：flex布局
Flex布局依然遵循的是cssflex布局的属性，以及容器和项目，主轴和交叉轴的概念
容器一使用d-flex，项目就变成了块级元素

四：栅格布局
1：概念
栅格布局的底层是弹性布局，因此具有容器和项目的区分，row其实就是容器，列其实就是项目，弹性布局的属性，栅格布局都能用
栅格布局系统是bootstrap的核心内容，因为可以直接做响应式
栅格具有行（row）和列（col）的概念，网格列是通过跨越指定12个列来完成的
2：每个元素的特点

3：响应式写法：
每行的块数要随着屏幕宽度的变化而变化，屏幕宽度关系着container的变化

4：行列可以嵌套
栅格布局的底层是弹性布局，row就是容器，col就是项目，因此，如果要且套，列里还想分行，必须在列里先套行，再嵌套列

5:列偏移：

五：组件
1：按钮：

2：面包屑导航

3：卡片：

4：折叠:

Data-xxx是html自定义属性，

手风琴效果：

5：下拉菜单：

6：分页：

7：导航：
（1）：普通导航
![最外层父级nav，可以使用ul，ol
导航项nav-item 可以使用li
Nav-link 点击激活

• 首页
• 学习用品
• 私人定制

](https://img-blog.csdnimg.cn/9a03697db9f5454d812e75dee18bf990.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGlfZGluZ19kaW5n,size_14,color_FFFFFF,t_70,g_se,x_16)

2：tab面板【滑动门】

3：媒体对象：
一般左右布局，用于评论居多，最外层media媒体对象包裹
一侧部分可以是图像可以是元素
另一侧部分media-body占有父元素空余空间，，自适应大小，一般用于文字描述
代码示例：

4：导航条navbar

代码示例：

    <!-- 第一部分搜索框 -->
    <div class="border border-primary xzsearch bg-white">
      <input type="text" placeholder="输入你想搜索的内容" class="border-0 float-left p-0 ml-2">
      <img src="./img/xz-img/header/search.png" alt="" class="float-right">
    </div>


    <!-- 第二部分菜单 -->
    <div class="xzbread breadcrumb mb-0 bg-transparent">
      <a href="#" class="breadcrumb-item">
        <img src="./img/xz-img/header/care.png" alt="">
      </a>
      <a href="#" class="breadcrumb-item">
        <img src="./img/xz-img/header/order.png" alt="">
      </a>
      <a href="#" class="breadcrumb-item">
        <img src="./img/xz-img/header/shop_car.png" alt="">
      </a>
      <a href="#" class="breadcrumb-item">
        注册
      </a>
      <a href="#" class="breadcrumb-item">
        登录
      </a>
    </div>
  </div>
</div>

5:轮播图：

代码示例: