本主题CSS样式参考

2014年10月9日dbonly

CSS样式参考

通过对应的CSS样式调用,我们可以把自己的文章变得更加丰富多彩。
更多内容参考http://v3.bootcss.com/components/

样式预览:

代码调用:

<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="page-header">线上面的标题</div>
b 这是样式
i 这是样式
b-quote

这是样式

del 这是样式
ins 这是样式
code 这是样式
li

  • 这是样式

 

样式预览:

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

代码调用:

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

 

样式预览:

 code code
code code

代码调用:

<pre> code code </pre>

样式预览:

这是引用文段样式

代码调用:

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

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

样式预览:

样式内容1

代码调用:

样式1

<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">
样式1 可以点击
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
样式内容1
</div>
</div>
</div>

样式2

<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">
样式2 可以点击
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
内容2
</div>
</div>
</div>

样式3

<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">
样式3 可以点击
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
内容3
</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>

样式预览:

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

代码调用:

<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
面板标题
</h3>
</div>
<div class="panel-body">
面板内容
</div>
</div>
<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>

代码调用:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Comments (3)

留言

电子邮件地址不会被公开。 必填项已用*标注

上一篇 下一篇