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>
amazeui学习笔记--css(常用组件7)--输入框组Input-group的更多相关文章
- amazeui学习笔记--css(常用组件16)--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- amazeui学习笔记--css(常用组件15)--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- amazeui学习笔记--css(常用组件14)--缩略图Thumbnail
amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...
- amazeui学习笔记--css(常用组件13)--进度条Progress
amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...
- amazeui学习笔记--css(常用组件12)--面板Panel
amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...
- amazeui学习笔记--css(常用组件11)--分页Pagination
amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css(常用组件9)--导航nav
amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...
- amazeui学习笔记--css(常用组件8)--列表list
amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...
随机推荐
- Python的主要库
本文在Creative Commons许可证下发布 市面上的分析工具大致分为两大类,菜单式的工具和命令行式的工具.前者适合于初学入门,类似于跟团旅游,提供了固定的路线.分析套路比较固定化,点几下鼠标就 ...
- 紫书 习题 10-22 UVa 10479 (找规律)
自己一直在纠结这个串的构造方法 而没有观察串本身的规律-- 2的63次方用 unsigned long long 然后可以发现串是递归构造的. 将串分成1,1,2,4,8,16, 然后会发现s串里面1 ...
- Unity容器实现自动注册
如何创建Unity容器? 首先NuGet搜索Unity, 该示例中使用的版本为4.0.1 新建控制台程序 示例中使用常规操作, 创建一个IPay接口, 分别有两个实现类: ApplePay.Huawe ...
- Eclipse+PyDev解决中文输入和注释问题
Eclipse的设置 window->preferences->general->editors->text editors->spelling->encoding ...
- Js经典实例收集
跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(t ...
- POJ 1904 思路题
思路: 思路题 题目诡异地给了一组可行匹配 肯定有用啊-. 就把那组可行的解 女向男连一条有向边 如果男喜欢女 男向女连一条有向边 跑一边Tarjan就行了 (这个时候 环里的都能选 "增广 ...
- java为什么要定义接口等相关解释
1.接口的作用是实现多重继承 因为只能继承一个类(规定的) 2.一个类只能继承一个父类,但是可以实现一个或多个接口 3.abstract关键词能让你在类里创建一个或多个没有定义的方法—你给出接口,但 ...
- Android 关于::app:clean :app:preBuild UP-TO-DATE :app:preDebugBuild UP-TO-DATE,引用jar冲突问题
错误提示: Information:Gradle tasks [:app:clean, :app:generateDebugSources, :app:generateDebugAndroidTest ...
- 关于html(meta的常用的用法)
http://www.haorooms.com/post/html_meta_ds
- Hyperic
https://my.oschina.net/hyperichq/blog/525590