dropdown
드롭다운의 개념 및 주의사항을 정리한후 예제를 통해 정리하고자 한다.
Bootstrap에서의 dropdown이란?
기본개념 및 주의 사항
- 메뉴를 눌렀을때 하단으로 펼쳐지는것->드롭다운
- 단독으로 사용할 수 없고 부트스트랩에 포함된 자바스크립트와 jQuery를 같이 사용해야한다.
- 일반적으로 드롭다운 부분은 ul과 li 로 구성된 리스트 태그에 적용(상단메뉴)한다.
- 아래와 같이(링크) jquery에 관련된 파일을 불러와야 제대로 작동이 된다.
부트스트랩으로 드롭다운 작성하는 방법
1.드롭다운해서 나오는 메뉴부분을 감싸주는 선택자 필요하다.
=> dropdown
drop down은 다음과 같은 효과를 부여한다.
<style>
.dropdown {
position: relative;
}
</style>2.메뉴항목을 현재 안보이게 설정
=> ul class="dropdown-menu" => display:none과 같다.
*참고: 메뉴를 표시=>role="menu",메뉴항목(=서브메뉴)->role="menuitem"
3.클릭했을때 드롭다운할 수 있도록 설정
=> data-toggle="dropdown"
->부트스트랩에서 jQuery와 코딩으로 연결된 속성(내장)
4.tab키를 이용해서 특정메뉴를 선택해서 실행
=> tabindex="-1"
tab키로 이동 enter-> 메뉴가 펼쳐질 수 있도록 설정
정리하면 머뉴부분 전체를 감싸주는 div에 dropdown을 적용하고
메뉴항목이 안보이게 dropdown-menu를 적용하고
클릭했을때 보이게끔 하는 data-toggle="dropdown"을 적용한후
tab키로 이용될수있게 tabindex="-1"을 적용해준다.
아래는 실제 적용한 예시다
<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>
dropdown-header
드롬다운에 별도의 헤더를 추가(대표 키워드)
li태그 내부에 class="dropdown-header"를 적용
li목록 위에 대표 키워드를 생성할수있다.
dropdown-header는 다음과 같은 효과를 적용한다.
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
}
예시)
<body>
<li role="presentation" class="dropdown-header">회원</li> <!-- 대표메뉴 -->
</body>
disabled
어느 특정 메뉴에 메뉴 불활성화(사용불가)의 효과를 준다.
=>li태그내부에 class="disabled"
divider
class="divider" => 분리선
태그 내부에 분리선을 그어주고싶을때 사용
예시)
<body>
<li role="presentation" class="divider"></li><!-- 분리선 -->
</body>pull-right
눌렀을때 메뉴가 오른쪽에 나오게한다.
dropdown-header 를 적용해서 대표 키워드도 만들어주고
divider를 적용하여 목록안에 문리선도 그어주고
pull-right를 적용해서 눌렀을때 오른쪽에 나오게 하는 드롭다운
예시)
<h4>눌렀을때 오른쪽에 배치(pull-right)</h4> <!--눌렀을때 메뉴가 오른쪽에 나오게함 -->
<div class="dropdown">
<a data-toggle="dropdown" href="#">여기를 클릭하세요</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">메뉴1</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">메뉴2</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">메뉴3</a>
</li>
<li role="presentation" class="divider"></li><!-- 분리선 -->
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">분리된 메뉴</a>
</li>
</ul>
</div>
버튼 그룹
btn-group으로 버튼들을 감싸면 사이의 간격을 없애고, 둥근 모서리를 가진 버튼 묶음을 만들 수 있다
1.버튼의 그룹을 설정(생성시킨 버튼을 div태그로 묶어주고 div태그 내부에 btn-group선택자 설정)
2.버튼그룹의 크기를 일괄적으로 조절 가능(btn-group-lg(pc화면), btn-group-sm(테블릿), btn-group-xs(모바일))
여러가지색을 적용한 버튼들을 그룹으로 묶고 btn-group-lg사이즈를 적용하고싶다면?
<h4 class="text-success">버튼그룹을 설정한 경우(default)</h4>
<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>
btn-toolbar
버튼그룹(1개이상)을 툴바형식으로 변환
서로 다른 종류의 버튼그룹들을 div태그로 묶어준뒤 class="btn-toolbar로 설정"
툴바형태의 버튼그룹에서는 버튼의 크기를 일정하게 유지한다.
btn-toolbar은 다음과 같은 효과를 준다.
btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 5px;
}
-------------------------------------
두개의 버튼 그룹에 btn-toolbar를 적용하면?
<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>
caret(캐럿)
메뉴를 펼치게 해주는 화살표 생성
1. 메뉴이름<span class="caret"></span>
2. 캐럿의 메뉴부분을 둔근 모서리로 설정하기위해선
버튼의 클래스 선택자->dropdown-toggle 사용버튼그룹 중첩 (드롭다운)
버튼그룹의 중첩을 이용한 드롭다운 서브메뉴 작성
div class="btn-group" => 버튼과 드롭다운을 그룹으로 묶어준다.
버튼3 대신 버튼그룹의 중첩을 이용해서 드롭다운으로 묶어주고 캐럿을 적용시키며 글씨는 클릭으로 바꾼다면?
<h4 class="text-success">버튼그룹의 중첩을 이용한 서브메뉴작성</h4>
<div class="btn-group">
<button type="button" class="btn btn-default">버튼1</button>
<button type="button" class="btn btn-default">버튼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 tabindex="-1" href="#">공지사항</a></li>
<li><a tabindex="-1" href="#">자유게시판</a></li>
<li><a tabindex="-1" href="#">자료실</a></li>
</ul>
</div>
</div>
버튼그룹의 수직정렬
btn-group-vertical
버튼그룹을 만들때 사용하는 태그인 button태그 또는 a링크로 만든 버튼에 적용 가능하지만 input태그로 만든 버튼에는 사용 불가하다
<div class="btn-group-vertical"><!-- 수직정렬 -->
<button type="button" class="btn btn-default">버튼1</button>
<button type="button" class="btn btn-default">버튼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 tabindex="-1" href="#">공지사항</a></li>
<li><a tabindex="-1" href="#">자유게시판</a></li>
<li><a tabindex="-1" href="#">자료실</a></li>
</ul>
</div>
</div>
버튼그룹의 양쪽정렬
btn-group-justified
양쪽정렬은 a태그로 버튼을 만든경우 사용이 가능하다. (% 비례)
button, input은 불가능
<h4>a태그로 이루어진 버튼의 경우(양쪽정렬)</h4>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">버튼1</a>
<a href="#" class="btn btn-default">버튼2</a>
<a href="#" class="btn btn-default">버튼3</a>
<a href="#" class="btn btn-default">버튼4</a>
</div>
<h4>button태그로 이루어진 버튼의 경우(양쪽정렬) 적용X</h4>
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-default">버튼5</button>
<button type="button" class="btn btn-default">버튼6</button>
</div>
</div>
다른버튼과 캐럿을 결합시키는 방법
안쪽의 기존 버튼그룹을 제거->서브메뉴가 나오는 위치가 왼쪽메뉴에 치우쳐서 출력
른버튼과 캐럿을 결합시키는 방법
<div class="btn-group">
<button type="button" class="btn btn-default">버튼1</button>
<!-- -->
<button type="button" data-toggle="dropdown"
class="btn btn-default dropdown-toggle">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">공지사항</a></li>
<li><a tabindex="-1" href="#">자유게시판</a></li>
<li><a tabindex="-1" href="#">자료실</a></li>
</ul>
</div>
위의 다른버튼과 캐럿을 결합시키는 방법에서 캐럿에 색을 적용할수있다.
(btn-접두어를 이용)
div class="btn-group">
<button type="button" class="btn btn-default">버튼2</button>
<!-- -->
<button type="button" data-toggle="dropdown"
class="btn btn-default dropdown-toggle btn-danger">
<span class="caret"></span></button><!-- 버튼을 눌르면 드랍다운이 나오게 하려면 -->
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">공지사항</a></li>
<li><a tabindex="-1" href="#">자유게시판</a></li>
<li><a tabindex="-1" href="#">자료실</a></li>
</ul>
</div>
위의 다른버튼과 캐럿을 결합시키는 방법에서 크기를 조절할수있다.
(btn-lg,btn-sm,btn-xs)
<h4>버튼 트롭다운의 크기 조절</h4>
<div class="btn-group">
<button type="button" class="btn btn-default btn-success btn-lg">버튼3</button>
<!-- -->
<button type="button" data-toggle="dropdown"
class="btn btn-default dropdown-toggle btn-success btn-lg">
<span class="caret"></span></button><!-- 버튼을 눌르면 드랍다운이 나오게 하려면 -->
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">공지사항</a></li>
<li><a tabindex="-1" href="#">자유게시판</a></li>
<li><a tabindex="-1" href="#">자료실</a></li>
</ul>
</div>
드롭업(dropup(브라우저 하단에위치))
=> 메뉴가 위로 나온다
(btn-group dropup)
h4>드롭다운,드롭업(dropup(브라우저 하단에위치))</h4>
<div class="btn-group dropup"> <!-- 메뉴가 위로 나온다 -->
<button type="button" class="btn btn-default btn-muted btn-sm">버튼3</button>
<!-- -->
<button type="button" data-toggle="dropdown"
class="btn btn-default dropdown-toggle btn-muted btn-sm">
<span class="caret"></span></button><!-- 버튼을 눌르면 드랍다운이 나오게 하려면 -->
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">공지사항</a></li>
<li><a tabindex="-1" href="#">자유게시판</a></li>
<li><a tabindex="-1" href="#">자료실</a></li>
</ul>
</div>navigation
부트스트랩을 이용하여 네비게이션을 구현할 수 있다.
네비게이션의 종류를 알아보기전 .nav를 먼저 정리하고자 한다.
.nav를 적용하면 다음과 같은 효과를 적용할수있다.
.nav {
padding-left: 0; /*안쪽여백의 왼쪽부분은 0*/
margin-bottom: 0; /*아래쪽 바깥부분은 0*/
list-style: none;
}
탭형 네비게이션
nav-tabs
네비게이션을 탭형으로 적용한다.
다음과 같은 효과를 적용한다.
.nav-tabs{
border-bottom: 1px solid #ddd; /*테두리 아래쪽에 선을 긋기*/
}
예시)
<h4>탭형 네비게이션</h4>
<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>
알약형 네비게이션
nav-pills
네비게이션을 알약형으로 적용한다.
다음과 같은 효과를 적용한다.
nav-pills > li { 메뉴를 왼쪽 -> 오른쪽으로 정렬하기 위해서 속성부여
float:left;
}
예시)
<h4>알약형 네비게이션</h4>
<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>
네이게이션의 특정 메뉴를 미리 선택해서 화면에 출력
class="active"
탭형, 알약형 둘가 적용가능하며 특정 매뉴를 미리 선택되어 출력하게 하고싶을때 사용한다.
li에 적용
예사1 탭형
<h4>미리 특정 메뉴를 선택해서 화면에 출력(class="active")</h4><!-- 미리 선택되게하고싶음 -->
<ul class="nav nav-tabs">
<li><a href="#">회원가입</a></li>
<li class="active"><a href="#">공지사항</a></li>
<li><a href="#">자유게시판</a></li>
<li><a href="#">자료실</a></li>
</ul>
-----------------------------
예시2 알약형
<h4>미리 특정 메뉴를 선택해서 화면에 출력(class="active")</h4><!-- 미리 선택되게하고싶음 -->
<ul class="nav nav-pills">
<li><a href="#">Java</a></li>
<li class="active"><a href="#">Jsp</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">JQuery</a></li>
</ul>
알약형 수직정렬
nav-stacked
알약형 네비게이션을 수직으로 적용
<h4>알약형 수직정렬(nav-stacked)</h4>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Java</a></li>
<li class="active"><a href="#">Jsp</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">JQuery</a></li>
</ul> disabled
메뉴 비활성화(선택불가) 특정 메뉴를 선택 못하게 한다.
네비게이션 정렬
네비게이션의 정렬 종류를 알아보고자 한다.
탭형 네비게이션 양쪽정렬
nav nav-tabs nav-justified
탭의 갯수에 따라서 양쪽정렬하여 비율로 설정한다.
nav-justified을 적용하면 다음과 같은 효과를준다.
.nav-tabs.nav-justified {
width: 100%; =>탭의 갯수에 따라서 비율로 설정(ex 4개 25%)
border-bottom: 0;
}
---------------------------------------
예시)
<h4>탭형 네비게이션 양쪽정렬(nav-justified)</h4>
<ul class="nav nav-tabs nav-justified">
<li><a href="#">회원가입</a></li>
<li><a href="#">공지사항</a></li>
<li><a href="#">자유게시판</a></li>
<li class="disabled"><a href="#">자료실</a></li> <!-- disabled 선택 못하게 하기-->
</ul>
알약형 네비게이션 양쪽정렬
nav nav-pills nav-justified
알약형 네비게션을 양쪽정렬한다.
예시)
<h4>알약형 네비게이션 양쪽정렬 및 메뉴 비활성</h4>
<ul class="nav nav-pills nav-justified">
<li><a href="#">Java</a></li>
<li class="active"><a href="#">Jsp</a></li> <!-- 활성화(선택되있음) -->
<li class="disabled"><a href="#">Ajax</a></li><!--비활성화(선택불가) -->
<li><a href="#">JQuery</a></li>
</ul>navigationdown
네비게이션+드롭다운
네비게이션과 드롭다운을 추가하여 합치는 것으로
추가하려면 드롭다운 메뉴의 div태그 대신 li태그로 묶어서 합친다.
예시를 보면서 정리하고자 한다.
예시) 탭형 네비게이션+드롭다운
<h4>탭형 네비게이션+드롭다운</h4>
<ul class="nav nav-tabs">
<li><a href="#">공지사항</a></li>
<li><a href="#">자유게시판</a></li>
<li><a href="#">Q&A</a></li>
<!-- <li><a href="#">사용자</a></li> -->
<!-- 네비게이션에 드롭다운을 추가할려면 div태그 대신에
li태그로 묶어줘야 한다.-->
<li class="dropdown">
<a data-toggle="dropdown" href="#">사용자
<span class="caret"></span></a><!-- 이벤트대상 -->
<ul class="dropdown-menu">
<li><a href="#">회원로그인</a></li>
<li><a href="#">자유게시판</a></li>
<li><a href="#">설문조사</a></li>
<li class="divider"></li> <!-- 분리선 -->
<li><a href="#">관리자</a></li>
</ul>
</li>
</ul>
-------------------------------------------------------
예시3) 알약형 네비게이션+드롭다운
<ul class="nav nav-pills">
<li><a href="#">공지사항</a></li>
<li><a href="#">자유게시판</a></li>
<!-- <li><a href="#">Q&A</a></li> -->
<!-- 네비게이션에 드롭다운을 추가할려면 div태그 대신에
li태그로 묶어줘야 한다.-->
<li class="dropdown">
<a data-toggle="dropdown" href="#">Q&A
<span class="caret"></span></a><!-- 이벤트대상 -->
<ul class="dropdown-menu">
<li><a href="#">Java</a></li>
<li><a href="#">Jsp</a></li>
<li><a href="#">Eclipse</a></li>
<li class="divider"></li> <!-- 분리선 -->
<li><a href="#">관리자</a></li>
</ul>
</li>
</ul>2022-08-10
