diff --git a/site/content/docs/5.1/examples/_index.md b/site/content/docs/5.1/examples/_index.md index 3d5bfab2f..39102f364 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 -}} -

{{ $entry.category }}

-

{{ $entry.description }}

- {{ if eq $entry.category "RTL" -}} -
-

The RTL feature is still experimental and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? Open an issue, we'd love to get your insights.

-
- {{ end -}} - - {{ range $i, $example := $entry.examples -}} - {{- $len := len $entry.examples -}} - {{ if (eq $i 0) }}
{{ end }} -
- - -

{{ $example.name }}

- -

{{ $example.description }}

+
+
+

{{ $entry.category }}

+

{{ $entry.description }}

+ {{ if eq $entry.category "RTL" -}} +
+

+ RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest? +

+

Please open an issue.

- {{ if (eq (add $i 1) $len) }}
{{ end }} - {{ end -}} + {{ end -}} +
+ +
+ {{ range $i, $example := $entry.examples -}} + {{- $len := len $entry.examples -}} + {{ if (eq $i 0) }}
{{ end }} +
+ + +

{{ $example.name }}

+ +

{{ $example.description }}

+
+ {{ if (eq (add $i 1) $len) }}
{{ end }} + {{ end -}} +
+
{{ 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 000000000..47041fa01 --- /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" +--- + +
+ + + + + + +
+
+
+

Navbar with offcanvas examples

+

This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the }}">top and }}">fixed top examples.

+

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.

+

+ }}" role="button">Learn more about offcanvas navbars » +

+
+
+
+
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 000000000..70d209409 --- /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 6d6419d21..38644ef4a 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 d6cc8eddf..fdfb2e094 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -35,7 +35,7 @@
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
-

Go further with Bootstrap Themes

+

Go further with Bootstrap Themes

Need something more than these examples? Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.

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 new file mode 100644 index 000000000..81b000dbf Binary files /dev/null and b/site/static/docs/5.1/assets/img/examples/navbars-offcanvas.png differ 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 new file mode 100644 index 000000000..af5313436 Binary files /dev/null and b/site/static/docs/5.1/assets/img/examples/navbars-offcanvas@2x.png differ