CSS 调用

<link rel="stylesheet" id="su-content-shortcodes-css" href="http://blog.rpgsky.net/wp-content/plugins/shortcodes-ultimate/assets/css/content-shortcodes.css?ver=4.9.3" type="text/css" media="all">
<link rel="stylesheet" id="font-awesome-css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css?ver=4.1.0" type="text/css" media="all">

标题

代码调用

h3

<h3>标题</h3>

h1

<h1>标题</h1>

h2

<h2>标题</h2>

h4

<h4>标题</h4>

标签

演示

XXXXX

代码调用

默认

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

按钮

下载

链接跳转

代码调用

下载

简码

 资源下载

html 代码

<a href="../wp-content/uploads/2014/04/rpgsky.net_2014-04-23_05-45-52.zip" class="su-button su-button-style-default" style="color:#FFFFFF;background-color:#afafaf;border-color:#8c8c8c;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px" target="_blank"><span style="color:#FFFFFF;padding:6px 16px;font-size:13px;line-height:20px;border-color:#c7c7c7;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-shadow:none;-moz-text-shadow:none;-webkit-text-shadow:none"><i class="fa fa-download" style="font-size:13px;color:#FFFFFF"></i> 资源下载</span></a>

链接跳转

简码

 链接跳转

html 代码

<a href="../archives/3026" class="su-button su-button-style-default" style="color:#FFFFFF;background-color:#2D89EF;border-color:#246ebf;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px" target="_blank"><span style="color:#FFFFFF;padding:6px 16px;font-size:13px;line-height:20px;border-color:#6cacf4;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-shadow:none;-moz-text-shadow:none;-webkit-text-shadow:none"><i class="fa fa-mail-forward" style="font-size:13px;color:#FFFFFF"></i> 链接跳转</span></a>

框符

简介

代码调用

简介

简介
框内容

表格样式 CSS

样式预览

基本样式

条纹状表格

带边框的表格

代码调用

基本样式

<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

条纹状表格

<div class="alert">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>

带边框的表格

<div class="alert">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>

喜欢 (2)赏

[不公开]

分享 (0)