简介
官网
Semantic UI 是一个 UI 库,使前端开发更简单
使用方法
需引入的css与java
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
以下是一个引用semantic ui的表格案例
Tabledemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
</head>
<body>
<p>text</p>
<div class="ui inverted segment">
<table class="ui inverted table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
</tbody>
<tfoot>
<tr><th>3 People</th>
<th>2 Approved</th>
<th></th>
</tr></tfoot>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
</body>
</html>