一: 媒体查询:
- 作用:
能够根据设备宽度的变化，设置差异化样式 -
1 语法:
媒体查询写法
@media 设备类型 and/not/only (条件){
选择器{
属性名:属性值;
}
@media (width:992px/媒体特性){
html{
font-size:20px;
}
}
2 条件:
(1) min-width（从小到大）
(2) max-width（从大到小）-
左闭右开[768~992) [992~1200)
image.png -
3.1 媒体类型
image.png -
3.2 媒体特征
image.png -
4 引入方式
外链css引入方式
<link rel='stylesheet' media='' (min-width:768px)"/>
二 响应式开发
UI框架:
(1). 概念 :将常见效果统一封装后形成的一套代码
(2).作用: 基于框架开发 效率高 稳定性高
响应式
移动端和PC端的页面同处于一套代码下, 根据设备的变化情况 页面显示对应的效果
1 Boostrap 框架: 快速进行响应式开发
- Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
- 中文官网:
- 实现机制: 浮动+媒体查询
2 bs的使用:
2.1:下载:
首页 → BootStrap3中文文档 → 下载BootStrap2.2 使用步骤:
(1) 在html页面中引入对应的css类 bs.css
(2) 调用类名
a. 版心 .container
b. 通栏 .container-fluid
注意:想要修改对应的样式 添加类名修改即可 勿需在原来的类名上修改
-2.3 栅格系统
-
目的:使用BootStrap栅格系统布局响应式网页
(1) 栅格化是指将整个网页的宽度分成若干等份
(2) BootStrap3默认将网页分成12等份
image.png 样式:
.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
分别使用.row类名和 .col类名定义栅格布局的行和列。
注意:
- container类自带间距15px; padding
-
row类自带间距-15px margin
bs介绍.png
-
布局类----表格:
Ø table : 基本类名, 初始化表格默认样式
Ø table-bordered : 边框线
Ø table-striped : 隔行变色
Ø table-hover : 鼠标悬停效果
Ø table-responsive : 表格宽溢出滚动
表格样式效果 -
按钮
Ø btn : 基准样式
Ø btn-info; btn-success : 设置按钮背景色
Ø btn-block : 设置按钮为块元素
Ø btn-lg; btn-sm; btn-xs : 设置按钮大小
image.png -
表单
Ø form-control : 设置表单元素input, select, textarea的样式
Ø checkbox 和 radio : 设置复选框和单选框的样式
Ø form-inline : 设置表单元素水平排列
Ø disabled : 设置表单禁用状态样式
Ø input-lg; input-sm, input-sm : 设置表单元素的大小
image.png
-
图片
Ø img-responsive: 图片自适应
Ø img-rounded : 图片设置圆角
Ø img-circle : 图片设置正圆
Ø img-thumbnail : 图片添加边框线
image.png
- 布局类：辅助类 Ø pull-right : 强制元素右浮动
Ø pull-left : 强制元素左浮动
Ø clearfix : 清除浮动元素的影响
Ø text-left文 : 本左对齐
Ø text-right : 文本右对齐
Ø text-center : 文本居中对齐
Ø center-block : 块元素居中
-
面包屑导航 breadcrumb
(1) 有路径痕迹回溯到首页
语法:
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
⭐⭐⭐注意最后一个li的类名 .active 的位置是最后的不能改变
-
Glyphicons字体图标
-
js插件的引入方式:
Ø 引入BootStrap样式
Ø 引入js文件：jQuery.js + BootStrap.min.js
-
定制bs框架:
-
5.3 栅格系统的列偏移 -col-md/设备型号-offset-份数
假设一个大盒子 中间包裹两个小盒子 一个向左 一个向右 中间剩下空白部分
-col-md-4 -col-md-4 这两个盒子通常布局下 只会是两个盒子一起在左边排列 剩下的空白部分出现页面的右侧
不是我们想要的效果 列偏移可以实现这种效果
这些类实际上是通过使用* 选择器为当前元素增加量左侧的边距
-col-md-offset-份数： 当前列 在中等屏幕下 向右偏移的列数
仅需要添加这个类名就可以了
-
5.4 列排序 -col-md-push-份数 推 -col-md-pull-份数 拉
想要实现左右两个盒子顺序发生变化 可以将右侧的盒子拉到左侧
把左侧的盒子推到右侧col-md-push-份数
col-md-pull-份数
列偏移和列排序 目前的效果都是对份数进行计算的
