剑侠世界WIKI > WIKI教程

普通文章编辑

新建页面

写法:[[新建页面名]]或[[链接显示名|页面名]]或者直接输入 /jxsj/新建页面名


说明:在任意页面输入双括号,并在中间填写新建的页面名称 即可生成页面链接,点击即可进入编辑。直接在地址后输入想要新建的页面名也可以自动生成页面并直接跳入编辑页面


比如[[新手攻略]] 显示效果为新手攻略[[点击查看更多|新手攻略]] 显示效果为点击查看更多 实际还是链接到新手攻略页面

修改页面

对于一个已经存在的页面想要编辑页面的内容,请点击编辑源代码按钮,然后在当前页面利用ctrl+f功能定位到你要修改的内容,进行修改即可。


剑侠世界编辑教程1.png

文章编辑

标题写法:

==二级标题名==


===三级标题名===


====四级标题名====


正文请顶格写 开头不要有空格 详细编辑教程请点此进入


插入图片方法:


将图片拖动到编辑框蓝色区域


[[File:要插入的图片名.png|400px|center]]


Wiki教程-1.jpg


然后点击插入图片就会生成一个默认宽度为400的图片


Wiki教程-2.png


插入图片代码:


[[文件(或者File):文件名.文件格式|文件大小|文件位置|link=文件想要跳转的页面]]


示范:[[文件:首页.jph|500px|center|link=首页]] 这样机会生成一个跳转到首页的宽度为500px的居中图片。详细图片编辑教程请点此进入


写完的文章请将链接发至剑侠世界手游代号S攻略组群 找管理员添加至首页或其他入口

表格编辑

表格的代码以{|class="wikitable"开头 |}结尾


|竖线标志单元格


|-竖线横线标志一行的开始和结束

{|class="wikitable"

|A

|B

|-

|B

|A

|}


以上代码的效果就是一个标准的WIKI表格。效果如下


A B
B A


详细表格编辑教程请点此进入


高级布局BOOTSTRAP

栅格系统

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度None (自动)750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列(column)数12
最大列(column)宽自动~62px~81px~97px
槽(gutter)宽30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序
  • 意思是格栅系统是自适应的表格,一共是分12列,使用的时候用 class="row"的标签括住.xs sm md lg,是指屏幕多宽的时候使用格栅列表.如果小于该大小会自适应变成独立一列.有时候我们需要电脑看的时候是一行数列,而手机则变成一列一行.不妨参考下面的代码.

参考代码

简化代码可以,注意,数据里面不要含有"|"

