CSS样式参考

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

				

目 录

  1. 按钮样式CSS
  2. 背景样式CSS
  3. 图片样式CSS
  4. 引用文段样式CSS
  5. 类引用文段样式CSS
  6. 表格样式CSS
  7. 下载框样式CSS
  8. 内容隐藏样式CSS
  9. 分页样式CSS
  10. 折叠样式CSS
  11. 面板样式CSS
  12. well样式CSS
  13. 强调样式CSS
  14. 标签样式CSS
  15. 标题样式CSS
  16. 浮动样式CSS
  17. 方框样式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>


样式预览:

140x140 140x140 140x140

代码调用:

<img src="..." alt="..." class="img-rounded">

<img src="..." alt="..." class="img-circle">

<img src="..." alt="..." class="img-thumbnail">

说明:通过添加.img-responsiveclass可以给图片加上响应式的特征


样式预览:

这是引用文段样式
这是向右的引用文段样式

代码调用:

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

<blockquote class="pull-right">这是向右的引用文段样式</blockquote>

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


样式预览:

这里可以写上标题

这里可以根据自己的需要放上内容


这里可以写上标题

这里可以根据自己的需要放上内容


这里可以写上标题

这里可以根据自己的需要放上内容


这里可以写上标题

这里可以根据自己的需要放上内容


这里可以写上标题

这里可以根据自己的需要放上内容

代码调用:

<div class="bs-callout bs-callout-info">

<h4>这里可以写上标题</h4>

<p>这里可以根据自己的需要放上内容</p>

</div>

将第一行的info修改为dangerwarningdanger-deepwarning-deep即可变换颜色


样式预览:

基本样式:

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

条纹状表格

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

带边框的表格

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

代码调用:

<table class="table"><table class="table table-striped"><table class="table table-bordered">

.........

</table></table></table>

说明:可以额外为表格加上鼠标悬停,紧缩和状态

鼠标悬停:

只需在class上加上.table-hover即可让表格的每一行响应鼠标悬停状态。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

紧缩表格:

只需在class上加上.table-condensed即可让表格更加紧凑,单元格中的内部(padding)均会减半。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

状态提示:

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
<!-- 在行上 -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>

<!-- 在列上 (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
</tr>

样式预览:

这里是文件名

写上你的上传时间

写上你的文件来源

格式:XX.XMB / XXP(图片) / 文件格式(码率) / 压缩格式(可选) / PW:XXXX

代码调用:

[dlbox title="文件名" time="时间" from="来源" info="文件信息" link1="百度网盘|pan.baidu.com" link2="aaa|aaa"][/dlbox]

说明:

① 现在已经支持13款网盘的智能匹配,只需修改link里的网盘名和链接地址即可自动匹配,可连续添加多个网盘,只需增加link3link4即可

② 新增智能识别日期,想手动修改日期的请修改time="时间"里的时间,觉得填写时间麻烦的可以直接删掉time="时间",将会使用发布时间作为你的上传时间

现存bug:文件名不支持]符号,请使用&#0093;代替


样式预览:

本文隐藏内容 登陆 后才可以浏览

代码调用:

<!--loginview start-->隐藏内容<!--loginview end-->

说明:记得将和谐内容隐藏起来,这是个好习惯哦


样式预览:

代码调用:

<!--nextpage-->

说明:在你想要分段的位置插入这个代码,可连续使用


样式预览:

这里插入你的内容,可以插入html代码
这里插入你的内容,可以插入html代码
这里插入你的内容,可以插入html代码

代码调用:

[collapse title="标题"]这里是内容[/collapse]

说明:这个代码同样可以帮助你把内容在一定程度上隐藏起来


样式预览:

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

代码调用:

<div class="panel panel-default">

<div class="panel-heading">

<h3 class="panel-title">面板标题</h3>

</div>

<div class="panel-body">

面板内容

</div>

</div>

更多样式请修改第一行代码为:(加上前一个与上面顺序对应)

<div class="panel panel-note">

<div class="panel panel-primary">

<div class="panel panel-success">

<div class="panel panel-info">

<div class="panel panel-warning">

<div class="panel panel-danger">

说明:该样式有多种配色可以选择


样式预览:

这里是一个well

代码调用:

<div class="well">这里是一个well</div>

说明:该样式可附加well-lgwell-sm类,分别是变大和缩小


样式预览:

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>

说明:这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。


样式预览:

Default Primary Success Info Warning Danger

代码调用:

<span class="label label-default">Default</span>

<span class="label label-primary">Default</span>

<span class="label label-success">Default</span>

<span class="label label-info">Default</span>

<span class="label label-warning">Default</span>

<span class="label label-danger">Default</span>

说明:用上面的任何一个class即可改变标签的外观。


样式预览:

这里是标题

这里是内容。

这里是标题

这里是内容。

这里是标题

这里是内容。

这里是标题

这里是内容。

这里是标题

这里是内容。

这里是标题

这里是内容。

代码调用:

<h2 class="detail-body-title-default">这里是标题</h2>

<h2 class="detail-body-title-success">这里是标题</h2>

<h2 class="detail-body-title-danger">这里是标题</h2>

<h2 class="detail-body-title-border-default">这里是标题</h2>

<h2 class="detail-body-title-border-success">这里是标题</h2>

<h2 class="detail-body-title-border-warning">这里是标题</h2>

说明:有时候我们文章内可能需要小标题,这能让文章更有层次感


样式预览:

红、绿、蓝三种波长的光是自然界中所有颜色的基础,光谱中的所有颜色都是由这三种光的不同强度构成。

把三种基色交互重叠,就产生了次混合色:青(Cyan)、洋红(Magenta)、黄(Yellow)。

基色和次混合色是互补色。

也许大家会奇怪,三种颜色加起来应该是更暗的颜色才对,怎么会是白色呢?

这里要提醒大家,我们所加的是“光线”!红、绿、蓝三种光线加起来,自然是最亮的白光,即白色区域的是因为光全被反射出来,类推,如果光全部被吸收,那么我们看到的就是黑色。

这种颜色由于是光线相加,所以称为“加色法三原色(Additive Primaries)”。

代码调用:

class="pull-left"

class="pull-right"

说明:有时候我们需要将图片展示在文字的左边或者是右边,但我们又不想让图片单独占一行,通过设置浮动你可以快速将图片浮动到一边,而多行文字不会跨越图片


样式预览:

放学后的教室,是个具有诱惑力的空间。

这里会发生像“我喜欢你……吻我。”之类的告白,也可以偷偷将运动社团女生浸满汗水的运动裤放进包包,更能够做到这样这样和那样那样等等各种事。不过再怎么说,这些都只是我的期望罢了。

然而现在在我的视线前方,有一名穿着奇特的女孩子。

她的服装清一色是黑的,某些部分会让人联想到反派角色,但十分暴露,看起来很柔软的肚子附近一览无遗,而且不知为何还披着黑斗篷。

代码调用:

class="floatbox"

说明:放入文字可以突出内容