bootstrap/hr.bootstrap.html at master · InseopS/bootstrap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<head>
    <title>hr</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js'></script>
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' />
    <link rel='stylesheet' href='http://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' />
</head>

<body>
    <div class='container'>
        <div class='row'>
            <div class='col'>
                <header class='jumbotron p-2'>
                    <h1 class='text-center'>HR</h1>
                </header>
            </div>
        </div>
        <div class='row'>
            <div class='col'>
                <form>
                    <div class='row mb-3'>
                        <div class='col-2'>
                            <input type='text' class='form-control' placeholder='노동자명' />
                        </div>
                        <div class='col-4'>
                            <input type='date' class='form-control' />
                        </div>
                        <div class='col'>
                            <nav class='d-flex'>
                                <button type='button' class='btn btn-success flex-fill mr-1'>
                                    <i class='fas fa-plus'></i>
                                    <sapn class='label d-none d-sm-inline'>추가</sapn>
                                </button>
                                <button type='button' class='btn btn-info flex-fill mr-1'>
                                    <i class='fas fa-edit'></i><span class='label d-none d-sm-inline'>수정</span>
                                </button>
                                <button type='button' class='btn btn-warning flex-fill' data-toggle='modal'
                                    data-target='#delLaborerModal'>
                                    <i class='fas fa-trash-alt'></i><span class='label d-none d-sm-inline'>삭제</span>
                                </button>
                            </nav>
                        </div>
                    </div>
                    <div class='row'>
                        <div class='col'>
                            <table class='table'>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>ID</th>
                                        <th>이름</th>
                                        <th>입사일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type='radio' /></td>
                                        <td>12</td>
                                        <td>최한석</td>
                                        <td>2025-05-15</td>
                                    </tr>
                                    <tr>
                                        <td><input type='radio' /></td>
                                        <td>13</td>
                                        <td>한아름</td>
                                        <td>2027-07-17</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class='modal fade' tabindex='-1' id='delLaborerModal'>
        <div class='modal-dialog'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' dismiss='modal'>
                        <span>&times;</span>
                    </button>
                </div>
                <div class='modal-body'>
                    <p>노동자를 삭제하시겠습니까?</p>
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-secondary' data-dismiss='modal'>아니오</button>
                    <button type='button' class='btn btn-primary'>예</button>
                </div>
            </div>
        </div>
    </div>
</body>