本WIKI由夜莺夜啼于2020年05月27日申请开通,编辑权限开放。
如遇Chrome浏览器登陆后无法编辑点这里
BWIKI反馈留言板 BWIKI收藏到桌面的方法说明
近期WIKI审核严格,如有遇上修改需要审核或编辑不了问题,请联系管理员,最强蜗牛WIKI交流群:1145050680
全站通知:

WIKI编辑教程

阅读

    

2021-02-12更新

    

最新编辑:張叁豊

阅读:

  

更新日期:2021-02-12

  

最新编辑:張叁豊

来自最强蜗牛WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
页面贡献者 :
張叁豊
测试中,待完善


可折叠表格

表格折叠使用方法

说明:使内容折叠。

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

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


使用/编辑模板

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


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


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


  • 效果如下


WIKI编辑参考


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>