Bootstrap4-navbar
提供：Dev Guides
説明
Navbarは、アプリケーションまたはサイトのナビゲーションヘッダーを提供します。 ナビゲーションバーは、モバイルビューで折りたたまれ、利用可能なビューポートの幅が増えると水平になります。
基本的なナビゲーションバー
基本的なnavbarを作成するには、。navbar_クラスにレスポンシブな折りたたみクラス.navbar-expand-xl | lg | md | sm_を追加します（特大、大、中、または小画面にnavbarを提供します）。 navbarにリンクを追加するには、。navbar-nav_クラスを使用して順序付けられていないリストを追加するだけです。 個々のリスト項目を定義するには、。nav-item_クラスを<li>要素に追加し、_。nav-link_クラスを個々のリンクの<a>要素に使用します。
次の例は、基本的なnavbarの作成を示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Navbar</h2>
<nav class = "navbar navbar-expand-sm navbar-dark bg-secondary">
<a class = "navbar-brand" href = "#">Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav mr-auto">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home
<span class = "sr-only">(current)</span>
</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
ブランド/ロゴ
以下の例に示すように、_。navbar-brand_クラスを使用して、ページのブランドまたはロゴを強調表示できます-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Brand</h2>
<nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
<a class = "navbar-brand" href = "#">Logo</a>
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home
<span class = "sr-only">(current)</span>
</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</nav>
<br>
<h2>Image Logo</h2>
<nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
<a class = "navbar-brand" href = "#">
<img src = "https://www.finddevguides.com/bootstrap/images/logo.png"
style = "width:120px;" alt = "">
</a>
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home
<span class = "sr-only">(current)</span>
</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
ドロップダウン付きのナビゲーションバー
Navbarは、_。dropdown_クラスを使用して<li>要素にドロップダウンコードを追加することにより、ドロップダウンメニューを使用できます。 次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Navbar With Dropdown</h2>
<nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
<a class = "navbar-brand" href = "#">Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarNavDropdown" aria-controls = "navbarNavDropdown"
aria-expanded = "false" aria-label = "Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarNavDropdown">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home
<span class = "sr-only">(current)</span>
</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "#"
id = "navbarDropdownMenuLink" role = "button" data-toggle = "dropdown"
aria-haspopup = "true" aria-expanded = "false">
Library
</a>
<div class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink">
<a class = "dropdown-item" href = "#">HTML-5</a>
<a class = "dropdown-item" href = "#">CSS-3</a>
<a class = "dropdown-item" href = "#">Bootstrap-4</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity =" sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin =" anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
以下の例に示すように、<form>要素に_form-inline_クラスを使用して、navbar内にフォームコントロールとボタンを作成できます-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Navbar with Form and Button</h2>
<nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
<form class = "form-inline">
<input class = "form-control mr-sm-2" type = "text" placeholder = "Search your product">
<button class = "btn btn-info" type = "submit">Search</button>
</form>
</nav>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
着色されたナビゲーションバー
bg-primary _、 bg-dark_などの_background-color（.bg-*）_ユーティリティを使用して、navbar背景の色を変更します。 次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Colored Navbars</h2>
<nav class = "navbar navbar-expand-sm bg-light navbar-light">
<a class = "navbar-brand" href = "#">Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class =" nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-secondary navbar-light">
<a class = "navbar-brand" href = "#">Secondary Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-dark navbar-light">
<a class = "navbar-brand" href = "#">Dark Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-primary navbar-light">
<a class = "navbar-brand" href = "#">Primary Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-success navbar-light">
<a class = "navbar-brand" href = "#">Success Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-info navbar-light">
<a class = "navbar-brand" href = "#">Info Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-warning navbar-light">
<a class = "navbar-brand" href = "#">Warning Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-danger navbar-light">
<a class = "navbar-brand" href = "#">Danger Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
固定ナビゲーションバー
Bootstrap navbarは、位置を動的に変更できます。 .fixed-top_クラスを.navbar_クラスに追加することで、最上部に配置できます。 次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body style = "height:2000px">
<div class = "container">
<nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class = "navbar-brand" href = "#">Fixed Top</a>
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</nav>
<div class = "container-fluid" style = "margin-top:80px">
<h4>This is Fixed Navigation Bar...Scroll this page to see the effect</h4>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
下部ナビゲーションバー
ページの下部でnavbarを修正する場合は、。fixed-bottom_クラスを.navbar_クラスに追加します。 次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body style = "height:2000px">
<div class = "container">
<nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
<a class = "navbar-brand" href = "#">Fixed Bottom</a>
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</nav>
<div class = "container-fluid" style = "margin-top:80px">
<h4>This is Bottom Fixed Navigation Bar...Scroll this page to see the effect</h4>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
スティッキーナビゲーションバー
.navbar_クラスに追加される.sticky-top_クラスを使用してページをスクロールすると、ページの上部にnavbarを固定できます。 次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body style = "height:2000px">
<div class = "container-fluid">
<div class = "container-fluid" style = "margin-top:80px">
<h4>This is Sticky Navigation Bar...Scroll this page to see the effect</h4>
</div>
</div>
<nav class = "navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<a class = "navbar-brand" href = "#">Sticky Top</a>
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</nav>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
