WIKI编辑教程

BOOTSTARP

栅格系统

	超小屏幕 手机 (<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>

<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

文字修饰

文字颜色

大家都是欧洲人...

大家都是欧洲人...

大家都是欧洲人...

大家都是欧洲人...

大家都是欧洲人...

大家都是欧洲人...

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

响应式工具

	超小屏幕手机 (<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则为内联

预定义样式

按钮

Default Primary Success Info Warning
<span class="btn btn-default">Default</span>
<span class="btn btn-primary">Primary</span>
<span class="btn btn-success">Success</span>
<span class="btn btn-info">Info</span>
<span class="btn btn-warning">Warning</span>

Large spanLarge span
<span class="btn btn-primary btn-lg">Large span</span>
<span class="btn btn-default btn-lg">Large span</span>

Default spanDefault span
<span class="btn btn-primary">Default span</span>
<span class="btn btn-default">Default span</span>

Small spanSmall span
<span class="btn btn-primary btn-sm">Small span</span>
<span class="btn btn-default btn-sm">Small span</span>

Extra small spanExtra small span
<span class="btn btn-primary btn-xs">Extra small span</span>
<span class="btn btn-default btn-xs">Extra small span</span>

标签

Default Primary Success Info Warning Danger
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<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>

选项卡accordion

更新信息请参考 : 折叠面板

不点一下下面吗展开/折叠

少年白色的明天等着你

爱兔兔展开/折叠

喵~

尼斯湖水怪展开/折叠

他把秘密告诉给爱兔兔

{{折叠面板|开始}}
{{折叠面板|标题=不点一下下面吗|选项=1|主框=1|样式=primary|展开=是}}
少年白色的明天等着你
{{折叠面板|内容结束}}
{{折叠面板|标题=爱兔兔|选项=2|主框=1|样式=success}}
喵~
{{折叠面板|内容结束}}
{{折叠面板|标题=尼斯湖水怪|选项=3|主框=1|样式=info}}
他把秘密告诉给爱兔兔
{{折叠面板|内容结束}}
{{折叠面板|结束}}