`

AmazeUI 按钮组

AmazeUI按钮组 
阅读更多 
<!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 style="margin: 10px;">
<!--基本使用-->
<div class="am-btn-group">
    <button type="button" class="am-btn am-btn-default">左边</button>
    <button type="button" class="am-btn am-btn-default">中间</button>
    <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>
    <button type="button" class="am-btn am-btn-primary am-radius">中间</button>
    <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-success am-round">左边</button>
    <button type="button" class="am-btn am-btn-success am-round">中间</button>
    <button type="button" class="am-btn am-btn-success am-round">右边</button>
</div>
<!--按钮工具栏-->
<div class="am-btn-toolbar">
    <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-primary"><i class="am-icon-align-left"></i></button>
        <button type="button" class="am-btn am-btn-primary"><i class="am-icon-align-center"></i></button>
        <button type="button" class="am-btn am-btn-primary"><i class="am-icon-align-right"></i></button>
        <button type="button" class="am-btn am-btn-primary"><i class="am-icon-align-justify"></i></button>
    </div>
    <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-primary"><i class="am-icon-font"></i></button>
        <button type="button" class="am-btn am-btn-primary"><i class="am-icon-bold"></i></button>
        <button type="button" class="am-btn am-btn-primary"><i class="am-icon-italic"></i></button>
        <button type="button" class="am-btn am-btn-primary"><i class="am-icon-underline"></i></button>
    </div>
    <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-primary"><i class="am-icon-copy"></i></button>
        <button type="button" class="am-btn am-btn-primary"><i class="am-icon-paste"></i></button>
    </div>
</div>
<!--按钮组大小-->
<div class="am-btn-toolbar">
    <div class="am-btn-group am-btn-group-lg">
        <button type="button" class="am-btn am-btn-default">左边 lg</button>
        <button type="button" class="am-btn am-btn-default">中间 lg</button>
        <button type="button" class="am-btn am-btn-default">右边 lg</button>
    </div>
</div>
<br/>
<div class="am-btn-toolbar">
    <div class="am-btn-group">
        <button type="button" class="am-btn am-btn-default">左边默认</button>
        <button type="button" class="am-btn am-btn-default">中间默认</button>
        <button type="button" class="am-btn am-btn-default">右边默认</button>
    </div>
</div>
<br/>
<div class="am-btn-toolbar">
    <div class="am-btn-group am-btn-group-sm">
        <button type="button" class="am-btn am-btn-default">左边 sm</button>
        <button type="button" class="am-btn am-btn-default">中间 sm</button>
        <button type="button" class="am-btn am-btn-default">右边 sm</button>
    </div>
</div>
<br/>
<div class="am-btn-toolbar">
    <div class="am-btn-group am-btn-group-xs">
        <button type="button" class="am-btn am-btn-default">左边 xs</button>
        <button type="button" class="am-btn am-btn-default">中间 xs</button>
        <button type="button" class="am-btn am-btn-default">右边 xs</button>
    </div>
</div>
<!--垂直排列-->
<div class="am-btn-group-stacked">
    <button type="button" class="am-btn am-btn-default">垂直排列</button>
    <button type="button" class="am-btn am-btn-default">垂直排列</button>
    <button type="button" class="am-btn am-btn-default">垂直排列</button>
    <button type="button" class="am-btn am-btn-default">垂直排列</button>
</div>
<!--自适应宽度-->
<div class="am-btn-group am-btn-group-justify">
	<a class="am-btn am-btn-default" role="button">左边</a>
    <a class="am-btn am-btn-default" role="button">中间</a>
    <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>
<!--[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>

 

效果图：

 

 

  • 大小: 15.4 KB
分享到：
| AmazeUI 面包屑导航
评论
发表评论

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

相关推荐

    AmazeUI 按钮

    6. **按钮组**：可以将多个按钮组织成一个按钮组，这样在有限的空间内可以展示更多的操作选项。 7. **浮动按钮**：对于移动设备，AmazeUI 还提供了浮动按钮（Fab，Floating Action Button）设计，常用于主要操作...

    AmazeUI 按钮交互

    对于高级的交互需求，AmazeUI还支持按钮组和下拉按钮，这在创建复杂操作菜单时非常有用。按钮组可以通过`am-btn-group`类实现，而下拉按钮则需要`am-btn-dropdown`和`am-dropdown`组合。例如： ```html 下拉...

    AmazeUI 输入框组

    AmazeUI 输入框组是基于前端开发框架AmazeUI中的一个重要组件，主要用于构建网页上的表单元素，尤其是涉及用户输入的场景。这个组件提供了一种高效、美观且响应式的解决方案，帮助开发者创建出符合现代Web设计标准的...

    AmazeUI 模态窗口

    AmazeUI 模态窗口是基于前端框架AmazeUI的一个重要组件，用于在网页中创建弹出式的对话框。模态窗口通常用于显示警告、确认信息或者需要用户输入数据的场景，它会在用户与主页面交互时突然出现，并且阻止用户对背景...

    AmazeUI 下拉组件

    4. **组件组合**：在AmazeUI中，下拉组件可以与其他组件结合使用，比如与按钮组、导航条等配合，提供更复杂的交互功能。这需要理解如何正确地嵌套和排列组件，以保持布局的整洁和一致性。 5. **自定义选项**：Amaze...

    AmazeUI-2.5.0.zip

    1. **CSS组件**：AmazeUI 提供了近20个CSS组件，这些组件涵盖了布局、导航、表单、按钮、提示等多种界面元素。例如，布局组件可以帮助开发者构建响应式的网页结构，导航组件则可以方便地创建下拉菜单、面包屑导航等...

    AmazeUI一个移动优先和模块化前端框架

    3. **丰富的组件**：AmazeUI提供诸如按钮、表单、网格、导航、弹窗等大量可复用的UI组件，简化开发过程。 4. **主题定制**：通过简单的CSS变量和工具，开发者可以轻松地改变或定制AmazeUI的主题，满足个性化需求。 5...

    AmazeUI 基本页面

    AmazeUI是一个开源的前端框架，专为移动优先（Mobile First）设计，旨在提供一套高效、易用、跨平台的前端开发解决方案。AmazeUI基于HTML5和CSS3技术，适用于构建高性能的Web应用，同时支持桌面端和移动端。在这个...

    AmazeUI 网格

    AmazeUI是一款开源的前端框架，它以简洁、灵活、跨平台的特点被广泛应用于Web开发。网格系统是AmazeUI中的核心组成部分，用于构建响应式布局，帮助开发者快速创建适应不同设备屏幕尺寸的网页。 在AmazeUI的网格系统...

    AmazeUI 列表

    AmazeUI允许在列表项中嵌入按钮或链接，使用户可以直接在列表中进行操作，提升交互性。 在实际应用中，开发者可以根据需求灵活组合使用上述列表类型，并利用AmazeUI提供的CSS和JavaScript工具进行自定义。此外，...

    最懂中国程序猿的开源HTML5 跨屏前端框架Amaze UI

    4. **丰富的组件库**：Amaze UI 提供了大量的预封装组件，如导航、下拉菜单、按钮、图标、表单元素等，覆盖了前端开发中的常见需求。例如，`widget.basic.html`和`widget.html`展示了不同类型的组件组合，方便开发者...

    AmazeUI中各种的导航式菜单与解决方法

    另一种策略是模仿Bootstrap的导航栏设计，结合AmazeUI的按钮组和下拉按钮。然而，AmazeUI并没有提供直接的组合解决方案，因此需要手动创建div并调整CSS属性来控制下拉按钮的大小和位置。在这个例子中，通过设置`am-...

    AmazeUI 面板

    2. **丰富的组件**：除了基本的面板结构，AmazeUI 还提供了按钮、表单、表格、下拉菜单、模态对话框等多种组件，方便构建复杂的交互功能。 3. **易于定制**：AmazeUI 使用 Less 作为预处理器，允许开发者轻松修改...

    Amaze UI 后台管理html静态模板.zip

    2. **组件化**：Amaze UI 提供了一系列可复用的UI组件，如导航菜单、按钮、表单元素、弹窗、轮播图等。这些组件都有预定义的样式和交互，可以快速拖拽组合成所需的界面。 3. **HTML5和CSS3**：模板中的HTML结构遵循...

    AmazeUI后台OA系统管理html模板.zip

    2. **组件丰富**：AmazeUI提供了大量的预设组件，如导航、表单、按钮、下拉菜单等，可以方便地组合使用，快速构建页面结构。 3. **主题定制**：AmazeUI支持主题定制，可以轻松改变颜色、字体等样式，满足个性化需求...

    AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码

    AmazeUI 是一款专为中国开发者设计的前端框架，它提供了丰富的组件和样式，方便开发者构建响应式、跨屏兼容的网页。在这个示例中，我们关注的是AmazeUI在手机版页面中的应用，特别是如何实现顶部导航条（Header）...

    基于amazeui用户充值页面特效.zip

    【AmazeUI用户充值页面特效】是针对网页应用设计的一款功能，主要目的是为用户提供便捷的在线充值服务。这款特效允许用户通过两种常见的电子支付方式——支付宝和微信支付，完成充值操作。这一特性使得用户能够在...

    adminto后台模板框架后台 Amaze UI 前端框架 图表 cms 管理系统 cms系统 表单验证 简洁 响应式

    Amaze UI 提供了大量的UI组件，如表格、表单、按钮、导航等，这些组件都经过精心设计，适应不同屏幕尺寸，满足移动优先的设计理念。 adminto后台模板框架的核心特性包括： 1. **响应式设计**：无论是在桌面、平板...

    NextBig:分享新产品，新想法的网站

    同时，前端部分采用了Amaze UI，这是一个专门针对移动设备优化的前端开发框架，提供了丰富的组件和模板，使得网站在不同设备上都能有良好的用户体验。 首先，让我们深入了解ThinkPHP。ThinkPHP是基于PHP语言的MVC...

Magicbox
Global site tag (gtag.js) - Google Analytics