English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 기본 튜토리얼

Bootstrap4 네비게이션

Bootstrap는 기본적인 네비게이션 구성 요소(탭과 타블렛)를 쉽게 만들 수 있는 방법을 제공합니다. 이들은 매우 유연하고 아름다워서, Bootstrap의 모든 네비게이션 구성 요소(탭과 타블렛)는 기본적인 .nav 클래스를 공유하여 동일한 기본 템플릿과 스타일을 가집니다.

간단한 수평 네비게이션을 만들고 싶다면, <ul> 요소에 추가할 수 있습니다. .nav 클래스, 각 <li> 옵션에 .nav 추가-item 클래스, 각 링크에 .nav 추가-link 클래스:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>네비게이션</h2>
　　<p>간단한 수평 네비게이션:</p>
　　<ul　class="nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
테스트 보기 ‹/›

네비게이션 정렬 방식

.justify-content-center 클래스 설정 네비게이션 가운데 표시, .justify-content-end 클래스 설정 네비게이션 오른쪽 정렬。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>네비게이션</h2>
　　<p>왼쪽 정렬 네비게이션 (기본 설정):</p>
　　<ul　class="nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul>
　　
　　<p　class="text-center">가운데 정렬 네비게이션:</p>
　　<ul　class="nav　justify-content-center">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul>
　　　　
　　<p　class="text-right">우측 정렬 네비게이션:</p>
　　<ul　class="nav　justify-content-end">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
테스트 보기 ‹/›

수직 네비게이션

.flex-column 클래스는 수직 네비게이션을 생성하는 데 사용됩니다：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>수직 네비게이션</h2>
　　<p>.flex-column 클래스는 수직 네비게이션을 생성하는 데 사용됩니다：</p>
　　<ul　class="nav　flex-column">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
테스트 보기 ‹/›

옵션 탭

.nav를 사용하여-tabs 클래스는 네비게이션을 옵션 탭으로 변환할 수 있습니다. 그런 다음 선택된 옵션에 대해 .active 클래스를 사용하여 표시.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>옵션 탭</h2>
　　<p>옵션 탭 네비게이션:</p>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">활성</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
테스트 보기 ‹/›

胶囊형 네비게이션

.nav-pills 클래스는 네비게이션 항목을胶囊형으로 설정할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>胶囊형</h2>
　　<p>胶囊형 네비게이션:</p>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">활성</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
테스트 보기 ‹/›

네비게이션 일정하게

.nav-justified 클래스는 네비게이션 항목이 가로로 일정하게 표시되도록 설정할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>네비게이션 일정하게</h2>
　　<p>.nav-justified 클래스는 네비게이션 항목이 가로로 일정하게 표시되도록 설정할 수 있습니다.</p>
　　<ul class="nav nav-pills　nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">활성</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul><br>
　　<p>정의된 탭:</p>
　　<ul class="nav nav-tabs　nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">활성</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
테스트 보기 ‹/›

胶囊형 드롭다운 네비게이션

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>胶囊형 네비게이션 테이블 드롭다운</h2>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">활성</a>
　　　　</li>
　　　　<li class="nav-item　dropdown">
　　　　　　<a class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">드롭다운</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">링크　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#">링크　2</a>
　　　　　　　　<a　class="dropdown-item"　href="#">링크　3</a></div>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
테스트 보기 ‹/›

옵션 탭 드롭다운 메뉴

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>옵션 탭 드롭다운 메뉴</h2>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">활성</a>
　　　　</li>
　　　　<li class="nav-item　dropdown">
　　　　　　<a class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">드롭다운</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">링크　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#">링크　2</a>
　　　　　　　　<a　class="dropdown-item"　href="#">링크　3</a></div>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">링크</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">비활성화된</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
테스트 보기 ‹/›

동적 옵션 탭

옵션 탭이 동적으로 전환 가능하도록 설정하려면 각 링크에 data-toggle="tab" 속성을 추가. 그런 다음 각 옵션에 해당하는 내용 위에 .tab-pane 클래스.

끝내어 애니메이션 효과가 있기를 원한다면 .tab-pane 뒤에 추가 　 .fade 클래스:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>옵션 탭 전환</h2>
　　<br>
　　<!--　Nav　tabs　-->
　　<ul class="nav nav-tabs"　role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="tab"　href="#home">홈</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu1">Menu　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu2">Menu　2</a>
　　　　</li>
　　</ul>
　　<!--　Tab panes　-->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2HOME/h2>
　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>메뉴　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>메뉴　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
　　　　</div>
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›

胶囊状动态选项卡

胶囊状动态选项卡只需要将以上示例的代码中 data-toggle 属性设置为 data-toggle="pill":

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>胶囊选项卡切换</h2>
　　<br>
　　<!--　Nav pills　-->
　　<ul class="nav nav-pills" role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu1">Menu　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu2">Menu　2</a>
　　　　</li>
　　</ul>
　　<!--　Tab panes　-->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2HOME/h2>
　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>메뉴　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>메뉴　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
　　　　</div>
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›
Bootstrap4 네비게이션 패널Bootstrap4 접기