移动Web第五天 1 响应式

移动Web

老师：黑马程序员

五、移动Web第五天

1 响应式

1.1 媒体查询

1.1.1 基本语法

开发常用写法

媒体特性常用写法

• max-width
• min-width

1.1.2 书写顺序

min-width(从小到大)

max-width (从大到小)

1.1.3 关键字

• and
• only
• not

1.1.4 媒体类型

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

1.1.5 媒体特征

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

外链式CSS引入

1.2 BootStrap

1.2.1 UI框架

UI框架概念

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

作用

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

1.2.2 BootStrap简介

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

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

中文官网：

https://www.bootcss.com/

1.2.3 BootStrap使用步骤

下载

1. 引入

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

2. 调用类

   使用BootStrap提供的样式

   container :响应式布局版心类

1.2.4 BootStrap栅格系统

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

BootStrap3默认将网页分成12等份

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

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

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

1.2.5 全局样式

分类：

• 布局样式
• 内容美化样式

【查分类导航】

布局类：表格

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 :块元素居中

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

1.2.6 组件

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

【使用方法】

• 引入BootStrap样式
• 复制结构，修改内容

1.2.7 Glyphicons字体图标

Glyphicons字体图标的使用步骤

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

1.2.8 插件

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

使用步骤

引入BootStrap样式

引入js文件:jQuery.js + BootStrap.min.js

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

1.2.9 定制

【定制步骤】

导航菜单→定制

输入目标变量值

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