[Bootstrap]

[Bootstrap Table] bootstrapTable Html로 생성하기

미나미나미 2019. 12. 13. 20:38

[Bootstrap Table] 부트스트랩 테이블 (bootstrapTable) 생성하기

1. 필요한 라이브러리

     -JavaScript 

 <!--  Jquery 가져오기 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- bootstrap 가져오기 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <!-- bootstrap table 가져오기  -->
    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

     - CSS

<!-- 부트스트랩 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- 부트스트랩 테이블 -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">

 

2. 테이블 생성하기 

<!doctype html>
<html lang="ko">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>부트스트랩 테이블 만들기</title>

    <!-- 부트스트랩 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- 부트스트랩 테이블 -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
</head>

<body>
    <!-- bootstrap container -->
    <div class="container">
        <!-- bootstrap 테이블 생성 -->
        <table data-toggle="table">
            <thead>
                <tr>
                    <th>학과</th>
                    <th>이름</th>
                    <th>학번</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>경영학과</td>
                    <td>가나다</td>
                    <td>20191234</td>
                </tr>
                <tr>
                    <td>체육학과</td>
                    <td>알란</td>
                    <td>20194567</td>
                </tr>
                <tr>
                    <td>심리학과</td>
                    <td>구론</td>
                    <td>20171227</td>
                </tr>
                <tr>
                    <td>심리학과</td>
                    <td>구론</td>
                    <td>20171227</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--  Jquery 가져오기 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- bootstrap 가져오기 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <!-- bootstrap table 가져오기  -->
    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
</body>

</html>

 

3. 결과화면

 

저작자표시 비영리 변경금지