zoukankan      html  css  js  c++  java
  • AmazeUI常用组件

      按钮样式

      <span class="am-badge">1</span>  #正方形
      <span class="am-badge am-badge-primary">2</span>#正方形
      <span class="am-badge am-badge-secondary">3</span>#正方形
      <span class="am-badge am-badge-success">4</span>#正方形
      <span class="am-badge am-badge-warning">5</span>#正方形
      <span class="am-badge am-badge-danger">6</span>#正方形
      <span class="am-badge am-badge-success">Allmobilize</span>#长方形
      <br>
      <a class="am-badge am-badge-primary">Free</a>#长方形
      <a class="am-badge am-badge-secondary">Secondary</a>#长方形
      <a class="am-badge am-badge-success">Success</a>#长方形
      <a class="am-badge am-badge-warning">Warning</a>#长方形
      <a class="am-badge am-badge-danger">Danger</a>#长方形

      <span class="am-badge">1</span>#圆角正方形
      <span class="am-badge am-badge-primary">2</span>#圆角正方形
      <span class="am-badge am-badge-secondary">3</span>#圆角正方形
      <span class="am-badge am-badge-success">4</span>#圆角正方形
      <span class="am-badge am-badge-warning">5</span>#圆角正方形
      <span class="am-badge am-badge-danger">6</span>#圆角正方形
      <span class="am-badge am-badge-success">Allmobilize</span>#圆角长方形
      <br>
      <a class="am-badge am-badge-primary">Free</a>#圆角长方形
      <a class="am-badge am-badge-secondary">Secondary</a>圆角长方形
      <a class="am-badge am-badge-success">Success</a>圆角长方形
      <a class="am-badge am-badge-warning">Warning</a>圆角长方形
      <a class="am-badge am-badge-danger">Danger</a>圆角长方形

      <span class="am-badge am-round">1</span>#椭圆
      <span class="am-badge am-badge-primary am-round">2</span>#椭圆
      <span class="am-badge am-badge-secondary am-round">3</span>#椭圆
      <span class="am-badge am-badge-success am-round">4</span>#椭圆
      <span class="am-badge am-badge-warning am-round">5</span>#椭圆
      <span class="am-badge am-badge-danger am-round">6</span>#椭圆
      <span class="am-badge am-badge-success am-round">Allmobilize</span>#椭圆
      <br>
      <a class="am-badge am-badge-primary am-round">Free</a>#椭圆
      <a class="am-badge am-badge-secondary am-round">Secondary</a>#椭圆
      <a class="am-badge am-badge-success am-round">Success</a>#椭圆
      <a class="am-badge am-badge-warning am-round">Warning</a>#椭圆
      <a class="am-badge am-badge-danger am-round">Danger</a>#椭圆

      大小

      <span class="am-badge am-badge-primary">default</span>
      <span class="am-badge am-badge-secondary am-text-sm">small</span>
      <span class="am-badge am-badge-success am-text-default">normal</span>
      <span class="am-badge am-badge-warning am-text-lg">large</span>
      <span class="am-badge am-badge-danger am-text-xl">x large</span>

      面包屑导航  am-breadcrum

      <ol class="am-breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">分类</a></li>
        <li class="am-active">内容</li>
      </ol>  #>>分隔符

      <ol class="am-breadcrumb am-breadcrumb-slash">
        <li><a href="#">首页</a></li>
        <li><a href="#">分类</a></li>
        <li class="am-active">内容</li>
      </ol> #/分隔符

      <ol class="am-breadcrumb">
        <li><a href="#" class="am-icon-home">首页</a></li>
        <li><a href="#">分类</a></li>
        <li class="am-active">内容</li>
      </ol> #带图标

      按钮组

      <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-default">左手</button>
          ...
      </div>

      <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-primary am-radius">左手   </button>
        ...
      </div>

      <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-primary am-round">左手</button>
        ...
      </div>
      

      按钮工具栏

      <div class="am-btn-toolbar">
        <div class="am-btn-group">...</div>
        <div class="am-btn-group">...</div>
        <div class="am-btn-group">...</div>
      </div>

      按钮组大小

      <div class="am-btn-toolbar">
        <div class="am-btn-group am-btn-group-lg">...</div>
      </div>

      <div class="am-btn-toolbar">
        <div class="am-btn-group">...</div>
      </div>

      <div class="am-btn-toolbar">
        <div class="am-btn-group am-btn-group-sm">...</div>
      </div>

      <div class="am-btn-toolbar">
        <div class="am-btn-group am-btn-group-xs">...</div>
      </div>

      垂直按钮组

      <div class="am-btn-group-stacked">
        <button type="button" class="am-btn am-btn-default">Button</button>
        ...
      </div>

      自适应宽度

      <div class="am-btn-group am-btn-group-justify">

        <a class="am-btn am-btn-default" role="button">左手</a>
        ...
      </div>

      下拉组件按钮

      <div class="am-btn-group">
        <button class="am-btn am-btn-secondary">下拉按钮</button>
        <div class="am-dropdown" data-am-dropdown>
          <button class="am-btn am-btn-secondary am-dropdown-toggle" data-am-dropdown-toggle>

            <span class="am-icon-caret-down"></span></button>
            <ul class="am-dropdown-content">
            <li class="am-dropdown-header">标题</li>
            <li><a href="#">快乐的方式不只一种</a></li>
            <li class="am-active"><a href="#">最荣幸是</a></li>
            <li><a href="#">谁都是造物者的光荣</a></li>
            <li class="am-disabled"><a href="#">就站在光明的角落</a></li>
            <li class="am-divider"></li>
            <li><a href="#">天空海阔 要做最坚强的泡沫</a></li>
          </ul>
        </div>
      </div>

      

      <div class="am-btn-group">
        <button class="am-btn am-btn-secondary">上拉按钮</button>
        <div class="am-dropdown am-dropdown-up" data-am-dropdown>
          <button class="am-btn am-btn-secondary am-dropdown-toggle" data-am-dropdown-toggle>

            <span class="am-icon-caret-up"></span></button>
          <ul class="am-dropdown-content">
            <li class="am-dropdown-header">标题</li>
            <li><a href="#">快乐的方式不只一种</a></li>
            <li class="am-active"><a href="#">最荣幸是</a></li>
            <li><a href="#">谁都是造物者的光荣</a></li>
            <li class="am-disabled"><a href="#">就站在光明的角落</a></li>
            <li class="am-divider"></li>
            <li><a href="#">天空海阔 要做最坚强的泡沫</a></li>
          </ul>
        </div>
      </div>

      详情参考:http://amazeui.org/css/pagination

  • 相关阅读:
    java序列化和反序列化使用总结
    什么是N+1查询?
    Oracle insert /*+ APPEND */原理解析
    Oracle redo与undo
    MongoDB(三)-- 执行JS、界面工具
    几种Bean的复制方法性能比较
    Kafka(三)-- Kafka主要参数
    Kafka(二)-- 安装配置
    Kafka(一)-- 初体验
    Nginx(十二)-- Nginx+keepalived实现高可用
  • 原文地址:https://www.cnblogs.com/forerver-elf/p/4763063.html
Copyright © 2011-2022 走看看