• 12、Semantic-UI之输入框


    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标签下,但是编写这些样式可以根据实际业务需求进行设置。

  • 相关阅读:
    软件工程课程作业(四)--返回一个整数数组中最大子数组的和
    构建之法阅读笔记02
    第三周学习进度
    Delphi 之 编辑框控件(TEdit)
    Delphi 之 标签组件(TLabel组件)
    Delphi 之 第九课 Windows编程
    Delphi 之 第八课 动态数组
    VB API 之 第六课 字体应用三
    VB API 之 第五课 字体之其他函数介绍
    Delphi 之 第七课 字符串操作
  • 原文地址:https://www.cnblogs.com/jie-fang/p/10279553.html
Copyright © 2020-2023  润新知