欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Semantic UI 之 输入框

程序员文章站 2022-07-04 16:00:44
...

第一步：创建项目

添加JQuery和Semantic UI包、创建input.html页面：
Semantic UI 之 输入框

第二步：container.html页面

在container.html页面中引入样式文件和JS文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>按钮</title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <script type="text/javascript" src="js/jquery3.3.1.js"></script>
        <script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
    </head>
    <body>
    </body>
</html>

接下来在body中按下面所示添加代码并在网页中查看效果：

输入框的样式

<h2>输入框的样式</h2>
<!--标准输入框-->
<div class="ui input">
    <input type="text" placeholder="标准输入框">
</div>
<br>
<!--聚焦输入框-->
<div class="ui focus input">
    <input type="text" placeholder="聚焦输入框">
</div>
<br>
<!--禁用输入框-->
<div class="ui disable input">
    <input type="text" placeholder="禁用输入框">
</div>
<br>
<!--没有边框的输入框-->
<div class="ui transparent input">
    <input type="text" placeholder="透明输入框">
</div>

效果：
Semantic UI 之 输入框

输入框的大小

<h2>输入框的大小</h2>
<div class="ui mini input">
    <input type="text" placeholder="迷你入框">
</div>
<br>
<div class="ui small input">
    <input type="text" placeholder="小输入框">
</div>
<br>
<div class="ui input">
    <input type="text" placeholder="标准输入框">
</div>
<br>
<div class="ui large input">
    <input type="text" placeholder="输入框">
</div>
<br>
<div class="ui big input">
    <input type="text" placeholder="大输入框">
</div>
<br>
<div class="ui huge input">
    <input type="text" placeholder="巨大输入框">
</div>
<br>
<div class="ui massive input">
    <input type="text" placeholder="最大输入框">
</div>

效果：
Semantic UI 之 输入框

输入框的组合

<h2>输入框的组合</h2>
    <div class="ui error input">
        <input type="text" placeholder="错误">
    </div>
    <br>
    <div class="ui icon input">
        <input type="text" placeholder="账号">
        <i class="user icon"></i>
    </div>
    <br>
    <div class="ui left icon input">
        <i class="lock icon"></i>
        <input type="text" placeholder="密码">
    </div>
    <br>
    <div class="ui loading icon input">
        <input type="text" placeholder="查找">
        <i class="search icon"></i>
    </div>
    <br>
    <div class="ui labeled input">
        <label for="age" class="ui label">年龄</label>
        <input type="text" placeholder="带标签的输入框" id="age">
    </div>
    <br>
    <div class="ui right labeled input">
        <div class="ui label">单价</div>
        <input type="text" placeholder="324" id="price">
        <label for="price" class="ui label">/公斤</label>
    </div>
    <br>
    <div class="ui left icon right labeled input">
        <i class="tags icon"></i>
        <input type="text" placeholder="带图标的输入框" id="hobby">
        <label for="hobby" class="ui label">爱好</label>
    </div>
    <br>
    <div class="ui action input">
        <input type="text" placeholder="带行为的输入框">
        <button class="ui button">搜索</button>
    </div>

效果：
Semantic UI 之 输入框

相关标签： # Semantic UI Semantic UI 输入框 input

上一篇： Easyui之DateBox日期输入框

下一篇： 苹果鼠标20年演化史

推荐阅读