[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. 테이블 생성하기

 - Table에 적용힐 CSS를 작성한다.

 <style>
        .largeText {
            font-size: 20px;
            color: blue;
        }

        .smallText {
            font-size: 10px;
            color: red;
        }

        .largePadding {
            padding: 10px;
        }

        .smallPadding {
            padding: 2px;
        }
        table{
            width: 100%;
        }
    </style>

- Html 테이블에 적용할 class들을 checkbox로 구현해둔다.

 <div class="container">
            <div>
                <label for="">테이블 테두리</label>
                <input type="checkbox" data-value="table-bordered">
            </div>
            <div> 
                <label for="">테이블 호버 클래스</label>
                <input type="checkbox" data-value="table-hover"></div>
            <div> 
                <label for="">테이블 줄무늬</label>
                <input type="checkbox" data-value="table-striped"></div>
            <div> 
                <label for="">테이블 어두운 테마 적용</label>
                <input type="checkbox" data-value="table-dark"></div>
            <div> 
                <label for="">테이블 테두리 없애기</label>
                <input type="checkbox" data-value="borderless"></div>
            <div> 
                <label for="">테이블 커스텀 큰 글자와 색깔</label>
                <input type="checkbox" data-value="largeText"></div>
            <div> 
                <label for="">테이블 커스텀 작은 글자와 색깔</label>
                <input type="checkbox" data-value="smallText"></div>
        </div>

 - JavaScript에서 checkbox의 변화가 있을 때, 테이블에 적용한다.

 // input 값의 변화 있을 경우 
            $('input').change(function () {
                // console.log(this)
                var classes = [];
                // check된 input 값의 data-value의 값을 통해서 class를 적용 
                $('input:checked').map(function () {
                    classes.push($(this).data("value"));
                });

                // array Classes를 join으로 class 형식으로 맞춰서 넣어준 후 , refresh 한다
                $table.bootstrapTable('refreshOptions', {
                    classes: classes.join(' ')
                })
            });

3. 결과화면

 -  checkbox 값 변화시 테이블 적용 결과


4. 전체코드

더보기

<!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">

    

        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->

    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">

    <style>

        .largeText {

            font-size20px;

            colorblue;

        }

 

        .smallText {

            font-size10px;

            colorred;

        }

 

        .largePadding {

            padding10px;

        }

 

        .smallPadding {

            padding2px;

        }

        table{

            width100%;

        }

    </style>

</head>

 

<body>

    <div id="wrap">

        <div class="pt-3"></div>

        <div class="container">

            <div>

                <label for="">테이블 테두리(table-bordered) </label>

                <input type="checkbox" data-value="table-bordered">

            </div>

            <div> 

                <label for="">테이블 호버 클래스(table-hover) </label>

                <input type="checkbox" data-value="table-hover"></div>

            <div> 

                <label for="">테이블 줄무늬(table-striped) </label>

                <input type="checkbox" data-value="table-striped"></div>

            <div> 

                <label for="">테이블 어두운 테마 적용(table-dark) </label>

                <input type="checkbox" data-value="table-dark"></div>

            <div> 

                <label for="">테이블 테두리 없애기(borderless) </label>

                <input type="checkbox" data-value="borderless"></div>

            <div> 

                <label for="">테이블 커스텀 큰 글자와 색깔(largeText) </label>

                <input type="checkbox" data-value="largeText"></div>

            <div> 

                <label for="">테이블 커스텀 작은 글자와 색깔(smallText) </label>

                <input type="checkbox" data-value="smallText"></div>

        </div>

        <div class="container">

            <!-- 테이블 생성 부분 -->

            <table id="table" data-width="460">

                <thead>

                    <tr>

                        <!-- JSON 값과 매칭될 field를 명시 -->

                        <th data-field="subject">학과</th>

                        <th data-field="name">이름</th>

                        <th data-field="number">학번</th>

                    </tr>

                </thead>

                <tbody>

                </tbody>

            </table>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"

        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script> -->

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

 

    <script>

        // document ready 

        $(function () {

            var $table = $("#table");

            // 테이블 표현할 데이터 표현

            var data = [

                {

                    "subject": "경영학과",

                    "name": "가나다",

                    "number": "20191234"

                },

                {

                    "subject": "체육학과",

                    "name": "알란",

                    "number": "20194567"

                },

                {

                    "subject": "심리학과",

                    "name": "구론",

                    "number": "20171227"

                },

                {

                    "subject": "국문학과",

                    "name": "트레비",

                    "number": "20097892"

                }

            ];

            $table.bootstrapTable({ data: data });

 

            // input 값의 변화 있을 경우 

            $('input').change(function () {

                // console.log(this)

                var classes = [];

                // check된 input 값의 data-value의 값을 통해서 class를 적용 

                $('input:checked').map(function () {

                    classes.push($(this).data("value"));

                });

 

                // array Classes를 join으로 class 형식으로 맞춰서 넣어준 후 , refresh 한다

                $table.bootstrapTable('refreshOptions', {

                    classes: classes.join(' ')

                })

            });

        });

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

댓글을 달아 주세요

[bootstrapTable] 부트스트랩 테이블 JSON 값으로 만들기 


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. 테이블 생성하기

 - Html 테이블 부분에서 field 값을 명시한다.

 <!-- 테이블 생성 부분 -->
            <table id="table">
                <thead>
                    <tr>
                        <!-- JSON 값과 매칭될 field를 명시 -->
                        <th data-field="subject">학과</th>
                        <th data-field="name">이름</th>
                        <th data-field="number">학번</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

- JavaScript 부분에서 데이터값과 테이블을 생성한다.

// document ready 
        $(function () {
            var $table = $("#table");
            // 테이블 표현할 데이터 표현
            var data = [
                {
                    "subject": "경영학과",
                    "name": "가나다",
                    "number": "20191234"
                },
                {
                    "subject": "체육학과",
                    "name": "알란",
                    "number": "20194567"
                },
                {
                    "subject": "심리학과",
                    "name": "구론",
                    "number": "20171227"
                },
                {
                    "subject": "심리학과",
                    "name": "구론",
                    "number": "20171227"
                }
            ];
            $table.bootstrapTable({ data: data })
        });

3. 결과화면


4. 전체코드

 

더보기

<!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>Hello, Bootstrap Table!</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">

    

        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->

    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">

</head>

 

<body>

    <div id="wrap">

        <div class="pt-3"></div>

        <div class="container">

            <!-- 테이블 생성 부분 -->

            <table id="table">

                <thead>

                    <tr>

                        <!-- JSON 값과 매칭될 field를 명시 -->

                        <th data-field="subject">학과</th>

                        <th data-field="name">이름</th>

                        <th data-field="number">학번</th>

                    </tr>

                </thead>

                <tbody>

                </tbody>

            </table>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"

        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script> -->

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

 

    <script>

        // document ready 

        $(function () {

            var $table = $("#table");

            // 테이블 표현할 데이터 표현

            var data = [

                {

                    "subject": "경영학과",

                    "name": "가나다",

                    "number": "20191234"

                },

                {

                    "subject": "체육학과",

                    "name": "알란",

                    "number": "20194567"

                },

                {

                    "subject": "심리학과",

                    "name": "구론",

                    "number": "20171227"

                },

                {

                    "subject": "국문학과",

                    "name": "트레비",

                    "number": "20097892"

                }

            ];

            $table.bootstrapTable({ data: data })

        });

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

댓글을 달아 주세요

[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. 결과화면


 

블로그 이미지

미나미나미

댓글을 달아 주세요

# Justify-content


- Justify-content : 내용에 대한 항목의 정렬 방법을 명시

    - start : 왼쪽 기준

    - end : 오른쪽 끝 기준

    - center : 가운데 기준
    - between / around


<div class="container">
        <!-- nav 적용  -->
        <p><h3>justify-content-start 적용</h3></p>
        <ul id="nav1" class="nav justify-content-start bg-light">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <!-- 구분선 -->
        <hr class="my-5">
        <p><h3>justify-content-center 적용</h3></p>
        <ul id="nav2" class="nav justify-content-center bg-light">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <!-- 구분선 -->
        <hr class="my-5">
        <p><h3>justify-content-end 적용</h3></p>
        <ul id="nav3" class="nav justify-content-end bg-light">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <!-- 구분선 -->
        <hr class="my-5">
        <p><h3>justify-content-between 적용</h3></p>
        <ul id="nav4" class="nav justify-content-between bg-light">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <!-- 구분선 -->
        <hr class="my-5">
        <p><h3>justify-content-around 적용</h3></p>
        <ul id="nav5" class="nav justify-content-around bg-light">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>

# 결과화면


# 전체코드

...더보기

<!doctype html>

<html lang="en">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap 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">

 

    <title>Hello, world!</title>

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</head>

 

<body>

    <div class="container">

        <!-- nav 적용  -->

        <p><h3>justify-content-start 적용</h3></p>

        <ul id="nav1" class="nav justify-content-start bg-light">

            <li class="nav-item">

                <a class="nav-link active" href="#">Home</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link2</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link3</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link4</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

 

        <!-- 구분선 -->

        <hr class="my-5">

        <p><h3>justify-content-center 적용</h3></p>

        <ul id="nav2" class="nav justify-content-center bg-light">

            <li class="nav-item">

                <a class="nav-link active" href="#">Home</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link2</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link3</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link4</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

 

        <!-- 구분선 -->

        <hr class="my-5">

        <p><h3>justify-content-end 적용</h3></p>

        <ul id="nav3" class="nav justify-content-end bg-light">

            <li class="nav-item">

                <a class="nav-link active" href="#">Home</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link2</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link3</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link4</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

 

        <!-- 구분선 -->

        <hr class="my-5">

        <p><h3>justify-content-between 적용</h3></p>

        <ul id="nav4" class="nav justify-content-between bg-light">

            <li class="nav-item">

                <a class="nav-link active" href="#">Home</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link2</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link3</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link4</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

 

        <!-- 구분선 -->

        <hr class="my-5">

        <p><h3>justify-content-around 적용</h3></p>

        <ul id="nav5" class="nav justify-content-around bg-light">

            <li class="nav-item">

                <a class="nav-link active" href="#">Home</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link2</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link3</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link4</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

    </div>

    <script>

        $(function () {

 

            // 좌측 정렬  

            $("#nav1 .nav-item > .active").css("color""red");

            $('#nav1 .nav-link').click(function () {

                // .nav-link 클릭시 이전의 active 값 해제 후, 

                $("#nav1 .nav-item > .active").css("color""#007bff");

                $('#nav1 .nav-link').removeClass('active');

 

                // 클릭한 위치 active 적용 

                $(this).addClass('active');

                $("#nav1 > .nav-item > .active").css("color""red");

            });

 

            // 중앙 정렬된 nav

            $("#nav2 .nav-item > .active").css("color""red");

            $('#nav2 .nav-link').click(function () {

                // .nav-link 클릭시 이전의 active 값 해제 후, 

                $("#nav2 .nav-item > .active").css("color""#007bff");

                $('#nav2 .nav-link').removeClass('active');

 

                // 클릭한 위치 active 적용 

                $(this).addClass('active');

                $("#nav2 > .nav-item > .active").css("color""red");

            });

        });

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

댓글을 달아 주세요

# nav 사용법 알아보기


- class = "nav" // nav 명시 

- class = "nav-item" // 항목추가

- class = "nav-link" // 항목추가



# body 코드 부분

<!-- nav 적용  -->
    <ul class="nav bg-light">
        <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link3</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link4</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>

    <script>
        $(function () {
            // actvie 활성화 
            $(".nav-item > .active").css("color", "red");
            
            $('.nav-link').click(function () {
                // .nav-link 클릭시 이전의 active 값 해제 후, 
                $(".nav-item > .active").css("color", "#007bff");
                $('.nav-link').removeClass('active');

                // 클릭한 위치 active 적용 
                $(this).addClass('active');
                $(".nav-item > .active").css("color", "red");
            });
        });
    </script>

# 전체코드

...더보기

<!doctype html>

<html lang="en">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap 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">

 

    <title>Hello, world!</title>

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</head>

 

<body>

    <!-- nav 적용  -->

    <ul class="nav bg-light">

        <li class="nav-item">

            <a class="nav-link active" href="#">Home</a>

        </li>

        <li class="nav-item">

            <a class="nav-link" href="#">Link1</a>

        </li>

        <li class="nav-item">

            <a class="nav-link" href="#">Link2</a>

        </li>

        <li class="nav-item">

            <a class="nav-link" href="#">Link3</a>

        </li>

        <li class="nav-item">

            <a class="nav-link" href="#">Link4</a>

        </li>

        <li class="nav-item">

            <a class="nav-link disabled" href="#">Disabled</a>

        </li>

    </ul>

 

    <script>

        $(function () {

            // actvie 활성화 

            $(".nav-item > .active").css("color""red");

            

            $('.nav-link').click(function () {

                // .nav-link 클릭시 이전의 active 값 해제 후, 

                $(".nav-item > .active").css("color""#007bff");

                $('.nav-link').removeClass('active');

 

                // 클릭한 위치 active 적용 

                $(this).addClass('active');

                $(".nav-item > .active").css("color""red");

            });

        });

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

댓글을 달아 주세요

# 점보트론(jumbotron) 사용하기


- <div class="jumbotron">

   : 테두리가 라운드가 있는 점보트론 

- <div class="jumbotron jumbotron-fluid">

    : 테두리가 직각으로 적용되어있고, 전체화면을 사용할때 적용 

 


# 테스트코드

<!-- bootstrap의 container을 사용 -->
    <div class="mt-3"></div>

    <div class="jumbotron mx-4">
        <div class="container">
            <h1>jumbotron Tutorial</h1>
            <p>이 곳에 jumbotron의 경우 round가 적용되어있습니다.</p>
            <p>containr를 사용</p>
        </div>
    </div>

    <div class="jumbotron mx-4">
        <div class="container-fluid">
            <h1>jumbotron Tutorial</h1>
            <p>이 곳에 jumbotron의 경우 round가 적용되어있습니다.</p>
            <p>containr-fluid를 사용</p>
        </div>
    </div>

    <!-- 수평선 긋기 -->
    <hr class="my-2">
    <div class="jumbotron jumbotron-fluid mx-4">
        <div class="container">
            <h1>jumbotron jumbotron-fluid Tutorial</h1>
            <p>이 곳에 jumbotron의 경우 round가 적용되어있지 않습니다.</p>
            <p>containr를 사용</p>
        </div>
    </div>

    <!-- 수평선 긋기 -->
    <hr class="my-2">
    <div class="jumbotron jumbotron-fluid mx-4">
        <div class="container-fluid">
            <h1>jumbotron jumbotron-fluid Tutorial</h1>
            <p>이 곳에 jumbotron의 경우 round가 적용되어있지 않습니다.</p>
            <p>containr-fluid를 사용</p>
        </div>
    </div>


    <!-- 수평선 긋기 -->
    <hr class="my-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">

 

    <!-- Bootstrap 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">

 

    <title>Hello, world!</title>

</head>

 

<body>

    <!-- bootstrap의 container을 사용 -->

    <div class="mt-3"></div>

 

    <div class="jumbotron mx-4">

        <div class="container">

            <h1>jumbotron Tutorial</h1>

            <p>이 곳에 jumbotron의 경우 round가 적용되어있습니다.</p>

            <p>containr를 사용</p>

        </div>

    </div>

 

    <div class="jumbotron mx-4">

        <div class="container-fluid">

            <h1>jumbotron Tutorial</h1>

            <p>이 곳에 jumbotron의 경우 round가 적용되어있습니다.</p>

            <p>containr-fluid를 사용</p>

        </div>

    </div>

 

    <!-- 수평선 긋기 -->

    <hr class="my-2">

    <div class="jumbotron jumbotron-fluid mx-4">

        <div class="container">

            <h1>jumbotron jumbotron-fluid Tutorial</h1>

            <p>이 곳에 jumbotron의 경우 round가 적용되어있지 않습니다.</p>

            <p>containr를 사용</p>

        </div>

    </div>

 

    <!-- 수평선 긋기 -->

    <hr class="my-2">

    <div class="jumbotron jumbotron-fluid mx-4">

        <div class="container-fluid">

            <h1>jumbotron jumbotron-fluid Tutorial</h1>

            <p>이 곳에 jumbotron의 경우 round가 적용되어있지 않습니다.</p>

            <p>containr-fluid를 사용</p>

        </div>

    </div>



    <!-- 수평선 긋기 -->

    <hr class="my-2">

 

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</body>

 

</html>

블로그 이미지

미나미나미

댓글을 달아 주세요

# Display를 사용해보자.


<!-- bootstrap의 container을 사용 -->
    <div class="container">
        <!-- 수평선 긋기 -->
        <h1>Display : 화면 표제를 깔끔하게 표현하기</h1>
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <h1 class="display-1">display-1</h1>
        <div>(font-size: 6rem , font-weight: 300, line-height: 1.2)</div>
        
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <h1 class="display-2">display-2</h1>
        <div>(font-size: 5.5rem; font-weight: 300; line-height: 1.2;)</div>
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <h1 class="display-3">display-3</h1>
        <div>(font-size: 4.5rem; font-weight: 300; line-height: 1.2;)</div>
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <h1 class="display-4">display-4</h1>
        <div>(font-size: 3.5rem; font-weight: 300; line-height: 1.2;)</div>
        <!-- 수평선 긋기 -->
        <hr class="my-2">
    </div>

# 결과화면


# 전체코드

...더보기

<!doctype html>

<html lang="en">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap 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">

 

    <title>Hello, world!</title>

</head>

 

<body>

    <div class="container my-2">

        <!-- 점보트론은 웹사이트의 주요 메시지를 크게 보여주는 전광판 -->

        <div class="jumbotron">

            <!-- display를 사용하며 크기를 지정 -->

            <h1 class="display-2">Hello</h1>

            <!-- 강조 문단 글-->

            <p class="lead">This is jumbotron</p>

            <!-- y축 기준으로 4만큼 여백 , 상하 여백 -->

            <hr class="my-4">

            <p>Hello , world ! Hello, Jumbortron!</p>

            <p class="lead">

                <!-- a 위치는 -->

                <a class="btn btn-primary btn-lg" href="#">GO</a>

            </p>

        </div>

    </div>

 

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</body>

 

</html>

블로그 이미지

미나미나미

댓글을 달아 주세요

# 부트스트랩(Bootstrap) 공백(Spacing) 주기 


- M/P 의 의미

       - M : Margin을 의미

       - P : Padding을 의미


- t , b , l , r ,x , y  의 의미

       - t : top을 의미 

       - b : bottom을 의미

       - l : left을 의미

       - r : right을 의미

       - x : x축 -> left , right을 의미

       - y : y축 -> top , bottom을 의미


- 0, 1, 2, 3, 4, 5, auto  의 의미

       - 0 : 0

       - 1 : .25rem( font-size가 16px이면, 4px) 크기

       - 2 : .5rem( font-size가 16px이면, 8px) 크기

       - 3 : 1rem( font-size가 16px이면, 16px) 크기

       - 4 : 1.5rem( font-size가 16px이면, 24px) 크기

       - 5 : 3rem( font-size가 16px이면, 48px) 크기

       - auto : margin의 자동으로 세팅


- 0, 1, 2, 3, 4, 5, auto  의 의미

       - 0 : 0

       - 1 : .25rem( font-size가 16px이면, 4px) 크기

       - 2 : .5rem( font-size가 16px이면, 8px) 크기

       - 3 : 1rem( font-size가 16px이면, 16px) 크기

       - 4 : 1.5rem( font-size가 16px이면, 24px) 크기

       - 5 : 3rem( font-size가 16px이면, 48px) 크기

       - auto : margin의 자동으로 세팅


- n1, n2, n3, n4, n5 의 의미 

   - n : negative을 의미

       - n1 : -.25rem( font-size가 16px이면, -4px) 크기

       - n2 : -.5rem( font-size가 16px이면, -8px) 크기

       - n3 : -1rem( font-size가 16px이면, -16px) 크기

       - n4 : -1.5rem( font-size가 16px이면, -24px) 크기

       - n5 : -3rem( font-size가 16px이면, -48px) 크기


# 테스트 코드 

 <div class="container">
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">margin 테스트</div>
        <div class="m-1 bg-warning"> m-1 => top, bottom, left, right에 .25rem 만큼 margin </div>
        <div class="m-3 bg-primary"> m-3 => top, bottom, left, right에 1rem 만큼 margin </div>
        <div class="m-5 bg-danger"> m-5 => top, bottom, left, right에 3rem 만큼 margin </div>

        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">margin X,Y 테스트</div>
        <div class="mx-3 bg-primary"> m-3 => left, right에 1rem 만큼 margin </div>
        <div class="my-3 bg-danger"> m-3 => top, bottom에 1rem 만큼 margin </div>
        
        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">padding 테스트</div>
        <div class="p-1 bg-warning"> p-1 => top, bottom, left, right에 .25rem 만큼 padding </div>
        <div class="p-3 bg-primary"> p-3 => top, bottom, left, right에 1rem 만큼 padding </div>
        <div class="p-5 bg-danger"> p-5 => top, bottom, left, right에 3rem 만큼 padding </div>

        <!-- 수평선 긋기 -->
        <hr class="my-2">
        <div class="bg-secondary">padding X ,Y 테스트</div>
        <div class="px-3 bg-danger"> px-3 => left, right에 1rem 만큼 padding  </div>
        <div class="py-3 bg-primary"> px-3 => top, bottom에 1rem 만큼 padding </div>
        
        <!-- 수평선 긋기 -->
        <hr class="my-2">
    </div>

# 결과화면 


# 전체코드

...더보기

<!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">

 

    <!-- Bootstrap 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">

 

    <title>Hello, world!</title>

</head>

 

<body>

    <!-- bootstrap의 container을 사용 -->

    <div class="container">

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">margin 테스트</div>

        <div class="m-1 bg-warning"> m-1 => top, bottom, left, right에 .25rem 만큼 margin </div>

        <div class="m-3 bg-primary"> m-3 => top, bottom, left, right에 1rem 만큼 margin </div>

        <div class="m-5 bg-danger"> m-5 => top, bottom, left, right에 3rem 만큼 margin </div>

 

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">margin X,Y 테스트</div>

        <div class="mx-3 bg-primary"> m-3 => left, right에 1rem 만큼 margin </div>

        <div class="my-3 bg-danger"> m-3 => top, bottom에 1rem 만큼 margin </div>

        

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">padding 테스트</div>

        <div class="p-1 bg-warning"> p-1 => top, bottom, left, right에 .25rem 만큼 padding </div>

        <div class="p-3 bg-primary"> p-3 => top, bottom, left, right에 1rem 만큼 padding </div>

        <div class="p-5 bg-danger"> p-5 => top, bottom, left, right에 3rem 만큼 padding </div>

 

        <!-- 수평선 긋기 -->

        <hr class="my-2">

        <div class="bg-secondary">padding X ,Y 테스트</div>

        <div class="px-3 bg-danger"> px-3 => left, right에 1rem 만큼 padding  </div>

        <div class="py-3 bg-primary"> px-3 => top, bottom에 1rem 만큼 padding </div>

        

        <!-- 수평선 긋기 -->

        <hr class="my-2">

    </div>

 

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</body>

 

</html>

블로그 이미지

미나미나미

댓글을 달아 주세요