부트스트랩 테이블 Layout 구조 파악

https://startbootstrap.com/template-overviews/sb-admin-2/ 사이트에서 무료 Layout 을 하나 받아서 분석을 해봤다.

전체적인 Layout 구조하에서 테이블 Layout 이 어떻게 배치되는지를 집중적으로 분석했다.

테이블 Layout 구글검색을 해도 실제 테이블 부분만 다루고 있더라.

전체 Layout 에서 배치되는 영역까지는 찾아보기가 쉽지 않다.

본문 영역에 테이블이 배치되는 구조는 아래와 같다.

<div id="page-wrapper">

<div class="row"></div> <!-- 하나의 테이블 처리 div -->
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>

</div>

css 파일에는 PC와 스마트폰(768px 이하)로 구분 처리하고 있다.

css 파일을 본인이 작성하는 css 에 내용을 추가하거나 상황에 맞게 수정해서 사용하면 된다.

#page-wrapper {
  padding: 0 15px;
  min-height: 568px;
  background-color: white;
}
@media (min-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 250px;
    padding: 0 30px;
    border-left: 1px solid #e7e7e7;
  }
}

/* 세로 방향 타블렛부터 가로 방향 타블렛과 데스크탑까지 */  @media (min-width: 768px) and (max-width: 979px) { ... }    /* 가로 방향 스마트폰부터 세로 방향 타블렛까지 */  @media (max-width: 767px) { ... }    /* 가로 방향 스마트폰 이하 */  @media (max-width: 480px) { ... }

The Bootstrap grid system has four classes:  - xs (for phones)  - sm (for tablets)  - md (for desktops)  - lg (for larger desktops)

<div class="col-lg-12"> 를 적용하면 PC화면에 하나의 테이블이 화면 전체를 채운다.

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                테이블 제목 1
            </div>
            <div class="panel-body">
                <table width="100%" class="table table-striped table-hover" id="tables-example">
                    <thead>
                        <tr>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                        </tr>
                    </tbody>
                </table>
            </div><!-- .panel-body -->
        </div><!-- .panel -->
    </div><!-- .col-lg-12 -->
</div><!-- .row -->

만약 공지사항이나 메인화면처럼 화면에 여러개의 테이블을 표시하고 싶은 경우, 즉 왼쪽과 오른쪽에 두개의 테이블을 배치하고 싶은 경우에는 어떻께 할까?

<div class="col-lg-12"> 의 절반인 <div class="col-lg-6"> 를 두개 표시해준다.

그러면 PC화면에서는 2개의 테이블이 나란히 보이고 스마트폰에서는 자동으로 한테이블씩 나열해서 보여준다.

<div class="row">
    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                테이블 제목 2
            </div>
            <div class="panel-body">
                <table width="100%" class="table table-striped table-hover" id="tables-example">
                    <thead>
                        <tr>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                        </tr>
                    </tbody>
                </table>
            </div><!-- .panel-body -->
        </div><!-- .panel -->
    </div><!-- .col-lg-6 -->
</div><!-- .row -->

<div class="row">
    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                테이블 제목 3
            </div>
            <div class="panel-body">
                <table width="100%" class="table table-striped table-hover" id="tables-example">
                    <thead>
                        <tr>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                        </tr>
                    </tbody>
                </table>
            </div><!-- .panel-body -->
        </div><!-- .panel -->
    </div><!-- .col-lg-6 -->
</div><!-- .row -->

이제 기존에 어설프게 table layout 처리했던 걸 전체 Layout 상에서 움직이도록 수정해야겠다.

기존에 작성 연습했던 topmenu.php Layout 과 조합해서 구조를 그려보자.

sidebar 는 2, content 는 10 (bootstrap grid system 은 12개의 화면 분할 구조로 처리)

<main class="container-fluid">
    <div class="container main-container">
        <div class="col-md-2 sidebar">
            <div class="row">
            </div>
        </div>

        <!-- Main 화면 -->
        <div class="col-md-10 content">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">

                        <div class="panel-heading">

                           <!-- 제목 적어주기 -->

                        </div>

                        <div class="panel-body">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>