todolist html (ok)
Last updated
Was this helpful?
Last updated
Was this helpful?
C:\Users\Administrator\Desktop\html\index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/app.css">
<title>React App</title>
</head>
<body>
<div class="container">
<div class="text-center">
<h1>Quản Lý Công Việc</h1>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">
Thêm Công Việc
<span class="fa fa-times-circle text-right"></span>
</h3>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label>Tên :</label>
<input type="text" class="form-control" name="name" value="" />
</div>
<label>Trạng Thái :</label>
<select class="form-control" value="" name="status">
<option value="1">Kích Hoạt</option>
<option value="0">Ẩn</option>
</select><br />
<div class="text-center">
<button type="submit" class="btn btn-warning">
<span class="fa fa-plus mr-5"></span>Lưu Lại
</button>
<button type="button" class="btn btn-danger">
<span class="fa fa-close mr-5"></span>Hủy Bỏ
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<button type="button" class="btn btn-primary mr-5">
<span class="fa fa-plus mr-5"></span>Thêm Công Việc
</button>
<button type="button" class="btn btn-danger">
Generate Data
</button>
<div class="row mt-15">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="input-group">
<input name="keyword" type="text" class="form-control" placeholder="Nhập từ khóa..." />
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="fa fa-search mr-5"></span>Tìm
</button>
</span>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Sắp Xếp
<span class="fa fa-caret-square-o-down ml-5"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a role="button" class="sort_selected">
<span class="fa fa-sort-alpha-asc pr-5">Tên A-Z</span>
</a>
</li>
<li>
<a role="button" class="">
<span class="fa fa-sort-alpha-desc pr-5">Tên Z-A</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a role="button" class="">Trạng Thái Kích Hoạt</a>
</li>
<li>
<a role="button" class="">Trạng Thái Ẩn</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row mt-15">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th class="text-center">STT</th>
<th class="text-center">Tên</th>
<th class="text-center">Trạng Thái</th>
<th class="text-center">Hành Động</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
<input type="text" class="form-control" name="filterName" />
</td>
<td>
<select class="form-control" name="filterStatus">
<option value="-1">Tất Cả</option>
<option value="0">Ẩn</option>
<option value="1">Kích Hoạt</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>San Pham Moi</td>
<td class="text-center">
<span class="label label-info">Ẩn</span>
</td>
<td class="text-center">
<button type="button" class="btn btn-warning">
<span class="fa fa-pencil mr-5"></span>Sửa
</button>
<button type="button" class="btn btn-danger">
<span class="fa fa-trash mr-5"></span>Xóa
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Sản phẩm mới</td>
<td class="text-center">
<span class="label label-danger">Kích Hoạt</span>
</td>
<td class="text-center">
<button type="button" class="btn btn-warning">
<span class="fa fa-pencil mr-5"></span>Sửa
</button>
<button type="button" class="btn btn-danger">
<span class="fa fa-trash mr-5"></span>Xóa
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>C:\Users\Administrator\Desktop\html\css\app.css
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
.mt-15 {
margin-top: 15px;
}
.mr-5 {
margin-right: 5px;
}
.ml-5 {
margin-left: 5px;
}
.pr-5 {
padding-right: 5px;
}
.dropdown-menu .fa:before {
padding-right: 10px;
}
.text-right {
float: right;
cursor: pointer;
}
.text-right:hover {
color: red;
}
.sort_selected::after {
content: "\f00c";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin: 0px 0px 0px 10px;
display: inline-block;
}
C:\Users\Administrator\Desktop\test2\src\App.tsx
import * as React from 'react';
import './App.css';
interface IAppProps { [propName: string]: any }
interface IAppState {
}
class App extends React.Component<IAppProps, IAppState> {
constructor(props: IAppProps, obj: IAppState) {
super(props);
this.state = {
};
}
public render() {
return (
<div className="container">
<div className="text-center">
<h1>Quản Lý Công Việc</h1>
</div>
<div className="row">
<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div className="panel panel-warning">
<div className="panel-heading">
<h3 className="panel-title">
Thêm Công Việc
<span className="fa fa-times-circle text-right" />
</h3>
</div>
<div className="panel-body">
<form>
<div className="form-group">
<label>Tên :</label>
<input type="text" className="form-control" name="name" />
</div>
<label>Trạng Thái :</label>
<select className="form-control" name="status">
<option value={1}>Kích Hoạt</option>
<option value={0}>Ẩn</option>
</select><br />
<div className="text-center">
<button type="submit" className="btn btn-warning">
<span className="fa fa-plus mr-5" />Lưu Lại
</button>
<button type="button" className="btn btn-danger">
<span className="fa fa-close mr-5" />Hủy Bỏ
</button>
</div>
</form>
</div>
</div>
</div>
<div className="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<button type="button" className="btn btn-primary mr-5">
<span className="fa fa-plus mr-5" />Thêm Công Việc
</button>
<button type="button" className="btn btn-danger">
Generate Data
</button>
<div className="row mt-15">
<div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div className="input-group">
<input name="keyword" type="text" className="form-control" placeholder="Nhập từ khóa..." />
<span className="input-group-btn">
<button className="btn btn-primary" type="button">
<span className="fa fa-search mr-5" />Tìm
</button>
</span>
</div>
</div>
<div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div className="dropdown">
<button className="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sắp Xếp
<span className="fa fa-caret-square-o-down ml-5" />
</button>
<ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a href="https://github.com" role="button" className="sort_selected">
<span className="fa fa-sort-alpha-asc pr-5">Tên A-Z</span>
</a>
</li>
<li>
<a href="https://github.com" role="button">
<span className="fa fa-sort-alpha-desc pr-5">Tên Z-A</span>
</a>
</li>
<li role="separator" className="divider" />
<li>
<a href="https://github.com" role="button">Trạng Thái Kích Hoạt</a>
</li>
<li>
<a href="https://github.com" role="button">Trạng Thái Ẩn</a>
</li>
</ul>
</div>
</div>
</div>
<div className="row mt-15">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table className="table table-bordered table-hover">
<thead>
<tr>
<th className="text-center">STT</th>
<th className="text-center">Tên</th>
<th className="text-center">Trạng Thái</th>
<th className="text-center">Hành Động</th>
</tr>
</thead>
<tbody>
<tr>
<td />
<td>
<input type="text" className="form-control" name="filterName" />
</td>
<td>
<select className="form-control" name="filterStatus">
<option value={-1}>Tất Cả</option>
<option value={0}>Ẩn</option>
<option value={1}>Kích Hoạt</option>
</select>
</td>
<td />
</tr>
<tr>
<td>1</td>
<td>San Pham Moi</td>
<td className="text-center">
<span className="label label-info">Ẩn</span>
</td>
<td className="text-center">
<button type="button" className="btn btn-warning">
<span className="fa fa-pencil mr-5" />Sửa
</button>
<button type="button" className="btn btn-danger">
<span className="fa fa-trash mr-5" />Xóa
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Sản phẩm mới</td>
<td className="text-center">
<span className="label label-danger">Kích Hoạt</span>
</td>
<td className="text-center">
<button type="button" className="btn btn-warning">
<span className="fa fa-pencil mr-5" />Sửa
</button>
<button type="button" className="btn btn-danger">
<span className="fa fa-trash mr-5" />Xóa
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;C:\Users\Administrator\Desktop\test2\public\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css" />
<title>React App</title>
</head>
<body>
<div id="root" class="container"></div>
<script src="%PUBLIC_URL%/js/jquery-3.3.1.min.js"></script>
<script src="%PUBLIC_URL%/js/bootstrap.min.js"></script>
</body>
</html>