Bootstrap4 기본 튜토리얼

Bootstrap4 네비게이션 바

　　 Bootstrap 네비게이션 바 컴포넌트를 사용하여 웹사이트나 애플리케이션에 반응형 네비게이션 타이틀을 만들 수 있습니다. 이 반응형 네비게이션 바는 원래 작은 뷰포트를 가진 장치(예: 휴대폰)에서 접히지만, 사용자가 전환 버튼을 클릭할 때 펼쳐집니다. 그러나 노트북이나 데스크톱 등 중형 및 대형 장치에서는 일반적으로 수평으로 유지됩니다.

导航栏一般放在页面的顶部。

我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 클래스를 사용하여 반응형 네비게이션 바를 만듭니다 (대화면 수평으로 펼쳐지고, 소화면 수직으로 쌓입니다).

네비게이션 바에 있는 옵션은 <ul> 요소를 사용하여 추가할 수 있습니다. 그런 다음 <li> 요소에 .nav-item 클래스, <a> 요소에 .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>
<nav　class="navbar　navbar-expand-sm　bg-light">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　2</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div　class="container-fluid">
　　<h2>간단한 네비게이션 바 예제</h2>
　　<p>导航栏一般放在页面的顶部。</p>
　　<p>我们可以使用　.navbar　类来创建一个标准的导航栏，后面紧跟:　.navbar-expand-xl|lg|md|sm　클래스를 사용하여 반응형 네비게이션 바를 만듭니다(대화면 수평으로 펼쳐지고, 소화면 수직으로 쌓입니다).</p>
</div>
</body>
</html>

테스트 보기 ‹/›

垂直导航栏

을 제거하여 .navbar-expand-xl|lg|md|sm 클래스를 사용하여垂直导航栏을 생성합니다:

示例

<!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>
<nav class="navbar bg-light">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　2</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div　class="container-fluid">
　　<h2>垂直导航栏</h2>
　　<p>导航栏一般在页面头部。</p>
</div>
</body>
</html>

테스트 보기 ‹/›

다른 색상의导航栏

다른 색상의导航栏을 생성하기 위해 다음과 같은 클래스를 사용할 수 있습니다: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark과 .bg-light)。

알림: 어둡은 배경에 대해 텍스트 색상을 밝게 설정해야 하고, 밝은 배경에 대해 텍스트 색상을 어둡게 설정해야 합니다。

示例

<!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>
</div>
<nav　class="navbar　navbar-expand-sm　bg-light navbar-light">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item active">
　　　　　　<a　class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item active">
　　　　　　<a　class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-primary navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item active">
　　　　　　<a　class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-success navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item active">
　　　　　　<a　class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-info navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item active">
　　　　　　<a　class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-warning navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item active">
　　　　　　<a　class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-danger navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item active">
　　　　　　<a　class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-secondary navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item active">
　　　　　　<a　class="nav-link" href="#">Active</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link disabled" href="#">Disabled</a>
　　　　</li>
　　</ul>
</nav>
</body>
</html>

테스트 보기 ‹/›

활성화와 비활성화 상태: 선택된 옵션을 강조하기 위해 <a> 요소에 .active 클래스를 추가할 수 있습니다. .disabled 클래스는 링크를 클릭할 수 없게 설정합니다.

브랜드/Logo

.navbar-brand 클래스는 브랜드를 강조하는 데 사용됩니다/Logo:

示例

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　네비게이션 바에 드롭다운 메뉴를 설정할 수 있습니다：/logo　-->
　　<a　class="navbar-brand"　href="#">Logo</a>
　　
　　<!--　Links　-->
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　2</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>브랜드/Logo</h2>
　　<p>.navbar-brand 클래스는 브랜드를 강조하는 데 사용됩니다/Logo:</p>
</div>
</body>
</html>

테스트 보기 ‹/›

이미지를 사용할 경우, .navbar-brand 클래스를 사용하여 이미지 자동 조정导航栏을 설정합니다.

示例

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　네비게이션 바에 드롭다운 메뉴를 설정할 수 있습니다：/logo　-->
　　<a　class="navbar-brand" href="#">
　　　　<img src="https://static.oldtoolbag.com/images/mix/bird.jpg" alt="logo" style="width:40px;">
　　</a>
　　
　　<!--　Links　-->
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　2</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>브랜드　/　Logo</h2>
　　<p>이미지를 사용할 경우, .navbar-brand 클래스를 사용하여 이미지 자동 조정导航栏을 설정합니다.</p>
</div>
</body>
</html>

테스트 보기 ‹/›

折叠导航栏

일반적으로, 작은 화면에서는折叠导航栏을 접어두고, 클릭하여导航选项을 표시합니다.

折叠导航栏를 생성하려면, 버튼에 추가할 수 있습니다. data-toggle="collapse"과 data-target="#"thetargetthetarget-"　class를 설정한 div에 네비게이션 내용(링크)를 포함하여 div 요소의 id가 버튼 data

示例

