模板:Infopanel

^编 ^刷 ^历 ^移 ^删

首页 > 模板 > start

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

×

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

说明文档

零件内容

本模板（及其子模板）将用于创建一个整体全宽、内容可根据屏幕宽度进行重排的横向infobox。

本模板依赖Bootstrap的栅格系统等CSS样式。

请使用其他模板来封装该模板，不建议在文章中直接使用本模板。

文档格式说明

焰神

【品质】

【收藏价值】

×4

【鱼灵加成】

攻击

+20%

技能伤害

+50%

精准

+40%

【获取方式】

「高级捕获」概率获得
「神秘商店」消耗珍珠×60兑换

实例：鱼灵/焰神

class

下文中以.开头的代码属于class属性，带有class的参数名也只支持class格式的值。在实际使用时无需书写.符号。当同一个参数中需要用到多个class参数时，中间需要以空格隔开，例如{{infopanel/item|class=col-md-4 col-sm-6}}。

style

下文中含有style的参数仅支持CSS样式格式的值。css样式的格式为属性名:属性值;属性名:属性值;。我们建议style属性总是以英文半角封号;结束。例如{{infopanel/item|style=padding:15px auto;font-weight:bold;}}。

本文档不提供具体的CSS样式教学。

栅格和屏幕宽度

在默认的bootstrap样式中，每一个.row元素将被平分为12个等宽的栏位。当同一个.row中的元素列宽大于12时，最后一个元素将被挤到下一行。

下文将使用<列宽>来代表1-12中的整数宽度。

bootstrap将屏幕分为四种宽度，其断点和代号分别为：

xs0~767px，超小屏幕，如手机；
sm768~991px，小屏幕，如平板电脑；
md992~1200px，中等屏幕，如普通电脑；
lg1200px+，大屏幕，如大型电脑显示器。

下文将使用<屏宽>来代表以上四种宽度代号。

组件和参数

容器

使用{{Infopanel/start}}和{{Infopanel/end}}声明infopanel的起始和结束。这会生成一组.row的div元素。
{{Infopanel/end}}不支持任何参数，仅作为封闭使用。

参数	类型	默认值	说明
class	class	无	填写需要为该元素增加的class。
style	style	无	填写需要为该元素增加的style。

请务必使用{{Infopanel/end}}封闭该标签。

元素

使用{{infopanel/item}}定义栅格中的元素。这会生成一组.col-<屏宽>-<列宽>的div元素。
当无名参数1为空时，该元素会整体不显示。
使用lg、md、sm、xs定义该元素在不同屏幕宽度下所占的栅格数。
使用class参数来为item单独定义其他的类。例如你可以使用.hidden-<屏宽>使该item在指定宽度下不显示，或使用.visible-<屏宽>-<列宽>来使该item仅在指定屏宽下以指定列宽显示。
你可以在{{infopanel/item}}中再次使用一对{{Infopanel/start}}和{{Infopanel/end}}来嵌套下一级栅格。该栅格将被再次分为12栏。
如果内容太多，你可以使用{{infopanel/item/start}}和{{infopanel/item/end}}来包裹内容部分。该替代方案生成的内容总是会显示，而不会根据内容进行隐藏。

参数	类型	默认值	说明
class	class	无	填写需要为该元素增加的class。
style	style	无	填写需要为该元素增加的style。
xs	整数（1~12）	12	填写在xs屏幕下占用的栏宽。
sm	整数（1~12）	6	填写在sm屏幕下占用的栏宽。
md	整数（1~12）	3	填写在md屏幕下占用的栏宽。
lg	整数（1~12）	3	填写在lg屏幕下占用的栏宽。
无名参数1	wikitext	无	填写该元素的内容。}}{{infopanel/item/start}}不支持该参数。}} 内容中的第一个等号可能会被认为是参数标识，因此，请（三选一）：使用`1=参数内容`将其转化为命名参数；使用`{{=}}`模板取代内容中的等号。使用{{infopanel/item/start}}和{{infopanel/item/end}}书写元素内容。
label	wikitext	无	如果填写了label，该元素将显示为`{{{label}}} : {{{1}}}`的样式。 {{infopanel/item/start}}不支持该参数。 ×
labelclass	class	无	如果填写了label，labelclass可以为label的容器增加class。 {{infopanel/item/start}}不支持该参数。 ×
labelstyle	style	无	如果填写了label，labelstyle可以为label的容器增加style。 {{infopanel/item/start}}不支持该参数。 ×
valueclass	class	无	为内容的容器增加class。 {{infopanel/item/start}}不支持该参数。 ×
valuestyle	style	无	为内容的容器增加style。 {{infopanel/item/start}}不支持该参数。 ×

强制换行

使用{{infopanel/clearfix}}强制要求该模板之后的item换行。
该模板的class参数同样支持.hidden-<屏宽>和.visible-<屏宽>-<列宽>参数，以控制该换行符的生效情境。

参数	类型	默认值	说明
class	class	无	填写需要为该元素增加的class。
style	style	无	填写需要为该元素增加的style。

固定某栏宽度

本模板生成的栏均使用百分比定位，因此无法固定某一栏的宽度。
解决方法是使用表格进行辅助布局，此处不再赘述。

参考资料

所有模板列表