tantela-2021-07-26

bootstrap列排序
col--pull：后推
col--push：前拉
col-*-offset-N：向右偏移

bootstrap响应式工具
1）可用的类
针对不同屏幕尺寸隐藏或显示页面内容
.visible-xs-* * 中包含了block、inline、inline-block
.hidden-xs
2）打印类
.visible-print-*
.hidden-print

静态、流式、自适应、响应式、弹性布局；栅格系统
字体自适应_从栅格到响应式或自适应布局

Material Design 响应式栅格 （不推荐）
定制式栅格

静态布局：网页上所有元素的尺寸均以px作为单位。在这种情况下，栅格本身尺寸是不用改变的，栅格会依据屏幕居中显示

流式布局：整体布局不变，页面元素宽度随分辨率变化。开发时宽度使用百分比，高度使用px固定。适配中栅格沟宽相对固定，列宽跟随屏幕分辨率适配

自适应布局： 不管屏幕多大，都尽量不换行，而只是横向缩放。
就是一组静态布局的集合。每个静态布局对应一个分辨率的范围，在这个分辨率范围内，页面宽度变化时，页面是不变的。只有达到某个断点才会突然改变

响应式布局： 屏幕变小了之后，属于同一行的元素受到挤压后，行的右边元素自动换行显式；
屏幕大了后，本属于同一行的元素尽可能的排在同一行内；
针对浏览器拉大或者缩小做最佳展示（也就是不用考虑其他设备，只考虑web端在不同分辨率下做最佳展示）
根据设备尺寸，展示相应内容，通常是融合了流式布局和自适应性布局。在断点处的栅格可同于流式布局，或可增加栅格的列数。

弹性布局：使用em或rem单位进行相对布局，这些相对于使用百分比来讲更加灵活

栅格系统：栅格是配合响应式的产物

台管理系统（dashboard）侧边栏是固定网格，右侧内容是流动网格

block inline inline-block
display:block将元素设置成块级的；
display:inline将元素设置成行级的；
让多个行级元素在同一行显示，而且能够固定宽度，需要用到display:inline-block

before、after伪元素
.clearfix 清除浮动 实际源码类似这样：在元素尾部自动清除浮动

.cf:before,
.cf:after {
    content: " ";
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;/*设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。*/
}

p:before {   
  content: url(image.jpg);   /*指向一个图像的URL*/
} 

a:after {   
  content: attr(href);   /*attr()得到特定属性的值并把它作为插入的文本成为一个伪元素*/
}

格式塔原则

• 相近（Proximity）：距离相近的各部分趋于组成整体。【权重大】常用于功能列表页面
• 相似（Similarity）：在某一方面相似的各部分趋于组成整体。（例如点击分享按钮弹出的icon被当做同一类）
• 封闭（Closure）：彼此相属、构成封闭实体的各部分趋于组成整体。（截断式设计，让用户感知到还有内容没有展示）
• 连续（Continuity）：我们倾向于完整地连接一个图形，而不是观察残缺的线条或形状。（倾向于完整地连接一个图形，而不是观察残缺的线条或形状）（例如，把 App Store 上的应用截图做成连续的图片）
• 简单（Simplicity）：具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。（具有对称、规则、平滑的简单图形特征的各部分趋于组成整体）

中后台