CSS样式参考

通过对应的CSS样式调用,我们可以把自己的文章变得更加丰富多彩。

样式预览:

代码调用:

<button type="button" class="btn btn-default">默认</button>

<button type="button" class="btn btn-primary">主要</button>

<button type="button" class="btn btn-success">成功</button>

<button type="button" class="btn btn-info">信息</button>

<button type="button" class="btn btn-warning">警告</button>

<button type="button" class="btn btn-danger">危险</button>

<button type="button" class="btn btn-link">链接</button>

说明:这些btn类都可以放入到a标签中进行使用

<a href="#" class="btn btn-default">默认</a>


样式预览:

这是成功背景框
这是信息背景框
这是警告背景框
这是危险背景框

代码调用:

<div class="alert alert-success">这是成功背景框</div>

<div class="alert alert-info">这是信息背景框</div>

<div class="alert alert-warning">这是警告背景框</div>

<div class="alert alert-danger">这是危险背景框</div>

说明:如果想要给背景框添加关闭按钮,则要添加一个class以及一个button标签

警告框!这是一个可以关闭的警告框。

<div class="alert alert-warning alert-dismissable">

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>

警告框!这是一个可以关闭的警告框。

</div>


样式预览:

这是引用文段样式

代码调用:

<blockquote>这是引用文段样式</blockquote>

说明:可以在文章编辑器上的小按钮快速调用该样式

样式预览:

Collapsible Group Item #1 Content
Collapsible Group Item #2 Content
Collapsible Group Item #3 Content

代码调用:

<div class="panel-group" id="accordion">

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

Collapsible Group Item #1

</a>

</h4>

</div>

<div id="collapseOne" class="panel-collapse collapse in">

<div class="panel-body">

Collapsible Group Item #1 Content

</div>

</div>

</div>

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

Collapsible Group Item #2

</a>

</h4>

</div>

<div id="collapseTwo" class="panel-collapse collapse">

<div class="panel-body">

Collapsible Group Item #2 Content

</div>

</div>

</div>

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">

Collapsible Group Item #3

</a>

</h4>

</div>

<div id="collapseThree" class="panel-collapse collapse">

<div class="panel-body">

Collapsible Group Item #3 Content

</div>

</div>

</div>

</div>

样式预览:

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

代码调用:

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

样式预览:

45% Complete

代码调用:

<div class="progress progress-striped active">

<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">

<span class="sr-only">45% Complete</span>

</div>

</div>

样式预览:

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>

<div class="panel panel-success">...</div>

<div class="panel panel-info">...</div>

<div class="panel panel-warning">...</div>

<div class="panel panel-danger">...</div>