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 组件及添加文字的样式。

 Copy
.00
$.00
<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 内。

 Copy
<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

 Copy
手气还行
<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

 Copy
@
@
@
<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>

颜色

 Copy
<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 外,还需要设置按钮的样式。

 Copy
<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的更多相关文章

  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. Python的主要库

    本文在Creative Commons许可证下发布 市面上的分析工具大致分为两大类,菜单式的工具和命令行式的工具.前者适合于初学入门,类似于跟团旅游,提供了固定的路线.分析套路比较固定化,点几下鼠标就 ...

  2. 紫书 习题 10-22 UVa 10479 (找规律)

    自己一直在纠结这个串的构造方法 而没有观察串本身的规律-- 2的63次方用 unsigned long long 然后可以发现串是递归构造的. 将串分成1,1,2,4,8,16, 然后会发现s串里面1 ...

  3. Unity容器实现自动注册

    如何创建Unity容器? 首先NuGet搜索Unity, 该示例中使用的版本为4.0.1 新建控制台程序 示例中使用常规操作, 创建一个IPay接口, 分别有两个实现类: ApplePay.Huawe ...

  4. Eclipse+PyDev解决中文输入和注释问题

    Eclipse的设置 window->preferences->general->editors->text editors->spelling->encoding ...

  5. Js经典实例收集

    跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(t ...

  6. POJ 1904 思路题

    思路: 思路题 题目诡异地给了一组可行匹配 肯定有用啊-. 就把那组可行的解 女向男连一条有向边 如果男喜欢女 男向女连一条有向边 跑一边Tarjan就行了 (这个时候 环里的都能选 "增广 ...

  7. java为什么要定义接口等相关解释

    1.接口的作用是实现多重继承  因为只能继承一个类(规定的) 2.一个类只能继承一个父类,但是可以实现一个或多个接口 3.abstract关键词能让你在类里创建一个或多个没有定义的方法—你给出接口,但 ...

  8. Android 关于::app:clean :app:preBuild UP-TO-DATE :app:preDebugBuild UP-TO-DATE,引用jar冲突问题

    错误提示: Information:Gradle tasks [:app:clean, :app:generateDebugSources, :app:generateDebugAndroidTest ...

  9. 关于html(meta的常用的用法)

    http://www.haorooms.com/post/html_meta_ds

  10. Hyperic

    https://my.oschina.net/hyperichq/blog/525590