diff options
| author | Mark Otto <[email protected]> | 2017-05-27 15:26:48 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-27 15:26:48 -0700 |
| commit | 8f67ac19a761b8d3ecc80485c3f54aa6ba4fa910 (patch) | |
| tree | d5a2aba4e2e762b283e7cfe60f00e1f239105bbe /docs/examples | |
| parent | 6c3f833076a9fa68601741e3e21bd07ad79b7d8a (diff) | |
| parent | db44e4b311317ef760f8412cc33c84146959b248 (diff) | |
| download | bootstrap-8f67ac19a761b8d3ecc80485c3f54aa6ba4fa910.tar.xz bootstrap-8f67ac19a761b8d3ecc80485c3f54aa6ba4fa910.zip | |
Merge branch 'v4-dev' into v4-docs-streamlined
Diffstat (limited to 'docs/examples')
| -rw-r--r-- | docs/examples/album/index.html | 6 | ||||
| -rw-r--r-- | docs/examples/blog/index.html | 8 | ||||
| -rw-r--r-- | docs/examples/carousel/index.html | 18 | ||||
| -rw-r--r-- | docs/examples/cover/index.html | 6 | ||||
| -rw-r--r-- | docs/examples/dashboard/dashboard.css | 4 | ||||
| -rw-r--r-- | docs/examples/dashboard/index.html | 18 | ||||
| -rw-r--r-- | docs/examples/grid/index.html | 4 | ||||
| -rw-r--r-- | docs/examples/jumbotron/index.html | 18 | ||||
| -rw-r--r-- | docs/examples/jumbotron/jumbotron.css | 4 | ||||
| -rw-r--r-- | docs/examples/justified-nav/index.html | 16 | ||||
| -rw-r--r-- | docs/examples/narrow-jumbotron/index.html | 4 | ||||
| -rw-r--r-- | docs/examples/navbar-top-fixed/index.html | 14 | ||||
| -rw-r--r-- | docs/examples/navbar-top/index.html | 14 | ||||
| -rw-r--r-- | docs/examples/navbars/index.html | 229 | ||||
| -rw-r--r-- | docs/examples/offcanvas/index.html | 16 | ||||
| -rw-r--r-- | docs/examples/signin/index.html | 2 | ||||
| -rw-r--r-- | docs/examples/starter-template/index.html | 14 | ||||
| -rw-r--r-- | docs/examples/sticky-footer-navbar/index.html | 14 | ||||
| -rw-r--r-- | docs/examples/sticky-footer/index.html | 2 | ||||
| -rw-r--r-- | docs/examples/tooltip-viewport/index.html | 7 |
20 files changed, 269 insertions, 149 deletions
diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html index 05fc659bb..c19c455f3 100644 --- a/docs/examples/album/index.html +++ b/docs/examples/album/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -118,9 +116,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></script> <script src="../../assets/js/vendor/holder.min.js"></script> <script> $(function () { diff --git a/docs/examples/blog/index.html b/docs/examples/blog/index.html index e4ef18ddc..27b4da491 100644 --- a/docs/examples/blog/index.html +++ b/docs/examples/blog/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -22,7 +20,7 @@ <div class="blog-masthead"> <div class="container"> - <nav class="nav blog-nav"> + <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> @@ -158,9 +156,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index f69a627ce..9a55c57ac 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -19,11 +17,11 @@ </head> <body> - <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse"> + <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> - <a class="navbar-brand" href="#">Carousel</a> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> @@ -37,7 +35,7 @@ </li> </ul> <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <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> @@ -49,7 +47,7 @@ <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> - <div class="carousel-inner" role="listbox"> + <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"> @@ -167,7 +165,7 @@ <!-- FOOTER --> <footer> <p class="float-right"><a href="#">Back to top</a></p> - <p>© 2014 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> + <p>© 2017 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> </footer> </div><!-- /.container --> @@ -176,9 +174,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></script> <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> diff --git a/docs/examples/cover/index.html b/docs/examples/cover/index.html index 9518792dd..ea2faec9e 100644 --- a/docs/examples/cover/index.html +++ b/docs/examples/cover/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -60,9 +58,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/dashboard/dashboard.css b/docs/examples/dashboard/dashboard.css index 99f2962b5..b1248cd68 100644 --- a/docs/examples/dashboard/dashboard.css +++ b/docs/examples/dashboard/dashboard.css @@ -2,9 +2,9 @@ * Base structure */ -/* Move down content because we have a fixed navbar that is 50px tall */ +/* Move down content because we have a fixed navbar that is 3.5rem tall */ body { - padding-top: 50px; + padding-top: 3.5rem; } /* diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index 3d44249d3..241ffcbc3 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -19,11 +17,11 @@ </head> <body> - <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse"> - <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse"> + <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> - <a class="navbar-brand" href="#">Dashboard</a> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> @@ -41,7 +39,7 @@ </li> </ul> <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <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> @@ -49,7 +47,7 @@ <div class="container-fluid"> <div class="row"> - <nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"> + <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-faded sidebar"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a> @@ -93,7 +91,7 @@ </ul> </nav> - <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3"> + <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3" role="main"> <h1>Dashboard</h1> <section class="row text-center placeholders"> @@ -254,9 +252,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html index 1400bfd9a..783eee35d 100644 --- a/docs/examples/grid/index.html +++ b/docs/examples/grid/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -145,7 +143,7 @@ <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> - <div class="clearfix hidden-sm-up"></div> + <div class="clearfix d-sm-none"></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html index f3adb0a03..af2d798db 100644 --- a/docs/examples/jumbotron/index.html +++ b/docs/examples/jumbotron/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -20,11 +18,11 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse"> + <a class="navbar-brand" href="#">Navbar</a> + <button class="navbar-toggler" 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> - <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> @@ -47,7 +45,7 @@ </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <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> @@ -74,7 +72,7 @@ <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> <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> @@ -85,7 +83,7 @@ <hr> <footer> - <p>© Company 2016</p> + <p>© Company 2017</p> </footer> </div> <!-- /container --> @@ -93,9 +91,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/jumbotron/jumbotron.css b/docs/examples/jumbotron/jumbotron.css index 2f72eb954..d751264ef 100644 --- a/docs/examples/jumbotron/jumbotron.css +++ b/docs/examples/jumbotron/jumbotron.css @@ -1,4 +1,4 @@ -/* Move down content because we have a fixed navbar that is 50px tall */ +/* Move down content because we have a fixed navbar that is 3.5rem tall */ body { - padding-top: 2rem; + padding-top: 3.5rem; } diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html index f12a9efe7..fe42367d9 100644 --- a/docs/examples/justified-nav/index.html +++ b/docs/examples/justified-nav/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -25,12 +23,12 @@ <div class="masthead"> <h3 class="text-muted">Project name</h3> - <nav class="navbar navbar-light bg-faded rounded mb-3"> + <nav class="navbar navbar-expand-md navbar-light bg-faded rounded mb-3"> <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-toggleable-md" id="navbarCollapse"> - <ul class="nav navbar-nav text-md-center justify-content-md-between"> + <div class="collapse navbar-collapse" id="navbarCollapse"> + <ul class="navbar-nav text-md-center nav-justified w-100"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -77,7 +75,7 @@ <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> <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> @@ -87,7 +85,7 @@ <!-- Site footer --> <footer class="footer"> - <p>© Company 2016</p> + <p>© Company 2017</p> </footer> </div> <!-- /container --> @@ -96,9 +94,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html index e27aca212..7bdfbb9c9 100644 --- a/docs/examples/narrow-jumbotron/index.html +++ b/docs/examples/narrow-jumbotron/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -69,7 +67,7 @@ </div> <footer class="footer"> - <p>© Company 2014</p> + <p>© Company 2017</p> </footer> </div> <!-- /container --> diff --git a/docs/examples/navbar-top-fixed/index.html b/docs/examples/navbar-top-fixed/index.html index c92f50567..67ffa5d43 100644 --- a/docs/examples/navbar-top-fixed/index.html +++ b/docs/examples/navbar-top-fixed/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -20,11 +18,11 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse"> + <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> - <a class="navbar-brand" href="#">Fixed navbar</a> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> @@ -38,7 +36,7 @@ </li> </ul> <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <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> @@ -56,9 +54,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/navbar-top/index.html b/docs/examples/navbar-top/index.html index 257ac23eb..4850807c3 100644 --- a/docs/examples/navbar-top/index.html +++ b/docs/examples/navbar-top/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -20,11 +18,11 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse mb-4"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-md navbar-inverse bg-inverse mb-4"> + <a class="navbar-brand" href="#">Top 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> - <a class="navbar-brand" href="#">Top navbar</a> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> @@ -38,7 +36,7 @@ </li> </ul> <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <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> @@ -56,9 +54,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/navbars/index.html b/docs/examples/navbars/index.html index 8694df3fc..b46b34894 100644 --- a/docs/examples/navbars/index.html +++ b/docs/examples/navbars/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -20,13 +18,13 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Never expand</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <a class="navbar-brand" href="#">Navbar</a> - <div class="collapse navbar-collapse" id="navbarsExampleDefault"> + <div class="collapse navbar-collapse" id="navbarsExample01"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> @@ -47,20 +45,179 @@ </li> </ul> <form class="form-inline my-2 my-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + <input class="form-control" type="text" placeholder="Search" aria-label="Search"> </form> </div> </nav> - <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> + <nav class="navbar navbar-expand navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Expand</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample02"> + <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> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown02"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search"> + </form> + </div> + </nav> + + <nav class="navbar navbar-expand-sm navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Expand at sm</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample03"> + <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> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown03"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search"> + </form> + </div> + </nav> + + <nav class="navbar navbar-expand-md navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Expand at md</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample04"> + <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> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown04"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search"> + </form> + </div> + </nav> + + <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Expand at lg</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample05"> + <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> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown05" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown05"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search"> + </form> + </div> + </nav> + + <nav class="navbar navbar-expand-xl navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Expand at xl</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample06"> + <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> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown06"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search"> + </form> + </div> + </nav> + + <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> <div class="container"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation"> + <a class="navbar-brand" href="#">Container</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <a class="navbar-brand" href="#">Container</a> - <div class="collapse navbar-collapse" id="navbarsExampleContainer"> + <div class="collapse navbar-collapse" id="navbarsExample07"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> @@ -72,8 +229,8 @@ <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown02"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown07"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> @@ -81,19 +238,18 @@ </li> </ul> <form class="form-inline my-2 my-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + <input class="form-control" type="text" placeholder="Search" aria-label="Search"> </form> </div> </div> </nav> - <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExampleCenteredNav"> + <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a> @@ -105,8 +261,8 @@ <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown03"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown08"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> @@ -117,13 +273,13 @@ </nav> <div class="container"> - <nav class="navbar navbar-light bg-faded rounded navbar-toggleable-md"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-lg navbar-light bg-faded rounded"> + <a class="navbar-brand" href="#">Navbar</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <a class="navbar-brand" href="#">Navbar</a> - <div class="collapse navbar-collapse" id="containerNavbar"> + <div class="collapse navbar-collapse" id="navbarsExample09"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> @@ -135,8 +291,8 @@ <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown04"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown09"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> @@ -144,18 +300,17 @@ </li> </ul> <form class="form-inline my-2 my-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + <input class="form-control" type="text" placeholder="Search" aria-label="Search"> </form> </div> </nav> - <nav class="navbar navbar-light bg-faded rounded navbar-toggleable-md"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#containerNavbarCenter" aria-controls="containerNavbarCenter" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-lg navbar-light bg-faded rounded"> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <div class="collapse navbar-collapse justify-content-md-center" id="containerNavbarCenter"> + <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a> @@ -167,8 +322,8 @@ <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown05" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown05"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown10"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> @@ -181,7 +336,7 @@ <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 it's 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>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> @@ -194,9 +349,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html index 1e20591b5..766b66140 100644 --- a/docs/examples/offcanvas/index.html +++ b/docs/examples/offcanvas/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -20,11 +18,11 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-fixed-top navbar-inverse bg-inverse"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-md fixed-top navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Navbar</a> + <button class="navbar-toggler" 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> - <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> @@ -47,7 +45,7 @@ </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <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> @@ -58,7 +56,7 @@ <div class="row row-offcanvas row-offcanvas-right"> <div class="col-12 col-md-9"> - <p class="float-right hidden-md-up"> + <p class="float-right d-md-none"> <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button> </p> <div class="jumbotron"> @@ -127,9 +125,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/signin/index.html b/docs/examples/signin/index.html index 70ed3b98d..975702863 100644 --- a/docs/examples/signin/index.html +++ b/docs/examples/signin/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> diff --git a/docs/examples/starter-template/index.html b/docs/examples/starter-template/index.html index d497e2a1b..a18c5ae40 100644 --- a/docs/examples/starter-template/index.html +++ b/docs/examples/starter-template/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -20,11 +18,11 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-fixed-top"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-md navbar-inverse bg-inverse fixed-top"> + <a class="navbar-brand" href="#">Navbar</a> + <button class="navbar-toggler" 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> - <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> @@ -47,7 +45,7 @@ </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <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> @@ -66,9 +64,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html index d0a154bd3..3e382683c 100644 --- a/docs/examples/sticky-footer-navbar/index.html +++ b/docs/examples/sticky-footer-navbar/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -21,11 +19,11 @@ <body> <!-- Fixed navbar --> - <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse"> + <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> - <a class="navbar-brand" href="#">Fixed navbar</a> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> @@ -39,7 +37,7 @@ </li> </ul> <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <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> @@ -64,9 +62,9 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></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> diff --git a/docs/examples/sticky-footer/index.html b/docs/examples/sticky-footer/index.html index 3d305166e..00dcf2bc3 100644 --- a/docs/examples/sticky-footer/index.html +++ b/docs/examples/sticky-footer/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> diff --git a/docs/examples/tooltip-viewport/index.html b/docs/examples/tooltip-viewport/index.html index 2ca1ed2b0..384809811 100644 --- a/docs/examples/tooltip-viewport/index.html +++ b/docs/examples/tooltip-viewport/index.html @@ -2,9 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../favicon.ico"> @@ -39,11 +37,10 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> + <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="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js" integrity="sha256-c477vRLKQv1jt9o7w6TTBzFyFznTaZjoMLTDFi7Hlxc=" crossorigin="anonymous"></script> <script src="../../dist/js/bootstrap.min.js"></script> - <script src="../../assets/js/vendor/tether.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> |
