Bootstrap 기본 튜토리얼

Bootstrap 플러그인

Bootstrap nawigacja panel Bootstrap 입력 그룹

Bootstrap nawigacja element

이 장에서는 Bootstrap가 제공하는 네비게이션 요소를 정의하는 몇 가지 옵션을 설명할 것입니다. 그들은 같은 태그와 기본 클래스를 사용합니다 .nav。Bootstrap는 공유 표시와 상태를 위해 도구 클래스를 제공합니다. 장식된 클래스를 변경하면 다른 스타일 간을 전환할 수 있습니다。

테이블 탐색 또는 레이블

레이블 탐색 메뉴를 만들기:

class를 추가하여 .nav 의 불리스트로우를 시작합니다。
class 추가 .nav-tabs。

아래의 예제에서 이를 보여줍니다：

온라인 예제

예제

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　태그형 네비게이션 메뉴</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<p>태그형 네비게이션 메뉴</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">홈</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다：

캡슐형 네비게이션 메뉴

기본의 캡슐형 네비게이션 메뉴

태그를 캡슐 스타일로 변경하려면 단지 class를 사용하면 됩니다。 .nav-pills 대신 .nav-tabs 만들면 됩니다. 다른 단계는 위와 같습니다。

아래의 예제에서 이를 보여줍니다：

온라인 예제

예제

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　기본의 캡슐형 네비게이션 메뉴</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<p>기본의 캡슐형 네비게이션 메뉴</p>
<ul class="nav nav-pills>
	<li class="active"><a href="#">홈</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다：

수직의 캡슐형 네비게이션 메뉴

를 사용하면 .nav、.nav-pills 의 동시에 사용하면 .nav-stacked로 캡슐이 수직으로 스택됩니다。

아래의 예제에서 이를 보여줍니다：

온라인 예제

예제

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　수직의 캡슐형 네비게이션 메뉴</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<p>수직의 캡슐형 네비게이션 메뉴</p>
<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="#">홈</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다：

양쪽 정렬된 네비게이션

화면 너비가 768px에 도달하면 .nav、.nav-tabs 또는 .nav、.nav-pills 의 동시에 사용하면 .nav-justified로 레이아웃을 맞추어 태그나 캡슐형 네비게이션 메뉴가 부모 요소와 같은 너비를 가집니다. 더 작은 화면에서는 네비게이션 링크가 스택됩니다。

아래의 예제에서 이를 보여줍니다：

온라인 예제

예제

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　양쪽 정렬된 네비게이션 요소</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<p>양쪽 정렬된 네비게이션 요소</p>
<ul class="nav nav-pills nav-justified">
	<li class="active"><a href="#">홈</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justified">
	<li class="active"><a href="#">홈</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다：

링크 비활성화

각각에 대해 .nav class이 추가되면 .disabled class이 추가되면 :hover 상태는 아래의 예제와 같이 보여집니다：

온라인 예제

예제

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　네비게이션 요소의 비활성 링크</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<p>네비게이션 요소의 비활성 링크</p>
<ul class="nav nav-pills>
	<li class="active"><a href="#">홈</a></li>
	<li><a href="#">SVN</a></li>
	<li class="disabled"><a href="#">iOS（링크 비활성화）</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">홈</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li class="disabled"><a href="#">VB.Net（링크 비활성화）</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>	
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다：

이 class은<a>의 외관을 변경하지만 기능을 변경하지 않습니다。여기서는 링크를 비활성화하려면 사용자 정의 JavaScript를 사용해야 합니다。

下拉菜单位置

네비게이션 메뉴와下拉菜单位置는 유사한 문법을 사용합니다。기본적으로 목록 항목의 앵커와 일부 데이터 속성이 협력하여下拉菜单位置를 트리거합니다。 .dropdown-menu class의 불리스트로우입니다。

下拉菜单位置标签

下拉菜单位置标签에下拉菜单를 추가하는 단계는 다음과 같습니다：

class를 추가하여 .nav 의 불리스트로우를 시작합니다。
class 추가 .nav-tabs。
추가하면 .dropdown-menu class의 불리스트로우입니다。

온라인 예제

예제

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 예제　-　<下拉菜单位置标签</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<p>下拉菜单位置标签</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">홈</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu>
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">분리된 링크</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다：

下拉菜单位置胶囊

단계는下拉菜单位置标签와 동일하지만 .nav-tabs class을 변경하면 .nav-pills，아래의 예제와 같이 보여집니다：

온라인 예제

예제

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 예제　-　下拉 메뉴가 있는 캡슐</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<p>下拉 메뉴가 있는 캡슐</p>
<ul class="nav nav-pills>
	<li class="active"><a href="#">홈</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu>
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">분리된 링크</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다：

더 많은 네비게이션 요소 컴포넌트 예제

태그 페이지와 캡슐 태그 페이지

클래스	설명	예제
.nav nav-tabs	태그 페이지	시도해 보세요
.nav nav-pills	캡슐 태그 페이지	시도해 보세요
.nav nav-pills nav-stacked	수직 방향으로 쌓여 배치된 캡슐 태그 페이지	시도해 보세요
.nav-justified	양쪽 정렬된 태그 페이지는 크기가 768px 스크린에서는 .nav-justified 클래스는 태그 페이지나 캡슐 태그가 동일한 너비로 표시되도록 쉽게 만들 수 있습니다. 작은 스크린에서는 네비게이션 링크가 스택 스타일로 표시됩니다.	시도해 보세요
.disabled	비활성 태그 페이지	시도해 보세요
태그 추가下拉 메뉴		시도해 보세요
드롭다운 메뉴가 있는 캡슐 탭		시도해 보세요
.tab-content	와 .tab-pane와 data-toggle="tab" (data-toggle="pill" )와 함께 사용하여, 탭의 전환에 따라 탭에 해당하는 내용을 변경합니다	시도해 보세요
.tab-pane	와 .tab-content와 data-toggle="tab" (data-toggle="pill")와 함께 사용하여, 탭의 전환에 따라 탭에 해당하는 내용을 변경합니다	시도해 보세요

Bootstrap nawigacja panel Bootstrap 입력 그룹