AmazeUI 辅助类

onestopweb

浏览: 688941 次

最近访客更多访客>>

vincepisces

heishehui

wtomato

hushouhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

阅-AmUI

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>辅助类</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body>
<!--.am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。-->
<div class="am-scrollable-horizontal">
    <table class="am-table am-table-bordered am-table-striped am-text-nowrap">
        <thead>
            <tr>
                <th>-= 表格标题 =-</th>
                <th>-= 表格标题 =-</th>
                <th>-= 表格标题 =-</th>
                <th>-= 表格标题 =-</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表格数据</td>
                <td>表格数据</td>
                <td>表格数据</td>
                <td>表格数据</td>
            </tr>
            <tr>
                <td>表格数据</td>
                <td>表格数据</td>
                <td>表格数据</td>
                <td>表格数据</td>
            </tr>
            <tr>
                <td>表格数据</td>
                <td>表格数据</td>
                <td>表格数据</td>
                <td>表格数据</td>
            </tr>
        </tbody>
    </table>
</div>
<!--.am-scrollable-vertical 内容超过设置的高度以后显示滚动条，默认设置的高度为 240px。-->
<!--
浮动相关
.am-cf - 清除浮动
.am-nbfc - 使用 overflow: hidden; 创建新的 BFC 清除浮动
.am-fl - 左浮动
.am-fr - 右浮动
.am-center - 水平居中
-->
<div class="am-cf">
  <button class="am-btn am-btn-success am-fl">向左浮动</button>
  <button class="am-btn am-btn-success am-fr">向右浮动</button>
</div>
<!--元素显示与隐藏
.am-block - display 设置为 block
.am-inline - display 设置为 inline
.am-inline-block - display 设置为 inline-block
.am-hide 设置为隐藏
-->
<button class="am-btn am-btn-danger am-hide">I'm hidden.....</button>
<!--字体-->
<p>阅谁问君诵，水落清香浮</p>
<p class="am-serif">阅谁问君诵，水落清香浮</p>
<p class="am-kai">阅谁问君诵，水落清香浮</p>
<p class="am-monospace">阅谁问君诵，水落清香浮</p>
<!--文本颜色-->
<p>阅谁问君诵，水落清香浮</p>
<p class="am-text-primary">阅谁问君诵，水落清香浮</p>
<p class="am-text-secondary">阅谁问君诵，水落清香浮</p>
<p class="am-text-success">阅谁问君诵，水落清香浮</p>
<p class="am-text-warning">阅谁问君诵，水落清香浮</p>
<p class="am-text-danger">阅谁问君诵，水落清香浮</p>
<!--链接颜色减淡-->
<a href="" class="am-link-muted">阅谁问君诵，水落清香浮</a>
<h3 class="am-link-muted"><a href="">阅谁问君诵，水落清香浮</a></h3>
<ul class="am-link-muted">
  <li><a href="">阅谁问君诵，水落清香浮</a></li>
</ul>
<!--
文字大小
am-text-xs - 12px
am-text-sm - 14px
am-text-default - 16px
am-text-lg - 18px
am-text-xl - 24px
am-text-xxl - 32px
am-text-xxxl - 42px
-->
<p class="am-text-xs">阅谁问君诵，水落清香浮</p>
<p class="am-text-sm">阅谁问君诵，水落清香浮</p>
<p class="am-text-default">阅谁问君诵，水落清香浮</p>
<p class="am-text-lg">阅谁问君诵，水落清香浮</p>
<p class="am-text-xl">阅谁问君诵，水落清香浮</p>
<p class="am-text-xxl">阅谁问君诵，水落清香浮</p>
<p class="am-text-xxxl">阅谁问君诵，水落清香浮</p>
<!--
单行文字截断
.am-text-truncate {
  word-wrap: normal; /* for IE */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
-->
<!-- 超出 200px 的文字将会被截断 -->
<div class="am-text-truncate" style="width: 250px; padding: 10px;">阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮</div>
<!--
多行文字截断
.line-clamp {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 这里修改为要显示的行数
  -webkit-box-orient: vertical;
}
-->
<!--视口大小-->
<ul>
  <li class="am-show-sm-only">仅 small 可见</li>
  <li class="am-show-md-up">medium + 可见</li>
  <li class="am-show-md-only">仅 medium 可见</li>
  <li class="am-show-lg-up">large 可见</li>
  <li class="am-show-lg-only">仅 large 可见</li>
</ul>
<!--屏幕方向-->
<ul>
  <li class="am-show-landscape">横屏可见...</li>
  <li class="am-show-portrait">竖屏可见...</li>
</ul>
<p></p><p></p><p></p>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

效果图：

am辅助类.rar (1021.4 KB)
下载次数: 1

查看图片附件

分享到：

使用注册表清理远程桌面连接历史记录 | AmazeUI 等分网格

2016-02-15 15:01
浏览 649
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

AmazeUI 辅助类

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

AmazeUI 辅助类

评论

发表评论

相关推荐

AmazeUI 二维码

AmazeUI 表单验证

AmazeUI 单选框和多选框

AmazeUI 下拉选框

AmazeUI 日期组件

AmazeUI 选项卡

AmazeUI 固定元素

AmazeUI 平滑滚动

AmazeUI 流动侦测导航

AmazeUI 流动侦测

AmazeUI 侧边栏

AmazeUI 图片轮播

AmazeUI 加载进度条

AmazeUI 弹出窗

AmazeUI 模态窗口

AmazeUI 下拉组件

AmazeUI 折叠面板

AmazeUI 按钮交互

AmazeUI 警告框

AmazeUI 文章页

最近访客更多访客>>