diff options
| author | lucascono <[email protected]> | 2017-10-04 05:33:17 -0300 |
|---|---|---|
| committer | lucascono <[email protected]> | 2017-10-04 05:33:17 -0300 |
| commit | 8c04a74c8c7f0174ea08bc02fa3762f49bf615a3 (patch) | |
| tree | db9d6923c082243d765c57885992db8dd26a70b5 /docs/4.0/examples | |
| parent | 9aff890efa3798f831b714c41794c9fee0684bae (diff) | |
| parent | b29b1e155880ac953899889c9cbb67f7f7df0529 (diff) | |
| download | bootstrap-8c04a74c8c7f0174ea08bc02fa3762f49bf615a3.tar.xz bootstrap-8c04a74c8c7f0174ea08bc02fa3762f49bf615a3.zip | |
Merge remote-tracking branch 'refs/remotes/twbs/v4-dev' into v4-dev
Diffstat (limited to 'docs/4.0/examples')
31 files changed, 498 insertions, 517 deletions
diff --git a/docs/4.0/examples/album/index.html b/docs/4.0/examples/album/index.html index 6e7b98597..f704b3f05 100644 --- a/docs/4.0/examples/album/index.html +++ b/docs/4.0/examples/album/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -18,90 +18,96 @@ <body> - <div class="collapse bg-dark" id="navbarHeader"> - <div class="container"> - <div class="row"> - <div class="col-sm-8 py-4"> - <h4 class="text-white">About</h4> - <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p> - </div> - <div class="col-sm-4 py-4"> - <h4 class="text-white">Contact</h4> - <ul class="list-unstyled"> - <li><a href="#" class="text-white">Follow on Twitter</a></li> - <li><a href="#" class="text-white">Like on Facebook</a></li> - <li><a href="#" class="text-white">Email me</a></li> - </ul> + <header> + <div class="collapse bg-dark" id="navbarHeader"> + <div class="container"> + <div class="row"> + <div class="col-sm-8 py-4"> + <h4 class="text-white">About</h4> + <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p> + </div> + <div class="col-sm-4 py-4"> + <h4 class="text-white">Contact</h4> + <ul class="list-unstyled"> + <li><a href="#" class="text-white">Follow on Twitter</a></li> + <li><a href="#" class="text-white">Like on Facebook</a></li> + <li><a href="#" class="text-white">Email me</a></li> + </ul> + </div> </div> </div> </div> - </div> - <div class="navbar navbar-dark bg-dark"> - <div class="container d-flex justify-content-between"> - <a href="#" class="navbar-brand">Album</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> + <div class="navbar navbar-dark bg-dark"> + <div class="container d-flex justify-content-between"> + <a href="#" class="navbar-brand">Album</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + </div> </div> - </div> + </header> - <section class="jumbotron text-center"> - <div class="container"> - <h1 class="jumbotron-heading">Album example</h1> - <p class="lead text-muted">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.</p> - <p> - <a href="#" class="btn btn-primary">Main call to action</a> - <a href="#" class="btn btn-secondary">Secondary action</a> - </p> - </div> - </section> + <main role="main"> - <div class="album text-muted"> - <div class="container"> + <section class="jumbotron text-center"> + <div class="container"> + <h1 class="jumbotron-heading">Album example</h1> + <p class="lead text-muted">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.</p> + <p> + <a href="#" class="btn btn-primary">Main call to action</a> + <a href="#" class="btn btn-secondary">Secondary action</a> + </p> + </div> + </section> - <div class="row"> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> + <div class="album text-muted"> + <div class="container"> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> + <div class="row"> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> </div> - </div> + </div> </div> - </div> + + </main> <footer class="text-muted"> <div class="container"> @@ -119,14 +125,14 @@ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> + <script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../assets/js/vendor/holder.min.js"></script> <script> - $(function () { - Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" }); + Holder.addTheme('thumb', { + bg: '#55595c', + fg: '#eceeef', + text: 'Thumbnail' }); </script> - <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/blog/blog.css b/docs/4.0/examples/blog/blog.css index 5fed56424..6eda0a7b1 100644 --- a/docs/4.0/examples/blog/blog.css +++ b/docs/4.0/examples/blog/blog.css @@ -20,7 +20,7 @@ h4, .h4, h5, .h5, h6, .h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; + font-weight: 400; color: #333; } @@ -41,8 +41,7 @@ h6, .h6 { .blog-masthead { margin-bottom: 3rem; background-color: #428bca; - -webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1); - box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1); + box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1); } /* Nav links */ @@ -62,7 +61,7 @@ h6, .h6 { .nav-link.active { color: #fff; } -.nav-link.active:after { +.nav-link.active::after { position: absolute; bottom: 0; left: 50%; @@ -89,7 +88,7 @@ h6, .h6 { .blog-title { margin-bottom: 0; font-size: 2rem; - font-weight: normal; + font-weight: 400; } .blog-description { font-size: 1.1rem; @@ -110,7 +109,6 @@ h6, .h6 { /* Sidebar modules for boxing content */ .sidebar-module { padding: 1rem; - /*margin: 0 -1rem 1rem;*/ } .sidebar-module-inset { padding: 1rem; diff --git a/docs/4.0/examples/blog/index.html b/docs/4.0/examples/blog/index.html index 8b2a97f66..2257cef95 100644 --- a/docs/4.0/examples/blog/index.html +++ b/docs/4.0/examples/blog/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -18,26 +18,28 @@ <body> - <div class="blog-masthead"> - <div class="container"> - <nav class="nav"> - <a class="nav-link active" href="#">Home</a> - <a class="nav-link" href="#">New features</a> - <a class="nav-link" href="#">Press</a> - <a class="nav-link" href="#">New hires</a> - <a class="nav-link" href="#">About</a> - </nav> + <header> + <div class="blog-masthead"> + <div class="container"> + <nav class="nav"> + <a class="nav-link active" href="#">Home</a> + <a class="nav-link" href="#">New features</a> + <a class="nav-link" href="#">Press</a> + <a class="nav-link" href="#">New hires</a> + <a class="nav-link" href="#">About</a> + </nav> + </div> </div> - </div> - <div class="blog-header"> - <div class="container"> - <h1 class="blog-title">The Bootstrap Blog</h1> - <p class="lead blog-description">An example blog template built with Bootstrap.</p> + <div class="blog-header"> + <div class="container"> + <h1 class="blog-title">The Bootstrap Blog</h1> + <p class="lead blog-description">An example blog template built with Bootstrap.</p> + </div> </div> - </div> + </header> - <div class="container"> + <main role="main" class="container"> <div class="row"> @@ -109,7 +111,7 @@ </div><!-- /.blog-main --> - <div class="col-sm-3 offset-sm-1 blog-sidebar"> + <aside class="col-sm-3 ml-sm-auto blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> @@ -139,14 +141,14 @@ <li><a href="#">Facebook</a></li> </ol> </div> - </div><!-- /.blog-sidebar --> + </aside><!-- /.blog-sidebar --> </div><!-- /.row --> - </div><!-- /.container --> + </main><!-- /.container --> <footer class="blog-footer"> - <p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> + <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p> <a href="#">Back to top</a> </p> @@ -160,7 +162,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/carousel/carousel.css b/docs/4.0/examples/carousel/carousel.css index 5fbdea52e..f9b5a7e49 100644 --- a/docs/4.0/examples/carousel/carousel.css +++ b/docs/4.0/examples/carousel/carousel.css @@ -18,8 +18,8 @@ body { } /* Since positioning the image, we need to help out the caption */ .carousel-caption { - z-index: 10; bottom: 3rem; + z-index: 10; } /* Declare heights because of positioning of img element */ @@ -45,7 +45,7 @@ body { text-align: center; } .marketing h2 { - font-weight: normal; + font-weight: 400; } .marketing .col-lg-4 p { margin-right: .75rem; diff --git a/docs/4.0/examples/carousel/index.html b/docs/4.0/examples/carousel/index.html index 3b0b692f5..32bc81e5c 100644 --- a/docs/4.0/examples/carousel/index.html +++ b/docs/4.0/examples/carousel/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,158 +17,164 @@ </head> <body> - <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> - <a class="navbar-brand" href="#">Carousel</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - <div class="collapse navbar-collapse" id="navbarCollapse"> - <ul class="navbar-nav mr-auto"> - <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link disabled" href="#">Disabled</a> - </li> - </ul> - <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> - </form> - </div> - </nav> - - <div id="myCarousel" class="carousel slide" data-ride="carousel"> - <ol class="carousel-indicators"> - <li data-target="#myCarousel" data-slide-to="0" class="active"></li> - <li data-target="#myCarousel" data-slide-to="1"></li> - <li data-target="#myCarousel" data-slide-to="2"></li> - </ol> - <div class="carousel-inner"> - <div class="carousel-item active"> - <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> - <div class="container"> - <div class="carousel-caption d-none d-md-block text-left"> - <h1>Example headline.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> + <header> + <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> + <a class="navbar-brand" href="#">Carousel</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarCollapse"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + </ul> + <form class="form-inline mt-2 mt-md-0"> + <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </nav> + </header> + + <main role="main"> + + <div id="myCarousel" class="carousel slide" data-ride="carousel"> + <ol class="carousel-indicators"> + <li data-target="#myCarousel" data-slide-to="0" class="active"></li> + <li data-target="#myCarousel" data-slide-to="1"></li> + <li data-target="#myCarousel" data-slide-to="2"></li> + </ol> + <div class="carousel-inner"> + <div class="carousel-item active"> + <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> + <div class="container"> + <div class="carousel-caption text-left"> + <h1>Example headline.</h1> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> + </div> </div> </div> - </div> - <div class="carousel-item"> - <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> - <div class="container"> - <div class="carousel-caption d-none d-md-block"> - <h1>Another example headline.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> + <div class="carousel-item"> + <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> + <div class="container"> + <div class="carousel-caption"> + <h1>Another example headline.</h1> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> + </div> </div> </div> - </div> - <div class="carousel-item"> - <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> - <div class="container"> - <div class="carousel-caption d-none d-md-block text-right"> - <h1>One more for good measure.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> + <div class="carousel-item"> + <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> + <div class="container"> + <div class="carousel-caption text-right"> + <h1>One more for good measure.</h1> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> + </div> </div> </div> </div> - </div> - <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> - <span class="carousel-control-prev-icon" aria-hidden="true"></span> - <span class="sr-only">Previous</span> - </a> - <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> - <span class="carousel-control-next-icon" aria-hidden="true"></span> - <span class="sr-only">Next</span> - </a> - </div> - - - <!-- Marketing messaging and featurettes - ================================================== --> - <!-- Wrap the rest of the page in another container to center all the content. --> - - <div class="container marketing"> - - <!-- Three columns of text below the carousel --> - <div class="row"> - <div class="col-lg-4"> - <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> - <h2>Heading</h2> - <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> - </div><!-- /.col-lg-4 --> - <div class="col-lg-4"> - <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> - <h2>Heading</h2> - <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> - </div><!-- /.col-lg-4 --> - <div class="col-lg-4"> - <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> - <h2>Heading</h2> - <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> - </div><!-- /.col-lg-4 --> - </div><!-- /.row --> - - - <!-- START THE FEATURETTES --> - - <hr class="featurette-divider"> - - <div class="row featurette"> - <div class="col-md-7"> - <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> - </div> - <div class="col-md-5"> - <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> - </div> + <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> + <span class="carousel-control-prev-icon" aria-hidden="true"></span> + <span class="sr-only">Previous</span> + </a> + <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> + <span class="sr-only">Next</span> + </a> </div> - <hr class="featurette-divider"> - <div class="row featurette"> - <div class="col-md-7 order-md-2"> - <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> - </div> - <div class="col-md-5 order-md-1"> - <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + <!-- Marketing messaging and featurettes + ================================================== --> + <!-- Wrap the rest of the page in another container to center all the content. --> + + <div class="container marketing"> + + <!-- Three columns of text below the carousel --> + <div class="row"> + <div class="col-lg-4"> + <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> + <h2>Heading</h2> + <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> + <h2>Heading</h2> + <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> + <h2>Heading</h2> + <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> + + + <!-- START THE FEATURETTES --> + + <hr class="featurette-divider"> + + <div class="row featurette"> + <div class="col-md-7"> + <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2> + <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + </div> + <div class="col-md-5"> + <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + </div> </div> - </div> - <hr class="featurette-divider"> + <hr class="featurette-divider"> - <div class="row featurette"> - <div class="col-md-7"> - <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + <div class="row featurette"> + <div class="col-md-7 order-md-2"> + <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> + <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + </div> + <div class="col-md-5 order-md-1"> + <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + </div> </div> - <div class="col-md-5"> - <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + + <hr class="featurette-divider"> + + <div class="row featurette"> + <div class="col-md-7"> + <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> + <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + </div> + <div class="col-md-5"> + <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + </div> </div> - </div> - <hr class="featurette-divider"> + <hr class="featurette-divider"> + + <!-- /END THE FEATURETTES --> - <!-- /END THE FEATURETTES --> + </div><!-- /.container --> <!-- FOOTER --> - <footer> + <footer class="container"> <p class="float-right"><a href="#">Back to top</a></p> <p>© 2017 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> </footer> - </div><!-- /.container --> + </main> <!-- Bootstrap core JavaScript @@ -180,7 +186,5 @@ <script src="../../../../dist/js/bootstrap.min.js"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! --> <script src="../../../../assets/js/vendor/holder.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/cover/cover.css b/docs/4.0/examples/cover/cover.css index 8a89cde53..2b208671b 100644 --- a/docs/4.0/examples/cover/cover.css +++ b/docs/4.0/examples/cover/cover.css @@ -41,8 +41,7 @@ body { width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; - -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5); - box-shadow: inset 0 0 5rem rgba(0,0,0,.5); + box-shadow: inset 0 0 5rem rgba(0,0,0,.5); } .site-wrapper-inner { display: table-cell; @@ -73,7 +72,7 @@ body { .nav-masthead .nav-link { padding: .25rem 0; - font-weight: bold; + font-weight: 700; color: rgba(255,255,255,.5); background-color: transparent; border-bottom: .25rem solid transparent; @@ -112,7 +111,7 @@ body { } .cover .btn-lg { padding: .75rem 1.25rem; - font-weight: bold; + font-weight: 700; } @@ -139,10 +138,12 @@ body { position: fixed; bottom: 0; } + /* Start the vertical centering */ .site-wrapper-inner { vertical-align: middle; } + /* Handle the widths */ .masthead, .mastfoot, diff --git a/docs/4.0/examples/cover/index.html b/docs/4.0/examples/cover/index.html index d17e85446..47cbc3edf 100644 --- a/docs/4.0/examples/cover/index.html +++ b/docs/4.0/examples/cover/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -24,7 +24,7 @@ <div class="cover-container"> - <div class="masthead clearfix"> + <header class="masthead clearfix"> <div class="inner"> <h3 class="masthead-brand">Cover</h3> <nav class="nav nav-masthead"> @@ -33,21 +33,21 @@ <a class="nav-link" href="#">Contact</a> </nav> </div> - </div> + </header> - <div class="inner cover"> + <main role="main" class="inner cover"> <h1 class="cover-heading">Cover your page.</h1> <p class="lead">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.</p> <p class="lead"> <a href="#" class="btn btn-lg btn-secondary">Learn more</a> </p> - </div> + </main> - <div class="mastfoot"> + <footer class="mastfoot"> <div class="inner"> - <p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> + <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> </div> - </div> + </footer> </div> @@ -62,7 +62,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/dashboard/dashboard.css b/docs/4.0/examples/dashboard/dashboard.css index b1248cd68..a59005148 100644 --- a/docs/4.0/examples/dashboard/dashboard.css +++ b/docs/4.0/examples/dashboard/dashboard.css @@ -12,8 +12,8 @@ body { */ h1 { - margin-bottom: 20px; padding-bottom: 9px; + margin-bottom: 20px; border-bottom: 1px solid #eee; } @@ -35,8 +35,8 @@ h1 { /* Sidebar navigation */ .sidebar { - padding-left: 0; padding-right: 0; + padding-left: 0; } .sidebar .nav { @@ -59,7 +59,7 @@ h1 { * Dashboard */ - /* Placeholders */ +/* Placeholders */ .placeholders { padding-bottom: 3rem; } diff --git a/docs/4.0/examples/dashboard/index.html b/docs/4.0/examples/dashboard/index.html index 79f871030..ece8fd595 100644 --- a/docs/4.0/examples/dashboard/index.html +++ b/docs/4.0/examples/dashboard/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,33 +17,35 @@ </head> <body> - <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> - <a class="navbar-brand" href="#">Dashboard</a> - <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> + <header> + <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> + <a class="navbar-brand" href="#">Dashboard</a> + <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> - <div class="collapse navbar-collapse" id="navbarsExampleDefault"> - <ul class="navbar-nav mr-auto"> - <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Settings</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Profile</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Help</a> - </li> - </ul> - <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> - </form> - </div> - </nav> + <div class="collapse navbar-collapse" id="navbarsExampleDefault"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Settings</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Profile</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Help</a> + </li> + </ul> + <form class="form-inline mt-2 mt-md-0"> + <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </nav> + </header> <div class="container-fluid"> <div class="row"> @@ -91,7 +93,7 @@ </ul> </nav> - <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main"> + <main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3"> <h1>Dashboard</h1> <section class="row text-center placeholders"> @@ -256,7 +258,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/grid/index.html b/docs/4.0/examples/grid/index.html index c87b91ac7..0be50f816 100644 --- a/docs/4.0/examples/grid/index.html +++ b/docs/4.0/examples/grid/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -131,11 +131,5 @@ </div> </div> <!-- /container --> - - <!-- Bootstrap core JavaScript - ================================================== --> - <!-- Placed at the end of the document so the pages load faster --> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/index.md b/docs/4.0/examples/index.md index dd52fe9bd..344d5be30 100644 --- a/docs/4.0/examples/index.md +++ b/docs/4.0/examples/index.md @@ -1,8 +1,8 @@ --- layout: simple title: Examples -redirect_from: - - /examples/ +description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts. +redirect_from: "/examples/" --- [Download the Bootstrap source code]({{ site.download.source }}) to snag these examples. diff --git a/docs/4.0/examples/jumbotron/index.html b/docs/4.0/examples/jumbotron/index.html index 2defd4882..a6a64cd26 100644 --- a/docs/4.0/examples/jumbotron/index.html +++ b/docs/4.0/examples/jumbotron/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -51,42 +51,46 @@ </div> </nav> - <!-- Main jumbotron for a primary marketing message or call to action --> - <div class="jumbotron"> - <div class="container"> - <h1 class="display-3">Hello, world!</h1> - <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> - <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> - </div> - </div> + <main role="main"> - <div class="container"> - <!-- Example row of columns --> - <div class="row"> - <div class="col-md-4"> - <h2>Heading</h2> - <p>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. </p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> - </div> - <div class="col-md-4"> - <h2>Heading</h2> - <p>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. </p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> - </div> - <div class="col-md-4"> - <h2>Heading</h2> - <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + <!-- Main jumbotron for a primary marketing message or call to action --> + <div class="jumbotron"> + <div class="container"> + <h1 class="display-3">Hello, world!</h1> + <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> + <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> </div> </div> - <hr> + <div class="container"> + <!-- Example row of columns --> + <div class="row"> + <div class="col-md-4"> + <h2>Heading</h2> + <p>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. </p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div> + <div class="col-md-4"> + <h2>Heading</h2> + <p>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. </p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div> + <div class="col-md-4"> + <h2>Heading</h2> + <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div> + </div> + + <hr> + + </div> <!-- /container --> - <footer> - <p>© Company 2017</p> - </footer> - </div> <!-- /container --> + </main> + <footer class="container"> + <p>© Company 2017</p> + </footer> <!-- Bootstrap core JavaScript ================================================== --> @@ -95,7 +99,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/justified-nav/index.html b/docs/4.0/examples/justified-nav/index.html index c05c9a221..495332195 100644 --- a/docs/4.0/examples/justified-nav/index.html +++ b/docs/4.0/examples/justified-nav/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -20,7 +20,7 @@ <div class="container"> - <div class="masthead"> + <header class="masthead"> <h3 class="text-muted">Project name</h3> <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3"> @@ -55,33 +55,37 @@ </ul> </div> </nav> - </div> + </header> - <!-- Jumbotron --> - <div class="jumbotron"> - <h1>Marketing stuff!</h1> - <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p> - <p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p> - </div> + <main role="main"> - <!-- Example row of columns --> - <div class="row"> - <div class="col-lg-4"> - <h2>Heading</h2> - <p>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. </p> - <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> + <!-- Jumbotron --> + <div class="jumbotron"> + <h1>Marketing stuff!</h1> + <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p> + <p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p> </div> - <div class="col-lg-4"> - <h2>Heading</h2> - <p>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. </p> - <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> - </div> - <div class="col-lg-4"> - <h2>Heading</h2> - <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> - <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> + + <!-- Example row of columns --> + <div class="row"> + <div class="col-lg-4"> + <h2>Heading</h2> + <p>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. </p> + <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> + </div> + <div class="col-lg-4"> + <h2>Heading</h2> + <p>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. </p> + <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> + </div> + <div class="col-lg-4"> + <h2>Heading</h2> + <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> + <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> + </div> </div> - </div> + + </main> <!-- Site footer --> <footer class="footer"> @@ -98,7 +102,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/justified-nav/justified-nav.css b/docs/4.0/examples/justified-nav/justified-nav.css index 2f6de026e..0ca9aabb5 100644 --- a/docs/4.0/examples/justified-nav/justified-nav.css +++ b/docs/4.0/examples/justified-nav/justified-nav.css @@ -20,26 +20,19 @@ body { } .navbar { - background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7),to(#eee)); - background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#eee 100%); - background-image: -o-linear-gradient(top, #f7f7f7 0%,#eee 100%); background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%); border: 1px solid #e5e5e5; } @media (min-width: 768px) { .navbar-nav { - display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } .navbar-nav .nav-item { - -webkit-box-flex: 1; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } } diff --git a/docs/4.0/examples/narrow-jumbotron/index.html b/docs/4.0/examples/narrow-jumbotron/index.html index 303470bb3..19ef46506 100644 --- a/docs/4.0/examples/narrow-jumbotron/index.html +++ b/docs/4.0/examples/narrow-jumbotron/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,7 +19,7 @@ <body> <div class="container"> - <div class="header clearfix"> + <header class="header clearfix"> <nav> <ul class="nav nav-pills float-right"> <li class="nav-item"> @@ -34,48 +34,46 @@ </ul> </nav> <h3 class="text-muted">Project name</h3> - </div> + </header> - <div class="jumbotron"> - <h1 class="display-3">Jumbotron heading</h1> - <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> - <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p> - </div> + <main role="main"> - <div class="row marketing"> - <div class="col-lg-6"> - <h4>Subheading</h4> - <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> + <div class="jumbotron"> + <h1 class="display-3">Jumbotron heading</h1> + <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p> + </div> - <h4>Subheading</h4> - <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> + <div class="row marketing"> + <div class="col-lg-6"> + <h4>Subheading</h4> + <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> - <h4>Subheading</h4> - <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> - </div> + <h4>Subheading</h4> + <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> + + <h4>Subheading</h4> + <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> + </div> - <div class="col-lg-6"> - <h4>Subheading</h4> - <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> + <div class="col-lg-6"> + <h4>Subheading</h4> + <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> - <h4>Subheading</h4> - <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> + <h4>Subheading</h4> + <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> - <h4>Subheading</h4> - <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> + <h4>Subheading</h4> + <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> + </div> </div> - </div> + + </main> <footer class="footer"> <p>© Company 2017</p> </footer> </div> <!-- /container --> - - <!-- Bootstrap core JavaScript - ================================================== --> - <!-- Placed at the end of the document so the pages load faster --> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css b/docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css index 28cf77381..dc4cf6c21 100644 --- a/docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css +++ b/docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css @@ -17,6 +17,7 @@ body { padding-bottom: 1rem; border-bottom: .05rem solid #e5e5e5; } + /* Make the masthead heading the same height as the navigation */ .header h3 { margin-top: 0; @@ -68,10 +69,12 @@ body { padding-right: 0; padding-left: 0; } + /* Space out the masthead */ .header { margin-bottom: 2rem; } + /* Remove the bottom border on the jumbotron for visual effect */ .jumbotron { border-bottom: 0; diff --git a/docs/4.0/examples/navbar-top-fixed/index.html b/docs/4.0/examples/navbar-top-fixed/index.html index 0906a8407..54e56fc48 100644 --- a/docs/4.0/examples/navbar-top-fixed/index.html +++ b/docs/4.0/examples/navbar-top-fixed/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -42,13 +42,13 @@ </div> </nav> - <div class="container"> + <main role="main" class="container"> <div class="jumbotron"> <h1>Navbar example</h1> <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p> <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> </div> - </div> + </main> <!-- Bootstrap core JavaScript @@ -58,7 +58,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/navbar-top/index.html b/docs/4.0/examples/navbar-top/index.html index 2d4cc46ab..3aeb45a8a 100644 --- a/docs/4.0/examples/navbar-top/index.html +++ b/docs/4.0/examples/navbar-top/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -42,13 +42,13 @@ </div> </nav> - <div class="container"> + <main role="main" class="container"> <div class="jumbotron"> <h1>Navbar example</h1> <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p> <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> </div> - </div> + </main> <!-- Bootstrap core JavaScript @@ -58,7 +58,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/navbars/index.html b/docs/4.0/examples/navbars/index.html index 41299b523..297b8912f 100644 --- a/docs/4.0/examples/navbars/index.html +++ b/docs/4.0/examples/navbars/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -322,16 +322,18 @@ </div> </nav> - <div class="jumbotron"> - <div class="col-sm-8 mx-auto"> - <h1>Navbar examples</h1> - <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p> - <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p> - <p> - <a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> - </p> + <main role="main"> + <div class="jumbotron"> + <div class="col-sm-8 mx-auto"> + <h1>Navbar examples</h1> + <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p> + <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p> + <p> + <a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> + </p> + </div> </div> - </div> + </main> </div> @@ -342,7 +344,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/navbars/navbar.css b/docs/4.0/examples/navbars/navbar.css index 04f8c6b7f..70d209409 100644 --- a/docs/4.0/examples/navbars/navbar.css +++ b/docs/4.0/examples/navbars/navbar.css @@ -1,5 +1,4 @@ body { - /*padding-top: 20px;*/ padding-bottom: 20px; } diff --git a/docs/4.0/examples/offcanvas/index.html b/docs/4.0/examples/offcanvas/index.html index d4e6be368..c3ba9694c 100644 --- a/docs/4.0/examples/offcanvas/index.html +++ b/docs/4.0/examples/offcanvas/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -51,7 +51,7 @@ </div> </nav> - <div class="container"> + <main role="main" class="container"> <div class="row row-offcanvas row-offcanvas-right"> @@ -115,11 +115,11 @@ <hr> - <footer> - <p>© Company 2017</p> - </footer> + </main><!--/.container--> - </div><!--/.container--> + <footer> + <p>© Company 2017</p> + </footer> <!-- Bootstrap core JavaScript @@ -129,8 +129,6 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="offcanvas.js"></script> </body> </html> diff --git a/docs/4.0/examples/offcanvas/offcanvas.css b/docs/4.0/examples/offcanvas/offcanvas.css index 6047cb304..1c9ca3b44 100644 --- a/docs/4.0/examples/offcanvas/offcanvas.css +++ b/docs/4.0/examples/offcanvas/offcanvas.css @@ -20,9 +20,7 @@ footer { @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; + transition: all .25s ease-out; } .row-offcanvas-right { @@ -33,23 +31,19 @@ footer { left: 0; } - .row-offcanvas-right - .sidebar-offcanvas { + .row-offcanvas-right .sidebar-offcanvas { right: -100%; /* 12 columns */ } - .row-offcanvas-right.active - .sidebar-offcanvas { + .row-offcanvas-right.active .sidebar-offcanvas { right: -50%; /* 6 columns */ } - .row-offcanvas-left - .sidebar-offcanvas { + .row-offcanvas-left .sidebar-offcanvas { left: -100%; /* 12 columns */ } - .row-offcanvas-left.active - .sidebar-offcanvas { + .row-offcanvas-left.active .sidebar-offcanvas { left: -50%; /* 6 columns */ } diff --git a/docs/4.0/examples/offcanvas/offcanvas.js b/docs/4.0/examples/offcanvas/offcanvas.js index d14cd68b8..a41847081 100644 --- a/docs/4.0/examples/offcanvas/offcanvas.js +++ b/docs/4.0/examples/offcanvas/offcanvas.js @@ -1,5 +1,7 @@ -$(document).ready(function () { - $('[data-toggle="offcanvas"]').click(function () { +$(function () { + 'use strict' + + $('[data-toggle="offcanvas"]').on('click', function () { $('.row-offcanvas').toggleClass('active') - }); -}); + }) +}) diff --git a/docs/4.0/examples/signin/index.html b/docs/4.0/examples/signin/index.html index 237f62066..0416d78b6 100644 --- a/docs/4.0/examples/signin/index.html +++ b/docs/4.0/examples/signin/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -35,12 +35,5 @@ </form> </div> <!-- /container --> - - - <!-- Bootstrap core JavaScript - ================================================== --> - <!-- Placed at the end of the document so the pages load faster --> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/signin/signin.css b/docs/4.0/examples/signin/signin.css index 7c1fa4190..516aeb126 100644 --- a/docs/4.0/examples/signin/signin.css +++ b/docs/4.0/examples/signin/signin.css @@ -14,13 +14,12 @@ body { margin-bottom: 10px; } .form-signin .checkbox { - font-weight: normal; + font-weight: 400; } .form-signin .form-control { position: relative; + box-sizing: border-box; height: auto; - -webkit-box-sizing: border-box; - box-sizing: border-box; padding: 10px; font-size: 16px; } diff --git a/docs/4.0/examples/starter-template/index.html b/docs/4.0/examples/starter-template/index.html index 30cceb071..660f521fa 100644 --- a/docs/4.0/examples/starter-template/index.html +++ b/docs/4.0/examples/starter-template/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -51,14 +51,14 @@ </div> </nav> - <div class="container"> + <main role="main" class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> - </div><!-- /.container --> + </main><!-- /.container --> <!-- Bootstrap core JavaScript @@ -68,7 +68,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/sticky-footer-navbar/index.html b/docs/4.0/examples/sticky-footer-navbar/index.html index dcf62fb59..63beed2a4 100644 --- a/docs/4.0/examples/sticky-footer-navbar/index.html +++ b/docs/4.0/examples/sticky-footer-navbar/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -18,39 +18,41 @@ <body> - <!-- Fixed navbar --> - <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> - <a class="navbar-brand" href="#">Fixed navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - <div class="collapse navbar-collapse" id="navbarCollapse"> - <ul class="navbar-nav mr-auto"> - <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link disabled" href="#">Disabled</a> - </li> - </ul> - <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> - </form> - </div> - </nav> + <header> + <!-- Fixed navbar --> + <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> + <a class="navbar-brand" href="#">Fixed navbar</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarCollapse"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + </ul> + <form class="form-inline mt-2 mt-md-0"> + <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </nav> + </header> <!-- Begin page content --> - <div class="container"> + <main role="main" class="container"> <div class="mt-3"> <h1>Sticky footer with fixed navbar</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p> <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> - </div> + </main> <footer class="footer"> <div class="container"> @@ -66,7 +68,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/sticky-footer/index.html b/docs/4.0/examples/sticky-footer/index.html index 5d00f5407..a3055bb59 100644 --- a/docs/4.0/examples/sticky-footer/index.html +++ b/docs/4.0/examples/sticky-footer/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,25 +19,18 @@ <body> <!-- Begin page content --> - <div class="container"> + <main role="main" class="container"> <div class="mt-1"> <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> - </div> + </main> <footer class="footer"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div> </footer> - - - <!-- Bootstrap core JavaScript - ================================================== --> - <!-- Placed at the end of the document so the pages load faster --> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/sticky-footer/sticky-footer.css b/docs/4.0/examples/sticky-footer/sticky-footer.css index 46578d1a5..ebe29104f 100644 --- a/docs/4.0/examples/sticky-footer/sticky-footer.css +++ b/docs/4.0/examples/sticky-footer/sticky-footer.css @@ -5,15 +5,13 @@ html { min-height: 100%; } body { - /* Margin bottom by footer height */ - margin-bottom: 60px; + margin-bottom: 60px; /* Margin bottom by footer height */ } .footer { position: absolute; bottom: 0; width: 100%; - /* Set the fixed height of the footer here */ - height: 60px; + height: 60px; /* Set the fixed height of the footer here */ line-height: 60px; /* Vertically center the text there */ background-color: #f5f5f5; } diff --git a/docs/4.0/examples/tooltip-viewport/index.html b/docs/4.0/examples/tooltip-viewport/index.html index ea31d7ccf..b5899d2e9 100644 --- a/docs/4.0/examples/tooltip-viewport/index.html +++ b/docs/4.0/examples/tooltip-viewport/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -18,19 +18,19 @@ <body> - <button class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button> - <button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button> - <button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button> + <button type="button" class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button> + <button type="button" class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button> + <button type="button" class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button> - <button class="btn btn-secondary tooltip-right btn-bottom" title="This should be shifted up">Shift Up</button> + <button type="button" class="btn btn-secondary tooltip-right btn-bottom" title="This should be shifted up">Shift Up</button> <div class="container-viewport"> - <button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button> - <button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button> + <button type="button" class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button> + <button type="button" class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button> - <button class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button> + <button type="button" class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button> - <button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button> + <button type="button" class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button> </div> @@ -41,8 +41,6 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="tooltip-viewport.js"></script> </body> </html> diff --git a/docs/4.0/examples/tooltip-viewport/tooltip-viewport.js b/docs/4.0/examples/tooltip-viewport/tooltip-viewport.js index e87f4eec7..dc75e18c6 100644 --- a/docs/4.0/examples/tooltip-viewport/tooltip-viewport.js +++ b/docs/4.0/examples/tooltip-viewport/tooltip-viewport.js @@ -1,18 +1,32 @@ -$(document).ready(function () { +$(function () { + 'use strict' + $('.tooltip-right').tooltip({ placement: 'right', - viewport: {selector: 'body', padding: 2} + viewport: { + selector: 'body', + padding: 2 + } }) $('.tooltip-bottom').tooltip({ placement: 'bottom', - viewport: {selector: 'body', padding: 2} + viewport: { + selector: 'body', + padding: 2 + } }) $('.tooltip-viewport-right').tooltip({ placement: 'right', - viewport: {selector: '.container-viewport', padding: 2} + viewport: { + selector: '.container-viewport', + padding: 2 + } }) $('.tooltip-viewport-bottom').tooltip({ placement: 'bottom', - viewport: {selector: '.container-viewport', padding: 2} + viewport: { + selector: '.container-viewport', + padding: 2 + } }) }) |