Bootstrap 4 - Navs
La description
Bootstrap fournit des éléments de navigation pour votre site dans un menu horizontal.
Base Nav avec lien désactivé
Créez un menu de navigation en ajoutant la classe .nav à l'élément <ul> suivi des éléments de navigation et ajoutez la classe nav.link pour créer un lien pour les éléments de navigation. L'exemple suivant illustre ceci -
Exemple
<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>Base Nav and Disabled Link</h2>
<ul class = "nav">
<li class = "nav-item">
<a class = "nav-link active" 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>
<li class = "nav-item">
<a class = "nav-link disabled" href = "#">Sign-In (Disabled)</a>
</li>
</ul>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Nav aligné
Nav peut être aligné sur le centre en ajoutant la classe .justify-content-center et sur le côté droit en ajoutant la classe .justify-content-end comme indiqué dans l'exemple ci-dessous -
Exemple
<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>Center Aligned Nav</h2>
<ul class = "nav justify-content-center">
<li class = "nav-item">
<a class = "nav-link active" 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>
<li class = "nav-item">
<a class = "nav-link" href = "#">Sign-In</a>
</li>
</ul>
<h2>Right Aligned Nav</h2>
<ul class = "nav justify-content-end">
<li class = "nav-item">
<a class = "nav-link active" 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>
<li class = "nav-item">
<a class = "nav-link" href = "#">Sign-In</a>
</li>
</ul>
</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>Il produira le résultat suivant -
Production
Alignement vertical
Vous pouvez créer une navigation verticale en ajoutant la classe .flex-column à l' élément .nav comme indiqué dans l'exemple ci-dessous -
Exemple
<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>Vertical Alignment</h2>
<ul class = "nav flex-column">
<li class = "nav-item">
<a class = "nav-link active" 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>
<li class = "nav-item">
<a class = "nav-link" href = "#">Sign-In</a>
</li>
</ul>
</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>Il produira le résultat suivant -
Production
Onglets, pilules, onglets et pilules avec liste déroulante
Vous pouvez créer une interface de navigation à onglets en utilisant la classe .nav-tabs et le menu de navigation pour naviguer dans les pilules à l'aide de la classe .nav-pills . Vous pouvez également ajouter un menu déroulant à un onglet ou à une pilule en utilisant la classe .dropdown dans l'élément <li> comme indiqué dans l'exemple ci-dessous -
Exemple
<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>Navigation Tabs</h2>
<ul class = "nav nav-tabs">
<li class = "nav-item">
<a class = "nav-link active" 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>
<li class = "nav-item">
<a class = "nav-link" href = "#">Sign-In</a>
</li>
</ul>
<br>
<h2>Navigation Pills</h2>
<ul class = "nav nav-pills">
<li class = "nav-item">
<a class = "nav-link active" 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>
<li class = "nav-item">
<a class = "nav-link" href = "#">Sign-In</a>
</li>
</ul>
<br>
<h2>Tabs With Dropdown</h2>
<ul class = "nav nav-tabs">
<li class = "nav-item">
<a class = "nav-link active" href = "#">Home</a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" data-toggle = "dropdown"
href = "#" role = "button" aria-haspopup = "true"
aria-expanded = "false">Library</a>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">HTML-5</a>
<a class = "dropdown-item" href = "#">CSS-3</a>
<a class = "dropdown-item" href = "#">JavaScript</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#">Bootstrap 4</a>
</div>
</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>
<br>
<h2>Pills with dropdown</h2>
<ul class = "nav nav-pills">
<li class = "nav-item">
<a class = "nav-link active" href = "#">Home</a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" data-toggle = "dropdown"
href =" #" role = "button" aria-haspopup = "true"
aria-expanded =" false">Library</a>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">HTML-5</a>
<a class = "dropdown-item" href = "#">CSS-3</a>
<a class = "dropdown-item" href = "#">JavaScript</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#">Bootstrap 4</a>
</div>
</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>
<!-- 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>Il produira le résultat suivant -
Production
Onglets et pilules commutables
Vous pouvez créer des onglets ou des pilules basculables en ajoutant l' attribut data-toggle = "tab" ou data-toggle = "pill" à l'élément <a>. Pour chaque onglet ou pilule, ajoutez une classe .tab-pane avec un ID unique et entrez le contenu dans un élément <div> avec la classe .tab-content .
L'exemple suivant illustre ceci -
Exemple
<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>Toggleable Tabs</h2>
<ul class = "nav nav-tabs" id = "myTab" role = "tablist">
<li class = "nav-item">
<a class = "nav-link active" id = "home-tab" data-toggle = "tab"
href = "#home" role = "tab" aria-controls = "home"
aria-selected = "true">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" id = "aboutus-tab" data-toggle = "tab"
href = "#aboutus" role = "tab" aria-controls = "aboutus"
aria-selected = "false">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" id = "contact-tab" data-toggle = "tab"
href = "#contact" role = "tab" aria-controls = "contact"
aria-selected = "false">Contact</a>
</li>
</ul>
<div class = "tab-content" id = "myTabContent">
<div class = "tab-pane fade show active" id = "home" role = "tabpanel"
aria-labelledby = "home-tab">Content for Home tab</div>
<div class = "tab-pane fade" id = "aboutus" role = "tabpanel"
aria-labelledby = "aboutus-tab">Content for About Us tab</div>
<div class = "tab-pane fade" id = "contact" role = "tabpanel"
aria-labelledby = "contact-tab">Content for Contact tab</div>
</div>
<br>
<h2>Toggleable Pills</h2>
<ul class = "nav nav-pills mb-3" id = "pills-tab" role = "tablist">
<li class = "nav-item">
<a class = "nav-link active" id = "pills-home-tab"
data-toggle = "pill" href = "#pills-home" role = "tab"
aria-controls = "pills-home" aria-selected = "true">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" id = "pills-aboutus-tab" data-toggle = "pill"
href = "#pills-aboutus" role = "tab" aria-controls = "pills-aboutus"
aria-selected = "false">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" id = "pills-contact-tab" data-toggle = "pill"
href = "#pills-contact" role = "tab" aria-controls = "pills-contact"
aria-selected = "false">Contact</a>
</li>
</ul>
<div class = "tab-content" id = "pills-tabContent">
<div class = "tab-pane fade show active" id = "pills-home"
role = "tabpanel" aria-labelledby = "pills-home-tab">
Content for Home tab
</div>
<div class = "tab-pane fade" id = "pills-aboutus" role = "tabpanel"
aria-labelledby = "pills-aboutus-tab">
Content for About Us tab
</div>
<div class = "tab-pane fade" id = "pills-contact" role = "tabpanel"
aria-labelledby = "pills-contact-tab">
Content for Contact tab
</div>
</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>Il produira le résultat suivant -