amazeui学习笔记--css(常用组件7)--输入框组Input-group
amazeui学习笔记--css(常用组件7)--输入框组Input-group
一、总结
1、使用:Input group 基于 Form 组件和 Button 组件扩展,依赖这两个组件。在容器上添加 .am-input-group
,在标签文字上添加 .am-input-group-label
2、Icon组件及添加文字:
<div class="am-input-group">
<span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
3、将单选框与复选框放入 .am-input-group-label
内:
<div class="am-input-group">
<span class="am-input-group-label">
<input type="radio">
</span>
4、输入框结合button:需要用 .am-input-group-btn
包住按钮,而不是 .am-input-group-label
。
<div class="am-u-lg-6">
<div class="am-input-group">
<input type="text" class="am-form-field">
<span class="am-input-group-btn">
<button class="am-btn am-btn-default" type="button">手气还行</button>
</span>
</div>
</div>
5、尺寸变换:在 .am-input-group
添加标明尺寸的 class 即可。包含 .am-input-group-lg
、.am-input-group-sm
。<div class="am-input-group am-input-group-lg">
6、颜色:<div class="am-input-group am-input-group-secondary">
二、输入框组Input-group
Input Group
Input group 基于 Form 组件和 Button 组件扩展,依赖这两个组件。
在容器上添加 .am-input-group
,在标签文字上添加 .am-input-group-label
,具体请查看示例代码。
基本使用
输入框与标签
下面的代码中演示了结合 Icon 组件及添加文字的样式。
<div class="am-input-group">
<span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
<div class="am-input-group">
<span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
<input type="text" class="am-form-field" placeholder="Password">
</div>
<div class="am-input-group">
<input type="text" class="am-form-field">
<span class="am-input-group-label">.00</span>
</div>
<div class="am-input-group">
<span class="am-input-group-label">$</span>
<input type="text" class="am-form-field">
<span class="am-input-group-label">.00</span>
</div>
复选/单选框与输入框
将单选框与复选框放入 .am-input-group-label
内。
<div class="am-g">
<div class="am-u-lg-6">
<div class="am-input-group">
<span class="am-input-group-label">
<input type="checkbox">
</span>
<input type="text" class="am-form-field">
</div>
</div>
<div class="am-u-lg-6">
<div class="am-input-group">
<span class="am-input-group-label">
<input type="radio">
</span>
<input type="text" class="am-form-field">
</div>
</div>
</div>
输入框结合 Button
需要用 .am-input-group-btn
包住按钮,而不是 .am-input-group-label
。
<div class="am-g">
<div class="am-u-lg-6">
<div class="am-input-group">
<span class="am-input-group-btn">
<button class="am-btn am-btn-default" type="button"><span class="am-icon-search"></span> </button>
</span>
<input type="text" class="am-form-field">
</div>
</div>
<div class="am-u-lg-6">
<div class="am-input-group">
<input type="text" class="am-form-field">
<span class="am-input-group-btn">
<button class="am-btn am-btn-default" type="button">手气还行</button>
</span>
</div>
</div>
</div>
样式变换
尺寸
在 .am-input-group
添加标明尺寸的 class 即可。
包含 .am-input-group-lg
、.am-input-group-sm
。
<div class="am-input-group am-input-group-lg">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
<div class="am-input-group">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
<div class="am-input-group am-input-group-sm">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
颜色
<div class="am-input-group am-input-group-primary">
<span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
<input type="text" class="am-form-field" placeholder="你的大名">
</div>
<div class="am-input-group am-input-group-secondary">
...
</div>
<div class="am-input-group am-input-group-success">
...
</div>
<div class="am-input-group am-input-group-warning">
...
</div>
<div class="am-input-group am-input-group-danger">
...
</div>
使用按钮时除了在容器上设置颜色 class 外,还需要设置按钮的样式。
<div class="am-g">
<div class="am-u-lg-6">
<div class="am-input-group am-input-group-danger">
<span class="am-input-group-label">
<input type="checkbox">
</span>
<input type="text" class="am-form-field">
</div>
</div>
<div class="am-u-lg-6">
<div class="am-input-group am-input-group-primary">
<span class="am-input-group-btn">
<button class="am-btn am-btn-primary" type="button"><span class="am-icon-search"></span></button>
</span>
<input type="text" class="am-form-field">
</div>
</div>
</div>
最新文章
- 沙盒解决方案解决SharePoint 2013 以其他身份登陆的问题
- 萌新笔记——C++里将string类字符串(utf-8编码)分解成单个字(可中英混输)
- TypeScript Handbook 1——基本类型(翻译)
- linux 软件的安装与Tarball
- HTTP与AJAX深入揭秘,不使用AJAX实现页面无刷新
- 移动端事件touchstart、touchmove、touchend
- Leetcode: Path Sum III
- git github 异常
- php 多进程workman服务器框架
- 用命令行将Java程序打包为jar文件
- 常用脚本语言Perl,Python,Ruby,Javascript一 Perl,Python,Ruby,Javascript
- python 递归函数
- Java基础知识强化之集合框架笔记72:集合特点和数据结构总结
- 20160427Struts2--入门1
- Asp.net创建伪静态页面
- 栈的实现 -- 数据结构与算法的javascript描述 第四章
- iOS开发之自己封装一个progressHUD控件
- 怎么样sourceforge开源项目发现,centos安装-同htop安装案例
- Kettle jdbc连接hive出现问题
- ABP+AdminLTE+Bootstrap Table权限管理系统第四节--仓储,服务,服务接口及依赖注入
热门文章
- PHP的数组分为两种类型,一种是索引数组,一种是关联数组。有如下关联数组,我们如何获取它的第一个key和value呢?
- OpenJDK源码研究笔记(十三):Javac编译过程中的上下文容器(Context)、单例(Singleton)和延迟创建(LazyCreation)3种模式
- request中文乱码解决
- 洛谷 P1885 Moo
- Top 16 Java 应用类 - 这些功能再也不用自己写了
- uva103 - Stacking Boxes(DAG)
- jquery07
- C#变量引用与全局变量
- 关于exports 和 module.exports
- less---查看文件