Bootstrap 4일차

1. 네비게이션 바

웹사이트의 상단에 위치하여 주요 메뉴 및 서브 메뉴를 표시

기본 네비게이션 바

<h1 class="text-success text-center">네비게이션바 구현</h1>
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand glyphicon" href="main.jsp"><span class="glyphicon glyphicon-home"></span></a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">공지사항</a></li>
                <li><a href="#">자유게시판</a></li>
                <li><a href="#">Q&A</a></li>
            </ul>
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="검색어 입력">
                </div>
                <button type="button" class="btn btn-default">Submit</button>
            </form>
        </div>
    </nav>
</div>

드롭다운 네비게이션 바

<h1 class="text-success text-center">네비게이션바 구현</h1>
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand glyphicon" href="main.jsp"><span class="glyphicon glyphicon-home"></span></a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a data-toggle="dropdown" href="#">사용자<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a role="menuitem" tabindex="-1" href="#">회원로그인</a></li>
                        <li><a role="menuitem" tabindex="-1" href="#">자유게시판</a></li>
                        <li><a role="menuitem" tabindex="-1" href="#">설문조사</a></li>
                        <li class="divider"></li>
                        <li><a role="menuitem" href="#">관리자</a></li>
                    </ul>
                </li>
                <li><a href="#">공지사항</a></li>
                <li><a href="#">자유게시판</a></li>
                <li><a href="#">Q&A</a></li>
            </ul>
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="검색어 입력">
                </div>
                <button type="button" class="btn btn-default">Submit</button>
            </form>
        </div>
    </nav>
</div>

2. 페이지네이션

여러 페이지로 구성된 콘텐츠를 쉽게 탐색할 수 있게 해주는 기능

기본 페이지네이션

<h1>경로와 페이지네이션</h1>
<div class="container">
    <h4>경로 (breadcrumb)</h4>
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
    </ol>
    <h4>페이지네이션</h4>
    <ul class="pagination">
        <li><a href="#"><<</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li class="disabled"><a href="#">10</a></li>
        <li><a href="#">>></a></li>
    </ul>
</div>

페이지네이션 크기 및 정렬

<h1>페이지네이션 크기 및 정렬(이전, 다음)</h1>
<div class="container">
    <ul class="pagination pagination-lg">
        <li class="disabled"><a href="#"><<</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">>></a></li>
    </ul>
    <hr>
    <ul class="pagination pagination-sm">
        <li class="disabled"><a href="#"><<</a></li>
        <li class="active"><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li class="disabled"><a href="#">10</a></li>
        <li><a href="#">>></a></li>
    </ul>
    <hr>
    <h4>페이지 가운데 정렬 (pager)</h4>
    <ul class="pager">
        <li><a href="#">이전 페이지</a></li>
        <li><a href="#">다음 페이지</a></li>
    </ul>
    <h4>페이지 양쪽 끝 정렬</h4>
    <ul class="pager">
        <li class="previous disabled"><a href="#">이전 페이지</a></li>
        <li class="next"><a href="#">다음 페이지</a></li>
    </ul>
</div>

라벨 및 배지

추가 정보나 알림을 표시하는 데 사용

라벨

<h3>라벨</h3>
<div class="container">
    <table class="table">
        <thead>
            <tr>
                <td>번호</td><td>글제목</td><td>작성자</td>
            </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>부트스트랩에서 라벨을 사용하는 방법 <span class="label label-default">New</span></td>
            <td>홍길동</td>
        </tr>
        <tr>
            <td>2</td>
            <td>게시판의 글제목2 <span class="label label-danger">중요</span></td>
            <td>테스트</td>
        </tr>
        <tr>
            <td>3</td>
            <td>게시판의 글제목3 <span class="label label-info">정보</span></td>
            <td>임시3</td>
        </tr>
    </table>
</div>

배지

<h3>배지</h3>
<div class="container">
    <div class="col-xs-3">
        <ul class="nav nav-pills nav-stacked">
            <li class="active">
                <a href="#">
                    <span class="badge pull-right">50</span>메뉴1
                </a>
            </li>
            <li><a href="#">메뉴2</a></li>
            <li>
                <a href="#">
                    <span class="badge pull-right">10</span>메뉴3
                </a>
            </li>
        </ul>
    </div>
</div>