Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 마이크로 nawig레이션 Bootstrap nawig레이션 요소

Bootstrap nawig레이션 패널

네비게이션 바는 좋은 기능으로, Bootstrap 웹사이트의 주요 특징 중 하나입니다. 네비게이션 바는 애플리케이션이나 웹사이트에서 네비게이션 헤더로서의 반응형 기본 구성 요소로 사용됩니다. 네비게이션 바는 모바일 장치의 뷰에서 접히고, 사용 가능한 뷰 포트 너비가 증가함에 따라 수평으로 확장됩니다. Bootstrap 네비게이션 바의 핵심에서, 네비게이션 바는 사이트 이름과 기본적인 네비게이션 정의 스타일을 포함하고 있습니다.

기본 네비게이션 바

기본 네비게이션 바를 만드는 단계는 다음과 같습니다:

<nav> 태그에 클래스를 추가하세요 .navbar, .navbar-default。
위의 요소에 추가하세요 role="navigation"으로 접근성을 높일 수 있습니다.
<div> 요소에 제목 클래스를 추가하세요 .navbar-header을 포함하고 있습니다. navbar-brand 의 <a> 요소를 추가하면 텍스트가 더 크게 보일 것입니다.
네비게이션 바에 링크를 추가하려면 간단히 class를 추가하면 됩니다. .nav, .navbar-nav 의 불순서 목록으로 바꿔야 합니다.

다음 예제가 이 점을 보여줍니다：

온라인 예제

예제

!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>
<nav　class="navbar　navbar-default" role="navigation">
	<div　class="container-fluid">
	<div　class="navbar-header">
		<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</a>
	</div>
	<div>
		<ul　class="nav　navbar-nav">
			<li　class="active"><a　href="#">iOS</a></li>
			<li><a　href="#">SVN</a></li>
			<li　class="dropdown">
				<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
					Java
					<b class="caret"></b>
				</a>
				<ul　class="dropdown-메뉴>
					<li><a　href="#">jmeter</a></li>
					<li><a　href="#">EJB</a></li>
					<li><a　href="#">Jasper　Report</a></li>
					<li　class="divider"></li>
					<li><a　href="#">분리된 링크</a></li>
					<li　class="divider"></li>
					<li><a　href="#">또 다른 분리된 링크</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

응답형 네비게이션 바

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的

中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的创建所谓的汉堡按钮。这些会切换为 .nav-collapse div> 내의 요소를 포함해야 합니다. 이러한 기능을 구현하기 위해, 이를 포함해야 합니다 Bootstrap 펼치기(Collapse) 플러그인。

다음 예제가 이 점을 보여줍니다：

예제

!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>
<nav　class="navbar　navbar-default" role="navigation">
　　　　<div　class="container-fluid">　
　　　　<div　class="navbar-header">
　　　　　　　　<button type="button" class="navbar-toggle"　data-toggle="collapse"
　　　　　　　　　　　　　　　　data-target="#example-navbar-collapse">
　　　　　　　　　　　　<span class="sr-only">네비게이션 전환</span>
　　　　　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　</button>
　　　　　　　　<a　class="navbar-brand" href="#">기본 가이드</a>
　　　　</div>
　　　　<div class="collapse navbar-collapse" id="example-navbar-collapse">
　　　　　　　　<ul　class="nav　navbar-nav">
　　　　　　　　　　　　<li　class="active"><a　href="#">iOS</a></li>
　　　　　　　　　　　　<li><a　href="#">SVN</a></li>
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-메뉴>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">분리된 링크</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">또 다른 분리된 링크</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
　　　　</div></nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

네비게이션 바에 있는 버튼

您可以使用 class .navbar-btn 不在 <form> 내의 <button> 요소에 버튼을 추가하여, 버튼이 네비게이션 바에서 수직으로 중앙에 위치합니다.navbar-btn 可在 <a> 和 <input> 요소에 사용

不要在 .navbar-nav 내부의 <a> 요소에 사용 .navbar-btn를 사용하지 마십시오,因为它不是标准的 button 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>
<nav　class="navbar　navbar-default" role="navigation">
	<div　class="container-fluid">
