欢迎大家来到环行旅舍(克莱因舍)WIKI！本WIKI交流群：587477551
本WIKI正在建设中，欢迎大家一起参与WIKI的建设，可以参考编辑教程、BWIKI编辑教程

「人类无知的时代已经过去，一场变革之风将在薰然的曙光里盘旋而上。是扬帆还是止舵，该由你决定了。」

——欢迎来到「克莱因舍」
全站通知：

环行旅舍WIKI编辑教程

刷 历
编

阅读

    

2023-07-26更新

    

最新编辑:千杯不醉的茶

阅读：

  

更新日期：2023-07-26

  

最新编辑：千杯不醉的茶

来自环行旅舍WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
页面贡献者 :
空之云间
千杯不醉的茶
如果是第一次来，按"Ctrl+D"可以收藏随时查看更新~觉得WIKI好玩的话，请推荐给朋友哦～(◕ω＜)☆
按右上角“WIKI功能→编辑”即可修改页面内容。

补充教程

若您并非仅想为自己感兴趣的页面做出补充，而是想要学习WIKI相关知识，请点击左侧来自碧蓝航线的编辑教程或向下翻查看相关内容

注意事项

  • 首先，因模板使用较多，编辑选择使用“源代码”的方式，快捷键为Shift+Alt+E。
  • 当你在编辑某一个页面时，建议在页面第一行加入
    {{施工中}}
    或在群内文档做出标记，以防编辑撞车

补充操作过程

  1. 首先打开想要编辑的页面，可以通过一下页面来索引所有需要补充的页面 https://wiki.biligame.com/kelaiyinshe/%E5%88%86%E7%B1%BB:%E5%BE%85%E5%AE%8C%E5%96%84
  2. 若没有想要补充的内容,则在搜索框中，输入页面的标题并搜索。
或是复制站点名加上想要查找的页面，例如 
https://wiki.biligame.com/kelaiyinshe/

https://wiki.biligame.com/kelaiyinshe/测试页面 目前部分页面已创建并放入模板，若想要补充的页面为空则可调用模板进行创建

模板调用

  1. 打开对应模板页面,如舍友填写模板、敌人填写模板、物资填写模板
  2. 复制页面中的代码部分
  3. 在新页面复制并保存
  4. 开始编辑内容
本页面内容来自碧蓝航线WIKI，在此表示感谢！

来自碧蓝航线的编辑教程

创建页面

首先，请在页面顶部导航栏右侧的搜索框中，输入页面的标题并搜索。
若这个页面不存在，则搜索页面会显示：

在本Wiki上新建名为“不存在的页面”的页面！另请查看您的搜索找到的结果。

点击不存在的页面链接，来创建这个页面。


你也可以直接在浏览器访问地址 

http://wiki.biligame.com/kelaiyinshe/不存在的页面

这样可以直接打开这个页面，并开始创建页面。


当某个已经存在的页面中，包含指向某个不存在的页面的链接时， 你也可以通过点击这个链接来创建页面。

PS：如果要在WIKI测试功能或者其他方面请建立个人用户页，在个人用户页面下进行相关编辑 

https://wiki.biligame.com/kelaiyinshe/用户:B站uid/测试

例如：https://wiki.biligame.com/kelaiyinshe/用户:25131636/测试

在WIKI上新建攻略/文章

  • 首先在首页找到，攻略创建入口，如图，在首页左下角处
    • 填写好页面/文章标题，点击创建页面

文件:创建攻略页面1.jpg

投稿区

此为投稿区，也可以从这里开始创建新页面

WIKI开放非攻略组内容投稿渠道，并且会对攻略进行必要的测试验证，在保证正确及合理性后收录至WIKI中，希望各位多多参与。

自由投稿待审核区

  • 进入需要创建的页面，开始编辑内容
    • 上方红框为部分编辑格式以及模板，下方红框开始正文，灵活运用显示预览以达到更好的显示效果

文件:创建攻略页面2.jpg

编辑页面

在对本WIKI进行修改创作前请确认你已经注册并登录账户。

段落编辑：
此为更常用的编辑方法，避免和他人的编辑产生冲突。
点击标题右边的编辑进入编辑页面进行修改。
文件:编辑教程3.jpg

PC端：
如果想要编辑一个已经存在的页面，将鼠标移动到页面右上角的WIKI功能按钮，在弹出的下拉菜单中点击编辑按钮，没有权限参与编辑将会显示查看源代码。
进入编辑模式，可以按下CTRL+F，使用页面搜索功能快速定位到你要修改的位置，进行修改。

文件:编辑教程1.jpg

手机端：
相对于PC端编辑不是很方便，但相应的编辑按钮更为显眼，在页面最上端可以看到有个编辑WIKI按钮，点击即可进入编辑模式。

文件:编辑教程2.jpg

基础编辑

章节

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

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

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

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

=== 三级标题 ===

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

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

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


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

二级标题

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

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

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

三级标题

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

四级标题

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


五級标题


行与段落

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

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


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

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

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


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

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

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

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

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

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

