按钮样式

  <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

AmazeUI常用组件的更多相关文章

  1. amazeui学习笔记--css(常用组件16)--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  2. amazeui学习笔记--css(常用组件15)--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  3. amazeui学习笔记--css(常用组件14)--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  4. amazeui学习笔记--css(常用组件13)--进度条Progress

    amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...

  5. amazeui学习笔记--css(常用组件12)--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  6. amazeui学习笔记--css(常用组件11)--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

  7. amazeui学习笔记--css(常用组件10)--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  8. amazeui学习笔记--css(常用组件9)--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  9. amazeui学习笔记--css(常用组件8)--列表list

    amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...

随机推荐

  1. 使用Django建立网站

    # django-admin startproject csvt01 # cd csvt01 # django-admin startapp blog # vim csvt01/settings.py ...

  2. jQuery自定义漂亮的下拉框插件8种效果

    jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 实例代码 <body class="demo-1"> ...

  3. 如何使一个input文本框随其中内容而变化长度(转)

    第一: <input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(t ...

  4. Windows下安装MySQLdb, Python操作MySQL数据库的增删改查

    这里的前提是windows上已经安装了MySQL数据库,且配置完成,能正常建表能操作. 在此基础上仅仅需安装MySQL-python-1.2.4b4.win32-py2.7.exe就ok了.仅仅有1M ...

  5. OpenGL入门【1 高速入门】

    // OpenGL.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include &l ...

  6. Promise与异步

    不知道promise,大家现在用了吗?如果还不了解的话,今天就来对了-基础的了解起来- 正文从这开始- 接触过promise的的都知道它的应用场景和用途,Promise可以用来避免异步操作函数里的嵌套 ...

  7. Python--day03(变量、数据类型、运算符)

    day02主要内容回顾 1.语言的分类 -- 机器语言:直接编写0,1指令,直接能被硬件执行 -- 汇编语言:编写助记符(与指令的对应关系),找到对应的指令直接交给硬件执行 -- 高级语言:编写人能识 ...

  8. go语言问题集锦

    ==============================================beego框架=========================================== 1.使 ...

  9. linux /mac 下 go环境变量配置

    安装了go语言之后,还要设置路径,如果不设置路径,则执行 go 的时候会提示 go: command not found,提示的意思是没有这个命令行.这个是因为还没有设置PATH路径. 设置路径的方式 ...

  10. 剑指Offer 8. 跳台阶 (递归)

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 题目地址 https://www.nowcoder.com/pract ...