/** -------------------------------------
 *
 * gQuery UI v2.0.0 [PREVIEW]
 * (c) 2021-present, JU Chengren (Ganxiaozhe)
 * 
 * [F] Released under the MIT License.
 * [T] Pre-released under the GPLv3 License.
 * gquery.cn/license
 * 
 * THE PREVIEW VERSION IS NOT PERFECT
 * AND IS NOT RECOMMENDED FOR USE IN
 * A PRODUCTION ENVIRONMENT, SO IT IS
 * RELEASED UNDER THE GPLv3 LICENSE
 *
 * ------------------------------------- */

Base Color

Normal Color

Red

hsl(3,65%,49%)

Dark Red

hsl(2,67%,37%)

Yellow

hsl(52,89%,63%)

Gold

hsl(43,100%,50%)

Orange

hsl(27,90%,55%)

Sky

hsl(208,44%,73%)

Aqua

hsl(189,100%,43%)

Blue

hsl(208,100%,40%)

Dark Blue

hsl(208,79%,28%)

Green

hsl(140,40%,55%)

Dark Green

hsl(130,35%,42%)

Purple

hsl(266,46%,46%)

Dark Purple

hsl(273,100%,28%)

Pink

hsl(1,78%,86%)

Light Brown

hsl(18,31%,28%)

Brown

hsl(18,31%,28%)

Silver

hsl(18,31%,28%)

Primary Color

Primary

hsl(3,65%,49%)

Info

hsl(3,65%,49%)

Success

hsl(3,65%,49%)

Cancel

hsl(3,65%,49%)

Warning

hsl(3,65%,49%)

Danger

hsl(3,65%,49%)

Button






Button Ghost


Button Disabled

Button Custom

Input


获取验证码

Input Tiper

Select



Radio

Option A [Only Check On Icon]

Checkbox

Option A [Only Check On Icon]

Toggle Switch

☁️
❄️
☁️
❄️
🌛
🌞

Slider


Details

