本WIKI由旅行者酒馆攻略组管理。内容按CC BY-NC-SA 4.0协议提供,编辑权限开放。本WIKI仍在努力完善中,欢迎收藏。编辑组为非官方民间组织为爱发电,欢迎各路能人异士加入。
免责声明 • 反馈留言 • 收藏方法 • 交流群:255563155

全站通知:

绝区零WIKI编辑教程

阅读

    

2024-08-30更新

    

最新编辑:浪人-ZERO

阅读:

  

更新日期:2024-08-30

  

最新编辑:浪人-ZERO

来自绝区零WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
页面贡献者 :
IJN_Hibiki
浪人-ZERO

如果是第一次来,按"Ctrl+D"可以收藏随时查看更新~觉得WIKI好玩的话,请推荐给朋友哦~(◕ω<)☆
按右上角“WIKI功能→编辑”即可修改页面内容。

修改页面

在对本WIKI进行修改创作前请确认你已经注册并登录账户
  • 目前,崩坏:星穹铁道WIKI绝大部分界面对所有登录用户开放编辑权限,但是修改后会由管理员审核,如有大量或深度编辑需求,可进首页群联系相关人员。
  • 将鼠标移动到页面右上角的编辑按钮,或点击wiki功能-编辑即可编辑。
  • 可以通过按下CTRL+F,使用页面搜索功能定位到你要修改的位置,方便修改。

编辑规范

  • 请不要在WIKI上编写或上传任何未实装或官方未发布内容,多次违反者会予以封禁
  • 使用富文本编辑器会导致页面代码排版混乱,推荐使用源代码编辑

补充缺失页面

  • 点击上方导航条 导航-常用链接-创建新页面,找到对应的类别,填写名称,点击创建页面
  • 在新页面填写相关信息,保存。注意不要删除任何页面内本来存在的内容,除非您明确知道对应内容的实际显示。
  • 如果不清楚填写的格式,可以参考现有角色的编辑界面。或点击下方本预览使用的模板:-模板:XX查看。

删除(误改)了一个东西怎么办?

  • 如果还未保存,直接关闭页面不保存即可。
  • 如果已经保存,请点击页面右上角的或者wiki功能-查看历史,然后撤销本次编辑即可。

「」『』怎么打

  • 在编辑器上方找到【特殊符号】,点击选择【第四个·符号】,在靠前的位置中可以找到。

图片上传规范

命名规范

攻略等文章中使用图片须按以下规范命名,不合规范者一律拒绝。

  • 任务:任务类型-任务名-用途(比如详细点位、地图所在等)
  • 攻略:攻略-你的昵称-攻略简称-用途
  • 其他:其他-你的昵称-页面-用途

尺寸规范

  • 各种图标大小为150*150以上方形尺寸,大图尽量保持16:9。
  • GIF必须为16:9,大小推荐480*270(角色站立GIF无固定尺寸)。

基础编辑

章节

你输入的内容 你看到的显示
== 二级标题 ==

一级标题是页面名称,所以请从二级标题开始用起。

有四个以上标题的页面会自动生成一个目录。

这个自动生成的目录可以通过书写<code>__NOTOC__</code>来隐藏。

=== 三级标题 ===

输入更多的“等于号”(=)可以创建更多下一级标题。

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

请不要跳跃标题等级,例如二级标题之下直接就是四级标题,而没有三级标题。


===== 五級标题 =====

二级标题

一级标题是页面名称,所以请从二级标题开始用起。

有四个以上标题的页面会自动生成一个目录。

这个自动生成的目录可以通过书写__NOTOC__来隐藏。

三级标题

输入更多的“等于号”(=)可以创建更多下一级标题。

四级标题

请不要跳跃标题等级,例如二级标题之下直接就是四级标题,而没有三级标题。


五級标题


行与段落

你输入的内容 你看到的显示
另起一行并不会导致换行,
而只是会增加一个空格。

空一个空行虽然可以换行,
但其实是开始了一个新的段落。


如果你对空一个空行产生的行间距不满,
你可以空两个空行<del>,或者空更多行</del>。

另起一行并不会导致换行, 而只是会增加一个空格。

空一个空行虽然可以换行, 但其实是开始了一个新的段落。


如果你对空一个空行产生的行间距不满, 你可以空两个空行,或者空更多行

另一种换行方式是使用<code><br/></code>标记来换行。<br>
这样换行后的内容仍在'''同一段落'''内。

