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> ...
随机推荐
- php介绍
PHP 简介 PHP 是服务器端脚本语言. 您应当具备的基础知识 在继续学习之前,您需要对以下知识有基本的了解: HTML CSS 如果您希望首先学习这些项目,请在我们的 首页 访问这些教程. PHP ...
- day9-Memcached & Redis使用
Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...
- c++ 字符输入读取
cin.clear()重置输入流 cin.get()锁住屏幕直到获取输入 while(cin) cin.get(ch) 方法返回的是一个cin对象,istream类提供了可以将istream对象转换为 ...
- [Z] SVN的trunk、branch、tag
Subversion有一个很标准的目录结构,是这样的.比如项目是proj,svn地址为svn://proj/,那么标准的svn布局是 svn://proj/|+-trunk+-branches+-ta ...
- rabbitMQ消息队列1
rabbitmq 消息队列 解耦 异步 优点:解决排队问题 缺点: 不能保证任务被及时的执行 应用场景:去哪儿, 同步 优点:保证任务被及时的执行 缺点:排队问题 大并发 Web nginx 1000 ...
- C#中使用lockbits方法处理图像
转自 使用lockbits方法处理图像(转) 许多图像处理任务即时是最简单的文件类型转换,例如从32位深度到8位深度的格式转化,直接获得像素阵列要比使用GetPixel和SetPixel等方法的效率高 ...
- Linux运维常见故障排查和处理的33个技巧汇总
作为linux运维,多多少少会碰见这样那样的问题或故障,从中总结经验,查找问题,汇总并分析故障的原因,这是一个Linux运维工程师良好的习惯.每一次技术的突破,都经历着苦闷,伴随着快乐,可我们还是执着 ...
- 在linux下安装并操作tomcat
1.安装tomcat1).下载tomcat从官网http://tomcat.apache.org/下载tomcat,保存在/home目录下.root@ubuntu:/home/ubuntu/Downl ...
- restful返回 json数据的JavaBean设计01
public class ResponseEntity implements Serializable { private int errCode; private String message; p ...
- python's descriptor
[python's descriptor] 1.实现了以下三个方法任意一个的,且作为成员变量存在的对象,就是descriptor. 1)object.__get__(self, instance, o ...