响应式布局

为了丰富页面显示效果，我们引入了业界流行的响应式布局。和 Bootstrap 的 CSS3 媒体查询实现不同，FineUI 完全通过 JavaScript 来实现响应式布局，不仅可以融入现有的布局系统，而且更加灵活。
我们将容器分成了 12 块（可以自定义），然后定义子项在不同屏幕中的块大小，使其总和等于 12，从而在手机、平板、桌面和大尺寸屏幕中显示不同的布局。

布局规则

1. 父容器定义 Layout=Block 属性。
2. 子项通过 BlockMD=6 定义块的响应宽度。
   • 后缀 MD 代表不同的屏幕尺寸（Block、BlockSM、BlockMD、BlockLG）。
   • 属性 6 代表子项占据的宽度（6-12）。
   • 多个子项的宽度总和等于 12，则占据一行，多余的子项会另起一行。

响应规则

	超小屏幕（手机）	小屏幕（平板）	中等屏幕（桌面）	大屏幕（大尺寸显示器）
屏幕尺寸	< 768px	>= 768px	>= 992px	>= 1200px
子项属性	Block	BlockSM	BlockMD	BlockLG
响应行为	始终水平排列	当前屏幕水平排列，小于临界值层叠排列