mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-20 20:00:36 +03:00
Add new navbar example with offcanvas
This commit is contained in:
Mark Otto
@@ -7,30 +7,39 @@ aliases: "/examples/"
|
|||||||
|
|
||||||
{{< list-examples.inline >}}
|
{{< list-examples.inline >}}
|
||||||
{{ range $entry := $.Site.Data.examples -}}
|
{{ range $entry := $.Site.Data.examples -}}
|
||||||
<h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
|
<div class="row g-lg-5 mb-5">
|
||||||
<p>{{ $entry.description }}</p>
|
<div class="col-lg-3">
|
||||||
{{ if eq $entry.category "RTL" -}}
|
<h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
|
||||||
<div class="bd-callout bd-callout-warning">
|
<p>{{ $entry.description }}</p>
|
||||||
<p>The RTL feature is still <strong>experimental</strong> and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? <a href="{{ $.Site.Params.repo }}/issues/new">Open an issue</a>, we'd love to get your insights.</p>
|
{{ if eq $entry.category "RTL" -}}
|
||||||
</div>
|
<div class="bd-callout bd-callout-warning small">
|
||||||
{{ end -}}
|
<p>
|
||||||
|
<strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
|
||||||
{{ range $i, $example := $entry.examples -}}
|
</p>
|
||||||
{{- $len := len $entry.examples -}}
|
<p><a href="{{ $.Site.Params.repo }}/issues/new">Please open an issue.</a></p>
|
||||||
{{ if (eq $i 0) }}<div class="row">{{ end }}
|
|
||||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
|
||||||
<a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
|
|
||||||
<img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
|
|
||||||
/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
|
|
||||||
src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
|
|
||||||
alt=""
|
|
||||||
width="480" height="300"
|
|
||||||
loading="lazy">
|
|
||||||
<h3 class="h5 mb-1">{{ $example.name }}</h3>
|
|
||||||
</a>
|
|
||||||
<p class="text-muted">{{ $example.description }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
|
{{ end -}}
|
||||||
{{ end -}}
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-9">
|
||||||
|
{{ range $i, $example := $entry.examples -}}
|
||||||
|
{{- $len := len $entry.examples -}}
|
||||||
|
{{ if (eq $i 0) }}<div class="row">{{ end }}
|
||||||
|
<div class="col-sm-6 col-md-4 mb-3">
|
||||||
|
<a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
|
||||||
|
<img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
|
||||||
|
/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
|
||||||
|
src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
|
||||||
|
alt=""
|
||||||
|
width="480" height="300"
|
||||||
|
loading="lazy">
|
||||||
|
<h3 class="h5 mb-1">{{ $example.name }}</h3>
|
||||||
|
</a>
|
||||||
|
<p class="text-muted">{{ $example.description }}</p>
|
||||||
|
</div>
|
||||||
|
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
|
||||||
|
{{ end -}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{{ end -}}
|
{{ end -}}
|
||||||
{{< /list-examples.inline >}}
|
{{< /list-examples.inline >}}
|
||||||
|
|||||||
@@ -0,0 +1,147 @@
|
|||||||
|
---
|
||||||
|
layout: examples
|
||||||
|
title: Navbar Template
|
||||||
|
extra_css:
|
||||||
|
- "navbar.css"
|
||||||
|
---
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<nav class="navbar navbar-dark bg-dark" aria-label="Dark offcanvas navbar">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Dark offcanvas navbar</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="offcanvas offcanvas-end text-white bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
|
||||||
|
<div class="offcanvas-header">
|
||||||
|
<h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">Offcanvas</h5>
|
||||||
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas-body">
|
||||||
|
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Link</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDarkDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDarkDropdown">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li>
|
||||||
|
<hr class="dropdown-divider">
|
||||||
|
</li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="d-flex mt-3" role="search">
|
||||||
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="navbar bg-light" aria-label="Light offcanvas navbar">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Light offcanvas navbar</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight" aria-labelledby="offcanvasNavbarLightLabel">
|
||||||
|
<div class="offcanvas-header">
|
||||||
|
<h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">Offcanvas</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas-body">
|
||||||
|
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Link</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarLightDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarLightDropdown">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li>
|
||||||
|
<hr class="dropdown-divider">
|
||||||
|
</li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="d-flex mt-3" role="search">
|
||||||
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Offcanvas navbar large">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Responsive offcanvas navbar</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="offcanvas offcanvas-end text-white bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
|
||||||
|
<div class="offcanvas-header">
|
||||||
|
<h5 class="offcanvas-title" id="offcanvasNavbar2Label">Offcanvas</h5>
|
||||||
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas-body">
|
||||||
|
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Link</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarLgDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarLgDropdown">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li>
|
||||||
|
<hr class="dropdown-divider">
|
||||||
|
</li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="d-flex mt-3 mt-lg-0" role="search">
|
||||||
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container my-5">
|
||||||
|
<div class="bg-light p-5 rounded">
|
||||||
|
<div class="col-sm-8 py-5 mx-auto">
|
||||||
|
<h1 class="display-5 fw-normal">Navbar with offcanvas examples</h1>
|
||||||
|
<p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
|
||||||
|
<p>From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with offcanvases built in. Resize your browser window to the large breakpoint to see the toggle for the offcanvas.</p>
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-primary" href="{{< docsref "/components/navbar#offcanvas" >}}" role="button">Learn more about offcanvas navbars »</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
body {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
@@ -63,6 +63,8 @@
|
|||||||
examples:
|
examples:
|
||||||
- name: Navbars
|
- name: Navbars
|
||||||
description: "Demonstration of all responsive and container options for the navbar."
|
description: "Demonstration of all responsive and container options for the navbar."
|
||||||
|
- name: Navbars offcanvas
|
||||||
|
description: "Same as the Navbars example, but with our offcanvas component."
|
||||||
- name: Navbar static
|
- name: Navbar static
|
||||||
description: "Single navbar example of a static top navbar along with some additional content."
|
description: "Single navbar example of a static top navbar along with some additional content."
|
||||||
- name: Navbar fixed
|
- name: Navbar fixed
|
||||||
|
|||||||
@@ -35,7 +35,7 @@
|
|||||||
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
|
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
|
||||||
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
|
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
|
||||||
</div>
|
</div>
|
||||||
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
|
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
|
||||||
<p class="col-md-10 col-lg-8 mx-auto lead">
|
<p class="col-md-10 col-lg-8 mx-auto lead">
|
||||||
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
|
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Reference in New Issue
Block a user