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> ...
随机推荐
- 设置请求头解决浏览器同源问题,ajx跨域获取cookie问题
思想: 添加过滤器 设置请求头 代码如下 import java.io.IOException; import javax.servlet.Filter; import javax.servlet.F ...
- 四、jenkins+postman+newman环境搭建
前提: 搭建环境之前需要先理清楚各个环境的依赖关系,jenkins只支持windows命令行跟linux shell环境执行构建命令,而postman的测试脚本不能直接在命令行或shell环境执行,p ...
- C命令行参数
总是忘了,在这里说明下. argc是命令行参数的实际个数,从1开始. 第一个是可执行文件的名称 argv[]的元素是字符串 每个元素是个命令行参数. #include<stdio.h> i ...
- Rhythmk 一步一步学 JAVA（4）:Spring MVC -之拦截器
1.实现拦截器类(myInterceptor): package com.rhythmk.Interceptor; import javax.servlet.http.HttpServletReque ...
- C# 项目开发笔记
这里主要记录一些容易错的内容,在项目开发中总结出来的经验和教训. 1 语法 (1)判断float是否为Nan,不能使用 xxx = flaot.Nan去做,要使用float.IsNan去做. (2)u ...
- Microsoft.Office.Core 引用以及 Microsoft.Office.Core.MsoTriState 的问题
转自原文 xiaoanian, Microsoft.Office.Core 引用以及 Microsoft.Office.Core.MsoTriState 的问题 因为要做一个提取ppt文字的工程,第一 ...
- python查找文件相同的和包含汉字的
#!/usr/bin/env python # Version = 3.5.2 import os import time d_path = '/data/media' log_file = 'res ...
- Selinux相关
SELinux相关的工具 /usr/bin/setenforce 修改SELinux的实时运行模式 setenforce 1 设置SELinux 成为enforcing模式 setenforce 0 ...
- dart 公共变量
dart中可以直接在一个文件里声明一个变量,这在其他语言中并不常见,比如c#语言只有类型才可以在命名空间下定义,变量必须放在类里声明 所以dart这点特性类似于js 今天就来讨论这个公共变量的作用范围 ...
- 转载--js对象无法当成参数传递
今天我碰到了这个问题一头雾水,明明记得对象是可以传参的啊.我使用了一款基于bootstrap的表格插件DataTables,想把行信息直接传给操作函数,方便编辑(此行信息是一个对象,按道理可以的啊), ...