同样，请勿用数字列表来换行和缩进！ 

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

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

 如果一些行的开始是空格，
 那么这些行将被'''预格式化'''，
 不会被换行。
 通常是用来显示一段代码之类的东西。
 也可以使用<pre>...</pre>。

如果一些行的开始是空格，
那么这些行将被预格式化，
不会被换行。
通常是用来显示一段代码之类的东西。
也可以使用<pre>...</pre>。

在拂晓的水平线上
----
刻下胜利吧！

在拂晓的水平线上

刻下胜利吧！

文字样式

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

'''粗体'''

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

斜体

粗体

粗斜体 

<b>粗体</b>

<i>斜体</i>

<strong>强调</strong>

<s>划掉</s>

<del>删除线</del>

<code>代码</code>

<u>下划线</u>

粗体

斜体

强调

划掉

删除线

代码

下划线 

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

不进行''wiki''解析 

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

应用CSS样式

链接

你输入的内容 你看到的显示 
[[克莱提卡]]是一个站内链接。

也可以修改链接的显示文字，比如[[克莱提卡|刀妹]]。

克莱提卡是一个站内链接。

也可以修改链接的显示文字，比如刀妹。 

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

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

其他命名空间的页面的链接，比如[[特殊:上传文件]]或[[文件:环行旅舍APPlogo.png]]

其他命名空间的页面的链接，比如特殊:上传文件或环行旅舍APPlogo.png 

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

站外链接：

链接颜色

链接样式 类型 颜色
蓝色链接 指向当前存在的页面 #0645AD = rgb(6,69,173)
深蓝色链接 指向已经访问过的存在页面 #0B0080 = rgb(11,0,128)
红色链接 指向wiki中未建立的页面 #DD3333 = rgb(221,51,51)
浅红色链接 指向未连接但访问过的页面 #A55858 = rgb(165,88,88)
淡蓝色链接 指向其它wiki，注意这个页面无论是否在目标wiki上存在，链接都显示为淡蓝色。 #3366BB = rgb(51,102,187)
紫色链接 指向其它站点但访问过的链接 #663366 = rgb(102,51,102)

如何自定义链接颜色

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

