台词试听功能(武将/皮肤)逐步上线中,在对应页面的台词板块即可试听
目前音频功能仍有缺失或错误的情况,可点击反馈提醒我们
有兴趣参与编辑的请点击下方企鹅群加入我们哦~
欢迎收藏起来防止迷路,按"Ctrl+D"收藏本站哦~(´▽`ʃ♡ƪ)!
✬
基础编辑
阅读
2023-09-22更新
最新编辑:Nicholas_Latifi6
阅读:
更新日期:2023-09-22
最新编辑:Nicholas_Latifi6
如果是第一次来,按"Ctrl+D"可以收藏随时查看更新~觉得WIKI好玩的话,请推荐给朋友哦~(◕ω<)☆按右上角“编辑”可修改页面内容,按右上角“刷新”可以清缓存刷新页面。
在WIKI上发布攻略/文章
- 首先在首页找到,攻略创建入口
- 然后,进入快捷创建攻略入口,输入想要创建的攻略标题
- 进入写攻略的页面,正常内容内容即可
修改页面
- 目前,三国杀wiki绝大部分界面对所有登录用户开放编辑权限,如有大量或深度编辑需求,可进首页群联系相关人员。
- 将鼠标移动到页面右上角的编辑按钮,或点击wiki功能-编辑即可编辑。
可以通过按下CTRL+F,使用页面搜索功能定位到你要修改的位置,方便修改。
补充缺失的图片
- 点击红色缺失链接
- 选择你需要传输的图片,然后把图名片命名成,页面的图片名,例如:狻猊.png。并且注意图片格式是否为和目标文件相符(如PNG格式),点击上传文件即可。
上传新图
- 在你编辑、创建的页面中,把你所需的图片拖拽到文字提示处,选择插入为图片,就可以看到WIKI自动调用的图片代码了。
补充缺失的页面
- 如果不清楚填写的格式,可以参考现有角色的编辑界面。或点击下方本预览使用的模板:-模板:XX查看。
删除(误改)了一个东西怎么办?
- 如果还未保存,直接关闭页面不保存即可。
- 如果已经保存,请点击页面右上角的历或者wiki功能-查看历史,然后撤销本次编辑皆可。
基础编辑
章节
你输入的内容 | 你看到的显示 |
---|---|
== 二级标题 == 一级标题是页面名称,所以请从二级标题开始用起。 有四个以上标题的页面会自动生成一个目录。 这个自动生成的目录可以通过书写<code>__NOTOC__</code>来隐藏。 === 三级标题 === 输入更多的“等于号”(=)可以创建更多下一级标题。 ==== 四级标题 ==== 请不要跳跃标题等级,例如二级标题之下直接就是四级标题,而没有三级标题。 ===== 五級标题 ===== |
行与段落
你输入的内容 | 你看到的显示 |
---|---|
另起一行并不会导致换行, 而只是会增加一个空格。 空一个空行虽然可以换行, 但其实是开始了一个新的段落。 如果你对空一个空行产生的行间距不满, 你可以空两个空行<del>,或者空更多行</del>。 |
另起一行并不会导致换行, 而只是会增加一个空格。 空一个空行虽然可以换行, 但其实是开始了一个新的段落。
|
另一种换行方式是使用<code><br/></code>标记来换行。<br> 这样换行后的内容仍在'''同一段落'''内。 |
另一种换行方式是使用 |
* 星号(*)其实是符号列表。 ** 但不知道为什么这个WIKI的列表, *** 并不显示前面的列表前面的圆点。 **** 这很糟糕。 但更糟糕的是一些人通过符号列表来对文章换行。 * '''请务必不要这么做!''' |
但更糟糕的是一些人通过符号列表来对文章换行。
|
# 井号(#)是数字列表。 ## <del>曾经</del>每一行前面都有一个数字序号。 ##* 甚至可以将数字列表与符号列表混用。 ##*# <del>然并卵。</del> 同样,'''请勿用数字列表来换行和缩进!''' |
同样,请勿用数字列表来换行和缩进! |
: 冒号(:)最大的贡献是 :: 缩进! ::: 可以缩进到让你满意。 '''请用冒号(:)来缩进''',而不是用星号(*)或井号(#)! |
请用冒号(:)来缩进,而不是用星号(*)或井号(#)! |
如果一些行的开始是空格, 那么这些行将被'''预格式化''', 不会被换行。 通常是用来显示一段代码之类的东西。 也可以使用<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/ys/article/4039822 [[点击此处]]],这时,可以使用HTML语言代替。 如<a url=https://bbs.mihoyo.com/ys/article/4039822>[[点击此处]]</a> |
有时,wiki对于一些多重复合符号的识别可能会出问题,比如[[点击此处]],这时,可以使用HTML语言代替。 如[[点击此处]] |
引用
说明:文章引用内容,对应内容外链。
用途:适用于页面部分内容引用外部内容(如一段话,引用了一篇文章),使你的文章有参考资料可查,内容更具可信度。
写法:<ref>[链接 链接页面名]</ref>
需要在页面最底部添加标题栏==外链与注释==。
插入图片
当您想在编辑过程中插入您想要的图片时,首先需要上传该图片。上传图片的按钮位于编辑工具栏的顶部。
您需要注意以下几点:
- 您需要为上传的图片命名,准确的命名将使图片便于分类和索引,请避免使用纯数字,纯符号作为图片命名,请不要把QQ和微信截图随意上传。
- 上传的图片格式一般为jpg、png、gif,图片大小应在2M及以下为宜。
- 您上传的图片应具有意义,不允许涉及血腥、暴力等敏感因素,违规的图片将会被管理员删除。
- 上传的图片可以在特殊:文件列表中找到,在该页面的搜索栏输入文件名提交即可。有的时候明明上传了文件,搜索栏却无法搜索到,您可以重进页面然后再次尝试搜索。
- 自适应大小:默认使用普通包含自适应。要注意的是当容器大小大于图片指定尺寸时,图片并不会进行放大来适应,这时候需要手动设置大小让图片大于容器即可。
说明 | 源码 | 显示 |
---|---|---|
图片大小为原始尺寸。 容器高度200px。 |
[[文件:郭照-头像.png]] |
|
图片大小为50px。 | [[文件:郭照-头像.png|50px]] |
|
图片大小为50px,居中显示。 | [[文件:郭照-头像.png|50px|center|link=郭照]] [[文件:郭照-头像.png|50px|居中|link=郭照]] |
|
图片大小为50px,带边框,靠右显示。 | [[文件:郭照-头像.png|frame|50px|right]] [[文件:郭照-头像.png|边框|50px|右]] |
|
图片大小变为为缩略图,靠右显示。 | [[文件:郭照-头像.png|thumb|right|郭照]] [[文件:郭照-头像.png|缩略图|右|郭照]] |
|
【自适应-完全填充】 容器高度100px。
|
[[文件:郭照-头像.png|郭照|class=img-cover]] |
郭照 |
详细可以参考维基百科-帮助:图像 和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-帮助:表格
无边框表格
三国杀wiki全局样式内置了一个无背景无边框的表格
{| class="no-border-wikitable" |- ! 标题文字1 | 标题文字2 |- ! 示例1 | 示例2 |}
标题文字1 | 内容1 |
---|---|
标题文字2 | 内容2 |
可折叠表格
{|class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- !'''表格折叠使用方法''' |- | '''说明:'''使内容折叠。 '''用途:'''一般用于页面过长,将部分可选择性观看的内容折叠。 '''写法:'''在表格class=后加 mw-collapsible(此时为默认展开,可折叠)。 <br> 在表格class=后再追加 mw-collapsed(此时为默认折叠,可展开)。 <br> 表格第一行为默认展示的内容,第二行开始到表格结尾可以折叠。 |}
表格折叠使用方法 |
---|
说明:使内容折叠。 用途:一般用于页面过长,将部分可选择性观看的内容折叠。 写法:在表格class=后加 mw-collapsible(此时为默认展开,可折叠)。
|
单元格跨行/跨列
跨行:在单元格内容前加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 || 示例 |- | 示例 || 示例 |}
模板
- 打开文章源代码页面,下方会显示该页面使用的模板(如果该页面有使用模板)
- 如下所述,是一个设计好模板,将需要填充的数据,以{{{XXX}}}的字样代替
- 在其它页面使用该模板时,用{{模板名|XXX|XXX|XXX}}的方式填写数据。
WIKI编辑参考
模板:面包屑
- 用途:鼓励补充内容。
- 使用:
代码 | 效果 |
---|---|
{{面包屑|提示=施工中}} |
|
{{面包屑|提示=待补充}} |
模板:左侧目录
- 用途:用于攻略等文字量较大的页面,生成一个固定在左侧的目录以方便用户阅读和跳转,使用后会替换默认目录。
- 注意:只推荐在您自行编写的攻略类页面使用,请务必不要在原本的角色/武器等wiki页面使用。
- 使用:
代码 | 实际效果 |
---|---|
{{左侧目录|开始}} 页面内容 {{左侧目录|结束}} |
见本页面 |
模板:提示
- 用途:添加警告、备忘提示等内容。
- 使用:
{{提示|颜色|内容|第一句话|宽度=提示板宽度}} 颜色:常用的有绿色、蓝色、黄色、红色,默认为红色。(其中,成功=绿色,消息=蓝色=提示,注意=黄色=警告,错误=红色=危险。) 内容:填写想要在信息框内展示的文本内容。 第一句话:自带加粗换行变色(同左侧线条颜色)。 提示板宽度:不填则空,默认为800px。
代码 | 效果 |
---|---|
{{提示|红色|不要忘记打周末公会战!|宽度=100%}} |
不要忘记打周末公会战! |
模板:注释
- 用途:添加注释,其实就是bootstrap的alert。 // todo:添加颜色
- 使用:
{{注释|注释内容}}
模板:折叠
- 用途:折叠活动剧情/CG合集等内容量大且不适合剧透的内容,防止剧透。
- 使用:
简易版:
需要在使用界面加上{{JS|fold}}(JS需要大写)
{{折叠 |标题(必填/默认“我是标题”) |内容(必填/默认“我是内容”) |颜色(可选/可选颜色:“红、黄、蓝、绿、 RGB颜色[eg:#4a80c0]”/默认:蓝) |边框(可选/默认10px,控制上下间距) |折叠(可选/是、否/默认否) }}
代码 | 效果 | ||
---|---|---|---|
{{折叠 |标题=我是折叠模板 |内容=我是折叠模板内容 }} |
|
复杂版(当折叠内容嵌套有表格等时):
{{折叠面板|开始|主框=1}} {{折叠面板|标题=测试标题1|选项=1|主框=1|样式=info|展开=是}} 测试内容 {{折叠面板|内容结束}} {{折叠面板|结束}} 主框: 数字或者英文,可选,如果存在多个不同的折叠组时必选.注意!标题与开始的主框参数必须一致. 选项:数字或者英文,可选,一个组里面大于一个选项是必选.且选项值不能相同 样式:固定参数,可选,可选范围:primary,success,info,warning,danger. 默认:primary 展开:值任意,可选.是否直接展开 badge:任意值,可选.标题样式与右侧的折叠样式一致.
代码 | 效果 | ||||||||
---|---|---|---|---|---|---|---|---|---|
{{折叠面板|标题=防剧透|折叠=是|样式=info}} {| class="wikitable" |- | 绸缎包裹的礼物盒,是女孩子喜欢的款式。 || 佳节将至,代凝光大人遥祝您身体健康,诸事顺心! |- | 沉木制作的礼盒,上面的图案有些熟悉。 || 阁下近来如何?若是遇到了新奇的书籍,记得帮在下留意祝诸事顺遂,佳节快乐,有缘相会。 |- | 磨损严重的硬皮纸袋,有海风的气味。 || 趁着节日吃好喝好啊,有机会一起出海! |- | 细锦包着的包裹,里面放着礼物和信纸。 || 多亏了您,总算保住了我这块招牌。 下次您来请您听新书~祝您平安喜乐! |} {{折叠面板|内容结束}} |
防剧透展开/折叠
|
模板:颜色字
- 用途:更方便地改变文字颜色,比如角色技能介绍处不同元素会使用对应的不同颜色。
- 使用:
情况 | 代码 | 效果 |
---|---|---|
通用: | {{颜色字|内容|red}} {{颜色字|内容|#67d99e}} {{颜色字|内容|red|#67d99e}} |
内容 内容 内容 |
模板:颜色链接
- 用途:方便创建不是默认蓝色的链接文字,增加美观度。
- 使用:
情况 | 代码 | 效果 |
---|---|---|
颜色: | {{颜色链接|orchid|模板:武将目录|武将目录}} |
模板:标签
- 用途:方便地创作带有圆角色块背景的文字,增加美观度等。
- 使用:
情况 | 代码 | 效果 |
---|---|---|
颜色: | 红{{标签|文字|red}}示例。 |
红文字示例。 |
模板:黑幕
- 参考:模板:黑幕
- 用途:用于玩梗/剧透时防止用户直接看到内容使用。移动光标至文字上即可解除遮罩。
- 注意:解开黑幕的操作在移动端上体验不佳,为照顾移动端体验,请避免过多使用。
- 使用:
情况 | 代码 | 效果 |
---|---|---|
黑幕 | {{黑幕|文字}} |
文字 |
模板:活动计时
- 用途:提示活动时间、道具过期时间等
- 使用:
情况 | 代码 | 效果 |
---|---|---|
活动
{{活动计时|填写活动名字,活动等|开始时间(精准到秒)|结束时间(精准到秒)}} |
{{活动计时|s20逐鹿赛季|2021/02/26 04:00|2021/03/05 03:59}} |
|
模板:图片放大
- 用途:放大图片。玩家鼠标移到图片上会显示一个放大镜,点击图片可以查看大图。
- 使用:
用途 | 语法 | 示例代码 | 示例结果 |
---|---|---|---|
要放大的图片 | {{图片放大 |图片名称(png格式) |默认大小(可选/默认200px) |放大后大小(可选/默认400px) |默认文字=默认文字(选填) |放大文字=放大文字(选填) }} |
{{图片放大 |神周瑜(将灵) |200px |800px |默认文字=我是默认文字 |放大文字=我是放大文字 }} |
文件:神周瑜(将灵).png
我是默认文字 文件:神周瑜(将灵).png 我是放大文字 |
模板:文案引号
- 用途:输入“「」”。输入法不方便使用“「」”的时候可以用用。
- 使用:
代码 | 效果 |
---|---|
{{文案引号|内容}} |
「内容」 |
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>
显示为:
响应式设计
超小屏幕手机 (<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> |
额外信息
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 title
Panel title
Panel title
Panel title
<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>