配色方案能够按照情景进行分组.
主色调是WEB的情感表述基调,它是一种能够使人专注,提高辨识度的颜色
用途: 链接的颜色, 默认按钮底色, 表头底色,页脚底色以及一些需要阐述观点亮明主题的地方.
常用灰色: 线框线条分割线灰色; 文字灰色; 文字轻灰色; 不可使用提示色;
警告色是橙色,使用这种颜色让用户感到好奇或兴奋.
用途: 高亮文字, 提交按钮, 悬停状态以及一些特殊的超出常规的场景.
安全色是绿色,使用这种颜色让用户感到快乐充满成就感.
用途: 操作成功提示,值得信任的消息,利好消息,值得奖励的场景.
危险色是红色.使用这种颜色让用户感到警惕严肃.
用途: 错误信息, 危险提示, 超出预期的突发场景.
提示信息是淡黄色.使用这种颜色让用户感到放松清闲.
用途: 友情提示信息,辅助阅读信息,无需集中注意力查阅的小贴士.
浏览器默认的字体大小为16px, 我们视16px为基础测量单位, 并使用0.618为基本递增/递减倍率. 字体大小, 标题大小, 内边距, 外边距 都是根据基本字体乘以倍率得到的黄金分割比例排版.
$font-size-base: 1rem;
$increse: 0.618;
$font-size-0: ($font-size-base + $increse*4);
$font-size-1: ($font-size-base + $increse*2.5);
$font-size-2: ($font-size-base + $increse*1.5);
$font-size-3: ($font-size-base + $increse);
$font-size-4: ($font-size-base + $increse/2);
$font-size-5: $font-size-base;
$font-size-6: ($font-size-base - $increse/2);
$font-size-7: $font-size-base * $increse;
Responsive css defined
For all the mobile device
Extra small devices (phones, less than 768px)
@media (max-width: @screen-sm-max) { ... }
Small devices (tablets, 768px and up)
@media (min-width: @screen-sm-min) { ... }
For all the PC device
Medium devices (desktops, 992px and up)
@media (min-width: @screen-md-min) { ... }
Large devices (large desktops, 1200px and up)
@media (min-width: @screen-lg-min) { ... }
Extra small Phones (<640px) | Small Tablets (≥640px) | Medium Desktops (≥992px) | Large Desktops (≥1200px) | |
---|---|---|---|---|
Device | Phone | Pad or Landscape phone | Desktop or Landscape Pad | Large Desktop |
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
# of columns | 12 | |||
.gs-fixed | Gutter width: 30px (15px on each side of a column) | |||
100% | 100% | 970px | 1170px | |
.gs | Gutter width: 30px (15px on each side of a column) | |||
100% | 100% | 100% | 100% | |
.gs-sin | Gutter width: 0 | |||
100% | 100% | 100% | 100% | |
.visible-xs-* | Visible | Hidden | Hidden | Hidden |
.visible-sm-* | Hidden | Visible | Hidden | Hidden |
.visible-md-* | Hidden | Hidden | Visible | Hidden |
.visible-lg-* | Hidden | Hidden | Hidden | Visible |
.hidden-xs | Hidden | Visible | Visible | Visible |
.hidden-sm | Visible | Hidden | Visible | Visible |
.hidden-md | Visible | Visible | Hidden | Visible |
.hidden-lg | Visible | Visible | Visible | Hidden |
Name | Age | Sex | Phone | |
---|---|---|---|---|
Conjee | 30 | shishiv30@live.cn | Male | 18049****48 |
Tom | 28 | Tom@gmail.com | Male | 13696****93 |
Lily | 25 | Lily@gmail.com | Female | 16934****26 |