　　　　<div　class="navbar-header">
　　　　　　　　<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</a>
　　　　</div>
　　　　<div>
　　　　　　　　<form class="navbar-form navbar-left" role="search">
　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　<input type="text" class="form-control" placeholder="Search">
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<button type="submit" class="btn btn-default">제출 버튼</button>
　　　　　　　　</form>
　　　　　　　　<button type="button" class="btn btn-default　navbar-btn">
　　　　　　　　　　　　네비게이션 바 버튼
　　　　　　　　</button>
　　　　</div>
	</div>
</nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

네비게이션 바에 있는 텍스트

네비게이션에 텍스트 문자열을 포함하려면 class를 사용하십시오 .navbar-text이는 보통 <p> 태그와 함께 사용되어 적절한 선두와 색상을 보장합니다. 다음 예제가 이 점을 보여줍니다：

온라인 예제

예제

!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>
<nav　class="navbar　navbar-default" role="navigation">
	<div　class="container-fluid">　
　　　　<div　class="navbar-header">
　　　　　　　　<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</a>
　　　　</div>
　　　　<div>
　　　　　　　　<p class="navbar-text">w3codebox 사용자 로그인</p>
　　　　</div>
	</div>
</nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

아이콘과 결합된 네비게이션 링크

일반 네비게이션 구성 요소 내에서 아이콘을 사용하려면, 클래스를 사용하세요 glyphicon glyphicon-* 아이콘을 설정하려면, 더보기는 Bootstrap 아이콘 예제에서 보여줍니다：

온라인 예제

예제

!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>
<nav　class="navbar　navbar-default" role="navigation">
　　<div　class="container-fluid">
　　　　<div　class="navbar-header">
　　　　　　<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</a>
　　　　</div>
　　　　<ul　class="nav　navbar-nav navbar-right">
　　　　　　<li><a href="#"><span class="glyphicon glyphicon-user"></span> 등록</a></li>
　　　　　　<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 로그인</a></li>
　　　　</ul>
　　</div>
</nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

구성 요소 정렬 방식

실용 도구 클래스를 사용하여 .navbar-left 또는 .navbar-right 네비게이션 바 내의 왼쪽 또는 오른쪽에 정렬 네비게이션 링크, 폼, 버튼 또는 텍스트 이 구성 요소. 이 두 클래스는 지정된 방향에 CSS 흐름을 추가합니다. 다음 예제에서 이 점을 보여줍니다：

온라인 예제

예제

!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>
<nav　class="navbar　navbar-default" role="navigation">
	<div　class="container-fluid">　
　　　　<div　class="navbar-header">
　　　　　　　　<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</a>
　　　　</div>
　　　　<div>
　　　　　　　　<!--왼쪽 정렬-->
　　　　　　　　<ul　class="nav　navbar-nav navbar-left">
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java
　　　　　　　　　　　　　　　　　　　　<b class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-메뉴>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">분리된 링크</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">또 다른 분리된 링크</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　　　　　<form class="navbar-form navbar-left" role="search">
　　　　　　　　　　　　<button type="submit" class="btn btn-default">
　　　　　　　　　　　　　　　　왼쪽 정렬-제출 버튼
　　　　　　　　　　　　</button>
　　　　　　　　</form>
　　　　　　　　<p class="navbar-text navbar-left">왼쪽 정렬-텍스트</p>
　　　　　　　　<!--오른쪽 정렬-->
　　　　　　　　<ul　class="nav　navbar-nav navbar-right">
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-메뉴>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">분리된 링크</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">또 다른 분리된 링크</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　　　　　<form class="navbar-form navbar-right" role="search">
　　　　　　　　　　　　<button type="submit" class="btn btn-default">
　　　　　　　　　　　　　　　　오른쪽 정렬-제출 버튼
　　　　　　　　　　　　</button>
　　　　　　　　</form>
　　　　　　　　<p class="navbar-text navbar-right">오른쪽 정렬-텍스트</p>
　　　　</div>
	</div>
</nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

상단에 고정

