携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第十四天，点击查看活动详情

媒体查询

• 目标：能够根据设备宽度的变化，设置差异化样式
• 开发常用写法
  • 媒体特性常用写法
    • max-width
    • min-width

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

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

BootStrap

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

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

1. 下载： www.bootcss.com/
2. 首页 → BootStrap3中文文档 → 下载BootStrap

使用步骤 :

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

2. 调用类：使用BootStrap提供的样式 3. container：响应式布局版心类

BootStrap栅格系统

• 栅格化是指将整个网页的宽度分成若干等份
• BootStrap3默认将网页分成12等份

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

全局样式

布局类：表格

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