부트스트랩 탐색 모음


내비게이션 바는 Bootstrap 웹사이트의 훌륭한 기능이자 눈에 띄는 기능입니다. 탐색 모음은 앱이나 웹사이트 탐색 헤더의 반응형 기본 구성 요소 역할을 합니다. 탐색 모음은 모바일 뷰포트에서 축소되고 사용 가능한 뷰포트 너비가 증가함에 따라 수평으로 확장됩니다. Bootstrap 탐색 모음의 핵심에는 탐색 모음에 사이트 이름과 기본 탐색 정의 스타일이 포함되어 있습니다.

기본 탐색 모음

기본 탐색 모음을 만드는 단계는 다음과 같습니다.

  • <nav> 태그에 .navbar, .navbar-default 클래스를 추가합니다.

  • 위 요소에 role="navigation"을 추가하면 접근성을 높이는 데 도움이 됩니다.

  • 클래스 navbar-brand의 <a> 요소가 포함된 <div> 요소에 헤더 클래스 .navbar-header를 추가합니다. 이렇게 하면 텍스트가 더 크게 표시됩니다.

  • 내비게이션 바에 링크를 추가하려면 .nav, .navbar-nav 클래스를 사용하여 순서가 지정되지 않은 목록을 추가하세요.

다음 예에서는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的导航栏</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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-menu">
               <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>
</nav>


</body>
</html>

인스턴스 실행»

온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

반응형 탐색 모음

탐색 모음 반응성을 추가하려면 축소하려는 콘텐츠를 클래스 .collapse, .navbar-collapse를 사용하여 <div>로 묶어야 합니다. 축소된 탐색 모음은 실제로 .navbar-toggle 클래스와 두 개의 데이터 요소가 있는 버튼입니다. 첫 번째는 JavaScript에 버튼으로 무엇을 할지 알려주는 data-toggle이고, 두 번째는 전환할 요소를 나타내는 data-target입니다. .icon-bar 클래스가 있는 세 개의 <span>은 소위 햄버거 버튼을 만듭니다. 이는 .nav-collapse <div>의 요소로 전환됩니다. 이러한 기능을 사용하려면 Bootstrap Collapse 플러그인을 포함해야 합니다.

다음 예에서는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 响应式的导航栏</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <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="#">W3Cschool</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-menu">
               <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>
</nav>


</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

탐색 모음의 양식

탐색 모음이 .navbar-form 클래스를 사용하는 Bootstrap 양식 장에 언급된 기본 클래스를 사용하지 않습니다. 이렇게 하면 더 좁은 뷰포트에서 양식의 적절한 수직 정렬과 축소 동작이 보장됩니다. 정렬 옵션(구성 요소 정렬 섹션에 자세히 설명되어 있음)을 사용하여 탐색 모음의 콘텐츠가 배치될 위치를 결정하세요.

다음 예에서는 이를 보여줍니다.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 导航栏中的表单</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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>    
   </div>
</nav>


</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

탐색 모음의 버튼

클래스 .navbar-btn을 사용하여 그렇지 않은 <button> <form> 버튼에서 버튼은 탐색 모음의 수직 중앙에 위치합니다. .navbar-btn은 <a> 및 <input> 요소에 사용할 수 있습니다.

표준 버튼 클래스가 아니기 때문에 .navbar-nav 내부의 <a> 요소에 .navbar-btn을 사용하지 마세요.

다음 예에서는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 导航栏中的按钮</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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>
</nav>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

탐색 막대의 텍스트

다음 경우 탐색에 포함합니다. 필요 텍스트 문자열의 경우 .navbar-text 클래스를 사용하세요. 이는 일반적으로 <p> 태그와 함께 사용되어 적절한 행간 및 색상을 보장합니다. 다음 예는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 导航栏中的文本</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <p class="navbar-text">Signed in as Thomas</p>
   </div>
</nav>

</body>
</html>

예제 실행»

온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요.

탐색이 아닌 링크

탐색을 원하지 않는 경우 일반 탐색 모음의 구성 요소 내부에서 표준 링크를 사용하려면 다음 예와 같이 navbar-link 클래스를 사용하여 기본 및 반전 탐색 모음 옵션에 적절한 색상을 추가하세요.

Instance

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 非导航链接</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">php中文网</a>
   </div>
   <div>
      <p class="navbar-text navbar-right"> 
         <a href="#" class="navbar-link">php</a> 登录
      </p>
   </div>
</nav>

</body>
</html>

예제 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

구성 요소 정렬

유틸리티 클래스 .navbar-left 또는 .navbar-right를 사용하여 를 정렬할 수 있습니다. 왼쪽 또는 오른쪽 탐색 모음의 탐색 링크, 양식, 버튼 또는 텍스트 이러한 구성 요소입니다. 두 클래스 모두 지정된 방향으로 CSS 부동 소수점을 추가합니다. 다음 예에서는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 组件对齐方式</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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-menu">
               <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-menu">
               <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>
</nav>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

맨 위로 고정

부트스트랩 탐색 모음을 동적으로 배치할 수 있습니다. 기본적으로 이는 HTML의 위치에 따라 배치되는 블록 수준 요소입니다. 일부 도우미 클래스를 사용하면 페이지 상단이나 하단에 배치하거나 페이지와 함께 스크롤되는 정적 탐색 모음으로 만들 수 있습니다.

navbar를 페이지 상단에 고정하려면 .navbar class에 .navbar-fixed-top 클래스를 추가하세요. 다음 예는 이를 보여줍니다.

내비게이션 바가 페이지 본문에 있는 다른 콘텐츠의 상단과 교차하지 않도록 하려면 <body> 태그에 최소 50픽셀의 패딩을 추가하세요. 당신의 필요에.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 固定到顶部</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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-menu">
               <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>
</nav>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

하단에 고정

내비게이션 바를 페이지 하단에 고정하려면 , .navbar class 클래스 추가 .navbar-fixed-bottom에 문의하세요. 다음 예는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 固定到底部</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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-menu">
               <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>
</nav>

</body>
</html>

예제 실행»

온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요.

정적 상단

스크롤할 수 있는 예를 만들어야 하는 경우 페이지 탐색 표시줄에 .navbar-static-top 클래스를 추가하세요. 이 클래스에서는 <body>에 패딩을 추가할 필요가 없습니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 静态的顶部</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default navbar-static-top" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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-menu">
               <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>
</nav>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

역 네비게이션 바

검은 배경에 흰색 텍스트가 있는 역 네비게이션 바를 생성하려면, 아래 예와 같이 .navbar-inverse 클래스를 .navbar 클래스에 추가하기만 하면 됩니다.

내비게이션 바가 페이지 본문의 다른 콘텐츠 위에 교차하는 것을 방지하려면 <를 추가하세요. ;body> 라벨에 패딩을 50픽셀 이상 추가하세요. 패딩 값은 필요에 따라 설정할 수 있습니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 倒置的导航栏</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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-menu">
               <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>
</nav>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요