[[不存在的页面|<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>


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

插入图片

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

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

环行旅舍APPlogo.png 

[[文件:环行旅舍APPlogo.png|50px]]

环行旅舍APPlogo.png 

[[文件:环行旅舍APPlogo.png|50px|center|link=标枪]]
[[文件:环行旅舍APPlogo.png|50px|居中|link=标枪]]
环行旅舍APPlogo.png
[[文件:环行旅舍APPlogo.png|frame|50px|right]]
[[文件:环行旅舍APPlogo.png|边框|50px|右]]
环行旅舍APPlogo.png 
[[文件:环行旅舍APPlogo.png|thumb|right|标枪]]
[[文件:环行旅舍APPlogo.png|缩略图|右|标枪]]
标枪


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

表格编辑

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

提交编辑后，表格显示为：

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

其中{|开头， |}结尾， !为表头， |为单元格， |-表示表格行的开始， 其中，class="wikitable"不添加的话则会显示一个无边框的表格。 

<table class="wikitable">
<tr>
<th>标题文字1</th>
<th>标题文字2</th>
<th>标题文字3</th>
</tr>
<tr>
<td>示例1</td>
<td>示例2</td>
<td>示例3</td>
</tr>
<tr>
<td>示例4</td>
<td>示例5</td>
<td>示例6</td>
</tr>
</table>
标题文字1 标题文字2 标题文字3
示例1 示例2 示例3
示例4 示例5 示例6

其中<table></table>开头和结尾， <th></th>为表头， <td></td>为一个单元格， <tr></tr>表示每个表格行， 其中，class="wikitable"不添加的话则会显示一个无边框的表格。

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


可折叠表格

mw-collapsible（附加折叠功能，生成没折叠的表格）、mw-collapsed（附加折叠功能，与前一个参数同时使用，生成已折叠的表格）。 


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

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

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

说明：使内容折叠。

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

写法：在表格class=后加 mw-collapsible（此时为默认展开，可折叠）。
表格第一行为默认展示的内容，第二行开始到表格结尾可以折叠。 

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

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

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

说明：使内容折叠。

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

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

修改表格高度

通过修改表格的css进行表格的高度扩展或者缩小，但请注意，更改后不止单个表格栏，同行的单元格也会被更改为相同的高度，宽度的单位可用px、%、em等 

{| class="wikitable"
|-
| 标题 || 标题 || 标题
|-
| style="height:50px"|高度设为50px
| 示例1
| 示例2
|-
| 示例3
| 示例4
| 示例4
|}
标题 标题 标题
高度设为50px 示例1 示例2
示例3 示例4 示例4

修改表格宽度

通过修改表格的css进行表格的宽度扩展或者缩小，但请注意，更改后不止单个表格栏，同列的单元格也会被更改为相同的宽度，宽度的单位可用px、%、em等 

{| class="wikitable"
|-
| 标题 || 标题 || 标题
|-
| style="width:300px"|宽度设为300px
| 示例1
| 示例2
|-
| 示例3
| 示例4
| 示例4
|}
标题 标题 标题
宽度设为300px 示例1 示例2
示例3 示例4 示例4

单元格合并项

可通过结合使用“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行的内容 示例 示例
示例 示例

使用/编辑模板

  • 打开文章源代码页面，下方会显示该页面使用的模板（如果该页面有使用模板）

文件:使用模板.jpg

  • 如下所述，是一个设计好模板，将需要填充的数据，以{{{XXX}}}的字样代替

文件:使用模板2.jpg

  • 在其它页面使用该模板时，用{{模板名|XXX|XXX|XXX}}的方式填写数据。

文件:使用模板3.jpg

  • 效果如下

文件:使用模板4.jpg

模板:舍友头像

说明 代码 示例
仅指定舍友名称时
(注:当舍友页面不存在时，稀有度将显示为红色) 		{{舍友头像|长安}}
长安-头像.png
长安
{{舍友头像|枝作人|小}}
枝作人-头像.png
枝作人
{{舍友头像|云山天荀||档案}}
云山天荀-头像.png
云山天荀
{{舍友头像|塔妮拉|小|档案}}
塔妮拉-头像.png
塔妮拉
{{舍友头像|云桃||简}} 云桃 云桃 
{{舍友头像|无问|显示的名字|简}} 无问 显示的名字 
{{舍友头像|未知角色}}
文件:未知角色-头像.png
未知角色

模板:物资图标

说明 代码 示例
仅指定物资名称时
(注:当物资页面不存在时，稀有度将显示为白色) 		{{物资图标|格|2|小}}
物资图标底图-R.png
格
2
格
{{物资图标|格||小}}
物资图标底图-R.png
格
格
{{物资图标|格|20000}}
物资图标底图-R.png
格
20000
格
{{物资图标|格|}}
物资图标底图-R.png
格
格
{{物资图标|未知物资}}
物资图标底图-N.png
未知物资
未知物资

模板:物资图标/简

说明 代码 示例
仅指定物资名称时
(注:当物资页面不存在时，稀有度将显示为红色) 		{{物资图标/简|固醇块||大}}
固醇块-图标.png
{{物资图标/简|固醇块|2|大}}
固醇块-图标.png
2
{{物资图标/简|固醇片||中}}
固醇片-图标.png
{{物资图标/简|固醇片|20|中}}
固醇片-图标.png
20
{{物资图标/简|固醇粒||小}} 固醇粒 固醇粒 
{{物资图标/简|固醇粒|200|小}} 固醇粒 固醇粒 × 200 
{{物资图标/简|固醇粒}} 固醇粒 固醇粒 
{{物资图标/简|固醇粒|200}} 固醇粒 固醇粒 × 200 

WIKI编辑参考

站外扩展

B站视频

{{B站视频|av号}}

使用详情请前往模板:B站视频查看

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

选项卡面板

碧蓝航线wiki、海事局的大佬们
凉宫春日？总被乐乐教育
身兼数职，数据？攻略？技术？
据说和群里某位有说不清道不明的关系

原始代码 

<div class="panel panel-danger">
<ul class="panel-heading nav nav-tabs" role="tablist" style="margin-top:-1px; margin-left:-1px">
  <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">碧蓝航线wiki、海事局的大佬们</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>

选项卡面板（模块）

参考：模块:选项卡面板

  • 海域突进
  • 斩首行动

【商船护送】的相关内容

【海域突进】的相关内容

【斩首行动】的相关内容 

{{#invoke: 选项卡面板| 开始
| 样式=primary
| 标签样式=font-weight:bolder;
| 标签1=商船护送
| 标签2=海域突进
| 标签3=斩首行动
| 选中=1
| ID1=Shangchuan
| ID2=Haiyu
| ID3=Zhanshou
}}
{{#invoke:选项卡面板| 开始内容|1| ID=Shangchuan|选中=1}}
【商船护送】的相关内容
{{#invoke:选项卡面板| 开始内容|2| ID=Haiyu}}
【海域突进】的相关内容
{{#invoke:选项卡面板| 开始内容|3| ID=Zhanshou}}
【斩首行动】的相关内容
{{#invoke:选项卡面板|结束}}

折叠面板

参考：模板:折叠面板

不点一下下面吗展开/折叠

少年白色的明天等着你

爱兔兔展开/折叠

喵~

尼斯湖水怪展开/折叠

他把秘密告诉给爱兔兔 

{{折叠面板|开始}}
{{折叠面板|标题=不点一下下面吗|选项=1|主框=1|样式=primary|展开=是}}
少年白色的明天等着你
{{折叠面板|内容结束}}
{{折叠面板|标题=爱兔兔|选项=2|主框=1|样式=success}}
喵~
{{折叠面板|内容结束}}
{{折叠面板|标题=尼斯湖水怪|选项=3|主框=1|样式=info}}
他把秘密告诉给爱兔兔
{{折叠面板|内容结束}}
{{折叠面板|结束}}
取自“https://wiki.biligame.com/kelaiyinshe/index.php?title=环行旅舍WIKI编辑教程&oldid=3743”