nifty-style
1.0.3 • Public • Published nifty-style
nifty-style是一个实用的样式库。
安装
从GitHub上下载最新的nifty-style，或使用npm安装:
如何使用
目录
background
cursor
display
elevation
flex
rounded
solid
margin
padding
text
background
深色背景
| 类 |
描述 |
| bg-red |
嫣红 |
| bg-orange |
橘橙 |
| bg-yellow |
明黄 |
| bg-olive |
橄榄 |
| bg-green |
森绿 |
| bg-cyan |
天青 |
| bg-blue |
海蓝 |
| bg-purple |
姹紫 |
| bg-mauve |
木槿 |
| bg-pink |
桃粉 |
| bg-brown |
棕褐 |
| bg-grey |
玄灰 |
| bg-gray |
草灰 |
| bg-black |
墨黑 |
| bg-white |
雅白 |
浅色背景
<!-- [深色背景].light -->
<div class="bg-red light"></div
渐变背景
| 类 |
描述 |
| bg-gradual-red |
魅红 |
| bg-gradual-orange |
鎏金 |
| bg-gradual-green |
翠柳 |
| bg-gradual-blue |
靛青 |
| bg-gradual-purple |
惑紫 |
| bg-gradual-pink |
霞彩 |
cursor
| 类 |
描述 |
| c-auto |
默认 浏览器设置的光标 |
| c-crosshair |
光标呈现为十字线 |
| c-default |
默认光标（通常是一个箭头） |
| c-e-resize |
此光标指示矩形框的边缘可被向右（东）移动 |
| c-help |
此光标指示可用的帮助（通常是一个问号或一个气球） |
| c-move |
此光标指示某对象可被移动 |
| c-n-resize |
此光标指示矩形框的边缘可被向上（北）移动 |
| c-ne-resize |
此光标指示矩形框的边缘可被向上及向右移动（北/东） |
| c-nw-resize |
此光标指示矩形框的边缘可被向上及向左移动（北/西） |
| c-pointer |
光标呈现为指示链接的指针（一只手） |
| c-progress |
此光标指示正在加载 |
| c-s-resize |
此光标指示矩形框的边缘可被向下移动（南） |
| c-se-resize |
此光标指示矩形框的边缘可被向下及向右移动（南/东） |
| c-sw-resize |
此光标指示矩形框的边缘可被向下及向左移动（南/西） |
| c-text |
此光标指示文本 |
| c-w-resize |
此光标指示矩形框的边缘可被向左移动（西） |
| c-wait |
此光标指示程序正忙（通常是一只表或沙漏） |
display
| 类 |
描述 |
| d-none |
此元素不会被显示 |
| d-inline |
默认 此元素会被显示为内联元素 |
| d-inline-block |
行内块元素 |
| d-block |
此元素将显示为块级元素 |
elevation
为元素指定自定义的z-index
| 类 |
类 |
类 |
类 |
类 |
类 |
类 |
| elevation-0 |
elevation-1 |
elevation-2 |
elevation-3 |
elevation-4 |
elevation-5 |
elevation-6 |
| elevation-7 |
elevation-8 |
elevation-9 |
elevation-10 |
elevation-11 |
elevation-12 |
elevation-13 |
| elevation-14 |
elevation-15 |
elevation-16 |
elevation-17 |
elevation-18 |
elevation-19 |
elevation-20 |
| elevation-21 |
elevation-22 |
elevation-23 |
elevation-24 |
|
|
|
flex
| 类 |
描述 |
| flex-row |
水平方向为主轴 左端为起点 |
| flex-row-reverse |
水平方向为主轴 右端为起点 |
| flex-column |
垂直方向为主轴 上沿为起点 |
| flex-column-reverse |
垂直方向为主轴 下沿为起点 |
| 类 |
描述 |
| justify-start |
左对齐 |
| justify-end |
右对齐 |
| justify-center |
居中 |
| justify-between |
两端对齐 |
| justify-around |
环绕对齐 |
| 类 |
描述 |
| align-start |
交叉轴起点对齐 |
| align-end |
交叉轴终点对齐 |
| align-center |
交叉轴中点对齐 |
| align-baseline |
项目第一行文字的基线对齐 |
| align-stretch |
项目占满整个容器的高度 |
| 类 |
描述 |
| align-self-start |
当前元素交叉轴起点对齐 |
| align-self-end |
当前元素交叉轴终点对齐 |
| align-self-center |
当前元素交叉轴中点对齐 |
| align-self-baseline |
当前元素第一行文字的基线对齐 |
| align-self-stretch |
当前元素占满整个容器的高度 |
| align-self-auto |
默认值 |
| 类 |
描述 |
| align-content-start |
交叉轴的起点对齐 |
| align-content-end |
交叉轴的终点对齐 |
| align-content-center |
交叉轴的中点对齐 |
| align-content-between |
交叉轴两端对齐 |
| align-content-around |
每根轴线两侧的间隔都相等 |
| 类 |
描述 |
| flex-nowrap |
不换行 |
| flex-wrap |
换行 第一行在上方 |
| flex-wrap-reverse |
换行 第一行在下方 |
| 类 |
描述 |
| flex-shrink-0 |
阻止该条件的发生 |
| flex-shrink-1 |
允许项目收缩到它的内容所需要的空间 |
| flex-grow-0 |
阻止该条件的发生 |
| flex-grow-1 |
允许元素增长以填充可用的空间 |
float
| 类 |
描述 |
| float-left |
左浮动 |
| float-right |
右浮动 |
| float-none |
默认值 不浮动 |
rounded
| 类 |
描述 |
| rounded-0 |
0px |
| rounded-sm |
4px |
| rounded-md |
8px |
| rounded-lg |
16px |
| rounded-xl |
24px |
| rounded-pill |
胶囊 |
| rounded-circle |
圆角 |
solid
| 类 |
描述 |
| b-all |
边框 |
| b-top |
上边框 |
| b-right |
右边框 |
| b-bottom |
下边框 |
| b-left |
左边框 |
| b-x |
水平方向边框 |
| b-y |
垂直方向边框 |
margin
n为0~16的自然数
| 类 |
描述 |
| mt-[n] |
上外边距 |
| mt-auto |
浏览器设置的上外边距 |
| mb-[n] |
下外边距 |
| mb-auto |
浏览器设置的下外边距 |
| ml-[n] |
左外边距 |
| ml-auto |
浏览器设置的左外边距 |
| mr-[n] |
右外边距 |
| mr-auto |
浏览器设置的右外边距 |
| mx-[n] |
左右外边距 |
| mx-auto |
浏览器设置的左右外边距 |
| my-[n] |
上下外边距 |
| my-auto |
浏览器设置的上下外边距 |
| ma-[n] |
外边距 |
| ma-auto |
浏览器设置的外边距 |
| 类 |
描述 |
| mt-n[n] |
上外负边距 |
| mb-n[n] |
下外负边距 |
| ml-n[n] |
左外负边距 |
| mr-n[n] |
右外负边距 |
| mx-n[n] |
左右负外边距 |
| my-n[n] |
上下负外边距 |
| ma-n[n] |
负外边距 |
padding
n为0~16的自然数
| 类 |
描述 |
| pt-n |
上内边距 |
| pb-n |
下内边距 |
| pl-n |
左内边距 |
| pr-n |
右内边距 |
| px-n |
左右内边距 |
| py-n |
上下内边距 |
| pa-n |
内边距 |
text
文本对齐
| 类 |
描述 |
| text-center |
居中 |
| text-justify |
两端对齐 |
| text-left |
左对齐 |
| text-right |
右对齐 |
文本颜色
| 类 |
描述 |
| text-red |
嫣红 |
| text-orange |
橘橙 |
| text-yellow |
明黄 |
| text-olive |
橄榄 |
| text-green |
森绿 |
| text-cyan |
天青 |
| text-blue |
海蓝 |
| text-purple |
姹紫 |
| text-mauve |
木槿 |
| text-pink |
桃粉 |
| text-brown |
棕褐 |
| text-grey |
玄灰 |
| text-gray |
草灰 |
| text-black |
墨黑 |
| text-white |
雅白 |
装饰线
| 类 |
描述 |
| text-none |
默认 |
| text-line-through |
中划线 |
| text-overline |
上划线 |
| text-underline |
下划线 |
字体强调
| 类 |
描述 |
| text-bolder |
900 |
| text-bold |
700 |
| text-medium |
500 |
| text-regular |
400 |
| text-light |
300 |
| text-thin |
100 |
| text-italic |
italic |
不透明度
| 类 |
描述 |
| text-primary |
.87 |
| text-secondary |
.6 |
| text-disabled |
.38 |
文本大小
| 类 |
描述 |
| text-12px |
12px |
| text-14px |
14px |
| text-16px |
16px |
| text-18px |
18px |
| text-20px |
20px |
| text-22px |
22px |
| text-24px |
24px |
| text-26px |
26px |
| text-28px |
28px |
| text-30px |
30px |
| text-32px |
32px |
| text-34px |
34px |
| text-36px |
36px |
| text-38px |
38px |
| text-40px |
40px |
| text-42px |
42px |
| text-44px |
44px |
| text-46px |
46px |
| text-48px |
48px |
| text-50px |
50px |
| text-52px |
52px |
| text-54px |
54px |
| text-56px |
56px |
| text-58px |
58px |
| text-60px |
60px |
| text-62px |
62px |
| text-64px |
64px |
| text-66px |
66px |
文本变形
| 类 |
描述 |
| text-lowercase |
大写 |
| text-uppercase |
小写 |
| text-capitalize |
首字母大写 |
文本翻转
| 类 |
描述 |
| text-rtl |
文本方向从右到左 |
| text-ltr |
文本方向从左到右 |
文本换行和溢出
| 类 |
描述 |
| text-no-wrap |
不换行 |
| text-truncate |
溢出不换行且截断 |
Package Sidebar
Install
Weekly Downloads