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 if判断
php if判断 例子如下: True是否等于False 变量haq是不是老婆呢? <?php $ts=true; $f=false; if (isset($ts)&&isset ...
- 13_java之final|static|包|匿名对象|代码块|内部类
01final关键字概念 * A: 概述 继承的出现提高了代码的复用性,并方便开发.但随之也有问题,有些类在描述完之后,不想被继承, 或者有些类中的部分方法功能是固定的,不想让子类重写.可是当子类继承 ...
- 为什么stm32有的外设在进行初始化的时候需要将寄存器重设为缺省值？不设置会怎么样？
首先,缺省值就是默认值的意思,默认值可以理解为设计芯片的人认为用这个参数,比较适中,起码不可能耽误你对某一模块进行驱动.然后,为什么除了默认值(缺省值),还有这么多其他的参数可以进行选择呢,那就要看你 ...
- Spring MVC起步
1.1跟踪Spring MVC的请求 每当用户在Web浏览器中点击链接或提交表单的时候,请求就开始工作了.对请求的工作描述就像是快递投送员.与邮局投递员或FedEx投送员一样,请求会将信息从一个地方带 ...
- AE 遍历栅格实现栅格重分类（C#实现）
下面要讲的种重分类方法,网上很多.但是好像 System.Array pSafeArray = pPixelBlock.get_SafeArray(0) as System.Array;这一句一直报下 ...
- leetcode744
public class Solution { public char NextGreatestLetter(char[] letters, char target) { //a-97 z-122 v ...
- node / npm 配置问题
安装nodejs 后运行 npm 命令无响应处理方法 安装和卸载过nodejs, 也编辑过 C:\Users\{账户}\下的.npmrc文件. 再全新安装nodejs ,运行npm 命令,无响应. 处 ...
- angular.module方法
关于module的定义为:angular.module(‘com.ngbook.demo’, []).关于module函数可以传递3个参数,它们分别为: name:模块定义的名称,它应该是一个唯一的必 ...
- PHP - 模拟HTTP请求， stream_context_create 和 fopen 和 fsockopen
一.fsocketopen,使用这个的过程看起来更像别的语言的socket编程 public function send($request) { /* 请求数据 */ $post_data = $re ...
- 关于junit包导入不了但是maven本地库中却存在的问题
导入项目的时候发现junit的类使用不了,于是就去看看包导入了没有 发现包是灰色的,于是猜想可能是maven本地库中包没下载过来 查询了本地库发现包是存在的,这就奇怪的,经过网上查询之后得到解决方案 ...