CSS样式参考

通过对应的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>

背景样式CSS

样式预览:

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

代码调用:

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

引用文段样式CSS

样式预览:

这是引用文段样式

这是向右的引用文段样式

代码调用:

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

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

表格样式CSS

样式预览:

基本样式

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

分页样式CSS

样式预览:

代码调用:

<!--nextpage-->

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

折叠样式CSS

样式预览:

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

代码调用:

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

折叠框一</a></h4></div>

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

这里插入你的内容,可以插入html代码,默认显示第一个框内的内容,如想取消展示,请删除上面的in</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="#collapseOne">

折叠框二</a></h4></div>

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

这里插入你的内容,可以插入html代码</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="#collapseOne">

折叠框三</a></h4></div>

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

这里插入你的内容,可以插入html代码</div></div>

</div>

</div>

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

面板样式CSS

样式预览:

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

代码调用:

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

<div class="panel panel-success">

<div class="panel panel-info">

<div class="panel panel-warning">

<div class="panel panel-danger">

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

强调class

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

样式预览:

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>

图片CSS

<img>元素增加不同的class,就可以轻松的改变其样式。

跨浏览器兼容性
你要知道,Internet Explorer 8是不支持圆角矩形的。

样式预览:

... ... ...

代码调用:

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

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

 

标签样式CSS

样式预览:

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即可改变标签的外观。

 

Contextual backgrounds

样式预览:

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="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

评论已关闭