Bootstrap 네비게이션 바는 동적 위치를 설정할 수 있습니다. 기본적으로, 그것은 블록 요소이며, HTML에서의 위치에 따라 위치를 설정합니다. 도움말 클래스를 사용하면 페이지 상단이나 하단에 배치하거나, 페이지와 함께 롤링하는 정적 네비게이션 바로 하고 싶다면 배치할 수 있습니다.

네비게이션 바를 페이지 상단에 고정하려면 다음에 .navbar class class 추가 .navbar-fixed-top다음 예제에서 이 점을 보여줍니다：

네비게이션 바가 페이지 주체의 다른 내용의 상단과 겹치지 않도록 하려면，<body> 태그에 최소한 50 픽셀의 내간격(padding)，내간격의 값은 필요에 따라 설정할 수 있습니다。

온라인 예제

예제

!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>
<nav　class="navbar　navbar-default　navbar-fixed-top"　role="navigation">　
　　　　<div　class="container-fluid">　
　　　　<div　class="navbar-header">　
　　　　　　　　<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</a>　
　　　　</div>　
　　　　<div>　
　　　　　　　　<ul　class="nav　navbar-nav">　
　　　　　　　　　　　　<li　class="active"><a　href="#">iOS</a></li>　
　　　　　　　　　　　　<li><a　href="#">SVN</a></li>　
　　　　　　　　　　　　<li　class="dropdown">　
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">　
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>　
　　　　　　　　　　　　　　　　</a>　
　　　　　　　　　　　　　　　　<ul　class="dropdown-메뉴>　
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>　
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>　
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>　
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>　
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">분리된 링크</a></li>　
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>　
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">또 다른 분리된 링크</a></li>　
　　　　　　　　　　　　　　　　</ul>　
　　　　　　　　　　　　</li>　
　　　　　　　　</ul>　
　　　　</div>　
　　　　</div>　
</nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

하단에 고정

네비게이션 바를 페이지 하단에 고정하려면 다음에 .navbar class class 추가 .navbar-fixed-bottom다음 예제에서 이 점을 보여줍니다：

온라인 예제

예제

!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>
<nav　class="navbar　navbar-default　navbar-fixed-bottom" role="navigation">
	<div　class="container-fluid">　
　　　　<div　class="navbar-header">
　　　　　　　　<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</a>
　　　　</div>
　　　　<div>
　　　　　　　　<ul　class="nav　navbar-nav">
　　　　　　　　　　　　<li　class="active"><a　href="#">iOS</a></li>
　　　　　　　　　　　　<li><a　href="#">SVN</a></li>
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-메뉴>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">분리된 링크</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">또 다른 분리된 링크</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

정적 상단

페이지와 함께 롤링할 수 있는 네비게이션 바를 생성하려면 추가하세요 .navbar-static-top class. 이 클래스는 <body>에 내간격(padding)을 추가하지 않도록 요구하지 않습니다.

온라인 예제

예제

!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>
<nav　class="navbar　navbar-default　navbar-static-top"　role="navigation">
	<div　class="container-fluid">　
　　　　<div　class="navbar-header">
　　　　　　　　<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</a>
　　　　</div>
　　　　<div>
　　　　　　　　<ul　class="nav　navbar-nav">
　　　　　　　　　　　　<li　class="active"><a　href="#">iOS</a></li>
　　　　　　　　　　　　<li><a　href="#">SVN</a></li>
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-메뉴>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">분리된 링크</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">또 다른 분리된 링크</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

역반전 네비게이션 바

검은 배경과 흰 텍스트의 역반전 네비게이션 바를 만들기 위해 간단히 .navbar class에 추가하세요. .navbar-inverse 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>
<nav　class="navbar　navbar-inverse"　role="navigation">
	<div　class="container-fluid">
　　　　<div　class="navbar-header">
　　　　　　　　<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</a>
　　　　</div>
　　　　<div>
　　　　　　　　<ul　class="nav　navbar-nav">
　　　　　　　　　　　　<li　class="active"><a　href="#">iOS</a></li>
　　　　　　　　　　　　<li><a　href="#">SVN</a></li>
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-메뉴>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">분리된 링크</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">또 다른 분리된 링크</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 마이크로 nawig레이션 Bootstrap nawig레이션 요소