响应式（包含bootstrap）

1.媒体查询

目的：能够根据设备宽度的变化，设置差异化样式
开发常用写法

@media (媒体特性) ｛
          选择器 ｛
          样式
          ｝
｝

完整写法（几乎不用）

@media 关键词 媒体类型  and  (媒体特性) ｛
          选择器 ｛
          样式
          ｝
｝

其中媒体特性最常用的是min-width（从小到大）和 max-width（从大到小）

image.png

关键词有and、only和not

除了在css里写媒体查询，还可通过外链式CSS引入

2.BootStrap

BootStrap是一套快速开发响应式网页的UI框架
中文官网: https://www.bootcss.com/

1. 下载： https://www.bootcss.com/
   首页 → BootStrap3中文文档 → 下载BootStrap
   
   image.png
2. 使用
   2.1. 引入： BootStrap提供的CSS代码
   
   2.22. 调用类：使用BootStrap提供的样式
   container：响应式布局版心类

BootStrap栅格系统

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

image.png

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

1. container类自带间距15px;
2. row类自带间距-15px
   row的使用场景：例如
   父盒子有左右15的padding，在里面放子盒子的时候，在给子盒子设置class，用bootstrap的一些类比如col-md-6的时候，子盒子也会有左右15的padding，此时可以在子盒子外在再加一个div，class使用row，可抵消父盒子的左右15的padding。

 

        
//通过row抵消父盒子的左右15的padding
            
1 
            
2
            
3
        
    

其他（了解）

1.全局css样式

掌握BootStrap手册用法，使用全局CSS样式美化标签
网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

布局类：表格

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

image.png

布局类：表单

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

image.png

布局类：辅助类

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

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

image.png

美化内容类：按钮

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

image.png

美化内容类：图片

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

image.png

2.插件、组件、定制

可在官网查找使用，使用方式
其中插件使用需额外引入：jQuery.js + BootStrap.min.js

image.png