响应式布局是一种网页设计的方法，能够使网站在不同的设备上（如桌面电脑、平板电脑、手机等）呈现出最佳的用户体验。其核心思想是使网页能够根据用户的设备和屏幕尺寸自动调整布局和内容，以适应不同的屏幕大小和分辨率。

根据获取屏幕的宽度、调整页面布局、其核心就是利用媒体查询、让对应的生效、来达到响应式的效果

例如 https://alloyteam.com/ 腾讯全端这个网站、他只有一个页面、在不同设备下、进行来回的相应。

市面上如京东、淘宝、他们都是有两个团队、开发了两套页面，其目的是、给与用户更好的体验。但是非常的耗费开发成本。

我们实现响应式布局的核心就是采用媒体查询动态的监听、我们视口的宽度，来达到响应式的效果

前面讲移动端适配的时候我们学习过了媒体查询，只不过当时我们写的都是固定的值，如下

缺点是，我正好是1000的时候变化，或者800的时候变化、那八百到1000怎么办？

我们能不能写一个范围值

开发当中的常用写法 max-width 最大宽度 / min-width 最小宽度

同时满足两个、后写的的样式层叠掉写先写的样式、比如、1300满足大于1200、也满足大于900，因为900这个是后写的所以1200设置的这个媒体查询不会生效

写min-width 从小到大、写max-width 从大到小

关键词

and：用于将多个媒体查询规则组合成单条媒体查询

not：用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。

only：仅在整个查询匹配时才用于应用样式。

, (逗号)：逗号用于将多个媒体查询合并为一个规则。

媒体类型

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

媒体特征

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

格式：

例子：

媒体查询通常配合rem来使用

1、框架的基本概念

什么是框架

将常见效果进行统一封装后形成的一套代码，例如：

框架的作用

基于框架开发，效率高、稳定性高

的作用

主要是做我们响应式网站的开发

2、Bootstrap简介

是由Twitter公司开发维护的前端框架，他提供了大量==编写好的样式，允许开发者结合一定的HTML结构==及Javascript,快速编写功能完善的网页

及常见的交互效果

中文官网：https://www.bootcss.com/

现在的Bootstrap已经出到第五个版本了，但是我们一般用的话还是用，原因是他比较稳定

3、Bootstrap下载

生产环境用第一个、因为是压缩过的，上传下载速度回很快、如果你要看源码，就第二个、如果说你有Sass项目要用他，就用第三个

下载下来的目录结构

运行如下代码你会发现、我们并没有给div设置宽度、但是他不是一个通栏的盒子、这是因为，bootstrap给他设置了，盒子的宽度

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（）尺寸的增加，系统会自动分为最多12列。

简述为栅格化是指将网页的宽度分成若干等份，默认将网页分成了12等份

栅格系统(grid systems),也叫“网格系统，它是通过一系列的行（row）与列（column）的组合创建页面布局。 我们的内容可以直接放入栅格系统面。

container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

分别使用.row类名和 .col类名定义栅格布局的行和列。

BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。

网站首页 →中文文档 → → 按分类导航查找目标类

全局样式分为、布局样式和内容美化样式，

按钮样式

• : 基准样式
• : 设置按钮背景色
• : 设置按钮为块元素
• : 设置按钮大小

表格

• : 基本类名, 初始化表格默认样式
• : 边框线
• : 隔行变色
• : 鼠标悬停效果
• : 表格宽溢出滚动

表单

: 设置表单元素input, select, 的样式

: 设置复选框和单选框的样式

: 设置表单元素水平排列

: 设置表单禁用状态样式

: 设置表单元素的大小

图片美化

• : 图片自适应
• : 图片设置圆角
• : 图片设置正圆
• : 图片添加边框线

布局辅助类

• pull-right : 强制元素右浮动
• pull-left : 强制元素左浮动
• clearfix : 清除浮动元素的影响
• text-left文 : 本左对齐
• text-right : 文本右对齐
• text-center : 文本居中对齐
• center-block : 块元素居中

布局响应式工具

• 不同屏幕尺寸隐藏或显示页面内容

什么是组件？

所谓组件就是：提供的常见功能，包含了结构和样式。

使用方式？

引入样式

复制结构，修改内容

其中包含例如、轮播图组件、导航组件、代码过去简单不在粘贴

字体图标的使用步骤

• HTML页面引入BootStrap样式文件
• 空标签调用对应类名
  • glyphicon
  • 图标类

提供的常见效果, 包含了HTML结构，样式与Javascript

插件的使用步骤

• 引入样式
• 引入文件： +

复制HTML结构, 并适当调整结构或内容

我们可以能够根据项目需求定制bootstrap框架

导航菜单 → 定制

输入目标变量值

编译并下载，使用定制后的框架