响应式布局复习 HTML5的复习 CSS3的复习 了解BootStrap
响应式布局：页面可以随着设备的变化而动态改变。
淘宝：pc端一套页面：不能随着屏幕的缩小而变化；
移动端：另外一套页面，可以随着屏幕的放大、缩小改变（m.taobao.com)
阿里公司：财大气粗可以做多套页面。
苹果公司：一套页面，随着pc、pad、手机端多端变化而变化。
优点：
1.适配多端；
2.页面简介
缺点：
1.页面内容要更多，因为要适配不同的设备；
2.技术要求更广泛。
框架：前端框架 所谓框架，就是一个软件的半成品，由大型软件公司（比较牛X)的架构师设计出来，供广大程序员使用，在这个框架基础上进行二次的研发,研发网页、软件系统等等。 建筑行业，前期学的结构力学、工程学，可能去工地搬砖，最终设计师、监理等，建筑的框架，成品图纸、塔吊、等快速搭建的设备。
中文网：https://v3.bootcss.com/
2.1 站点欣赏：星巴克等
2.2 下载源码
在本地磁盘创建目录，worldcup–>拷贝下载的bootstrap代码过来。
a)新建一个index.html
b)将jquery.3.3.1.js复制到bootstrap下的js目录里面；
c)在index.html里面做下引用；引用顺序bootstrap.css->jquery 3.3.1.js–>bootstrap.js
2.3栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
注意：
1.屏幕适配的时候，从大到小的适配，当无法显示的时候，一行占据小屏的最大宽度；
2.当设计的是小屏幕尺寸，变为大屏的时候，向上兼容模式；
3.1 设计布局
3.2 左侧效果
在左侧部分设计增加logo和导航部分。
样式设置
3.3 中间部分
先看大框架，分上下两部分.
3.3.1 上面图片内容
3.3.2 上面样式设置
3.3.3 下面图文设置
重新来了解一下 布局大小。
3.3.4 下面图文样式
效果预览：
3.4补充表格
为任意 .table` 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
通过 类可以给 之内的每一行增加斑马条纹样式。
添加 类为表格和其中的每个单元格增加边框。
通过添加 类可以让 中的每一行对鼠标悬停状态作出响应。
效果单图一
综合排名图二
3.5右侧部分
3.5.1 右侧实现
网页数据
样式设置
3.5.2 轮播插件补充
一般用于广告、图片等重点内容展示。
效果图
3.5.3 手风琴
主要用于信息展示的场景，文字为主。
效果图
3.6优化
BootStrap基于媒体查询（media query）实现的,栅格系统，即根据当前设备的尺寸等信息控制具体采用哪种 css样式。
1.max-width 最大宽度，当有多个媒体查询书写时，顺序从大到小 2.mix-width 最小宽度，当有多个媒体查询书写时，顺序从小到大 媒体查询完整写法： @media 关键词 媒体类型 and (媒体特性) { css代码 } 关键词： and 连接另外一个条件 ： （min-width:768px）and (max-width:991px) only 仅这一个条件满足时 ont 非，取反 媒体类型：是用来区分设备类型的，例如打印机，手机电脑等等 screen 带屏幕的设备 print 打印预览模式 speech 屏幕阅读模式 all 默认值，包含上面三种模式
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。
3.6.1 图片小屏隐藏
css的设计
3.6.2小屏文字
css设计
3.6.3非大屏导航
需要使用媒体查询，注意可以根据需求，自行设计，超小屏、小屏、中等屏、大屏等。
外链图片转存中…(img-NKUwJFcP-1668781706060)]