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
样式预览
基本样式
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
条纹状表格
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
带边框的表格
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
代码调用
基本样式
<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>