diff options
author | Mark Otto <markdotto@gmail.com> | 2022-02-23 07:06:08 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2022-02-23 22:46:05 +0300 |
commit | 112fb53c3557da916444c243223ac6c404ef3c10 (patch) | |
tree | c0553fe6732b3ea34906639d7be2c7c74a0b4380 | |
parent | d152f4f5a286dc657a973c251a159e500fa5510c (diff) |
Add new navbar example with offcanvas
-rw-r--r-- | site/content/docs/5.1/examples/_index.md | 57 | ||||
-rw-r--r-- | site/content/docs/5.1/examples/navbars-offcanvas/index.html | 147 | ||||
-rw-r--r-- | site/content/docs/5.1/examples/navbars-offcanvas/navbar.css | 7 | ||||
-rw-r--r-- | site/data/examples.yml | 2 | ||||
-rw-r--r-- | site/layouts/_default/single.html | 2 | ||||
-rw-r--r-- | site/static/docs/5.1/assets/img/examples/navbars-offcanvas.png | bin | 0 -> 6919 bytes | |||
-rw-r--r-- | site/static/docs/5.1/assets/img/examples/navbars-offcanvas@2x.png | bin | 0 -> 17121 bytes |
7 files changed, 190 insertions, 25 deletions
diff --git a/site/content/docs/5.1/examples/_index.md b/site/content/docs/5.1/examples/_index.md index 3d5bfab2fb..39102f3646 100644 --- a/site/content/docs/5.1/examples/_index.md +++ b/site/content/docs/5.1/examples/_index.md @@ -7,30 +7,39 @@ aliases: "/examples/" {{< list-examples.inline >}} {{ range $entry := $.Site.Data.examples -}} - <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2> - <p>{{ $entry.description }}</p> - {{ if eq $entry.category "RTL" -}} - <div class="bd-callout bd-callout-warning"> - <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> - </div> - {{ end -}} - - {{ 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 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 class="row g-lg-5 mb-5"> + <div class="col-lg-3"> + <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2> + <p>{{ $entry.description }}</p> + {{ if eq $entry.category "RTL" -}} + <div class="bd-callout bd-callout-warning small"> + <p> + <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest? + </p> + <p><a href="{{ $.Site.Params.repo }}/issues/new">Please open an issue.</a></p> </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 -}} {{< /list-examples.inline >}} diff --git a/site/content/docs/5.1/examples/navbars-offcanvas/index.html b/site/content/docs/5.1/examples/navbars-offcanvas/index.html new file mode 100644 index 0000000000..47041fa011 --- /dev/null +++ b/site/content/docs/5.1/examples/navbars-offcanvas/index.html @@ -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> diff --git a/site/content/docs/5.1/examples/navbars-offcanvas/navbar.css b/site/content/docs/5.1/examples/navbars-offcanvas/navbar.css new file mode 100644 index 0000000000..70d209409d --- /dev/null +++ b/site/content/docs/5.1/examples/navbars-offcanvas/navbar.css @@ -0,0 +1,7 @@ +body { + padding-bottom: 20px; +} + +.navbar { + margin-bottom: 20px; +} diff --git a/site/data/examples.yml b/site/data/examples.yml index 6d6419d218..38644ef4a0 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -63,6 +63,8 @@ examples: - name: Navbars 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 description: "Single navbar example of a static top navbar along with some additional content." - name: Navbar fixed diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index d6cc8eddff..fdfb2e0942 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -35,7 +35,7 @@ <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger"> {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }} </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"> 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> diff --git a/site/static/docs/5.1/assets/img/examples/navbars-offcanvas.png b/site/static/docs/5.1/assets/img/examples/navbars-offcanvas.png Binary files differnew file mode 100644 index 0000000000..81b000dbfb --- /dev/null +++ b/site/static/docs/5.1/assets/img/examples/navbars-offcanvas.png diff --git a/site/static/docs/5.1/assets/img/examples/navbars-offcanvas@2x.png b/site/static/docs/5.1/assets/img/examples/navbars-offcanvas@2x.png Binary files differnew file mode 100644 index 0000000000..af5313436f --- /dev/null +++ b/site/static/docs/5.1/assets/img/examples/navbars-offcanvas@2x.png |