2
2
< html >
3
3
< head lang ="en ">
4
4
< meta charset ="UTF-8 ">
5
- < title > Collie -UI</ title >
5
+ < title > SNX -UI</ title >
6
6
< link href ="../dist/css/snxUI.min.css " type ="text/css " rel ="stylesheet ">
7
7
< link type ="text/css " rel ="stylesheet " href ="../fonts/dax/dax.css ">
8
8
< link type ="text/css " rel ="stylesheet " href ="../fonts/SourceCodePro/SourceCodePro.css ">
22
22
< body >
23
23
< header >
24
24
< div id ="headNav " class ="nav nav-padding ">
25
- < img id ="logo " src ="image/CollieUI-title .png ">
25
+ < img id ="logo " src ="image/Snx1 .png ">
26
26
< ul >
27
27
< li > < a href ="docs_started.html "> < i class ="fa fa-play-circle "> </ i > Getting Started</ a > </ li >
28
28
< li > < a class ="active "> < i class ="fa fa-css3 "> </ i > CSS</ a > </ li >
@@ -62,7 +62,7 @@ <h1 class="title">Grids</h1>
62
62
< div class ="block ">
63
63
< h2 class ="small-title "> 基础栅格</ h2 >
64
64
< p class ="description ">
65
- Collie UI 提供了三套栅格系统,分别为 5,12,16 列。在使用过程中,首先需要在外部容器添加< kbd > .grids-5</ kbd > ,
65
+ SNX UI 提供了三套栅格系统,分别为 5,12,16 列。在使用过程中,首先需要在外部容器添加< kbd > .grids-5</ kbd > ,
66
66
< kbd > .grids-12</ kbd > 或< kbd > .grids-16</ kbd > 。如下面的例子,占 [n] 列则使用< kbd > .g-[n]</ kbd > ,n 的最大值为所选栅格的列数。
67
67
</ p >
68
68
< div >
@@ -965,7 +965,7 @@ <h1 class="title">Forms</h1>
965
965
< label class ="under "> Simple CSS & JS for Forms.</ label >
966
966
< div >
967
967
< div class ="block ">
968
- < h2 class ="small-title "> Collie -UI基础表单测试(默认inline-block)</ h2 >
968
+ < h2 class ="small-title "> SNX -UI基础表单测试(默认inline-block)</ h2 >
969
969
< p class ="description ">
970
970
在<form>元素中添加表单组,如需使用下述样式,务必添加类< kbd > .form</ kbd > 。
971
971
</ p >
@@ -996,7 +996,7 @@ <h2 class="small-title">Collie-UI基础表单测试(默认inline-block)</h2>
996
996
997
997
< div >
998
998
< div class ="block ">
999
- < h2 class ="small-title "> Collie -UI order表单样式示例</ h2 >
999
+ < h2 class ="small-title "> SNX -UI order表单样式示例</ h2 >
1000
1000
< p class ="description ">
1001
1001
创建顺序样式表单,则添加< kbd > .form-order</ kbd > 类,呈现label与input分行顺序显示。
1002
1002
</ p >
@@ -1040,7 +1040,7 @@ <h2 class="small-title">Collie-UI order表单样式示例</h2>
1040
1040
1041
1041
< div >
1042
1042
< div class ="block ">
1043
- < h2 class ="small-title "> Collie -UI input-rounded表单样式示例</ h2 >
1043
+ < h2 class ="small-title "> SNX -UI input-rounded表单样式示例</ h2 >
1044
1044
< p class ="description ">
1045
1045
为表单中的type为"search""email""url"的input添加< kbd > .input-rounded</ kbd > 类,使其圆角显示。
1046
1046
</ p >
@@ -1066,7 +1066,7 @@ <h2 class="small-title">Collie-UI input-rounded表单样式示例</h2>
1066
1066
1067
1067
< div >
1068
1068
< div class ="block ">
1069
- < h2 class ="small-title "> Collie -UI aligned对齐表单示例</ h2 >
1069
+ < h2 class ="small-title "> SNX -UI aligned对齐表单示例</ h2 >
1070
1070
< p class ="description ">
1071
1071
创建对齐样式表单,则添加< kbd > .input-aligned</ kbd > 类,其中< kbd > .control-group</ kbd > 包裹的label与input呈现同行且input分行对显示。使用< kbd > .controls</ kbd > 类包裹的checkbox和提交按钮会配合上述表单特定位置显示。
1072
1072
</ p >
@@ -1117,7 +1117,7 @@ <h2 class="small-title">Collie-UI aligned对齐表单示例</h2>
1117
1117
1118
1118
< div >
1119
1119
< div class ="block ">
1120
- < h2 class ="small-title "> Collie -UI form-block表单示例</ h2 >
1120
+ < h2 class ="small-title "> SNX -UI form-block表单示例</ h2 >
1121
1121
< p class ="description ">
1122
1122
为表单添加< kbd > .form-block</ kbd > 类,使得label与input元素block显示并拉伸至父元素的100%。
1123
1123
</ p >
@@ -1165,7 +1165,7 @@ <h2 class="small-title">Collie-UI form-block表单示例</h2>
1165
1165
1166
1166
< div >
1167
1167
< div class ="block ">
1168
- < h2 class ="small-title "> Collie -UI 表单组示例</ h2 >
1168
+ < h2 class ="small-title "> SNX -UI 表单组示例</ h2 >
1169
1169
< p class ="description ">
1170
1170
表单内使用< kbd > .form-group</ kbd > 类,包裹的input元素分组显示。使用< kbd > <fiedset></ kbd > 标签可规定表单分组样式。
1171
1171
</ p >
@@ -1200,7 +1200,7 @@ <h2 class="small-title">Collie-UI 表单组示例</h2>
1200
1200
1201
1201
< div >
1202
1202
< div class ="block ">
1203
- < h2 class ="small-title "> Collie -UI input-group样式示例</ h2 >
1203
+ < h2 class ="small-title "> SNX -UI input-group样式示例</ h2 >
1204
1204
< p class ="description ">
1205
1205
使用< kbd > .input-group</ kbd > 类,包裹的input和放置图标字符的< kbd > .input-info</ kbd > 类联合表示信息提示,兑换顺序则可以对调左右。
1206
1206
</ p >
@@ -1248,7 +1248,7 @@ <h2 class="small-title">Collie-UI input-group样式示例</h2>
1248
1248
1249
1249
< div >
1250
1250
< div class ="block ">
1251
- < h2 class ="small-title "> Collie -UI input-group大小示例</ h2 >
1251
+ < h2 class ="small-title "> SNX -UI input-group大小示例</ h2 >
1252
1252
< p class ="description ">
1253
1253
同样可以使用< kbd > .input-rounded</ kbd > 使< kbd > .input-group</ kbd > 中的input圆角显示。
1254
1254
</ p >
@@ -1330,7 +1330,7 @@ <h2 class="small-title">Collie-UI input-group大小示例</h2>
1330
1330
1331
1331
< div >
1332
1332
< div class ="block ">
1333
- < h2 class ="small-title "> Collie -UI Checkbox表单示例</ h2 >
1333
+ < h2 class ="small-title "> SNX -UI Checkbox表单示例</ h2 >
1334
1334
< p class ="description ">
1335
1335
为checkbox使用< kbd > .checkbox</ kbd > 类,具体方法参见Source代码。
1336
1336
</ p >
@@ -1389,7 +1389,7 @@ <h2 class="small-title">Collie-UI Checkbox表单示例</h2>
1389
1389
1390
1390
< div >
1391
1391
< div class ="block ">
1392
- < h2 class ="small-title "> Collie -UI Radio表单示例</ h2 >
1392
+ < h2 class ="small-title "> SNX -UI Radio表单示例</ h2 >
1393
1393
< p class ="description ">
1394
1394
为radio使用< kbd > .radio</ kbd > 类,具体方法参见Source代码。
1395
1395
</ p >
@@ -1611,7 +1611,7 @@ <h2 class="small-title">按钮式checkbox、Radio示例</h2>
1611
1611
1612
1612
< div >
1613
1613
< div class ="block ">
1614
- < h2 class ="small-title "> Collie -UI 只读表单示例</ h2 >
1614
+ < h2 class ="small-title "> SNX -UI 只读表单示例</ h2 >
1615
1615
< p class ="description ">
1616
1616
表单中使用type为text的input元素,表现为如下样式,使用< kbd > readonly</ kbd > 属性变现为只读可复制。
1617
1617
</ p >
@@ -1631,7 +1631,7 @@ <h2 class="small-title">Collie-UI 只读表单示例</h2>
1631
1631
1632
1632
< div >
1633
1633
< div class ="block ">
1634
- < h2 class ="small-title "> Collie -UI file示例</ h2 >
1634
+ < h2 class ="small-title "> SNX -UI file示例</ h2 >
1635
1635
< p class ="description ">
1636
1636
表单中使用< kbd > .file</ kbd > 改变传统type为file的input上传样式,具体用法参见如下Source代码。
1637
1637
</ p >
@@ -1658,7 +1658,7 @@ <h2 class="small-title">Collie-UI file示例</h2>
1658
1658
1659
1659
< div >
1660
1660
< div class ="block ">
1661
- < h2 class ="small-title "> Collie -UI color示例</ h2 >
1661
+ < h2 class ="small-title "> SNX -UI color示例</ h2 >
1662
1662
< p class ="description ">
1663
1663
表单中使用type为< kbd > color</ kbd > 的input,变现为如下样式。
1664
1664
</ p >
@@ -1678,7 +1678,7 @@ <h2 class="small-title">Collie-UI color示例</h2>
1678
1678
1679
1679
< div >
1680
1680
< div class ="block ">
1681
- < h2 class ="small-title "> Collie -UI date示例</ h2 >
1681
+ < h2 class ="small-title "> SNX -UI date示例</ h2 >
1682
1682
< p class ="description ">
1683
1683
表单中使用type为< kbd > date</ kbd > 的input,变现为如下样式。
1684
1684
</ p >
@@ -1698,7 +1698,7 @@ <h2 class="small-title">Collie-UI date示例</h2>
1698
1698
1699
1699
< div >
1700
1700
< div class ="block ">
1701
- < h2 class ="small-title "> Collie -UI number示例</ h2 >
1701
+ < h2 class ="small-title "> SNX -UI number示例</ h2 >
1702
1702
< p class ="description ">
1703
1703
表单中使用type为< kbd > number</ kbd > 的input,变现为如下样式。
1704
1704
</ p >
@@ -1720,7 +1720,7 @@ <h2 class="small-title">Collie-UI number示例</h2>
1720
1720
1721
1721
< div >
1722
1722
< div class ="block ">
1723
- < h2 class ="small-title "> Collie -UI textarea示例</ h2 >
1723
+ < h2 class ="small-title "> SNX -UI textarea示例</ h2 >
1724
1724
< p class ="description ">
1725
1725
表单中使用type为< kbd > textarea</ kbd > 的input,变现为如下样式。
1726
1726
</ p >
@@ -1921,7 +1921,7 @@ <h2 class="small-title">路径导航Nav-path示例</h2>
1921
1921
</ p >
1922
1922
< nav class ="nav-path ">
1923
1923
< ol >
1924
- < li > < a > < span class ="fa fa-heart "> </ span > Collie -UI</ a > </ li >
1924
+ < li > < a > < span class ="fa fa-heart "> </ span > SNX -UI</ a > </ li >
1925
1925
< li > < a > Spring</ a > </ li >
1926
1926
< li class ="disabled "> < a > Summer</ a > </ li >
1927
1927
< li > < a > normal-long</ a > </ li >
@@ -1935,7 +1935,7 @@ <h2 class="small-title">路径导航Nav-path示例</h2>
1935
1935
< code class ="html ">
1936
1936
<nav class="nav-path">
1937
1937
<ol>
1938
- <li><a ><span class="fa fa-heart"></span>Collie -UI</a></li>
1938
+ <li><a ><span class="fa fa-heart"></span>SNX -UI</a></li>
1939
1939
<li><a >Spring</a></li>
1940
1940
<li class="disabled"><a >Summer</a></li>
1941
1941
...
0 commit comments