<!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>
<nav　class="navbar　navbar-expand-target의 지정된 id:-dark　navbar-dark">
　　<a　class="navbar-md　bg/a>
　　brand"　href="#">navbar<-<button　class="navbar-toggler"　type="button"　data-toggle="collapse"　data
　　　　<span　class="navbar-target="#collapsibleNavbar">-toggler/span>
　　</success"　type="button">Search<
　　icon"><-<div　class="collapse　navbar
　　　　<ul　class="navbar-nav">
　　　　　　<li　class="nav-item">
　　　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　　　</li>
　　　　　　<li　class="nav-item">
　　　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　　　</li>
　　　　　　<li　class="nav-item">
　　　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　　　</li>　　　　
　　　　</ul>
　　</div>　　
</nav>
<br>
<div　class="container">
　　<h2collapse"　id="collapsibleNavbar">/h2>
　　>접어둔 네비게이션 바</p>
　　<p>일반적으로, 작은 스크린에서는 네비게이션 바를 접어서 클릭하여 네비게이션 옵션을 표시합니다.<-expand-<p>추가 정보: 네비게이션 바에 대한 .navbar/p>
</div>
</body>
</html>

테스트 보기 ‹/›

md　class를 사용하면, 네비게이션 링크는 항상 숨겨지고, 토글 버튼은 항상 표시됩니다。<

네비게이션 바에 드롭다운 메뉴 사용

示例

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　네비게이션 바에 드롭다운 메뉴를 설정할 수 있습니다：　-->
　　<a　class="navbar-brand"　href="#">Logo</a>
　　<!--　Links　-->
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　2</a>
　　　　</li>
　　　　<!--　브랜드　-->
　　　　<li　class="nav-Dropdown
　　　　　　<a　class="nav-item　dropdown">-link　dropdown-toggle"　href="#"　id="navbardrop"　data
　　　　　　　　toggle="dropdown">
　　　　　　</a>
　　　　　　Dropdown　링크-<div　class="dropdown
　　　　　　　　menu">-<a　class="dropdown　1</a>
　　　　　　　　menu">-<a　class="dropdown　2</a>
　　　　　　　　menu">-<a　class="dropdown　3</a>
　　　　　　</div>
　　　　</li>
　　</ul>
</nav>
<br>
　　
<div　class="container">
　　<h2item"　href="#">링크/h2>
　　>네비게이션 바에 드롭다운 메뉴 사용</p>
</div>
</body>
</html>

테스트 보기 ‹/›

<p>네비게이션 바에 드롭다운 메뉴를 설정할 수 있습니다。<

네비게이션 바와 버튼

示例

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<form　class="form-inline">
　　　　네비게이션 바의 표单 <form> 요소는 클래스를 사용하여 입력 필드와 버튼을 정렬합니다：-<input　class="form
　　　　control"　type="text"　placeholder="Search">-<button　class="btn　btn/success"　type="button">Search<
　　</form>
</nav>
<br>
<div　class="container">
　　<h2button>/h2>
　　">네비게이션 바의 표单<-<p>네비게이션 바의 표单　form　요소는　class="form/p>
</div>
</body>
</html>

테스트 보기 ‹/›

inline"　class로 입력 필드와 버튼을 정렬할 수 있습니다：<-group-addon"　class="input

示例

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<form　class="form-inline">
　　　　<div　class="input-group">
　　　　　　<span　class="input">-group-<input　type="text"　class="form/span>
　　　　　　control"　placeholder="Username">-<input　type="text"　class="form
　　　　</div>　　　　
　　</form>
</nav>
<br>
<div　class="container">
　　<h2>导航表单</h2>
　　<p>　.input-group-addon　类用于在输入框前添加小标签。</p>
</div>
</body>
</html>

테스트 보기 ‹/›

导航栏文本

使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。

示例

<!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>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<!--　Links　-->
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　1</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link　2</a>
　　　　</li>
　　</ul>
　　<!--　Navbar　text-->
　　<span　class="navbar-text">
　　　　Navbar　text
　　</span>
</nav>
<br>
<div　class="container">
　　<h2>导航栏文本</h2>
　　<p>使用　.navbar-text　类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。</p>
</div>
</body>
</html>

테스트 보기 ‹/›

固定导航栏

导航栏可以固定在头部或者底部。

我们使用 .fixed-top 类来实现导航栏的固定：

示例

<!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　　style="height:1500px">
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark　fixed-top">
　　<a　class="navbar-brand"　href="#">Logo</a>
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="#">Link</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid"　style="margin-top:80px">
　　<h2>固定导航栏</h2>
　　<p>네비게이션 패널을 머리나 바닥에 고정할 수 있습니다.</p>
　　<h1>페이지를 스크롤하여 효과를 확인하세요.</h1>
</div>
</body>
</html>

테스트 보기 ‹/›

.fixed-bottom 类用于设置导航栏固定在底部：

示例

<!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　style="height:1500px">
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark　fixed-bottom">
　　<a　class="navbar-brand"　href="#">Logo</a>
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="javascript:void(0)">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="javascript:void(0)">Link</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>바닥 고정 네비게이션 패널</h2>
　　<p>네비게이션 패널을 머리나 바닥에 고정할 수 있습니다.</p>
　　<h1>페이지를 스크롤하여 효과를 확인하세요.</h1>
</div>
</body>
</html>

테스트 보기 ‹/›

Bootstrap4 쿼트마크 네비게이션 Bootstrap4 네비게이션

Bootstrap4 기본 튜토리얼

Bootstrap4 네비게이션 바

垂直导航栏

다른 색상의导航栏

브랜드/Logo

折叠导航栏

md class를 사용하면, 네비게이션 링크는 항상 숨겨지고, 토글 버튼은 항상 표시됩니다。<

<p>네비게이션 바에 드롭다운 메뉴를 설정할 수 있습니다。<

导航栏文本

固定导航栏

md　class를 사용하면, 네비게이션 링크는 항상 숨겨지고, 토글 버튼은 항상 표시됩니다。<