<div class="row">{{#调用:格栅系统|列|样式|数据|数据|数据|样式|数据|数据}}</div>

<div class="row">
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
<div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8 list-group-item list-group-item-warning">.col-md-8</div>
<div class="col-md-4 list-group-item list-group-item-warning">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 list-group-item list-group-item-warning">.col-md-4</div>
<div class="col-md-4 list-group-item list-group-item-warning">.col-md-4</div>
<div class="col-md-4 list-group-item list-group-item-warning">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6 list-group-item list-group-item-warning">.col-md-6</div>
<div class="col-md-6 list-group-item list-group-item-warning">.col-md-6</div>
</div>

效果

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

文字修饰

文字颜色

大家都爱大白腿...

大家都爱大白腿...

大家都爱大白腿...

大家都爱大白腿...

大家都爱大白腿...

大家都爱大白腿...

<p class="text-muted">大家都爱大白腿...</p>
<p class="text-primary">大家都爱大白腿...</p>
<p class="text-success">大家都爱大白腿...</p>
<p class="text-info">大家都爱大白腿...</p>
<p class="text-warning">大家都爱大白腿...</p>
<p class="text-danger">大家都爱大白腿...</p>

文字背景

大家都爱大白腿...

大家都爱大白腿...

大家都爱大白腿...

大家都爱大白腿...

大家都爱大白腿...

<p class="bg-primary">大家都爱大白腿...</p>
<p class="bg-success">大家都爱大白腿...</p>
<p class="bg-info">大家都爱大白腿...</p>
<p class="bg-warning">大家都爱大白腿...</p>
<p class="bg-danger">大家都爱大白腿...</p>



<div class="alert alert-success" role="alert">啊啊啊啊...</div>
<div class="alert alert-info" role="alert">啊啊啊啊...</div>
<div class="alert alert-warning" role="alert">啊啊啊啊...</div>
<div class="alert alert-danger" role="alert">啊啊啊啊...</div>

响应式工具

超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px)
.visible-xs-*可见
.visible-sm-*可见
.visible-md-*可见
.visible-lg-*可见
.hidden-xs可见可见可见
.hidden-sm可见可见可见
.hidden-md可见可见可见
.hidden-lg可见可见可见
类组CSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;
  • 举个粟子 class="hidden-xs" 的标记会在手机访问时隐藏.visible-xs-block 意思是手机浏览时时显示为块元素,同理visible-xs-inline则为内联

预定义样式

按钮

Default Primary Success Info Warning
<span class="btn btn-default">Default</span>
<span class="btn btn-primary">Primary</span>
<span class="btn btn-success">Success</span>
<span class="btn btn-info">Info</span>
<span class="btn btn-warning">Warning</span>

Large spanLarge span
<span class="btn btn-primary btn-lg">Large span</span>
<span class="btn btn-default btn-lg">Large span</span>

Default spanDefault span
<span class="btn btn-primary">Default span</span>
<span class="btn btn-default">Default span</span>

Small spanSmall span
<span class="btn btn-primary btn-sm">Small span</span>
<span class="btn btn-default btn-sm">Small span</span>

Extra small spanExtra small span
<span class="btn btn-primary btn-xs">Extra small span</span>
<span class="btn btn-default btn-xs">Extra small span</span>

标签

Default Primary Success Info Warning Danger
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

选项卡与面板

这里蕴含着神秘内容
正在咏唱巴拉拉魔法.
受到冰影风影响变成一个依然爱美男子的基佬.
笑...笑笑...一直在傻笑

<div class="panel panel-danger">
<ul class="panel-heading nav nav-tabs" role="tablist" style="margin-top:0px">
<li role="presentation" class="active"><a data-target="#home" role="tab" data-toggle="tab">默认</a></li>
<li role="presentation"><a data-target="#profile" role="tab" data-toggle="tab">冰影风</a></li>
<li role="presentation"><a data-target="#messages" role="tab" data-toggle="tab">爱兔兔</a></li>
<li role="presentation"><a data-target="#settings" role="tab" data-toggle="tab">罗特</a></li>
</ul>
<div class="panel-body tab-content">
<div role="tabpanel" class="tab-pane active" id="home">这里蕴含着神秘内容</div>
<div role="tabpanel" class="tab-pane" id="profile">正在咏唱巴拉拉魔法.</div>
<div role="tabpanel" class="tab-pane" id="messages">受到冰影风影响变成一个依然爱美男子的基佬.</div>
<div role="tabpanel" class="tab-pane" id="settings">笑...笑笑...一直在傻笑</div>
</div>
</div>

面板

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

<div class="panel panel-primary"><div class="panel-heading"><p class="panel-title">Panel title</p></div><div class="panel-body">Panel content</div></div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

选项卡

<a class="DQX_MODULE" data-nref="#profile" role="tab" data-toggle="tab">冰影风</a>

会显示 ID为profile 的 tab-pane 关键参数 class="DQX_MODULE" data-nref="#profile"

<div role="tabpanel" class="tab-pane" id="profile">正在咏唱巴拉拉魔法.</div>

选项卡accordion

更新信息请参考 : 折叠面板


少年白色的明天等着你

他把秘密告诉给爱兔兔

{{折叠面板|开始}}
{{折叠面板|标题=不点一下下面吗|选项=1|主框=1|样式=primary|展开=是}}
少年白色的明天等着你
{{折叠面板|内容结束}}
{{折叠面板|标题=爱兔兔|选项=2|主框=1|样式=success}}
喵~
{{折叠面板|内容结束}}
{{折叠面板|标题=尼斯湖水怪|选项=3|主框=1|样式=info}}
他把秘密告诉给爱兔兔
{{折叠面板|内容结束}}
{{折叠面板|结束}}

0

发表评论

参与度  0

0/200

图片

图片(0/1)