13、Semantic-UI之表格與表單
阿新 • • 發佈：2019-01-17
title pre election 20px add 亮顯 3.5 set tex
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之表格與表單