13、Semantic-UI之表格与表单
13.1 定义基础样式表格
在HTML中可以通过table进行表格定义，在Semantic-UI中也可以通过class="ui table"定义表格。
示例：定义基础表格
<div class="ui container">
<table class="ui table">
<tr>
<td>昵称</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
</tr>
<tr>
<td>赵六</td>
<td>21</td>
</tr>
<tr>
<td>小八</td>
<td>27</td>
</tr>
</table>
</div>
示例：定义基础样式表格
<div class="ui container">
<table class="ui celled table">
<tr>
<td>昵称</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
</tr>
<tr>
<td>赵六</td>
<td>21</td>
</tr>
<tr>
<td>小八</td>
<td>27</td>
</tr>
</table>
</div>
示例：定义带标签的表格样式
<div class="ui container">
<table class="ui celled table">
<tr>
<td><div class="ui green ribbon label">昵称</div></td>
<td><div class="ui green ribbon label">年龄</div></td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
</tr>
<tr>
<td>赵六</td>
<td>21</td>
</tr>
<tr>
<td>小八</td>
<td>27</td>
</tr>
</table>
</div>
13.2 表格的状态
在Semantic-UI中所有的状态都只有两种：active和disable。
示例：表格的状态使用
<div class="ui container">
<table class="ui celled table">
<tr>
<td><div class="ui green ribbon label">昵称</div></td>
<td><div class="ui green ribbon label">年龄</div></td>
</tr>
<tr class="active">
<td>张三</td>
<td>25</td>
</tr>
<tr class="disabled">
<td>李四</td>
<td>22</td>
</tr>
</table>
</div>
示例：为表格设置高亮显示
<div class="ui container">
<table class="ui selectable celled table">
<tr>
<td><div class="ui green ribbon label">昵称</div></td>
<td><div class="ui green ribbon label">年龄</div></td>
</tr>
<tr>
<td >张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
</div>
示例：为表格设置颜色
<div class="ui container">
<table class="ui blue selectable celled table">
<tr>
<td><div class="ui green ribbon label">昵称</div></td>
<td><div class="ui green ribbon label">年龄</div></td>
</tr>
<tr>
<td >张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
</div>
13.3 定义表单
在网页开发中表单的定义是必不可少的。在Semantic-UI中表单的定义更加方便快捷。
示例：定义基础的表单
<div class="ui container">
<form action="" method="post" enctype="multipart/form-data" class="ui form">
<div class="field">
<label for="name">姓名</label>
<input type="text" name="name" id="name" placeholder="请输入你的姓名...">
</div>
<div class="field">
<label for="name">年龄</label>
<input type="text" name="age" id="age" placeholder="请输入你的年龄...">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox">
<label>同意注册协议</label>
</div>
</div>
<button class="ui green button">注册</button>
<button class="ui red button">重置</button>
</form>
</div>
示例：设置表单输入框的大小
<div class="ui container">
<form action="" method="post" enctype="multipart/form-data" class="ui form">
<div class="four wide field">
<label for="name">姓名</label>
<input type="text" name="name" id="name" placeholder="请输入你的姓名...">
</div>
<div class="four wide field">
<label for="name">年龄</label>
<input type="text" name="age" id="age" placeholder="请输入你的年龄...">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox">
<label>同意注册协议</label>
</div>
</div>
<button class="ui green button">注册</button>
<button class="ui red button">重置</button>
</form>
</div>
13.4 表单中其他标签的使用
使用三种样式的复选框。
示例：第一种样式的复选框
<div class="ui container">
<form action="" method="post" enctype="multipart/form-data" class="ui form">
<div class="inline filed">
<div class="ui checkbox">
<input type="checkbox">
<label>签署协议</label>
</div>
</div>
</form>
</div>
示例：第二种样式的复选框-slider
<div class="ui container">
<form action="" method="post" enctype="multipart/form-data" class="ui form">
<div class="inline filed">
<div class="ui slider checkbox">
<input type="checkbox">
<label>签署协议</label>
</div>
</div>
</form>
</div>
示例：第三种样式的复选框-toggle
<div class="ui container">
<form action="" method="post" enctype="multipart/form-data" class="ui form">
<div class="inline filed">
<div class="ui toggle checkbox">
<input type="checkbox">
<label>签署协议</label>
</div>
</div>
</form>
</div>
示例：使用jQuery操作单选框
<div class="ui container">
<form action="" method="post" enctype="multipart/form-data" class="ui form">
<div class="inline fields">
<label for="sex">性别</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="sex" id="sex" />
<label>男</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="sex" id="sex" />
<label>女</label>
</div>
</div>
</div>
</form>
</div>
示例：下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI </title>
<!-- 使用CDN导入js和css 文件-->
<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
<script>
$(function () {
$(".ui.dropdown").dropdown();
})
</script>
</head>
<body style="padding: 20px;">
<div class="ui container">
<form action="" method="post" enctype="multipart/form-data" class="ui form">
<div class="field">
<label>性别：</label>
<div class="ui selection dropdown">
<i class="dropdown icon"></i>
<div class="default text">性别</div>
<div class="menu">
<div class="item">男</div>
<div class="item">女</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
示例：定义文本域
<form action="" class="ui form">
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
13.5 小结
表格和表单样式的使用。
13、Semantic-UI之表格与表单的更多相关文章
- BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- WEB入门二 表格和表单
学习内容 Ø 表格的作用和制作 Ø 表单的制作 能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的常用属性: Ø 理解表单的作用 Ø ...
- Html学习之十七（表格与表单学习--排行版制作）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- DOM之表格与表单基础分享
我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...
- css011 表格和表单的格式化
css011 表格和表单的格式化 一. 让表格专司其职 Html中创建一个三行三列的表格 <table> <caption align="bottom" ...
- 第3天：CSS浮动、定位、表格、表单总结
今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑 ...
- amaze UI 如何添加原生表单验证
这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是ama ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- HTML&CSS精选笔记_表格与表单
表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table> <tr> <td>单元格内的文字</td> ...
随机推荐
- python以下划线开头的变量名含义
Python核心风格:避免用下划线作为变量名的开始. 因为下划线对解释器有特殊的意义,而且是内建标识符所使用的符号,我们建议程序员避免用下划线作为变量名的开始.一般来讲,变量名_xxx被看作是“私有的 ...
- 第6章Zabbix分布式监控
Zabbix是一个分布式的监控系统.分布式监控适合跨机房.跨地域的网络监控.从多个Proxy收集数据,而每个Proxy可以采集多个设备的数据,从而轻松地构建分布式监控系统. ZabbixProxy可以 ...
- Netty生产级的心跳和重连机制
今天研究的是,心跳和重连,虽然这次是大神写的代码,但是万变不离其宗,我们先回顾一下Netty应用心跳和重连的整个过程: 1)客户端连接服务端 2)在客户端的的ChannelPipeline中加入一个比 ...
- leetcode260
public class Solution { public int[] SingleNumber(int[] nums) { var dic = new Dictionary<int, int ...
- Python 多人聊天工具 ( 多线程 )
程序实现: 1.单或多客户端使用 telnet 登陆服务端 ( 可远程 ) 进行会话 2.服务端实现登陆.注册.退出功能 3.客户端发送的消息会被广播到已经登陆的其他用户界面 4.连接到服务端后,可以 ...
- bootstrap下，对数组循环处理的方法
nameArray和nameArrayCurrent是字符数组 $.each(nameArray, function(i, v) { if($.inArray(v, nameArrayCurrent) ...
- Java安全框架 Apache Shiro学习-1-ini 配置
简单登录流程: 1. SecurityManager 2. SecurityUtils.setSecurityManager 3. SecurityUtils.getSubject ...
- jBPM4.4 eclipse插件安装
一.工具下载 jBPM 图形化流程设计器采用eclipse做为平台,我们可以先到jBPM官方网站下jBPM4.4,地址:http://sourceforge.net/projects/jbpm ...
- python pipenv 包管理
原文链接:https://robots.thoughtbot.com/how-to-manage-your-python-projects-with-pipenv 翻译者:Jiong 在thought ...
- NormalMapping
[NormalMapping] 法线贴图内的数据是法线,高度贴图内的数据是高度,不是一个东西.在ShaderLab中,UnpackNormal()分析的是法线贴图(注意不是高度贴图). 可以看到,在G ...