From 0bb8f991a032ff984f45ede26b53643ffa93891b Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 19 Jan 2021 08:34:18 +0200 Subject: Add v4.6.0 docs --- docs/4.6/examples/album/album.css | 33 ++ docs/4.6/examples/album/index.html | 271 +++++++++++ docs/4.6/examples/blog/blog.css | 106 +++++ docs/4.6/examples/blog/index.html | 253 +++++++++++ docs/4.6/examples/carousel/carousel.css | 90 ++++ docs/4.6/examples/carousel/index.html | 227 +++++++++ docs/4.6/examples/checkout/form-validation.css | 5 + docs/4.6/examples/checkout/form-validation.js | 21 + docs/4.6/examples/checkout/index.html | 277 +++++++++++ docs/4.6/examples/cover/cover.css | 106 +++++ docs/4.6/examples/cover/index.html | 84 ++++ docs/4.6/examples/dashboard/dashboard.css | 103 +++++ docs/4.6/examples/dashboard/dashboard.js | 53 +++ docs/4.6/examples/dashboard/index.html | 303 ++++++++++++ .../examples/floating-labels/floating-labels.css | 130 ++++++ docs/4.6/examples/floating-labels/index.html | 83 ++++ docs/4.6/examples/grid/grid.css | 13 + docs/4.6/examples/grid/index.html | 188 ++++++++ docs/4.6/examples/index.html | 506 +++++++++++++++++++++ docs/4.6/examples/jumbotron/index.html | 134 ++++++ docs/4.6/examples/jumbotron/jumbotron.css | 4 + docs/4.6/examples/navbar-bottom/index.html | 93 ++++ docs/4.6/examples/navbar-fixed/index.html | 92 ++++ .../4.6/examples/navbar-fixed/navbar-top-fixed.css | 5 + docs/4.6/examples/navbar-static/index.html | 92 ++++ docs/4.6/examples/navbar-static/navbar-top.css | 4 + docs/4.6/examples/navbars/index.html | 416 +++++++++++++++++ docs/4.6/examples/navbars/navbar.css | 7 + docs/4.6/examples/offcanvas/index.html | 195 ++++++++ docs/4.6/examples/offcanvas/offcanvas.css | 76 ++++ docs/4.6/examples/offcanvas/offcanvas.js | 7 + docs/4.6/examples/pricing/index.html | 161 +++++++ docs/4.6/examples/pricing/pricing.css | 20 + docs/4.6/examples/product/index.html | 200 ++++++++ docs/4.6/examples/product/product.css | 74 +++ docs/4.6/examples/sign-in/index.html | 73 +++ docs/4.6/examples/sign-in/signin.css | 44 ++ docs/4.6/examples/starter-template/index.html | 102 +++++ .../examples/starter-template/starter-template.css | 7 + docs/4.6/examples/sticky-footer-navbar/index.html | 102 +++++ .../sticky-footer-navbar/sticky-footer-navbar.css | 20 + docs/4.6/examples/sticky-footer/index.html | 72 +++ docs/4.6/examples/sticky-footer/sticky-footer.css | 13 + 43 files changed, 4865 insertions(+) create mode 100644 docs/4.6/examples/album/album.css create mode 100644 docs/4.6/examples/album/index.html create mode 100644 docs/4.6/examples/blog/blog.css create mode 100644 docs/4.6/examples/blog/index.html create mode 100644 docs/4.6/examples/carousel/carousel.css create mode 100644 docs/4.6/examples/carousel/index.html create mode 100644 docs/4.6/examples/checkout/form-validation.css create mode 100644 docs/4.6/examples/checkout/form-validation.js create mode 100644 docs/4.6/examples/checkout/index.html create mode 100644 docs/4.6/examples/cover/cover.css create mode 100644 docs/4.6/examples/cover/index.html create mode 100644 docs/4.6/examples/dashboard/dashboard.css create mode 100644 docs/4.6/examples/dashboard/dashboard.js create mode 100644 docs/4.6/examples/dashboard/index.html create mode 100644 docs/4.6/examples/floating-labels/floating-labels.css create mode 100644 docs/4.6/examples/floating-labels/index.html create mode 100644 docs/4.6/examples/grid/grid.css create mode 100644 docs/4.6/examples/grid/index.html create mode 100644 docs/4.6/examples/index.html create mode 100644 docs/4.6/examples/jumbotron/index.html create mode 100644 docs/4.6/examples/jumbotron/jumbotron.css create mode 100644 docs/4.6/examples/navbar-bottom/index.html create mode 100644 docs/4.6/examples/navbar-fixed/index.html create mode 100644 docs/4.6/examples/navbar-fixed/navbar-top-fixed.css create mode 100644 docs/4.6/examples/navbar-static/index.html create mode 100644 docs/4.6/examples/navbar-static/navbar-top.css create mode 100644 docs/4.6/examples/navbars/index.html create mode 100644 docs/4.6/examples/navbars/navbar.css create mode 100644 docs/4.6/examples/offcanvas/index.html create mode 100644 docs/4.6/examples/offcanvas/offcanvas.css create mode 100644 docs/4.6/examples/offcanvas/offcanvas.js create mode 100644 docs/4.6/examples/pricing/index.html create mode 100644 docs/4.6/examples/pricing/pricing.css create mode 100644 docs/4.6/examples/product/index.html create mode 100644 docs/4.6/examples/product/product.css create mode 100644 docs/4.6/examples/sign-in/index.html create mode 100644 docs/4.6/examples/sign-in/signin.css create mode 100644 docs/4.6/examples/starter-template/index.html create mode 100644 docs/4.6/examples/starter-template/starter-template.css create mode 100644 docs/4.6/examples/sticky-footer-navbar/index.html create mode 100644 docs/4.6/examples/sticky-footer-navbar/sticky-footer-navbar.css create mode 100644 docs/4.6/examples/sticky-footer/index.html create mode 100644 docs/4.6/examples/sticky-footer/sticky-footer.css (limited to 'docs/4.6/examples') diff --git a/docs/4.6/examples/album/album.css b/docs/4.6/examples/album/album.css new file mode 100644 index 000000000..bc81349c5 --- /dev/null +++ b/docs/4.6/examples/album/album.css @@ -0,0 +1,33 @@ +.jumbotron { + padding-top: 3rem; + padding-bottom: 3rem; + margin-bottom: 0; + background-color: #fff; +} +@media (min-width: 768px) { + .jumbotron { + padding-top: 6rem; + padding-bottom: 6rem; + } +} + +.jumbotron p:last-child { + margin-bottom: 0; +} + +.jumbotron h1 { + font-weight: 300; +} + +.jumbotron .container { + max-width: 40rem; +} + +footer { + padding-top: 3rem; + padding-bottom: 3rem; +} + +footer p { + margin-bottom: .25rem; +} diff --git a/docs/4.6/examples/album/index.html b/docs/4.6/examples/album/index.html new file mode 100644 index 000000000..87e6f08d7 --- /dev/null +++ b/docs/4.6/examples/album/index.html @@ -0,0 +1,271 @@ + + + + + + + + + Album example · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + Album + + +
+
+
+ +
+ +
+
+

Album example

+

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

+

+ Main call to action + Secondary action +

+
+
+ +
+
+ +
+
+
+ PlaceholderThumbnail + +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ PlaceholderThumbnail + +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ PlaceholderThumbnail + +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+ +
+
+ PlaceholderThumbnail + +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ PlaceholderThumbnail + +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ PlaceholderThumbnail + +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+ +
+
+ PlaceholderThumbnail + +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ PlaceholderThumbnail + +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ PlaceholderThumbnail + +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+
+ +
+ + + + + + + + + + diff --git a/docs/4.6/examples/blog/blog.css b/docs/4.6/examples/blog/blog.css new file mode 100644 index 000000000..dbe4183d0 --- /dev/null +++ b/docs/4.6/examples/blog/blog.css @@ -0,0 +1,106 @@ +/* stylelint-disable selector-list-comma-newline-after */ + +.blog-header { + line-height: 1; + border-bottom: 1px solid #e5e5e5; +} + +.blog-header-logo { + font-family: "Playfair Display", Georgia, "Times New Roman", serif; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Playfair Display", Georgia, "Times New Roman", serif; +} + +.display-4 { + font-size: 2.5rem; +} +@media (min-width: 768px) { + .display-4 { + font-size: 3rem; + } +} + +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} + +.nav-scroller .nav { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +.nav-scroller .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; +} + +.card-img-right { + height: 100%; + border-radius: 0 3px 3px 0; +} + +.flex-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} +.blog-pagination > .btn { + border-radius: 2rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-title { + margin-bottom: .25rem; + font-size: 2.5rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #999; +} + +/* + * Footer + */ +.blog-footer { + padding: 2.5rem 0; + color: #999; + text-align: center; + background-color: #f9f9f9; + border-top: .05rem solid #e5e5e5; +} +.blog-footer p:last-child { + margin-bottom: 0; +} diff --git a/docs/4.6/examples/blog/index.html b/docs/4.6/examples/blog/index.html new file mode 100644 index 000000000..8076ae8e9 --- /dev/null +++ b/docs/4.6/examples/blog/index.html @@ -0,0 +1,253 @@ + + + + + + + + + Blog Template · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ Subscribe +
+
+ +
+
+ + Search + + Sign up +
+
+
+ +
+ +
+ +
+
+

Title of a longer featured blog post

+

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.

+

Continue reading...

+
+
+ +
+
+
+
+ World +

Featured post

+
Nov 12
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ Continue reading +
+
+ PlaceholderThumbnail + +
+
+
+
+
+
+ Design +

Post title

+
Nov 11
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ Continue reading +
+
+ PlaceholderThumbnail + +
+
+
+
+
+ +
+
+
+

+ From the Firehose +

+ +
+

Sample blog post

+

January 1, 2014 by Mark

+ +

This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.

+
+

Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, you're a firework. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.

+
+

Bikinis, zucchinis, Martinis, no weenies. I know there will be sacrifice but that's the price. This is how we do it. I'm not sticking around to watch you go down. You think you're so rock and roll, but you're really just a joke. I know one spark will shock the world, yeah yeah. Can't replace you with a million rings.

+
+

Trying to connect the dots, don't know what to tell my boss. Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine. Glitter all over the room pink flamingos in the pool.

+

Heading

+

Suiting up for my crowning battle. If you only knew what the future holds. Bring the beat back. Peach-pink lips, yeah, everybody stares.

+

Sub-heading

+

You give a hundred reasons why, and you say you're really gonna try. Straight stuntin' yeah we do it like that. Calling out my name. ‘Cause I, I’m capable of anything.

+ 
Example code block
+

Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine.

+

Sub-heading

+

You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out.

+
    +
  • Got a motel and built a fort out of sheets.
    • +
  • Your kiss is cosmic, every move is magic.
    • +
  • Suiting up for my crowning battle.
    • +
+

Takes you miles high, so high, 'cause she’s got that one international smile.

+
    +
  1. Scared to rock the boat and make a mess.
    2. +
  2. I could have rewrite your addiction.
    3. +
  3. I know you get me so I let my walls come down.
    4. +
+

After a hurricane comes a rainbow.

+
+ +
+

Another blog post

+

December 23, 2013 by Jacob

+ +

I am ready for the road less traveled. Already brushing off the dust. Yeah, you're lucky if you're on her plane. I used to bite my tongue and hold my breath. Uh, She’s a beast. I call her Karma (come back). Black ray-bans, you know she's with the band. I can't sleep let's run away and don't ever look back, don't ever look back.

+
+

Growing fast into a bolt of lightning. Be careful Try not to lead her on

+
+

I'm intrigued, for a peek, heard it's fascinating. Oh oh! Wanna be a victim ready for abduction. She's got that international smile, oh yeah, she's got that one international smile. Do you ever feel, feel so paper thin. I’m gon’ put her in a coma. Sun-kissed skin so hot we'll melt your popsicle.

+

This is transcendental, on another level, boy, you're my lucky star.

+
+ +
+

New feature

+

December 14, 2013 by Chris

+ +

From Tokyo to Mexico, to Rio. Yeah, you take me to utopia. I'm walking on air. We'd make out in your Mustang to Radiohead. I mean the ones, I mean like she's the one. Sun-kissed skin so hot we'll melt your popsicle. Slow cooking pancakes for my boy, still up, still fresh as a Daisy.

+
    +
  • I hope you got a healthy appetite.
    • +
  • You're never gonna be unsatisfied.
    • +
  • Got a motel and built a fort out of sheets.
    • +
+

Don't need apologies. Boy, you're an alien your touch so foreign, it's supernatural, extraterrestrial. Talk about our future like we had a clue. I can feel a phoenix inside of me.

+
+ + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/4.6/examples/carousel/carousel.css b/docs/4.6/examples/carousel/carousel.css new file mode 100644 index 000000000..20300e90c --- /dev/null +++ b/docs/4.6/examples/carousel/carousel.css @@ -0,0 +1,90 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: #5a5a5a; +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} +.carousel-item > img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +.marketing h2 { + font-weight: 400; +} +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-weight: 300; + line-height: 1; + letter-spacing: -.05rem; +} + + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/docs/4.6/examples/carousel/index.html b/docs/4.6/examples/carousel/index.html new file mode 100644 index 000000000..f9098953d --- /dev/null +++ b/docs/4.6/examples/carousel/index.html @@ -0,0 +1,227 @@ + + + + + + + + + Carousel Template · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ + + + + + + +
+ + +
+
+ Placeholder140x140 + +

Heading

+

Some representative placeholder content for the three columns of text below the carousel. This is the first column.

+

View details »

+
+
+ Placeholder140x140 + +

Heading

+

Another exciting bit of representative placeholder content. This time, we've moved on to the second column.

+

View details »

+
+
+ Placeholder140x140 + +

Heading

+

And lastly this, the third column of representative placeholder content.

+

View details »

+
+
+ + + + +
+ +
+
+

First featurette heading. It’ll blow your mind.

+

Some great placeholder content for the first featurette here. Imagine some exciting prose here.

+
+
+ Placeholder500x500 + +
+
+ +
+ +
+
+

Oh yeah, it’s that good. See for yourself.

+

Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.

+
+
+ Placeholder500x500 + +
+
+ +
+ +
+
+

And lastly, this one. Checkmate.

+

And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.

+
+
+ Placeholder500x500 + +
+
+ +
+ + + +
+ + + + +
+ + + + + + + + diff --git a/docs/4.6/examples/checkout/form-validation.css b/docs/4.6/examples/checkout/form-validation.css new file mode 100644 index 000000000..7a6246fae --- /dev/null +++ b/docs/4.6/examples/checkout/form-validation.css @@ -0,0 +1,5 @@ +.container { + max-width: 960px; +} + +.lh-condensed { line-height: 1.25; } diff --git a/docs/4.6/examples/checkout/form-validation.js b/docs/4.6/examples/checkout/form-validation.js new file mode 100644 index 000000000..59291c8b3 --- /dev/null +++ b/docs/4.6/examples/checkout/form-validation.js @@ -0,0 +1,21 @@ +// Example starter JavaScript for disabling form submissions if there are invalid fields +(function () { + 'use strict' + + window.addEventListener('load', function () { + // Fetch all the forms we want to apply custom Bootstrap validation styles to + var forms = document.getElementsByClassName('needs-validation') + + // Loop over them and prevent submission + Array.prototype.filter.call(forms, function (form) { + form.addEventListener('submit', function (event) { + if (form.checkValidity() === false) { + event.preventDefault() + event.stopPropagation() + } + + form.classList.add('was-validated') + }, false) + }) + }, false) +})() diff --git a/docs/4.6/examples/checkout/index.html b/docs/4.6/examples/checkout/index.html new file mode 100644 index 000000000..9bb5872e5 --- /dev/null +++ b/docs/4.6/examples/checkout/index.html @@ -0,0 +1,277 @@ + + + + + + + + + Checkout example · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +

Checkout form

+

Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

+
+ +
+
+

+ Your cart + 3 +

+
    +
  • +
    +
    Product name
    + Brief description +
    + $12 +
    • +
  • +
    +
    Second product
    + Brief description +
    + $8 +
    • +
  • +
    +
    Third item
    + Brief description +
    + $5 +
    • +
  • +
    +
    Promo code
    + EXAMPLECODE +
    + -$5 +
    • +
  • + Total (USD) + $20 +
    • +
+ +
+
+ +
+ +
+
+
+
+
+

Billing address

+
+
+
+ + +
+ Valid first name is required. +
+
+
+ + +
+ Valid last name is required. +
+
+
+ +
+ +
+
+ @ +
+ +
+ Your username is required. +
+
+
+ +
+ + +
+ Please enter a valid email address for shipping updates. +
+
+ +
+ + +
+ Please enter your shipping address. +
+
+ +
+ + +
+ +
+
+ + +
+ Please select a valid country. +
+
+
+ + +
+ Please provide a valid state. +
+
+
+ + +
+ Zip code required. +
+
+
+
+
+ + +
+
+ + +
+
+ +

Payment

+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + + Full name as displayed on card +
+ Name on card is required +
+
+
+ + +
+ Credit card number is required +
+
+
+
+
+ + +
+ Expiration date required +
+
+
+ + +
+ Security code required +
+
+
+
+ +
+
+
+ + +
+ + + + + + + + + diff --git a/docs/4.6/examples/cover/cover.css b/docs/4.6/examples/cover/cover.css new file mode 100644 index 000000000..7c6d33cdd --- /dev/null +++ b/docs/4.6/examples/cover/cover.css @@ -0,0 +1,106 @@ +/* + * Globals + */ + +/* Links */ +a, +a:focus, +a:hover { + color: #fff; +} + +/* Custom default button */ +.btn-secondary, +.btn-secondary:hover, +.btn-secondary:focus { + color: #333; + text-shadow: none; /* Prevent inheritance from `body` */ + background-color: #fff; + border: .05rem solid #fff; +} + + +/* + * Base structure + */ + +html, +body { + height: 100%; + background-color: #333; +} + +body { + display: -ms-flexbox; + display: flex; + color: #fff; + text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); + box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); +} + +.cover-container { + max-width: 42em; +} + + +/* + * Header + */ +.masthead { + margin-bottom: 2rem; +} + +.masthead-brand { + margin-bottom: 0; +} + +.nav-masthead .nav-link { + padding: .25rem 0; + font-weight: 700; + color: rgba(255, 255, 255, .5); + background-color: transparent; + border-bottom: .25rem solid transparent; +} + +.nav-masthead .nav-link:hover, +.nav-masthead .nav-link:focus { + border-bottom-color: rgba(255, 255, 255, .25); +} + +.nav-masthead .nav-link + .nav-link { + margin-left: 1rem; +} + +.nav-masthead .active { + color: #fff; + border-bottom-color: #fff; +} + +@media (min-width: 48em) { + .masthead-brand { + float: left; + } + .nav-masthead { + float: right; + } +} + + +/* + * Cover + */ +.cover { + padding: 0 1.5rem; +} +.cover .btn-lg { + padding: .75rem 1.25rem; + font-weight: 700; +} + + +/* + * Footer + */ +.mastfoot { + color: rgba(255, 255, 255, .5); +} diff --git a/docs/4.6/examples/cover/index.html b/docs/4.6/examples/cover/index.html new file mode 100644 index 000000000..95b7cda9e --- /dev/null +++ b/docs/4.6/examples/cover/index.html @@ -0,0 +1,84 @@ + + + + + + + + + Cover Template · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Cover

+ +
+
+ +
+

Cover your page.

+

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

+

+ Learn more +

+
+ + +
+ + + + + diff --git a/docs/4.6/examples/dashboard/dashboard.css b/docs/4.6/examples/dashboard/dashboard.css new file mode 100644 index 000000000..b71942ad1 --- /dev/null +++ b/docs/4.6/examples/dashboard/dashboard.css @@ -0,0 +1,103 @@ +body { + font-size: .875rem; +} + +.feather { + width: 16px; + height: 16px; + vertical-align: text-bottom; +} + +/* + * Sidebar + */ + +.sidebar { + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 100; /* Behind the navbar */ + padding: 48px 0 0; /* Height of navbar */ + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); +} + +@media (max-width: 767.98px) { + .sidebar { + top: 5rem; + } +} + +.sidebar-sticky { + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +@supports ((position: -webkit-sticky) or (position: sticky)) { + .sidebar-sticky { + position: -webkit-sticky; + position: sticky; + } +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-right: 4px; + color: #999; +} + +.sidebar .nav-link.active { + color: #007bff; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.sidebar-heading { + font-size: .75rem; + text-transform: uppercase; +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: 1rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .navbar-toggler { + top: .25rem; + right: 1rem; +} + +.navbar .form-control { + padding: .75rem 1rem; + border-width: 0; + border-radius: 0; +} + +.form-control-dark { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); +} + +.form-control-dark:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); +} diff --git a/docs/4.6/examples/dashboard/dashboard.js b/docs/4.6/examples/dashboard/dashboard.js new file mode 100644 index 000000000..d3f549928 --- /dev/null +++ b/docs/4.6/examples/dashboard/dashboard.js @@ -0,0 +1,53 @@ +/* globals Chart:false, feather:false */ + +(function () { + 'use strict' + + feather.replace() + + // Graphs + var ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + var myChart = new Chart(ctx, { + type: 'line', + data: { + labels: [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday' + ], + datasets: [{ + data: [ + 15339, + 21345, + 18483, + 24003, + 23489, + 24092, + 12034 + ], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false + } + }] + }, + legend: { + display: false + } + } + }) +})() diff --git a/docs/4.6/examples/dashboard/index.html b/docs/4.6/examples/dashboard/index.html new file mode 100644 index 000000000..c8dfef49c --- /dev/null +++ b/docs/4.6/examples/dashboard/index.html @@ -0,0 +1,303 @@ + + + + + + + + + Dashboard Template · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+

Dashboard

+
+
+ + +
+ +
+
+ + + +

Section title

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeaderHeaderHeaderHeader
1,001randomdataplaceholdertext
1,002placeholderirrelevantvisuallayout
1,003datarichdashboardtabular
1,003informationplaceholderillustrativedata
1,004textrandomlayoutdashboard
1,005dashboardirrelevanttextplaceholder
1,006dashboardillustrativerichdata
1,007placeholdertabularinformationirrelevant
1,008randomdataplaceholdertext
1,009placeholderirrelevantvisuallayout
1,010datarichdashboardtabular
1,011informationplaceholderillustrativedata
1,012textplaceholderlayoutdashboard
1,013dashboardirrelevanttextvisual
1,014dashboardillustrativerichdata
1,015randomtabularinformationtext
+
+
+
+
+ + + + + + + + + + + diff --git a/docs/4.6/examples/floating-labels/floating-labels.css b/docs/4.6/examples/floating-labels/floating-labels.css new file mode 100644 index 000000000..e08144d81 --- /dev/null +++ b/docs/4.6/examples/floating-labels/floating-labels.css @@ -0,0 +1,130 @@ +html, +body { + height: 100%; +} + +body { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + padding-top: 40px; + padding-bottom: 40px; + background-color: #f5f5f5; +} + +.form-signin { + width: 100%; + max-width: 420px; + padding: 15px; + margin: auto; +} + +.form-label-group { + position: relative; + margin-bottom: 1rem; +} + +.form-label-group input, +.form-label-group label { + height: 3.125rem; + padding: .75rem; +} + +.form-label-group label { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + margin-bottom: 0; /* Override default `