Summary
  • Details #1
  • Details #2
  • Details #3
    •
  • Details #1
  • Details #2
  • Details #3
    •


    Summary Right
  • Details #1
  • Details #2
  • Details #3
    •
    Summary Bottom
  • Details #1
  • Details #2
  • Details #3
    •

    Font Size

    .fs-0gQuery（10px）
    .fs-1gQuery（12px）
    .fs-2gQuery
    .fs-3gQuery
    .fs-4gQuery
    .fs-5gQuery
    .fs-6gQuery
    .fs-7gQuery
    .fs-8gQuery
    .fs-9gQuery
    .fs-10gQuery
    .fs-11gQuery
    .fs-12gQuery
    .fs-13gQuery
    .fs-14gQuery
    .fs-15gQuery

    Font Style

    .fw-bgQuery
    .ta-lgQuery
    .ta-cgQuery
    .ta-rgQuery
    .t-hgQuery
    .t-line-1gQuery UI 文字超出自动隐藏 文字超出自动隐藏
    .t-line-2gQuery UI 文字超出自动隐藏 文字超出自动隐藏 文字超出自动隐藏
    .t-line-4gQuery UI 文字超出自动隐藏 文字超出自动隐藏 文字超出自动隐藏 文字超出自动隐藏 文字超出自动隐藏 文字超出自动隐藏 文字超出自动隐藏 文字超出自动隐藏

    Article

    客观的我

    在山城长大的水瓶男，今年 ${new Date().getFullYear() - 2002} 岁。

    极度独立，孤立主义者，网易云 10 级，博爱但疏离，自我不自私，Love is Love.

    • List item #1
    • List item #2
      • List item #2-1
      • List item #2-2
    • List item #3
    1. List item #1
    2. List item #2
      1. List item #2-1
      2. List item #2-2
    3. List item #3

    Table

    类型CPU内存SSD上传宽带下载宽带
    纯净服2.5+ GHz10 GB+60 GB+30 MBps+15 MBps+
    插件服2.5+ GHz10 GB+120 GB+30 MBps+15 MBps+
    MOD服3+ GHz10 GB+200 GB+150 MBps+100 MBps+
    类型CPU内存SSD上传宽带下载宽带
    纯净服2.5+ GHz10 GB+60 GB+30 MBps+15 MBps+
    插件服2.5+ GHz10 GB+120 GB+30 MBps+15 MBps+
    MOD服3+ GHz10 GB+200 GB+150 MBps+100 MBps+

    Table Layout

    gQuery

    JavaScript Function Library

    22,002

    Total download

    		 Recommend

    gQuery UI

    Modern CSS Framework

    36,214

    Total download

    		 Update

    Grid

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    col-sm-4
    col-sm-3
    col-sm-5
    col-4 col-sm-4
    col-3 col-sm-3
    col-5 col-sm-5
    col-2
    col-3
    col-1
    col-1
    col-1
    col-1
    col-3
    col-4 col-sm-4
    col-1 col-sm-8
    col-3 col-sm-4
    col-1 col-sm-4
    col-2 col-sm-4
    col-4 col-md-5 col-sm-6
    col-4 col-md-5 col-sm-6

    Flex

    类名作用效果
    .flex将元素类型设置为 flex，flex-wrap 设为 wrap
    .flex-nowrap将 flex-wrap 设为 nowrap
    .flex-ed将 align-items 设为 center，justify-content 设置为 end
    .flex-ct将 align-items 设为 center，justify-content 设置为 center
    .flex-bt将 align-items 设为 center，justify-content 设置为 space-between
    .flex-ad将 align-items 设为 center，justify-content 设置为 space-around
    .flex-ac仅将 align-items 设为 center
    .flex-jc仅将 justify-content 设为 center

    Margin & Padding

    类名作用效果
    .m-0将第一个方块外边距等级设置为 0
    .m-2将第一个方块外边距等级设置为 2
    .mx-4将第一个方块外边距（水平）等级设置为 4
    .ml-4将第一个方块外边距（左）等级设置为 4
    .mr-4将第一个方块外边距（右）等级设置为 4
    .p-0将第一个方块内边距等级设置为 0
    .p-3将第一个方块内边距等级设置为 3
    .py-5将第一个方块内边距（垂直）等级设置为 5
    .pt-7将第一个方块内边距（上）等级设置为 7
    .pb-7将第一个方块内边距（下）等级设置为 7

    Progress

    25%
    50%
    68%
    88%
    88%
    100%

    Pagination


    Card

    Simple

    Card Title

    Card Secondary Text

    Complex
    Label Label

    Card Title

    Card Secondary Text

    Card Text Card Text Card Text Card Text Card Text Card Text

    Title

    Card Title

    Card Secondary Text

    Custom
    作者：甘小蔗 时间：2021
    类别：开源框架
    Horizontal

    Card Title

    Card Secondary Text

    Card Title

    Card Secondary Text

    Custom
    Angry

    生气的小恐龙

    开心的小恐龙

    Happy

    小恐龙医生

    Dialog

    Alert

    Actionsheet

    Tiper

    Loader

    Loading [Optional]

    Avatar

    Barrage

    Tabs

    Home User Open Donate Download

    Timeline

    5月1日
    Outlines keep you honest. And keep structure.
    4月30日
    往往充满戾气的话我可以一忍再忍，但是一遇到温柔我就会有一点想哭。
    4月27日
    草在结它的种子，风在摇它的叶子。我们站着，不说话，就十分美好。
    4月25日
    Promise(承诺)、Earnest(诚挚)、Respect(尊重)、Forgiveness(宽容)、Enioy(享受)、Cherish(珍惜)、Trust(信任)是破译幸福Perfect的七个密码。
    2021年
    Kaamos 是芬兰语中“极夜”的意思，这是一段持续超过 24 小时的黑暗时期，是发生在极地圈内的一种现象。但 kaamos 也具有更情绪化的含义，因为它被用来描述一种渴望阳光的感觉，以及在日光不足的情况下缺乏热情。