Bootstrap 3일차

1. 드롭다운

버튼을 클릭했을 때 하단으로 펼쳐지는 메뉴. 일반적으로 드롭다운은 ul과 li 태그로 구성된 리스트에 적용

사용 방법

<div class="dropdown">
    <a data-toggle="dropdown" href="#">여기를 클릭하세요</a>
    <ul class="dropdown-menu" role="menu">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">회원로그인</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">자유게시판</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">설문조사</a></li>
    </ul>
</div>

2. 버튼 그룹

여러 버튼을 그룹으로 묶어서 사용하는 방식. 버튼의 크기를 일괄적으로 조절 가능

기본 버튼 그룹

<div class="btn-group btn-group-lg">
    <input type="button" class="btn btn-default" value="기본 모양 버튼">
    <input type="button" class="btn btn-primary" value="중요한 버튼">
    <input type="button" class="btn btn-success" value="긍정의미 버튼">
    <input type="button" class="btn btn-info" value="정보제공 버튼">
</div>

툴바 형식 버튼 그룹

<div class="btn-toolbar">
    <div class="btn-group btn-group-sm">
        <input type="button" class="btn btn-default" value="버튼1">
        <input type="button" class="btn btn-primary" value="버튼2">
        <input type="button" class="btn btn-success" value="버튼3">
        <input type="button" class="btn btn-info" value="버튼4">
    </div>
    <div class="btn-group btn-group-sm">
        <input type="button" class="btn btn-default" value="버튼5">
        <input type="button" class="btn btn-primary" value="버튼6">
    </div>
</div>

중첩 버튼 그룹

<div class="btn-group">
    <button type="button" class="btn btn-default">버튼1</button>
    <button type="button" class="btn btn-primary">버튼2</button>
    <div class="btn-group">
        <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">클릭<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#" tabindex="-1">공지사항</a></li>
            <li><a href="#" tabindex="-1">자유게시판</a></li>
            <li><a href="#" tabindex="-1">자료실</a></li>
        </ul>
    </div>
</div>

3. 네비게이션

주로 메인 메뉴 또는 서브 메뉴를 만들 때 사용

탭형 네비게이션

<ul class="nav nav-tabs">
    <li><a href="#">회원관리</a></li>
    <li><a href="#">공지사항</a></li>
    <li><a href="#">자유게시판</a></li>
    <li><a href="#">자료실</a></li>
</ul>

알약형 네비게이션

<ul class="nav nav-pills">
    <li><a href="#">Java</a></li>
    <li><a href="#">Jsp</a></li>
    <li><a href="#">Ajax</a></li>
    <li><a href="#">JQuery</a></li>
</ul>

드롭다운 네비게이션

<ul class="nav nav-tabs">
    <li><a href="#">공지사항</a></li>
    <li><a href="#">자유게시판</a></li>
    <li><a href="#">Q&A</a></li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#">사용자<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">회원로그인</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">자유게시판</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">설문조사</a></li>
            <li class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">관리자</a></li>
        </ul>
    </li>
</ul>