配色方案 一套可扩展的标准配色法则.

配色方案能够按照情景进行分组.

主色调是WEB的情感表述基调,它是一种能够使人专注,提高辨识度的颜色

用途: 链接的颜色, 默认按钮底色, 表头底色,页脚底色以及一些需要阐述观点亮明主题的地方.

(0,0,0)
(0,0,0)
(0,0,0)
(0,0,0)

常用灰色: 线框线条分割线灰色; 文字灰色; 文字轻灰色; 不可使用提示色;

(0,0,0)
(0,0,0)
(0,0,0)
(0,0,0)

警告色是橙色,使用这种颜色让用户感到好奇或兴奋.

用途: 高亮文字, 提交按钮, 悬停状态以及一些特殊的超出常规的场景.

(0,0,0)
(0,0,0)
(0,0,0)
(0,0,0)

安全色是绿色,使用这种颜色让用户感到快乐充满成就感.

用途: 操作成功提示,值得信任的消息,利好消息,值得奖励的场景.

(0,0,0)
(0,0,0)
(0,0,0)
(0,0,0)

危险色是红色.使用这种颜色让用户感到警惕严肃.

用途: 错误信息, 危险提示, 超出预期的突发场景.

(0,0,0)
(0,0,0)
(0,0,0)
(0,0,0)

提示信息是淡黄色.使用这种颜色让用户感到放松清闲.

用途: 友情提示信息,辅助阅读信息,无需集中注意力查阅的小贴士.

(0,0,0)
(0,0,0)
(0,0,0)
(0,0,0)
文字排版 文体设计,以及以标准字体为基准的排版设计

浏览器默认的字体大小为16px, 我们视16px为基础测量单位, 并使用0.618为基本递增/递减倍率. 字体大小, 标题大小, 内边距, 外边距 都是根据基本字体乘以倍率得到的黄金分割比例排版.

the font typograph demo
特级标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题

$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)
DevicePhonePad or Landscape phoneDesktop or Landscape PadLarge Desktop
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns12
.gs-fixedGutter width: 30px (15px on each side of a column)
100%100%970px1170px
.gsGutter width: 30px (15px on each side of a column)
100%100%100%100%
.gs-sinGutter width: 0
100%100%100%100%
.visible-xs-*Visible
.visible-sm-*Visible
.visible-md-*Visible
.visible-lg-*Visible
.hidden-xsVisibleVisibleVisible
.hidden-smVisibleVisibleVisible
.hidden-mdVisibleVisibleVisible
.hidden-lgVisibleVisibleVisible
表单 标准的表单风格


输入框 输入框风格
$
视图 新的视图容器
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
地图 谷歌地图插件地图
对话框 对话框插件

open dialog as default

open dialog as fullscreen

open dialog as dropdown

折叠 折叠插件
... show more
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
collapsed
hidden
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
dropdown menu
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
标签页 可以切换面板的标签栏
show content of A panel
show content of B panel
show content of C panel
响应式表格 在小屏幕下切换到键值对列表布局
NameAgeEmailSexPhone
Conjee30shishiv30@live.cnMale18049****48
Tom28Tom@gmail.comMale13696****93
Lily25Lily@gmail.comFemale16934****26
滑动条 滑动条插件
$
$
手势 扩展手势
try to move on the panel with your finger.