12.1 基础输入框

  在Semantic-UI中可以定义多个样式的输入框,可以将图片与输入框结合,输入提示信息文字,设置输入框的状态。

示例:定义基础输入框

用户名:
<div class="ui input"><input type="text" placeholder="请输入你的用户名!" name="username" id="username" /></div>

示例:定义输入框的状态

用户名:<div class="ui disabled input"><input type="text" placeholder="请输入你的用户名!" name="username" id="username" /></div>

12.2 图标与输入框结合现实

示例:定义图标输入框

<div class="ui left icon input loading">
<input type="text" name="" id="" placeholder="加载中...">
<i class="search icon"></i>
</div>

示例:定义输入框与标签结合现实

<div class="ui labeled input">
<div class="ui label">
http://
</div>
<input type="text" placeholder="请输入url..." />
</div>

12.3 输入框的颜色反转与输入框的大小

示例:输入框颜色反转 inverted

<div class="ui inverted labeled input">
<div class="ui label">
http://
</div>
<input type="text" placeholder="请输入url..." />
</div>

示例:定义不同大小的输入框

<div class="ui tiny input">
<input type="text" placeholder="请输入...">
</div>
<div class="ui small input">
<input type="text" placeholder="请输入...">
</div>
<div class="ui medium input">
<input type="text" placeholder="请输入...">
</div>

12.4 小结

  输入框的编写必须在input标签下,但是编写这些样式可以根据实际业务需求进行设置。

12、Semantic-UI之输入框的更多相关文章

  1. Semantic UI – 完全语义化的前端界面开发框架

    Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...

  2. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  3. Semantic UI 中文参考手册

    一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...

  4. 修改 Semantic UI 的默认字体

    Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic ...

  5. 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  6. Semantic UI基础使用教程

    自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...

  7. Semantic UI中的验证控件的事件的使用

    1.Semantic UI中的验证控件,功能挺不错的,中文官网的文档写的都比较详细了,我再这里就不再进行重复了,主要是想说一下它的事件的使用方法,这个可能有部分朋友刚开始接触的时候不太了解 注意看这几 ...

  8. semantic UI first web

    官方文档:https://semantic-ui.com/introduction/getting-started.html semantic  UI: SemanticUI是一款语义化设计的前端开源 ...

  9. webpack 解决 semantic ui 中 google fonts 引用的问题

    semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...

随机推荐

  1. Android中RelativeLayout各个属性

    android:layout_above="@id/xxx"  --将控件置于给定ID控件之上 android:layout_below="@id/xxx"  ...

  2. 更改AD域安全策略-密码必须符合复杂性要求

    在域环境中,修改域用户密码时,会提示不符合密码策略, 更改"本地安全策略"是不会对域产生任何的作用的. 上图中可以看,这里按钮都是灰色的! 下面这个步骤教你如何找到"域安 ...

  3. Android MVP模式简单易懂的介绍方式 (一)

    Android MVP模式简单易懂的介绍方式 (一) Android MVP模式简单易懂的介绍方式 (二) Android MVP模式简单易懂的介绍方式 (三) 最近正在研究Android的MVP模式 ...

  4. quartz的配置文件

    quartz在运行时默认加载的是工程目录下的quartz.properties文件,如果工程目录下没有quartz.properties文件,它就会去读取quartz jar包下的quartz.pro ...

  5. MySQL内置功能之视图、触发器和存储过程

    主要内容: 一.视图 二.触发器 三.存储过程 1️⃣  视图 一.关于视图的理解 1.1.何谓视图? 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名], 用户使 ...

  6. DVI与VGA有什么区别

    [DVI与VGA有什么区别] DVI接口的传输信号采用全数字格式,与之对应的是采用模拟信号的VGA接口. VGA和DVI的区别,首先VGA模拟信号的传输比较麻烦,首先是将电脑内的数字信号转换为模拟信号 ...

  7. NormalMap & CubeMap

    [NormalMap & CubeMap] 有时候我们需要CubeMap的环境反射也需要有凹凸信息,此时需要装将NormalMap与CubeMap结合. 因为要使用NormalMap,使用Pr ...

  8. Kafka总结的一张图

  9. Cassandra读写性能测试

    1. 测试目的 测试Cassandra集群读写TPS的极值,确定Cassandra读写性能. 2. 测试环境 2.1 硬件信息 CPU 8核 Intel(R) Xeon(R) CPU E5-2650 ...

  10. python的 pep8 规范(看完你会感谢我的!!!)

    1 缩进与换行 每级缩进使用四个空格 2 限制每行的最大长度为79个字符 3 空行 顶层函数和类之间使用两个空行 类的方法之间用一个空行 在函数中使用空行表示不同逻辑段落 4 导入位于文件的顶部 5 ...