发表于: 2017-07-21 22:51:07
1 874
今天完成的事情:
职位详情页面的css书写。
小课堂讨论问题:
1.bootstrap还有哪些常用的组件?
下拉菜单 导航栏 轮播图 分页 模态框等等
2.bootstrap栅格系统所定义的breakpoint 为什么是480 768 992 1200?
这样做是为了根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局。
Bootstrap划分了四种尺寸:超小屏(手机)、小屏(平板竖屏)、中屏(平板横屏)和大屏(PC),每一类中顶层包含块container的宽度都是固定的。还可以使用.container-fluid将固定宽度转换为连续的宽度(width=100%)。
这里有个疑问:为什么对于大屏设备,container的宽度要设计为1170px。既然是12列栅格,设计成1200px不是显得更规整、也更容易向产品和UI解释吗?
原来bootstrap为了避免内容占满屏幕,确保在1200px宽的设备两边留出一定的边距,因此将container的最大宽度设为1170px,并使用margin-left:auto和margin-right:auto将container居中,从而确保两边各留出15px的边距。所有列宽均设置为百分比,根本不考虑具体数值。
3.bootstrap的栅格系统为什么是12列,有没有18列,24列等等啊,采用12列有什么好处?
最开始bootstrap的栅格系统是24列,后来被设计者改成了16列,再后来又被改成12列。
12列网格有更广泛的采用,因为12可以被12,6,4,3,2分割,而16列网格只能被12,8,4和2整除。
这意味着一个顶级的12-col行可以被分解成:
12等份1列
6等份2列
4等份3列
3等份4列。
2等份6列
1个单独的12列
与16列网格中的一行排列可能相比较:
16等份1列
8等份2列
4等份4列
2等份8列
1列16列的单件
12列网格的最大优点是您可以将行/屏幕划分为3个相等的部分,而16列网格是不可能的。
明天计划的事情:
完成找职位样式,开始与后端进行联调
遇到的问题:
暂无
收获:
bootstrap的用法
评论