在开发后台界面的时候可以使用WordPress的一些预定义样式,需要注意的是所有使用WordPress预定义样式的元素必须被 .wrap
类包裹
<div class="wrap">
...
...
</div>
提示组件
代码语言:javascript复制<div class="notice notice-error"><p>这是错误的提示<p><pdiv>
<div class="notice notice-warning"><p>这是警告的提示<p><pdiv>
<div class="notice notice-success"><p>这是成功操作的提示<p><pdiv>
<div class="notice notice-info"><p>这是一般信息提示<p><pdiv>
<div class="notice notice-info is-dismissible"><p>可关闭提示<p><pdiv>
按钮组件
代码语言:javascript复制 <button class="button">普通按钮</button>
<button class="button button-primary">primary</button>
<button class="button button-secondary">secondary按钮</button>
<button class="button button-large">large按钮</button>
<button class="button button-small">small按钮</button>
<button class="button button-hero">hero按钮</button>
表单
代码语言:javascript复制<form action="">
<table class="form-table">
<tr valign="top">
<th><label for="xm">姓名</label></th>
<th><input id="xm" type="text"></th>
</tr>
<tr valign="top">
<th><label for="">身份</label></th>
<td>
<select name="" id="">
<option value="在校">在校</option>
<option value="毕业">毕业</option>
</select>
</td>
</tr>
<input type="checkbox">
</table>
</form>
表格
代码语言:javascript复制<table class="widefat striped">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>one</td>
</tr>
<tr>
<td>1</td>
<td>one</td>
</tr>
<tr>
<td><a>1</a></td>
<td>one</td>
</tr>
<tr>
<td>1</td>
<td>one</td>
</tr>
</tbody>
</table>
分页
代码语言:javascript复制 <div class="tablenav">
<div class="tablenav-pages">
<span class="displaying-num">第一页共34页</span>
<a class="page-numbers current">1</a>
<a class="page-numbers current">2</a>
<a class="page-numbers">3</a>
<a href="#" class="next page-number">></a>
</div>
</div>