1、标准输入框

　　semantic-ui中定义输入框需要将input标签包含于另外一个标签内，外层标签的class为ui input，注意外层标签可以是div，span、p、i。

<div class="ui input">

	<input type="text" placeholder="please input_div">

</div>

<span class="ui input">

	<input type="text" placeholder="please input_span">

</span>

<i class="ui input">

	<input type="text" placeholder="please input_i">

</i>

<p class="ui input">

	<input type="text" placeholder="please input_p">

</p>

　　

2、改变输入框的状态

　　focus表示选中（活跃），disabled表示禁用，error表示出错。

<div class="ui input">

	<input type="text" placeholder="please input_div">

</div>

<span class="ui input focus">

	<input type="text" placeholder="please input_span">

</span>

<i class="ui input disabled">

	<input type="text" placeholder="please input_i">

</i>

<p class="ui input error">

	<input type="text" placeholder="please input_p">

</p>

　　

3、图标与输入框配合使用

　　先看一个错误的用法：

<div class="ui input">

  	<input type="text" placeholder="Search...">

	<i class="search icon"></i>

</div>

　　

　　可以看到，搜索图标并没有和输入框融合在一起。如果要他们融合在一起，即输入框内部有图标，必须在外层的class增加icon，表示这是一个拥有图标的输入框。

<div class="ui icon input">

  	<input type="text" placeholder="Search...">

	<i class="search icon"></i>

</div>

　　

4、指定图标在输入框中的位置

　　只需要在外层的class中加一个表示位置的词就行了，比如left，right。不要尝试在图标的标签上加left或者right，会失败。

<div class="ui left icon input">

  	<input type="text" placeholder="Search...">

  	<i class="search icon"></i>

</div>

　　

5、输入框与标签结合

　　和上面的与图表使用是一样的

<div class="ui labeled input">

	<div class="ui label">

		http://

	</div>

	<input type="text" placeholder="url">

</div>

6、设置大小

　　没什么可说的，直接在外层标签的class中加一个表示大小的词即可。

<div class="ui big labeled input">

	<div class="ui label">

		http://

	</div>

	<input type="text" placeholder="url">

</div>

　　

7、配合Jquery获取输入框的值

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link href="../dist/semantic.css" rel="stylesheet" />

    <script src="../jquery.js"></script>

</head>

<body>

<div class="ui labeled input">

	<div class="ui label">http://</div>

	<input type="text" placeholder="url"  id="url" name="url">

</div>

<button class="ui button primary" id="btn">提交</button>

</body>

<script>

	$("#btn").on("click",function(){

		alert($("#url").val());

	})

</script>

</html>

　　

　　

　　

semantic-ui 输入框的更多相关文章

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

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

  2. Semantic UI 中文参考手册

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

  3. 修改 Semantic UI 的默认字体

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

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

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

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

  10. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

随机推荐

  1. GitLab安装及使用

    GitLab是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目. GitLab拥有与Github类似的功能,能够浏览 ...

  2. win10升级后蓝牙不见了，设备管理器里没有，多了个串行控制器里的未知USB设备？

    win10更新后,蓝牙功能不见了,也没有打开的选项,设备管理器里也没有,多了个未知USB设备,重启无效,重装蓝牙驱动无效,BIOS中的Bluetooth是开的. 试了网上能找到的所有方法,包括更新wi ...

  3. layui form.on('select(xxx)',function(){});绑定失败

    使用layui的form.on绑定select选中事件中, form.on()不执行, 主要原因有 1, select标签中没有写lay_filter属性,用来监听 <select id=&qu ...

  4. Zookeeper Health Checks

    Short Description: The article talks about the basic health checks to be performed when working on i ...

  5. 微信H5开发，页面被缓存，不更新

    原文:https://blog.csdn.net/qq_27471405/article/details/79295348  这里只是备份 前言:每一次请求,我们都知道浏览器会做一定处理,其中就包括对 ...

  6. node.js—File System（文件系统模块）

    文件系统模块概述 该模块是核心模块,提供了操作文件的一些API,需要使用require导入后使用,通过 require('fs') 使用该模块 文件 I/O 是由简单封装的标准 POSIX 函数提供的 ...

  7. [ASP.NET]ScriptManager控件使用 转载

    目录 概述 局部刷新 错误处理 类型系统扩展 注册定制脚本 注册 Web 服务 在客户端脚本中使用认证和个性化服务 ScriptManagerProxy 类 添加 ScriptManager 控件 客 ...

  8. Oracle BBED 工具 说明

    一.  BBED介绍        有关BBED 详细使用说明的pdf文档,也是从网上下载的:               http:          Thename bbed is an acro ...

  9. Spring Security（十八）：5.9 Post Processing Configured Objects

    Spring Security’s Java Configuration does not expose every property of every object that it configur ...

  10. 初学Python—列表和元组

    一.什么是列表 列表是一系列数据的集合 二.列表的引用 首先定义一个列表 names=["alex","bob","alice"," ...