前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WordPress后台常用样式

WordPress后台常用样式

作者头像
切图仔
发布2022-09-14 13:46:33
3540
发布2022-09-14 13:46:33
举报
文章被收录于专栏:生如夏花绚烂

在开发后台界面的时候可以使用WordPress的一些预定义样式,需要注意的是所有使用WordPress预定义样式的元素必须被 .wrap类包裹

代码语言:javascript
复制
 <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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
网站建设
网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档