边狱公司Bwiki编辑教程

本页面内容正在施工！
在页面内容完成前，请勿随意修改！对本页面内容产生疑问或有意见提出时，可以在下方评论区进行留言

编者留言：本页面施工中模板为展示用，请不要删除哦~

^编 ^刷 ^历

首页 > 边狱公司Bwiki编辑教程

修改页面

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

目前，边狱公司BWIKI绝大部分界面对所有登录用户开放编辑权限，但是修改后会由管理员审核，如有大量或深度编辑需求，可进首页群联系版主。
将鼠标移动到页面右上角的编辑按钮，或点击wiki功能-编辑即可编辑。
可以通过按下CTRL+F，使用页面搜索功能定位到你要修改的位置，方便修改。

补充缺失页面

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

删除（误改）了一个东西怎么办？

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

「」『』怎么打

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

基础编辑

章节

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

== 二级标题 ==

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

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

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

=== 三级标题 ===

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

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

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


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

二级标题

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

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

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

三级标题

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

四级标题

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

五級标题

行与段落

你输入的内容	你看到的显示
另起一行并不会导致换行，而只是会增加一个空格。空一个空行虽然可以换行，但其实是开始了一个新的段落。如果你对空一个空行产生的行间距不满，你可以空两个空行<del>，或者空更多行</del>。	另起一行并不会导致换行，而只是会增加一个空格。空一个空行虽然可以换行，但其实是开始了一个新的段落。如果你对空一个空行产生的行间距不满，你可以空两个空行~~，或者空更多行~~。
另一种换行方式是使用<code><br/></code>标记来换行。<br> 这样换行后的内容仍在'''同一段落'''内。	另一种换行方式是使用`<br/>`标记来换行。这样换行后的内容仍在同一段落内。
* 星号()其实是符号列表。 * 但不知道为什么这个WIKI的列表， * 并不显示前面的列表前面的圆点。 ** 这很糟糕。但更糟糕的是一些人通过符号列表来对文章换行。 * '''请务必不要这么做！'''	星号()其实是符号列表。但不知道为什么这个WIKI的列表，并不显示前面的列表前面的圆点。这很糟糕。但更糟糕的是一些人通过符号列表来对文章换行。请务必不要这么做！*
# 井号(#)是数字列表。 ## <del>曾经</del>每一行前面都有一个数字序号。 ##* 甚至可以将数字列表与符号列表混用。 ##*# <del>然并卵。</del> 同样，'''请勿用数字列表来换行和缩进！'''	井号(#)是数字列表。曾经每一行前面都有一个数字序号。甚至可以将数字列表与符号列表混用。 ~~然并卵。~~ 同样，请勿用数字列表来换行和缩进！
: 冒号(:)最大的贡献是 :: 缩进！ ::: 可以缩进到让你满意。 '''请用冒号(:)来缩进'''，而不是用星号(*)或井号(#)！	冒号(:)最大的贡献是缩进！可以缩进到让你满意。请用冒号(:)来缩进，而不是用星号(*)或井号(#)！
如果一些行的开始是空格，那么这些行将被'''预格式化'''，不会被换行。通常是用来显示一段代码之类的东西。也可以使用<pre>...</pre>。	如果一些行的开始是空格，那么这些行将被预格式化，不会被换行。通常是用来显示一段代码之类的东西。也可以使用<pre>...</pre>。
Limbus Company ---- 边狱公司	Limbus Company 边狱公司

文字样式

你输入的内容	你看到的显示
''斜体'' '''粗体''' '''''粗斜体'''''	斜体粗体粗斜体
注：每嵌套一个<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样式

链接

你输入的内容	你看到的显示
[[鸿璐]]是一个站内链接。也可以修改链接的显示文字，比如[[鸿璐\|宝子哥]]。	鸿璐是一个站内链接。也可以修改链接的显示文字，比如宝子哥。
[[不存在]]是一个指向不存在页面的链接。	不存在是一个指向不存在页面的链接。
其他命名空间的页面的链接，比如[[特殊:上传文件]]或[[文件:Chr icon 1001 100101 01.png]]	其他命名空间的页面的链接，比如特殊:上传文件或文件:Chr icon 1001 100101 01.png
站外链接： * [https://www.mediawiki.org/wiki/Help:Formatting/zh] * [https://zh.wikipedia.org/wiki/Help:编辑页面维基百科-帮助:编辑页面]	站外链接： [1] 维基百科-帮助:编辑页面

链接颜色

链接样式	类型	颜色
蓝色链接	指向当前存在的页面	#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>

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

调用

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

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

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

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

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

插入图片

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

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

你输入的内容	你看到的显示
[[文件:鸿璐-首页入口.png]]
[[文件:鸿璐-首页入口.png\|50px]]
[[文件:鸿璐-首页入口.png\|50px\|center\|link=鸿璐]] [[文件:鸿璐-首页入口.png\|50px\|居中\|link=鸿璐]]
[[文件:鸿璐-首页入口.png\|frame\|50px\|right]] [[文件:鸿璐-首页入口.png\|边框\|50px\|右]]
[[文件:鸿璐-首页入口.png\|thumb\|right\|鸿璐]] [[文件:鸿璐-首页入口.png\|缩略图\|右\|鸿璐]]	鸿璐

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

表格编辑

基本用法

{| 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
跨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
A		C

跨行：在单元格内容前加rowspan=n|
跨列：在单元格内容前加colspan=n|
注意单元格跨行跨列后其他行的内容问题。
{| class="wikitable"
|-
! rowspan=4|跨4行的标题 !!标题 !!标题!!标题
|-
| colspan=2|跨2列的内容 || 示例
|-
| rowspan=2|跨2行的内容 || 示例 || 示例
|-
| 示例 || 示例
|}

标题	标题	标题
跨2列的内容		示例
跨2行的内容	示例	示例
跨2行的内容	示例	示例

单元格指定宽度

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

标题文字	标题文字
宽度设为200px	示例
示例	示例

模板

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

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

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

WIKI编辑参考

模板速查

边狱公司Bwiki模板一览（可读性较差，仅供速查使用，无编辑经验者建议看完以下内容）
点击下文模板标题可以查看更多使用示例哦~

模板:施工中

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

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

使用：

{{施工中|编者留言（可选）}}
| class="wikitable"
|-
! 代码 !! 实际效果
|-
| <pre>
{{施工中|本页面施工中模板为展示用，请不要删除哦~}}

|| 见本页面顶部 |}

模板:左侧目录

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

注意：只推荐在您自行编写的攻略类页面使用，请务必不要在原本的页面使用。

使用：

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

模板:提示

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

使用：

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

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

代码	效果
{{提示\|红色\|不要忘记打每日免费镜牢！\|宽度=100％}}	不要忘记打每日免费镜牢！

模板:折叠

用途：用于折叠不适剧透或占用页面空间过大的内容

使用：

{{折叠
|标题（必填/默认“我是标题”）
|内容（必填/默认“我是内容”）
|颜色（可选/可选颜色：“红、黄、蓝、绿、
RGB颜色[eg:#4a80c0]”/默认：蓝）
|边框（可选/默认10px，控制上下间距）
|折叠（可选/是、否/默认否）
}}

代码	效果
{{折叠 \|标题=我是折叠模板 \|内容=我是折叠模板内容 }}	我是折叠模板折叠我是折叠模板内容 MediaWiki:fold

模板:颜色替换

用途：更方便地改变文字颜色，比如角色技能描述时不同的技能效果会使用对应的不同颜色。
添加：点击模板:颜色替换，复制现有的内容，将颜色代码和模板名称，举例

|模板名称，如红橙黄绿青蓝紫=<font color=这里填颜色代码>{{{2|}}}</font>

使用：

情况	代码	效果
通用：	{{颜色替换\|黄\|内容}} {{颜色替换\|绿\|内容}}	内容内容

模板:背景颜色

用途：方便地创作带有圆角色块背景的文字，使描述更加明显，增加美观度。

使用：

情况

代码

效果

颜色：

红{{背景颜色|红|文字}}示例。
橙{{背景颜色|橙|文字}}示例。
黄{{背景颜色|黄|文字}}示例。
绿{{背景颜色|绿|文字}}示例。
蓝{{背景颜色|蓝|文字}}示例。
白{{背景颜色|白|文字}}示例。
黑{{背景颜色颜色|黑|文字}}示例。

红文字示例。橙文字示例。黄文字示例。绿文字示例。蓝文字示例。

白示例。

黑文字示例。

角色官方故事/活动提示重点时常用：

描述{{背景颜色|描述|文字}}示例。
描述1{{背景颜色|描述1|文字}}示例。

描述文字示例。描述1文字示例。

模板:计时

参考：模板:计时、模板:活动计时

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

使用：

情况

代码

效果

通用

{{计时
|年【默认为当前年】
|月【默认为当前月】
|日【默认为当前日】
|时【默认为0】
|分【默认为0】
|秒【默认为0】
|显示时间=文本【默认为填写的时间】
|禁用天=
|禁用时=【默认为空】
|禁用分=【默认为空】
|禁用秒=【默认为空】
|隐藏分类=【默认为空】
|编号=数字【默认为1】
}}

必须存在编号=1【如果一个页面只使用一次，则无需编号，默认为1】。
可以跳号，但是整个页面的编号必须由小到大排列。

{{计时|2020|9|28|编号=1}}

活动

{{活动计时|填写活动名字，活动等|开始时间（精准到秒）|结束时间（精准到秒）}}

{{活动计时|活动名|2021/02/26 04:00|2021/03/05 03:59}}

模板:划掉重说

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

使用：

代码	实际效果
{{划掉重说\|划掉内容\|重说内容}}	~~划掉内容~~重说内容

模板:悬浮框

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

使用：

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

模板:黑幕

参考：模板:黑幕、模板:刮刮卡

用途：用于玩梗/剧透时防止用户直接看到内容使用。

对于黑幕，移动光标至文字上即可解除遮罩。

对于刮刮卡，选中文字即可擦开，若无法使文字被选中，请检查浏览器或JS是否劫持了相关操作

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

使用：

情况	代码	效果
黑幕	{{黑幕\|文字}}	文字
刮刮卡	{{刮刮卡\|文字}}	文字

模板:文案引号

用途：输入“「」”。输入法不方便使用“「」”的时候可以用用。

使用：

代码	效果
{{文案引号\|内容}}	「内容」

已弃用模板:技能描述

用途：输入
```
“{{技能描述|具体的前置条件}}”
```
来替换技能中的前置条件的显示模式

已经弃用！！！请使用背景颜色！！！

使用：

代码	效果
{{技能描述\|使用}}<br>{{技能描述\|命中}}	[使用] [命中]

模板:buff

用途：输入
```
“{{buff|名称}}”
```
来显示弹出提示

使用：

代码	效果
{{buff\|烧伤}}	烧伤鼠标放上去试试！

所有buff在本站的标准名称和效果解释请看：状态图鉴

模板:图标

用途：快速输入罪孽属性和技能攻击类型

使用：

代码	效果
{{图标\|暴怒}}{{图标\|打击}}	暴怒打击

模板:技能硬币

用途：对单个硬币描述前置时使用

使用：

代码	效果
{{技能硬币\|1}}{{技能硬币\|2}}{{技能硬币\|3}}{{技能硬币\|4}}{{技能硬币\|5}}

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

.col-md-4

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

额外信息

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<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中较大的那个
%	百分比，以百分比为单位的长度值

边狱公司Bwiki编辑教程

修改页面

补充缺失页面

删除（误改）了一个东西怎么办？

「」『』怎么打

基础编辑

章节

二级标题

三级标题

四级标题

五級标题

行与段落

文字样式

链接

链接颜色

如何自定义链接颜色

引用

调用

插入图片

表格编辑

可视化工具【推荐】

基本用法

可折叠表格

单元格跨行/跨列

单元格指定宽度

模板

WIKI编辑参考

模板速查

已弃用模板:技能描述

Bootstrap样式

栅格系统

响应式设计

预设颜色

警告框

额外信息

关闭按钮

预设按钮

预设标签

面板

css单位

绝对单位

什么是绝对单位

绝对单位有哪些

相对单位

什么是相对单位

相对单位有哪些