/** -------------------------------------
 *
 * 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


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

Tiper

Loader

Loading [Optional]

Avatar

Barrage

Tabs

Home User Open Donate Download