메뉴
대부분의 웹 페이지는 메뉴의 어떤 종류가 있습니다.
HTML에서, 메뉴는 자주 정렬되지 않은 목록에 정의 된 <ul> 과 같이 (그리고 나중에 스타일)
<ul>
<li><a href="#">Home</a></li>
<li><a
href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> 위의 목록의 수평 메뉴를 생성 할 경우, 추가 .list-inline 클래스에 <ul> :
<ul class="list-inline"> »그것을 자신을 시도 아니면 위에서 메뉴를 표시 할 수 있습니다 Bootstraps' Tabs and Pills (아래 참조).
참고 : 탭을 만들고 알약 / 동적 토글하는 방법을 알아 보려면이 페이지의 마지막 예를 참조하십시오.
탭
탭을 사용하여 만든 <ul class="nav nav-tabs"> :
팁 : 또한 함께 현재 페이지 표시 <li class="active"> .
다음의 예는 탐색 탭을 생성합니다 :
예
<ul class="nav nav-tabs">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
»그것을 자신을 시도 드롭 다운 메뉴와 탭
탭은 드롭 다운 메뉴를 보유 할 수 있습니다.
다음의 예는 "메뉴 1"에 드롭 다운 메뉴를 추가합니다 :
예
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
»그것을 자신을 시도 Pills
약을 사용하여 만든 <ul class="nav nav-pills"> . 또한 함께 현재 페이지 표시 <li class="active"> :
예
<ul class="nav nav-pills">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> »그것을 자신을 시도 세로 Pills
Pills 수직으로 표시 할 수 있습니다. 그냥 추가 .nav-stacked 클래스를 :
예
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
»그것을 자신을 시도 세로 Pills 행에
본문...
본문...
본문...
다음은 마지막 열 내부의 수직 알약 메뉴를 배치합니다. 따라서, 큰 화면의 메뉴는 오른쪽에 표시된다. 하지만 작은 화면에, 내용이 자동으로 단일 열 레이아웃에 자신을 조정합니다 :
예
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> »그것을 자신을 시도 Pills 드롭 다운 메뉴로
Pills 또한 드롭 다운 메뉴를 보유 할 수 있습니다.
다음의 예는 "메뉴 1"에 드롭 다운 메뉴를 추가합니다 :
예
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
»그것을 자신을 시도 중심 Tabs and Pills
센터 / 탭과 정당화 pills , 사용 .nav-justified 클래스를.
768px보다 작은 화면에 그 참고 목록 항목 (내용을 중심으로 유지됩니다) 적층 :
예
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu
3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills
nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
»그것을 자신을 시도 토글 / 동적 Tabs
집
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipisicing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua.
탭의 토글을 만들려면, 추가 data-toggle="tab" 각 링크의 속성을. 그런 다음 추가 .tab-pane 각 탭에 대한 고유 ID와 클래스와 내부를 감싸 <div> 클래스와 요소 .tab-content .
당신이 탭에서 아웃 그들을 클릭하면 페이드하려면 추가 .fade 하는 클래스를 .tab-pane :
예
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
»그것을 자신을 시도 토글 / 동적 Pills
동일한 코드가 적용되는 pills ; 만에 데이터 전환 속성 변경 data-toggle="pill" :
예
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
»그것을 자신을 시도 연습으로 자신을 테스트!
연습 1» 운동 2» 운동 3» 운동 4» 운동 5» 운동 6»
완료 Bootstrap 탐색 참조
모든 탐색 클래스의 완전한 참고로, 우리의 완전한 이동 부트 스트랩 탐색 참조 .
모든 탭 옵션, 방법 및 이벤트의 완전한 참고로, 우리로 이동 부트 스트랩 JS 탭 참조 .