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 handling an exception
#try...except... try: You do your operations here; ...................... except ExceptionI: If ther ...
- CSS 引用外部字体
@font-face { font-family: W5; src: url('../font/W5.TTF'); } .wallect .wal_body .textBox{ font-family ...
- [Z]shell变量详解
原文:http://www.cnblogs.com/barrychiao/archive/2012/10/22/2733210.html 1 shell变量基础shell变量是一种很“弱”的变量,默认 ...
- 关于网页中行内元素的基线(baseline)、行高(line-height)、垂直对齐(vertical-align)等
CSS基线之道 http://www.qianduan.net/css-baseline-road.html 垂直对齐:vertical-align属性 http://www.ddcat.net/bl ...
- [ExtJs6] 环境搭建及创建项目
1. 环境搭建 sencha cmd 和 extjs6 sdk. sencha cmd: https://www.sencha.com/products/extjs/cmd-download/ ext ...
- C# 在根据窗体中的表格数据生成word文档时出错
出错内容为:
- 避免IE在ajax请求时，返回json出现下载
转自:https://blog.csdn.net/z521q1314/article/details/54409048
- Lambda表达式在Android开发中的应用
在Java8中拥有Lambda表达式的新功能,如果现在Android项目中使用,首先,必须在项目中的build.gradle配置一下 使用Lambda表达式必须满足只有一个待实现方法这个规则,否则就不 ...
- 搭建Git Server － 个人开发简单搭建
###################### 教程一 ####################### 1. 创建git用户和用户组 #新建一个git用户组 sudo groupadd git #新建一 ...
- 高性能Web服务器Nginx的配置与部署研究（2）Nginx入门级配置与部署及“Hello World”
1. Nginx 程序包 目前最新的开发版本时1.1.12: Linux/Unix:nginx-1.1.12.tar.gz Windows:nginx-1.1.12.zip 我们可以下载稳定版尝试: ...