帮助:模板/Bootstrap

模板操作： [编辑] [查看] [历史] [所有]
文档操作： [编辑] [刷新] [历史] [所有]
当前处于： [模板说明文档页面]

说明文档

模板说明

该模板用于创建Bootstrap框架的栅格系统html标签

使用方法

{{Bootstrap|开始或结束或栅格类名|结束或栅格类名|面包屑参数|title=xxx|title2=xxx|style1=xxx|style2=xxx}}

参数说明

(模板参数:1)开始或结束或栅格类名：
- 开始(row)：
  - 创建一个<div class="row">未闭合标签；
  - 可携带参数title：<div class="row" data-title="参数title">。
- 结束(end)：
  - 创建一个</div>对上级进行闭合标签;
  - 可携带参数title：闭合标签写没有意义,仅在源码页面书写时提示区域上下文</div data-title="参数title">。
- 栅格类名(xs-x sm-x md-x lg-x)：
  - 栅格系统最大列数(column)为12,即col-xx-12,一个row内column共用12;
  - 创建一个带Bootstrap栅格系统的标签：<div class="col-填写的值">;
  - 可携带参数title：<div class="col-填写的值" data-title="参数title">;
  - 具体的栅格类名请查阅Bootstrap的文档：Bootstrap中文文档-栅格参数。

(模板参数:2)结束或栅格类名：
- 结束(end)：
  - 效果同参数1一样
- 栅格类名(xs-x sm-x md-x lg-x)：
  - 效果同参数1一样

(模板参数:3)面包屑参数：
- 上级页面名称
  - 无需要可不填
  - 调用模板面包屑传入该参数生成返回上级页面的导航栏;
  - 详情请查阅文档：模板:面包屑。

(模板参数:title)title=xxx：
- 任意合法字符串
  - 无需要可不填;
  - 一般在源码页面描述上下文区域范围。

(模板参数:title2)title2=xxx：
- - 同上

(模板参数:style1)style1=xxx：
- 更改参数1创建标签的样式
  - 无需要可不填;
  - 任意css样式,多个以;隔开

(模板参数:style2)style2=xxx：
- 更改参数2创建标签的样式
  - 效果同上

使用示例

示例1

创建一个row 内容为 abc 并闭合标签(看起来很怪，因为默认带有margin值)

{{Bootstrap|row}} 
abc 
{{Bootstrap|end}}

abc

示例2

创建一个row 内容为 abc 及修改margin、pading、font-color、background等闭合标签

{{Bootstrap|row|style1=margin:0;padding:5px;background:#afe1ff;}} 
def 
{{Bootstrap|end}}

def

示例3

创建一个row内含有一个bootstrap栅格类为 col-md-6 的盒子并闭合两个标签

{{Bootstrap|row|md-6|style1=margin:0;|style2=border:1px solid #000;}} 
内盒子
{{Bootstrap|end|end}}

col-md-6

综合示例

创建一个和首页布局差不多的盒子; row内包含三个带栅格标签的盒子，分别为col-sm-3、col-sm-6、col-sm-3(达到最大colmun值)

{{Bootstrap|row|style1=margin:0;padding:5px;border:1px solid #6f00ff;|title=行开始}} 
{{Bootstrap|sm-3|style1=border: 1px solid #ff8a00;|title=左侧盒子开始}}
左侧盒子
{{Bootstrap|end|title=左侧盒子结束}}
{{Bootstrap|sm-6|style1=border: 1px solid #ff8a00;|title=中间盒子开始}}
中间盒子
{{Bootstrap|end|title=中间盒子结束}}
{{Bootstrap|sm-3|style1=border: 1px solid #ff8a00;|title=右侧盒子开始}}
右侧盒子
{{Bootstrap|end|title=右侧盒子结束}}
{{Bootstrap|end|title=行结束}}

左侧盒子

中间盒子

右侧盒子

创建一个简洁版没有样式的row盒子内含 col-md-7 并追加一个div

{{Bootstrap|row|md-7}}
<div style="background:skyblue;">md-7盒子</div>
{{Bootstrap|end|end}}

md-7盒子

创建一个仅有栅格 col-md-6的盒子(不推荐单个栅格使用，必须加上row(container wiki自带不用创建)，因为栅格col-x-x的盒子是浮动(float)元素)

{{Bootstrap|md-6}}
<div style="background:#ffc860;">md-6盒子</div>
{{Bootstrap|end}}

md-6盒子

其他...内容填充

{{Bootstrap|row|title=行开始}}
{{Bootstrap|md-7|title=左侧开始}}
{| class="wikitable custom-table" style="width:100%;"
! 视频
|-
| {{B站视频|BV1Yb411q7wa}}
|}
{{Bootstrap|end|title=左侧结束}}
{{Bootstrap|md-5|title=右侧开始}}
{| class="wikitable custom-table" style="width:100%;"
! 图片
|-
| [[File:式神立夏白童子立绘.png|class=img-kk]]
|}
{{Bootstrap|end|title=右侧结束}}
{{Bootstrap|end|title=行结束}}

视频

图片