From 3e76d6565603fafa2c85ad81d7b6345c4e279c72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 28 May 2017 22:50:57 -0700 Subject: Rearrange all the docs to allow for a docs/major.minor/ setup --- docs/4.0/examples/offcanvas/index.html | 136 ++++++++++++++++++++++++++++++ docs/4.0/examples/offcanvas/offcanvas.css | 69 +++++++++++++++ docs/4.0/examples/offcanvas/offcanvas.js | 5 ++ 3 files changed, 210 insertions(+) create mode 100644 docs/4.0/examples/offcanvas/index.html create mode 100644 docs/4.0/examples/offcanvas/offcanvas.css create mode 100644 docs/4.0/examples/offcanvas/offcanvas.js (limited to 'docs/4.0/examples/offcanvas') diff --git a/docs/4.0/examples/offcanvas/index.html b/docs/4.0/examples/offcanvas/index.html new file mode 100644 index 000000000..766b66140 --- /dev/null +++ b/docs/4.0/examples/offcanvas/index.html @@ -0,0 +1,136 @@ + + + + + + + + + + Off Canvas Template for Bootstrap + + + + + + + + + + + + +
+ +
+ +
+

+ +

+
+

Hello, world!

+

This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

+
+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+
+ + +
+ +
+ +
+

© Company 2017

+
+ +
+ + + + + + + + + + + + + diff --git a/docs/4.0/examples/offcanvas/offcanvas.css b/docs/4.0/examples/offcanvas/offcanvas.css new file mode 100644 index 000000000..6047cb304 --- /dev/null +++ b/docs/4.0/examples/offcanvas/offcanvas.css @@ -0,0 +1,69 @@ +/* + * Style tweaks + * -------------------------------------------------- + */ +html, +body { + overflow-x: hidden; /* Prevent scroll on narrow devices */ +} +body { + padding-top: 70px; +} +footer { + padding: 30px 0; +} + +/* + * Off Canvas + * -------------------------------------------------- + */ +@media screen and (max-width: 767px) { + .row-offcanvas { + position: relative; + -webkit-transition: all .25s ease-out; + -o-transition: all .25s ease-out; + transition: all .25s ease-out; + } + + .row-offcanvas-right { + right: 0; + } + + .row-offcanvas-left { + left: 0; + } + + .row-offcanvas-right + .sidebar-offcanvas { + right: -100%; /* 12 columns */ + } + + .row-offcanvas-right.active + .sidebar-offcanvas { + right: -50%; /* 6 columns */ + } + + .row-offcanvas-left + .sidebar-offcanvas { + left: -100%; /* 12 columns */ + } + + .row-offcanvas-left.active + .sidebar-offcanvas { + left: -50%; /* 6 columns */ + } + + .row-offcanvas-right.active { + right: 50%; /* 6 columns */ + } + + .row-offcanvas-left.active { + left: 50%; /* 6 columns */ + } + + .sidebar-offcanvas { + position: absolute; + top: 0; + width: 50%; /* 6 columns */ + } +} diff --git a/docs/4.0/examples/offcanvas/offcanvas.js b/docs/4.0/examples/offcanvas/offcanvas.js new file mode 100644 index 000000000..d14cd68b8 --- /dev/null +++ b/docs/4.0/examples/offcanvas/offcanvas.js @@ -0,0 +1,5 @@ +$(document).ready(function () { + $('[data-toggle="offcanvas"]').click(function () { + $('.row-offcanvas').toggleClass('active') + }); +}); -- cgit v1.2.3 From 0ef7cb866e8eb3289470c57fe35d01f31a4c0e14 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 29 May 2017 11:55:36 -0700 Subject: more examples path fixing --- docs/4.0/examples/offcanvas/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/4.0/examples/offcanvas') diff --git a/docs/4.0/examples/offcanvas/index.html b/docs/4.0/examples/offcanvas/index.html index 766b66140..d0581f997 100644 --- a/docs/4.0/examples/offcanvas/index.html +++ b/docs/4.0/examples/offcanvas/index.html @@ -10,7 +10,7 @@ Off Canvas Template for Bootstrap - + @@ -126,11 +126,11 @@ ================================================== --> - + - + - + -- cgit v1.2.3