另一种换行方式是使用<br/>标记来换行。
这样换行后的内容仍在同一段落内。

* 星号(*)其实是符号列表。
** 但不知道为什么这个WIKI的列表,
*** 并不显示前面的列表前面的圆点。
**** 这很糟糕。
但更糟糕的是一些人通过符号列表来对文章换行。
* '''请务必不要这么做!'''
  • 星号(*)其实是符号列表。
    • 但不知道为什么这个WIKI的列表,
      • 并不显示前面的列表前面的圆点。
        • 这很糟糕。

但更糟糕的是一些人通过符号列表来对文章换行。

  • 请务必不要这么做!
# 井号(#)是数字列表。
## <del>曾经</del>每一行前面都有一个数字序号。
##* 甚至可以将数字列表与符号列表混用。
##*# <del>然并卵。</del>
同样,'''请勿用数字列表来换行和缩进!'''
  1. 井号(#)是数字列表。
    1. 曾经每一行前面都有一个数字序号。
      • 甚至可以将数字列表与符号列表混用。
        1. 然并卵。

同样,请勿用数字列表来换行和缩进!

: 冒号(:)最大的贡献是
:: 缩进!
::: 可以缩进到让你满意。
'''请用冒号(:)来缩进''',而不是用星号(*)或井号(#)!
冒号(:)最大的贡献是
缩进!
可以缩进到让你满意。

请用冒号(:)来缩进,而不是用星号(*)或井号(#)!

 如果一些行的开始是空格,
 那么这些行将被'''预格式化''',
 不会被换行。
 通常是用来显示一段代码之类的东西。
 也可以使用<pre>...</pre>。
如果一些行的开始是空格,
那么这些行将被预格式化,
不会被换行。
通常是用来显示一段代码之类的东西。
也可以使用<pre>...</pre>。
在拂晓的水平线上
----
刻下胜利吧!

在拂晓的水平线上


刻下胜利吧!

文字样式

你输入的内容 你看到的显示
''斜体''

'''粗体'''

'''''粗斜体'''''

斜体

粗体

粗斜体

注:每嵌套一个<big>标签,字体就增大一号,直至最大7 号文本,但更建议使用<span style="font-size:50px">内容</span>直接设定字体大小的方法。

<b>粗体</b>

<i>斜体</i>

<strong>强调</strong>

<big>大号字体</big>

<s>划掉</s>

<del>删除线</del>

<u>下划线</u>

<code>代码</code>

粗体

斜体

强调

大号字体

划掉

删除线

下划线

代码

<nowiki>不进行''wiki''解析</nowiki>

不进行''wiki''解析

<span style="color:red">应用CSS样式</span>

应用CSS样式

链接

你输入的内容 你看到的显示
[[妮可]]是一个站内链接。

也可以修改链接的显示文字,比如[[妮可|妮可妮可妮]]。

妮可是一个站内链接。

也可以修改链接的显示文字,比如妮可妮可妮

[[纳甘莫辛]]是一个指向不存在页面的链接。

纳甘莫辛是一个指向不存在页面的链接。

其他命名空间的页面的链接,比如[[特殊:上传文件]]或[[文件:角色头像-艾莲.png]]

其他命名空间的页面的链接,比如特殊:上传文件角色头像-艾莲.png

站外链接:
* [https://www.mediawiki.org/wiki/Help:Formatting/zh]
* [https://zh.wikipedia.org/wiki/Help:编辑页面 维基百科-帮助:编辑页面]

站外链接:

有时,wiki对于一些多重复合符号的识别可能会出问题,比如[https://bbs.mihoyo.com/zzz/article/4039822 [[点击此处]]],这时,可以使用HTML语言代替。
如<a url=https://bbs.mihoyo.com/ys/article/4039822>[[点击此处]]</a>

有时,wiki对于一些多重复合符号的识别可能会出问题,比如[[点击此处]],这时,可以使用HTML语言代替。 如[[点击此处]]

如何自定义链接颜色

你可以这样将链接改为不同颜色: 让内部链接对所有人都显示为不同颜色 你可以这样将链接改为不同颜色:

[[不存在的页面|<span style="color: #0645AD;">不存在的页面</span>]]<br>
[[不存在的页面|<span style="color: #0B0080;">不存在的页面</span>]]<br>
[[不存在的页面|<span style="color: #DD3333;">不存在的页面</span>]]<br>
[[不存在的页面|<span style="color: #A55858;">不存在的页面</span>]]<br>
[[不存在的页面|<span style="color: #3366BB;">不存在的页面</span>]]<br>
[[不存在的页面|<span style="color: #663366;">不存在的页面</span>]]

这会显示为:
不存在的页面
不存在的页面
不存在的页面
不存在的页面
不存在的页面
不存在的页面


引用

说明:文章引用内容,对应内容外链。


用途:适用于页面部分内容引用外部内容(如一段话,引用了一篇文章),使你的文章有参考资料可查,内容更具可信度。


写法:<ref>[链接 链接页面名]</ref>


需要在页面最底部添加标题栏==外链与注释==。

调用

说明:页面调用页面内容,可以是整个页面也能是部分页面。


用途:适用于重叠内容部分,该写法可以有效避免重复编辑,而且需要修改时,只需要修改源页面即可。


写法:三种不同的写法以及对应功能
{{/B}}加载A页面的子页面B于A页面中

{{:A/B}}加载A页面的子页面B于C页面中

{{#section-h:A|B}}加载A页面的B标题下内容于C页面中

插入图片

当您想在编辑过程中插入您想要的图片时,首先需要上传该图片。上传图片的按钮位于编辑工具栏的顶部。
您需要注意以下几点:

  1. 您需要为上传的图片命名,准确的命名将使图片便于分类和索引,请避免使用纯数字,纯符号作为图片命名,请不要把QQ和微信截图随意上传。
  2. 上传的图片格式一般为jpg、png、gif,图片大小应在2M及以下为宜。
  3. 您上传的图片应具有意义,不允许涉及血腥、暴力等敏感因素,违规的图片将会被管理员删除。
  4. 上传的图片可以在特殊:文件列表中找到,在该页面的搜索栏输入文件名提交即可。有的时候明明上传了文件,搜索栏却无法搜索到,您可以重进页面然后再次尝试搜索。
你输入的内容 你看到的显示
[[文件:狡兔屋logo.png]]

狡兔屋logo.png

[[文件:狡兔屋logo.png|50px]]

狡兔屋logo.png

[[文件:狡兔屋logo.png|50px|center|link=狡兔屋]]
[[文件:狡兔屋logo.png|50px|居中|link=狡兔屋]]
狡兔屋logo.png
[[文件:狡兔屋logo.png|frame|50px|right]]
[[文件:狡兔屋logo.png|边框|50px|右]]
狡兔屋logo.png
[[文件:狡兔屋logo.png|thumb|right|狡兔屋]]
[[文件:狡兔屋logo.png|缩略图|右|狡兔屋]]
狡兔屋


详细可以参考维基百科-帮助:图像MediaWiki-帮助:图像

表格编辑

可视化工具【推荐】

https://www.tablesgenerator.com/mediawiki_tables

基本用法

{| class="wikitable"
|-
! 标题文字1
! 标题文字2
! 标题文字3
|-
| 示例1
| 示例2
| 示例3
|-
| 示例4 
| 示例5
| 示例6
|}

提交编辑后,表格显示为:

标题文字1 标题文字2 标题文字3
示例1 示例2 示例3
示例4 示例5 示例6

其中{|开头, |}结尾, !为表头, |为单元格, |-表示表格行的开始。


详细可以参考维基百科-帮助:表格MediaWiki-帮助:表格


可折叠表格

{|class="wikitable mw-collapsible mw-collapsed" style="width:100%"
|-
!'''表格折叠使用方法'''
|-
|
'''说明:'''使内容折叠。

'''用途:'''一般用于页面过长,将部分可选择性观看的内容折叠。

'''写法:'''在表格class=后加 mw-collapsible(此时为默认展开,可折叠)。
<br>
在表格class=后再追加 mw-collapsed(此时为默认折叠,可展开)。
<br>
表格第一行为默认展示的内容,第二行开始到表格结尾可以折叠。
|}
表格折叠使用方法

说明:使内容折叠。

用途:一般用于页面过长,将部分可选择性观看的内容折叠。

写法:在表格class=后加 mw-collapsible(此时为默认展开,可折叠)。
在表格class=后再追加 mw-collapsed(此时为默认折叠,可展开)。
表格第一行为默认展示的内容,第二行开始到表格结尾可以折叠。

单元格跨行/跨列

请使用预览功能确保实际效果符合预期。

可通过结合使用“rowspan”和“colspan”合并单元格。但排序样式“sortable”会与“rowspan”冲突,使得单元格无法合并,同时出现排序错误。

实例一:

{| class="wikitable"
|-
| 标题 || 标题 || 标题
|-
| rowspan="2" | 跨2行的内容
| 示例1
| 示例2
|-
| 示例3
| 示例4
|}
标题 标题 标题
跨2行的内容 示例1 示例2
示例3 示例4

实例二:

{| class="wikitable"
|-
| 标题 || 标题 || 标题
|-
| colspan="2"| 跨2列的内容
| 示例1
|-
| 示例2
| 示例3
| 示例4
|}
标题 标题 标题
跨2列的内容 示例1
示例2 示例3 示例4

实例三:

{| class="wikitable"
|-
| 列1 || 列2 || 列3
|-
| rowspan="2" colspan="2" style="text-align: center;" | A
| B
|-
| C
|}
列1 列2 列3
A B
C
跨行:在单元格内容前加rowspan=n|
跨列:在单元格内容前加colspan=n|
注意单元格跨行跨列后其他行的内容问题。
{| class="wikitable"
|-
! rowspan=4|跨4行的标题 !!标题 !!标题!!标题
|-
| colspan=2|跨2列的内容 || 示例
|-
| rowspan=2|跨2行的内容 || 示例 || 示例
|-
| 示例 || 示例
|}
跨4行的标题 标题 标题 标题
跨2列的内容 示例
跨2行的内容 示例 示例
示例 示例

单元格指定宽度

在单元格内容前加width=宽度|
可使用多种尺寸单位,包括em、px、%等
改变某一单元格的宽度,同列单元格也会相应改变。
{| class="wikitable"
|-
! 标题文字 !! 标题文字
|-
| style="width:200px"|宽度设为200px || 示例
|-
| 示例 || 示例
|}
标题文字 标题文字
宽度设为200px 示例
示例 示例

模板

  • 打开文章源代码页面,下方会显示该页面使用的模板(如果该页面有使用模板)
  • 如下所述,是一个设计好模板,将需要填充的数据,以{{{XXX}}}的字样代替
  • 在其它页面使用该模板时,用{{模板名|XXX|XXX|XXX}}的方式填写数据。


WIKI编辑参考


模板速查

崩坏:星穹铁道wiki模板一览(可读性较差,仅供速查使用,无编辑经验者建议看完以下内容)
点击下文模板标题可以查看更多使用示例哦~

模板:施工中

  • 用途:用于有大量内容需要编辑时先行添加保存,以避免其他人编辑冲突。


  • 注意:点击编辑框下方显示预览可查看编辑后效果,请尽量避免多次提交内容较少的小编辑。


  • 使用:
{{施工中|编者留言(可选)}}
代码 实际效果
{{施工中|本页面施工中模板为展示用,请不要删除哦~}}
见本页面顶部


模板:左侧目录

  • 用途:用于攻略等文字量较大的页面,生成一个固定在左侧的目录以方便用户阅读和跳转,使用后会替换默认目录。


  • 注意:只推荐在您自行编写的攻略类页面使用,请务必不要在原本的角色/武器等wiki页面使用。


  • 使用:
代码 实际效果
{{左侧目录|开始}}
页面内容
{{左侧目录|结束}}
见本页面


模板:提示

  • 用途:添加警告、备忘提示等内容。


  • 使用:
{{提示|颜色|内容|第一句话|宽度=提示板宽度}}

颜色:常用的有绿色、蓝色、黄色、红色,默认为红色。(其中,成功=绿色,消息=蓝色=提示,注意=黄色=警告,错误=红色=危险。)
内容:填写想要在信息框内展示的文本内容。
第一句话:自带加粗换行变色(同左侧线条颜色)。
提示板宽度:不填则空,默认为800px。


代码 效果
{{提示|红色|不要忘记打周常!|宽度=100%}}
不要忘记打周常!


模板:折叠


  • 用途:折叠活动剧情/CG合集等内容量大且不适合剧透的内容,防止剧透。


  • 使用:
用途 语法 示例代码 示例结果
默认用法,内部无法使用wiki的表格语法(有其他冲突也请使用下方自定义法)
{{折叠
|标题(必填/默认“我是标题”)
|内容(必填/默认“我是内容”)
|颜色(可选/可选颜色:“红、黄、蓝、绿、
RGB颜色[eg:#4a80c0]”/默认:蓝)
|边框(可选/默认10px,控制上下间距)
|折叠(可选/是、否/默认否)
|前缀(可选/是、否/默认是)
}}
{{折叠
|标题=我是折叠模板
|内容=我是折叠模板内容
|颜色=#402f44
|边框=0px
|折叠=是
|前缀=否
}}
我是折叠模板
最简单写法
{{折叠
|标题=我是折叠模板
|内容=我是折叠模板内容
}}
我是折叠模板
折叠
我是折叠模板内容
"|颜色、|边框、|折叠"的默认情况展示:
{{折叠
|标题=默认红色
|内容=
    {{折叠
    |标题=默认黄色
    |内容=
        {{折叠
        |标题=默认蓝色
        |内容=
            {{折叠
            |标题=默认绿色
            |内容=默认折叠颜色
            |颜色=绿
            |边框=0
            }}
        |颜色=蓝
        |边框=0
        }}
    |颜色=黄
    |边框=0
    }}
|颜色=红
}}
默认红色
折叠
默认黄色
折叠
默认蓝色
折叠
默认绿色
折叠
默认折叠颜色
要在折叠内使用特殊wiki语法,默认格式无法识别的语法,如表格之类的
{{折叠|开始
|标题(必填/默认“我是标题”)
|颜色(可选/可选颜色:“红、黄、蓝、绿、
RGB颜色[eg:#4a80c0]”/默认:蓝)
|边框(可选/默认10px,控制上下间距)
|折叠=(可选/是、否/默认否)
}}

内容部分

{{折叠|结束}}(必填)
如果表格上方有空隙请把模板和表格连在一起不要换行
{{折叠|开始
|标题=我是可以写表格的折叠
|颜色=#402f44
|边框=5px
|折叠=是
}}{| class="wikitable" style="width:100%"
|-
!我是表格
|-
|表格内容
|}

{{折叠|结束}}
我是可以写表格的折叠
折叠

模板:颜色

  • 用途:更方便地改变文字颜色,比如角色技能介绍处不同元素会使用对应的不同颜色。


  • 使用:
情况 代码 效果
通用:
{{颜色|红|内容}}
{{颜色|蓝|内容}}
{{颜色|黄|内容}}
{{颜色|绿|内容}}
{{颜色|描述|内容}}
{{颜色|描述1|内容}}
{{颜色|栗梅|内容}}
{{颜色|弁柄色|内容}}

内容 内容 内容 内容 内容 内容 内容 内容

角色官方故事/活动提示重点时常用:
{{颜色|描述|内容}}
内容
元素:
{{颜色|火|内容}}
{{颜色|冰|内容}}
{{颜色|风|内容}}
{{颜色|雷|内容}}
{{颜色|虚数|内容}}
{{颜色|量子|内容}}
{{颜色|物理|内容}}

内容 内容 内容 内容 内容 内容 内容


模板:背景颜色

  • 用途:方便地创作带有圆角色块背景的文字,主要用以模仿官方公告形式,增加美观度等。


  • 使用:
情况 代码 效果
颜色:
红{{背景颜色|红|文字}}示例。
橙{{背景颜色|橙|文字}}示例。
黄{{背景颜色|黄|文字}}示例。
绿{{背景颜色|绿|文字}}示例。
蓝{{背景颜色|蓝|文字}}示例。
白{{背景颜色|白|文字}}示例。
黑{{背景颜色颜色|黑|文字}}示例。
栗梅{{背景颜色|栗梅|文字}}示例。
弁柄{{背景颜色|弁柄|文字}}示例。

模板:背景颜色示例。 橙模板:背景颜色示例。 黄模板:背景颜色示例。 绿模板:背景颜色示例。 蓝模板:背景颜色示例。

示例。

模板:背景颜色示例。 栗梅模板:背景颜色示例。 弁柄模板:背景颜色示例。

角色官方故事/活动提示重点时常用:
描述{{背景颜色|描述|文字}}示例。
描述1{{背景颜色|描述1|文字}}示例。

描述模板:背景颜色示例。 描述1模板:背景颜色示例。

元素:
{{背景颜色|火|文字}}
{{背景颜色|冰|文字}}
{{背景颜色|风|文字}}
{{背景颜色|雷|文字}}
{{背景颜色|虚数|文字}}
{{背景颜色|量子|文字}}
{{背景颜色|物理|文字}}

模板:背景颜色 模板:背景颜色 模板:背景颜色 模板:背景颜色 模板:背景颜色 模板:背景颜色 模板:背景颜色


模板:图标

按钮
{{图标|按钮|普通攻击}}
{{图标|按钮|闪避技}}
{{图标|按钮|特殊技}}
{{图标|按钮|强化特殊技}}
{{图标|按钮|连携技}}
{{图标|按钮|支援技}}

 技能-普通攻击图标.png  技能-闪避技图标.png  技能-特殊技图标.png  技能-强化特殊技图标.png  技能-连携技图标.png  技能-支援技图标.png 

角色稀有度
{{图标|角色稀有度|A}}
{{图标|角色稀有度|S}}

角色稀有度  角色稀有度 × A角色稀有度  角色稀有度 × S

用途 语法 示例代码 示例结果
通用(不包括武器、角色、驱动盘等)
显示带名称的图标
{{图标|<名称>|<数量(可选)>}}
{{图标|丁尼}}
丁尼  丁尼 
{{图标|丁尼|3}}
丁尼  丁尼 × 3
材料
{{图标|材料|<材料名称>|<数量(可选)>}}
{{图标|材料|丁尼}}
{{图标|材料|丁尼|3}}
音擎
{{图标/音擎|<音擎名称>}}
  • 附带显示音擎简要信息的悬浮框
  • 不支持数量显示
  • {{图标/音擎|拘缚者}}

    武器属性:击破
    稀有度:图标-材料稀有度-S.png


    攻击力:46/683
    冲击力:7.2 %/18%


    束缚枷锁:攻击命中敌人时,「普通攻击」造成的伤害和失衡值提升6%/7.5%/9%/10.5/12%,最多叠加5层,持续8秒,同一招式内最多触发一次,每层效果单独结算持续时间。
    {{图标/音擎|大|<稀有度>|<武器属性>}}
  • 不显示悬浮框
  • 不指定<稀有度>时,不显示稀有度
  • 不指定<武器属性>时,不显示稀有度
  • 不支持数量显示
  • {{图标/音擎|大|拘缚者}}
    {{图标/音擎|大|拘缚者|S}}
    {{图标/音擎|大|拘缚者||击破}}


    模板:计时


    • 用途:提示活动时间、道具过期时间等


    • 使用:
    情况 代码 效果
    通用
    {{计时
    |年【默认为当前年】
    |月【默认为当前月】
    |日【默认为当前日】
    |时【默认为0】
    |分【默认为0】
    |秒【默认为0】
    |显示时间=文本【默认为填写的时间】
    |禁用天=
    |禁用时=【默认为空】
    |禁用分=【默认为空】
    |禁用秒=【默认为空】
    |隐藏分类=【默认为空】
    |编号=数字【默认为1】
    }} 
    
    1. 必须存在编号=1【如果一个页面只使用一次,则无需编号,默认为1】。
    2. 可以跳号,但是整个页面的编号必须由小到大排列。
    {{计时|2020|9|28|编号=1}}
    活动
    {{活动计时|填写活动名字,活动等|开始时间(精准到秒)|结束时间(精准到秒)}}
    
    {{活动计时|活动名|2021/02/26 04:00|2021/03/05 03:59}}


    模板:划掉重说

    • 用途:用于不删除原有内容的情况下划掉重说。


    • 使用:
    代码 实际效果
    {{划掉重说|划掉内容|重说内容}}
    

    划掉内容重说内容

    模板:悬浮框

    • 用途:鼠标移动到一段文字时显示出不同内容


    • 使用:
    代码 实际效果
    {{悬浮框|显示的内容|鼠标移动上去时显示的内容}}
    

    显示的内容

    模板:黑幕


    • 用途:用于玩梗/剧透时防止用户直接看到内容使用。
    对于黑幕,移动光标至文字上即可解除遮罩。
    对于刮刮卡,选中文字即可擦开,若无法使文字被选中,请检查浏览器或JS是否劫持了相关操作


    • 注意:解开黑幕、刮刮卡的操作在移动端上体验不佳,为照顾移动端体验,请避免过多使用。


    • 使用:
    情况 代码 效果
    黑幕
    {{黑幕|文字}}
    文字
    刮刮卡
    {{刮刮卡|文字}}
    模板:刮刮卡

    模板:文案引号


    • 使用:
    代码 效果
    {{文案引号|内容}}
    模板:文案引号

    Bootstrap样式

    栅格系统

    超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
    栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
    .container 最大宽度 None (自动) 750px 970px 1170px
    类前缀 .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 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


    响应式设计

    超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) 当前你的屏幕
    .visible-xs-* 可见 可见
    .visible-sm-* 可见 可见
    .visible-md-* 可见 可见
    .visible-lg-* 可见 可见
    .hidden-xs 可见 可见 可见
    .hidden-sm 可见 可见 可见
    .hidden-md 可见 可见 可见 可见
    .hidden-lg 可见 可见 可见
    类组 CSS display
    .visible-*-block display: block;
    .visible-*-inline display: inline;
    .visible-*-inline-block display: inline-block;

    举个粟子class="hidden-xs"的标记会在手机访问时隐藏,

    .visible-xs-block意思是手机浏览时时显示为块元素, 同理.visible-xs-inline则为行内元素。


    预设颜色

    你看到的显示 你输入的内容

    这是一行静默的文字

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


    额外信息

    <div class="alert alert-success" role="alert">
    <div class="h2">Well done!</div>
    Aww yeah, you successfully read ...
    <hr>
    ...
    </div>
    

    关闭按钮

    × Warning! Best check yo self, you're not looking too good.

    <div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">×</a>
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>
    


    预设按钮

    你看到的显示 你输入的内容
    Default
    <span class="btn btn-default">Default</span>
    
    Primary
    <span class="btn btn-primary">Primary</span>
    
    Success
    <span class="btn btn-success">Success</span>
    
    Info
    <span class="btn btn-info">Info</span>
    
    Warning
    <span class="btn btn-warning">Warning</span>
    
    Large span
    <span class="btn btn-primary btn-lg">Large span</span>
    
    Large span
    <span class="btn btn-default btn-lg">Large span</span>
    
    Default span
    <span class="btn btn-primary">Default span</span>
    
    Default span
    <span class="btn btn-default">Default span</span>
    
    Small span
    <span class="btn btn-primary btn-sm">Small span</span>
    
    Small span
    <span class="btn btn-default btn-sm">Small span</span>
    
    Extra small span
    <span class="btn btn-primary btn-xs">Extra small span</span>
    
    Extra small span
    <span class="btn btn-default btn-xs">Extra small span</span>
    


    预设标签

    你看到的显示 你输入的内容
    Default
    <span class="label label-default">Default</span>
    
    Primary
    <span class="label label-primary">Primary</span>
    
    Success
    <span class="label label-success">Success</span>
    
    Info
    <span class="label label-info">Info</span>
    
    Warning
    <span class="label label-warning">Warning</span>
    
    Danger
    <span class="label label-danger">Danger</span>
    



    面板

    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>
    

    css单位

    绝对单位

    什么是绝对单位

    绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。

    绝对单位有哪些

    px 像素 (1px = 1/96th of 1in) 像素是相对于屏幕分辨率的,页面按照精确像素展示,不会因为其它元素的尺寸变化而变化,像素是最典型的度量单位
    cm 厘米(1cm = 37.8px) 厘米是比较熟悉有用的物理度量单位,但在CSS领域,被直接映射成像素
    mm 毫米(1mm = 0.1cm = 3.78px) 毫米是个小数量级的物理度量单位
    in 英寸 (1in = 96px = 2.54cm) 一个物理度量文件,但是在CSS领域,英寸也被映射成像素
    pt point,大约1/72英寸; (1pt = 1/72in) 点(Points)也是物理长度单位
    pc pica,大约 12pt,1/6英寸; (1pc = 12 pt) 派卡(Pica)和points一样,也是物理长度单位

    相对单位

    什么是相对单位

    相对长度单位指定了一个长度相对于另一个长度的属性。

    相对单位有哪些

    em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em=32px;
    ex 依赖于英文字母小x的高度
    ch 数字 0 的宽度
    rem rem 是根 em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。
    vw viewpoint width,视窗宽度,1vw=视窗宽度的1%
    vh viewpoint height,视窗高度,1vh=视窗高度的1%
    vmin vw和vh中较小的那个
    vmax vw和vh中较大的那个
    % 百分比,以百分比为单位的长度值