响应式网页开发

媒体查询

能够根据设备 宽度的变化 ，设置 差异化样式

开发常用写法

媒体特性常用写法

max-width （从大到小）             min-width （从小到大）

 完整写法

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

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

 外链式CSS引入

---

 bootstrap

---

1.    ui框架

UI框架概念

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

作用

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

---

使用 BootStrap框架快速开发响应式网页

---

---

• Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定
• HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
• 中文官网: https://www.bootcss.com/ 

BootStrap使用步骤

1. 下载 ： https://www.bootcss.com/

首页 → BootStrap3中文文档 → 下载BootStrap

 2. 使用

使用步骤

1. 引入： BootStrap提供的CSS代码

<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

2. 调用类：使用BootStrap提供的样式

container：响应式布局版心类

---

BootStrap栅格系统布局响应式网页

---

BootStrap栅格系统

 栅格化是指将整个网页的宽度分成若干等份

BootStrap3默认将网页分成12等份

• container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
• container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
• 分别使用.row类名和 .col类名定义栅格布局的行和列。

注意:

1. container类自带间距15px;

2. row类自带间距-15px

 

全局样式

---

BootStrap手册用法，使用全局CSS样式美化标签

分类：   布局样式      内容美化样式

全局样式

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

网站首页 → BootStrap 3 中文文档 → 全局CSS样式 → 按 分类导航 查找目标类

 

 

布局类：表格

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

美化内容类：按钮

• btn : 基准样式
•  btn-info; btn-success : 设置按钮背景色
•  btn-block : 设置按钮为块元素
•  btn-lg; btn-sm; btn-xs : 设置按钮大小

布局类：表单

• form-control : 设置表单元素input, select, textarea的样式
• checkbox 和 radio : 设置复选框和单选框的样式
• form-inline : 设置表单元素水平排列
• disabled : 设置表单禁用状态样式
• input-lg; input-sm, input-sm : 设置表单元素的大小

美化内容类：图片

• img-responsive: 图片自适应
• img-rounded : 图片设置圆角
• img-circle : 图片设置正圆
• img-thumbnail : 图片添加边框线

 

布局类：辅助类

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

布局类：响应式工具（不同屏幕尺寸隐藏或显示页面内容）

 组件

---

• 组件
• BootStrap提供的常见功能，包含了HTML结构和CSS样式。

  使用方法         引入BootStrap样式                              复制结构，修改内容

Glyphicons字体图标

• Glyphicons字体图标的使用步骤
•  HTML页面引入BootStrap样式文件
•  准备字体文件 (注意路径)
• 空标签调用对应类名
•  glyphicon
•  图标类

插件

---

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

 

插件的使用步骤

1. 引入BootStrap样式
2. 引入js文件：jQuery.js + BootStrap.min.js

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

---

定制

---

定制步骤

1. 导航菜单 → 定制
2.  输入目标变量值
3. 编译并下载，使用定制后的框架

 

 

每日一语：

 

---