diff options
Diffstat (limited to 'docs/examples')
24 files changed, 681 insertions, 526 deletions
diff --git a/docs/examples/album/album.css b/docs/examples/album/album.css index 66380c0e6..1d052298d 100644 --- a/docs/examples/album/album.css +++ b/docs/examples/album/album.css @@ -6,33 +6,6 @@ body { margin-bottom: 0; } -.navbar-collapse .container-fluid { - padding: 2rem 2.5rem; - border-bottom: 1px solid #55595c; -} - -.navbar-collapse h4 { - color: #818a91; -} - -.navbar-collapse .text-muted { - color: #818a91; -} - -.about { - float: left; - max-width: 30rem; - margin-right: 3rem; -} - -.social a { - font-weight: 500; - color: #eceeef; -} -.social a:hover { - color: #fff; -} - .jumbotron { padding-top: 6rem; padding-bottom: 6rem; diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html index 11d99c259..05fc659bb 100644 --- a/docs/examples/album/index.html +++ b/docs/examples/album/index.html @@ -4,6 +4,7 @@ <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,30 +20,34 @@ <body> - <div class="navbar-collapse collapse inverse" id="navbar-header"> - <div class="container-fluid"> - <div class="about"> - <h4>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="social"> - <h4>Contact</h4> - <ul class="list-unstyled"> - <li><a href="#">Follow on Twitter</a></li> - <li><a href="#">Like on Facebook</a></li> - <li><a href="#">Email me</a></li> - </ul> + <div class="collapse bg-inverse" 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 class="navbar navbar-static-top navbar-dark bg-inverse"> - <div class="container-fluid"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button> + <div class="navbar navbar-inverse bg-inverse"> + <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> - <section class="jumbotron text-xs-center"> + <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> @@ -102,7 +107,7 @@ <footer class="text-muted"> <div class="container"> - <p class="float-xs-right"> + <p class="float-right"> <a href="#">Back to top</a> </p> <p>Album example is © Bootstrap, but please download and customize it for yourself!</p> diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css index 52c93a296..5fbdea52e 100644 --- a/docs/examples/carousel/carousel.css +++ b/docs/examples/carousel/carousel.css @@ -3,6 +3,7 @@ /* Padding below the footer and lighter body text */ body { + padding-top: 3rem; padding-bottom: 3rem; color: #5a5a5a; } @@ -18,6 +19,7 @@ body { /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; + bottom: 3rem; } /* Declare heights because of positioning of img element */ @@ -33,19 +35,6 @@ body { height: 32rem; } -.carousel-indicators { - top: 1.5rem; - right: 1.5rem; - bottom: auto; - left: auto; - width: 1rem; - margin-left: 0; -} - -.carousel-indicators > li { - margin-bottom: .25rem; -} - /* MARKETING CONTENT -------------------------------------------------- */ diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index 5503b0eab..f69a627ce 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -19,29 +19,31 @@ </head> <body> - <nav class="navbar navbar-static-top navbar-light bg-faded"> - <a href="#" class="navbar-brand">Carousel</a> - <ul class="nav navbar-nav"> - <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="#">Features</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Pricing</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">About</a> - </li> - </ul> + <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"> + <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"> + <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"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> </nav> - - <!-- Carousel - ================================================== --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> - <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> @@ -51,7 +53,7 @@ <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-xs-left"> + <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> @@ -61,7 +63,7 @@ <div class="carousel-item"> <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> <div class="container"> - <div class="carousel-caption"> + <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> @@ -71,7 +73,7 @@ <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-xs-right"> + <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> @@ -79,15 +81,15 @@ </div> </div> </div> - <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> - <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> + <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="right carousel-control" href="#myCarousel" role="button" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> + <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><!-- /.carousel --> + </div> <!-- Marketing messaging and featurettes @@ -99,19 +101,19 @@ <!-- Three columns of text below the carousel --> <div class="row"> <div class="col-lg-4"> - <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> + <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="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> + <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="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> + <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> @@ -164,7 +166,7 @@ <!-- FOOTER --> <footer> - <p class="float-xs-right"><a href="#">Back to top</a></p> + <p class="float-right"><a href="#">Back to top</a></p> <p>© 2014 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> </footer> diff --git a/docs/examples/dashboard/dashboard.css b/docs/examples/dashboard/dashboard.css index e7c6a21df..99f2962b5 100644 --- a/docs/examples/dashboard/dashboard.css +++ b/docs/examples/dashboard/dashboard.css @@ -7,96 +7,64 @@ body { padding-top: 50px; } - /* - * Global add-ons + * Typography */ -.sub-header { - padding-bottom: 10px; +h1 { + margin-bottom: 20px; + padding-bottom: 9px; border-bottom: 1px solid #eee; } /* - * Top navigation - * Hide default border to remove 1px line. - */ -.navbar-fixed-top { - border: 0; -} - -/* * Sidebar */ -/* Hide for mobile, show later */ .sidebar { - display: none; -} -@media (min-width: 768px) { - .sidebar { - position: fixed; - top: 51px; - bottom: 0; - left: 0; - z-index: 1000; - display: block; - padding: 20px; - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ - background-color: #f5f5f5; - border-right: 1px solid #eee; - } + position: fixed; + top: 51px; + bottom: 0; + left: 0; + z-index: 1000; + padding: 20px; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ + border-right: 1px solid #eee; } /* Sidebar navigation */ -.nav-sidebar { - margin-right: -21px; /* 20px padding + 1px border */ - margin-bottom: 20px; - margin-left: -20px; -} -.nav-sidebar > li > a { - padding-right: 20px; - padding-left: 20px; -} -.nav-sidebar > .active > a, -.nav-sidebar > .active > a:hover, -.nav-sidebar > .active > a:focus { - color: #fff; - background-color: #428bca; +.sidebar { + padding-left: 0; + padding-right: 0; } +.sidebar .nav { + margin-bottom: 20px; +} -/* - * Main content - */ - -.main { - padding: 20px; +.sidebar .nav-item { + width: 100%; } -@media (min-width: 768px) { - .main { - padding-right: 40px; - padding-left: 40px; - } + +.sidebar .nav-item + .nav-item { + margin-left: 0; } +.sidebar .nav-link { + border-radius: 0; +} /* - * Placeholder dashboard ideas + * Dashboard */ + /* Placeholders */ .placeholders { - margin-bottom: 30px; - text-align: center; -} -.placeholders h4 { - margin-bottom: 0; -} -.placeholder { - margin-bottom: 20px; + padding-bottom: 3rem; } + .placeholder img { - display: inline-block; - border-radius: 50%; + padding-top: 1.5rem; + padding-bottom: 1.5rem; } diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index 1670e8557..3d44249d3 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -19,70 +19,105 @@ </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"> + <span class="navbar-toggler-icon"></span> + </button> + <a class="navbar-brand" href="#">Dashboard</a> - <nav class="navbar navbar-dark navbar-fixed-top bg-inverse"> - <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation"></button> - <a class="navbar-brand" href="#">Project name</a> - <div id="navbar"> - <nav class="nav navbar-nav float-xs-left"> - <a class="nav-item nav-link" href="#">Dashboard</a> - <a class="nav-item nav-link" href="#">Settings</a> - <a class="nav-item nav-link" href="#">Profile</a> - <a class="nav-item nav-link" href="#">Help</a> - </nav> - <form class="float-xs-right"> - <input type="text" class="form-control" placeholder="Search..."> + <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"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="container-fluid"> <div class="row"> - <div class="col-sm-3 col-md-2 sidebar"> - <ul class="nav nav-sidebar"> - <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li> - <li><a href="#">Reports</a></li> - <li><a href="#">Analytics</a></li> - <li><a href="#">Export</a></li> + <nav class="col-sm-3 col-md-2 hidden-xs-down 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> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Reports</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Analytics</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Export</a> + </li> </ul> - <ul class="nav nav-sidebar"> - <li><a href="">Nav item</a></li> - <li><a href="">Nav item again</a></li> - <li><a href="">One more nav</a></li> - <li><a href="">Another nav item</a></li> - <li><a href="">More navigation</a></li> + + <ul class="nav nav-pills flex-column"> + <li class="nav-item"> + <a class="nav-link" href="#">Nav item</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Nav item again</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">One more nav</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Another nav item</a> + </li> </ul> - <ul class="nav nav-sidebar"> - <li><a href="">Nav item again</a></li> - <li><a href="">One more nav</a></li> - <li><a href="">Another nav item</a></li> + + <ul class="nav nav-pills flex-column"> + <li class="nav-item"> + <a class="nav-link" href="#">Nav item again</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">One more nav</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Another nav item</a> + </li> </ul> - </div> - <div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main"> + </nav> + + <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3"> <h1>Dashboard</h1> - <div class="row placeholders"> - <div class="col-xs-6 col-sm-3 placeholder"> - <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail"> + <section class="row text-center placeholders"> + <div class="col-6 col-sm-3 placeholder"> + <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> <h4>Label</h4> - <span class="text-muted">Something else</span> + <div class="text-muted">Something else</div> </div> - <div class="col-xs-6 col-sm-3 placeholder"> - <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail"> + <div class="col-6 col-sm-3 placeholder"> + <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> <h4>Label</h4> <span class="text-muted">Something else</span> </div> - <div class="col-xs-6 col-sm-3 placeholder"> - <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail"> + <div class="col-6 col-sm-3 placeholder"> + <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> <h4>Label</h4> <span class="text-muted">Something else</span> </div> - <div class="col-xs-6 col-sm-3 placeholder"> - <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail"> + <div class="col-6 col-sm-3 placeholder"> + <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> <h4>Label</h4> <span class="text-muted">Something else</span> </div> - </div> + </section> <h2>Section title</h2> <div class="table-responsive"> @@ -212,7 +247,7 @@ </tbody> </table> </div> - </div> + </main> </div> </div> @@ -223,8 +258,6 @@ <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="../../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> diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html index 02df70804..1400bfd9a 100644 --- a/docs/examples/grid/index.html +++ b/docs/examples/grid/index.html @@ -27,35 +27,35 @@ <h3>Five grid tiers</h3> <p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p> -<div class="row"> - <div class="col-xs-4">.col-xs-4</div> - <div class="col-xs-4">.col-xs-4</div> - <div class="col-xs-4">.col-xs-4</div> -</div> - -<div class="row"> - <div class="col-sm-4">.col-sm-4</div> - <div class="col-sm-4">.col-sm-4</div> - <div class="col-sm-4">.col-sm-4</div> -</div> - -<div class="row"> - <div class="col-md-4">.col-md-4</div> - <div class="col-md-4">.col-md-4</div> - <div class="col-md-4">.col-md-4</div> -</div> - -<div class="row"> - <div class="col-lg-4">.col-lg-4</div> - <div class="col-lg-4">.col-lg-4</div> - <div class="col-lg-4">.col-lg-4</div> -</div> - -<div class="row"> - <div class="col-xl-4">.col-xl-4</div> - <div class="col-xl-4">.col-xl-4</div> - <div class="col-xl-4">.col-xl-4</div> -</div> + <div class="row"> + <div class="col-4">.col-4</div> + <div class="col-4">.col-4</div> + <div class="col-4">.col-4</div> + </div> + + <div class="row"> + <div class="col-sm-4">.col-sm-4</div> + <div class="col-sm-4">.col-sm-4</div> + <div class="col-sm-4">.col-sm-4</div> + </div> + + <div class="row"> + <div class="col-md-4">.col-md-4</div> + <div class="col-md-4">.col-md-4</div> + <div class="col-md-4">.col-md-4</div> + </div> + + <div class="row"> + <div class="col-lg-4">.col-lg-4</div> + <div class="col-lg-4">.col-lg-4</div> + <div class="col-lg-4">.col-lg-4</div> + </div> + + <div class="row"> + <div class="col-xl-4">.col-xl-4</div> + <div class="col-xl-4">.col-xl-4</div> + <div class="col-xl-4">.col-xl-4</div> + </div> <h3>Three equal columns</h3> <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p> @@ -105,17 +105,17 @@ <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p> <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p> <div class="row"> - <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> + <div class="col-12 col-md-8">.col-12 .col-md-8</div> + <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <div class="row"> - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> - <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> + <div class="col-6 col-md-4">.col-6 .col-md-4</div> + <div class="col-6 col-md-4">.col-6 .col-md-4</div> + <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <div class="row"> - <div class="col-xs-6">.col-xs-6</div> - <div class="col-xs-6">.col-xs-6</div> + <div class="col-6">.col-6</div> + <div class="col-6">.col-6</div> </div> <hr> @@ -123,32 +123,32 @@ <h3>Mixed: mobile, tablet, and desktop</h3> <p></p> <div class="row"> - <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div> - <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div> + <div class="col-12 col-sm-6 col-lg-8">.col-12 .col-sm-6 .col-lg-8</div> + <div class="col-6 col-lg-4">.col-6 .col-lg-4</div> </div> <div class="row"> - <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> - <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> - <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> + <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> + <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> + <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> </div> <hr> <h3>Column clearing</h3> - <p><a href="https://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p> + <p><a href="../../layout/grid/#example-responsive-column-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p> <div class="row"> - <div class="col-xs-6 col-sm-3"> - .col-xs-6 .col-sm-3 + <div class="col-6 col-sm-3"> + .col-6 .col-sm-3 <br> Resize your viewport or check it out on your phone for an example. </div> - <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> + <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="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> - <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</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> </div> <hr> @@ -164,10 +164,8 @@ <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div> </div> - </div> <!-- /container --> - <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> diff --git a/docs/examples/index.md b/docs/examples/index.md index 49e43793a..7479a7fb3 100644 --- a/docs/examples/index.md +++ b/docs/examples/index.md @@ -10,14 +10,14 @@ title: Examples Examples that focus on implementing uses of built-in components provided by Bootstrap. <div class="row bd-examples"> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/starter-template/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt=""> </a> <h4>Starter template</h4> <p>Nothing but the basics: compiled CSS and JavaScript.</p> </div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/grid/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/grid.jpg" alt=""> </a> @@ -26,14 +26,14 @@ Examples that focus on implementing uses of built-in components provided by Boot </div> <div class="clearfix hidden-md-up"></div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/jumbotron/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron.jpg" alt=""> </a> <h4>Jumbotron</h4> <p>Build around the jumbotron with a navbar and some basic grid columns.</p> </div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/narrow-jumbotron/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/jumbotron-narrow.jpg" alt=""> </a> @@ -47,14 +47,14 @@ Examples that focus on implementing uses of built-in components provided by Boot Taking the default navbar component and showing how it can be moved, placed, and extended. <div class="row bd-examples"> - <div class="col-xs-6 col-md-4"> - <a href="{{ site.baseurl }}/examples/navbar/"> + <div class="col-6 col-md-4"> + <a href="{{ site.baseurl }}/examples/navbars/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar.jpg" alt=""> </a> <h4>Navbar</h4> <p>Super basic template that includes the navbar along with some additional content.</p> </div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/navbar-top/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar-static.jpg" alt=""> </a> @@ -63,7 +63,7 @@ Taking the default navbar component and showing how it can be moved, placed, and </div> <div class="clearfix hidden-md-up"></div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/navbar-top-fixed/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/navbar-fixed.jpg" alt=""> </a> @@ -77,14 +77,14 @@ Taking the default navbar component and showing how it can be moved, placed, and Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework. <div class="row bd-examples"> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/album/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/album.jpg" alt=""> </a> <h4>Album</h4> <p>Simple one-page template for photo galleries, portfolios, and more.</p> </div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/cover/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/cover.jpg" alt=""> </a> @@ -93,14 +93,14 @@ Brand new components and templates to help folks quickly get started with Bootst </div> <div class="clearfix hidden-md-up"></div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/carousel/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/carousel.jpg" alt=""> </a> <h4>Carousel</h4> <p>Customize the navbar and carousel, then add some new components.</p> </div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/blog/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/blog.jpg" alt=""> </a> @@ -109,14 +109,14 @@ Brand new components and templates to help folks quickly get started with Bootst </div> <div class="clearfix hidden-md-up"></div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/dashboard/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/dashboard.jpg" alt=""> </a> <h4>Dashboard</h4> <p>Basic admin dashboard shell with fixed sidebar and navbar.</p> </div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/signin/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sign-in.jpg" alt=""> </a> @@ -125,14 +125,14 @@ Brand new components and templates to help folks quickly get started with Bootst </div> <div class="clearfix hidden-md-up"></div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/justified-nav/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/justified-nav.jpg" alt=""> </a> <h4>Justified nav</h4> <p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p> </div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/sticky-footer/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sticky-footer.jpg" alt=""> </a> @@ -141,7 +141,7 @@ Brand new components and templates to help folks quickly get started with Bootst </div> <div class="clearfix hidden-md-up"></div> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/sticky-footer-navbar/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/sticky-footer-navbar.jpg" alt=""> </a> @@ -155,7 +155,7 @@ Brand new components and templates to help folks quickly get started with Bootst Examples that focus on future-friendly features or techniques. <div class="row bd-examples"> - <div class="col-xs-6 col-md-4"> + <div class="col-6 col-md-4"> <a href="{{ site.baseurl }}/examples/offcanvas/"> <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/offcanvas.jpg" alt=""> </a> diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html index f66036b64..f3adb0a03 100644 --- a/docs/examples/jumbotron/index.html +++ b/docs/examples/jumbotron/index.html @@ -20,19 +20,37 @@ <body> - <nav class="navbar navbar-static-top navbar-dark bg-inverse"> - <a class="navbar-brand" href="#">Project name</a> - <ul class="nav navbar-nav"> - <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="#">About</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Contact</a> - </li> - </ul> + <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"> + <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"> + <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="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown01"> + <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-lg-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> + </form> + </div> </nav> <!-- Main jumbotron for a primary marketing message or call to action --> diff --git a/docs/examples/jumbotron/jumbotron.css b/docs/examples/jumbotron/jumbotron.css index ccf96fe4c..2f72eb954 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 */ body { - padding-bottom: 2rem; + padding-top: 2rem; } diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html index a757a5c9a..f12a9efe7 100644 --- a/docs/examples/justified-nav/index.html +++ b/docs/examples/justified-nav/index.html @@ -22,19 +22,40 @@ <div class="container"> - <!-- The justified navigation menu is meant for single line per list item. - Multiple lines will require custom code not provided by Bootstrap. --> <div class="masthead"> <h3 class="text-muted">Project name</h3> - <nav> - <ul class="nav nav-justified"> - <li class="nav-item"><a class="nav-link active" href="#">Home</a></li> - <li class="nav-item"><a class="nav-link" href="#">Projects</a></li> - <li class="nav-item"><a class="nav-link" href="#">Services</a></li> - <li class="nav-item"><a class="nav-link" href="#">Downloads</a></li> - <li class="nav-item"><a class="nav-link" href="#">About</a></li> - <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> - </ul> + + <nav class="navbar 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"> + <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="#">Projects</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Services</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Downloads</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">About</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown01"> + <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> + </div> </nav> </div> @@ -48,8 +69,7 @@ <!-- Example row of columns --> <div class="row"> <div class="col-lg-4"> - <h2>Safari bug warning!</h2> - <p class="text-danger">As of v9.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p> + <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> @@ -76,6 +96,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>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="../../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> diff --git a/docs/examples/justified-nav/justified-nav.css b/docs/examples/justified-nav/justified-nav.css index bd28e271e..2f6de026e 100644 --- a/docs/examples/justified-nav/justified-nav.css +++ b/docs/examples/justified-nav/justified-nav.css @@ -19,85 +19,27 @@ body { font-size: 21px; } -/* add .nav-justified, see: https://github.com/twbs/bootstrap/issues/18653 */ -.nav-justified { - width: 100%; -} -.nav-item { - float: none; -} -.nav-link { - width: 100%; - margin-bottom: 5px; - text-align: center; +.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) { - .nav-item { - display: table-cell; - width: 1%; + .navbar-nav { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } - .nav-link { - margin-bottom: 0; - } -} -/* Customize the nav-justified links to be fill the entire space of the .navbar */ - -.nav-justified { - background-color: #eee; - border: 1px solid #ccc; - border-radius: 5px; -} -.nav-link { - padding-top: 15px; - padding-bottom: 15px; - margin-bottom: 0; - font-weight: bold; - color: #777; - text-align: center; - background-color: #e5e5e5; /* Old browsers */ - background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); - background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); - background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); - background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5),to(#e5e5e5)); - background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); - background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); - background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ - background-repeat: repeat-x; /* Repeat the gradient */ - border-bottom: 1px solid #d5d5d5; -} -.nav-link.active, -.nav-link.active:hover, -.nav-link.active:focus { - background-color: #ddd; - background-image: none; - -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15); - box-shadow: inset 0 3px 7px rgba(0,0,0,.15); -} -.nav-item:first-child .nav-link { - border-radius: 5px 5px 0 0; -} -.nav-item:last-child .nav-link { - border-radius: 0 0 5px 5px; -} - -@media (min-width: 768px) { - .nav-justified { - max-height: 52px; - } - .nav-link { - border-right: 1px solid #d5d5d5; - border-left: 1px solid #fff; - } - .nav-item:first-child .nav-link { - border-left: 0; - border-radius: 5px 0 0 5px; - } - .nav-item:last-child .nav-link { - border-right: 0; - border-radius: 0 5px 5px 0; + .navbar-nav .nav-item { + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } } diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html index b0ccda3c2..e27aca212 100644 --- a/docs/examples/narrow-jumbotron/index.html +++ b/docs/examples/narrow-jumbotron/index.html @@ -23,7 +23,7 @@ <div class="container"> <div class="header clearfix"> <nav> - <ul class="nav nav-pills float-xs-right"> + <ul class="nav nav-pills float-right"> <li class="nav-item"> <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -74,7 +74,6 @@ </div> <!-- /container --> - <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> diff --git a/docs/examples/navbar-top-fixed/index.html b/docs/examples/navbar-top-fixed/index.html index 1ecbd2c3b..c92f50567 100644 --- a/docs/examples/navbar-top-fixed/index.html +++ b/docs/examples/navbar-top-fixed/index.html @@ -4,6 +4,7 @@ <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,17 +20,29 @@ <body> - <div class="pos-f-t"> - <div class="collapse" id="navbar-header"> - <div class="container-fluid bg-inverse p-1"> - <h3>Collapsed content</h3> - <p>Toggleable via the navbar brand.</p> - </div> + <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"> + <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"> + <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"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> </div> - <div class="navbar navbar-light bg-faded navbar-static-top"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button> - </div> - </div> + </nav> <div class="container"> <div class="jumbotron"> diff --git a/docs/examples/navbar-top-fixed/navbar-top-fixed.css b/docs/examples/navbar-top-fixed/navbar-top-fixed.css index 3e4f59f4b..c77c0c147 100644 --- a/docs/examples/navbar-top-fixed/navbar-top-fixed.css +++ b/docs/examples/navbar-top-fixed/navbar-top-fixed.css @@ -1,5 +1,5 @@ +/* Show it is fixed to the top */ body { - /* Show it's not fixed to the top */ min-height: 75rem; - padding-top: 6rem; + padding-top: 4.5rem; } diff --git a/docs/examples/navbar-top/index.html b/docs/examples/navbar-top/index.html index d86704e35..257ac23eb 100644 --- a/docs/examples/navbar-top/index.html +++ b/docs/examples/navbar-top/index.html @@ -4,6 +4,7 @@ <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,15 +20,29 @@ <body> - <div class="collapse" id="navbar-header"> - <div class="container-fluid bg-inverse p-1"> - <h3>Collapsed content</h3> - <p>Toggleable via the navbar brand.</p> + <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"> + <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"> + <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"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> </div> - </div> - <div class="navbar navbar-light bg-faded navbar-static-top mb-1"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button> - </div> + </nav> <div class="container"> <div class="jumbotron"> diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html deleted file mode 100644 index f04d18748..000000000 --- a/docs/examples/navbar/index.html +++ /dev/null @@ -1,72 +0,0 @@ -<!DOCTYPE html> -<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"> - - <title>Navbar Template for Bootstrap</title> - - <!-- Bootstrap core CSS --> - <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> - - <!-- Custom styles for this template --> - <link href="navbar.css" rel="stylesheet"> - </head> - - <body> - - <div class="container"> - <nav class="navbar navbar-light bg-faded"> - <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button> - <div class="collapse navbar-toggleable-xs" id="navbar-header"> - <a class="navbar-brand" href="#">Navbar</a> - <ul class="nav navbar-nav"> - <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="#">Features</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Pricing</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">About</a> - </li> - </ul> - <form class="form-inline float-xs-right"> - <input class="form-control" type="text" placeholder="Search"> - <button class="btn btn-outline-success" type="submit">Search</button> - </form> - </div> - </nav> <!-- /navbar --> - - <!-- Main component for a primary marketing message or call to action --> - <div class="jumbotron"> - <h1>Navbar example</h1> - <p>This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</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-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> - </p> - </div> - - </div> <!-- /container --> - - - <!-- 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>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="../../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/examples/navbars/index.html b/docs/examples/navbars/index.html new file mode 100644 index 000000000..8694df3fc --- /dev/null +++ b/docs/examples/navbars/index.html @@ -0,0 +1,204 @@ +<!DOCTYPE html> +<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"> + + <title>Navbar Template for Bootstrap</title> + + <!-- Bootstrap core CSS --> + <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> + + <!-- Custom styles for this template --> + <link href="navbar.css" rel="stylesheet"> + </head> + + <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"> + <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"> + <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="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown01"> + <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 mr-sm-2" type="text" placeholder="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </nav> + + <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> + <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"> + <span class="navbar-toggler-icon"></span> + </button> + <a class="navbar-brand" href="#">Container</a> + + <div class="collapse navbar-collapse" id="navbarsExampleContainer"> + <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 mr-sm-2" type="text" placeholder="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </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"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExampleCenteredNav"> + <ul class="navbar-nav"> + <li class="nav-item active"> + <a class="nav-link" href="#">Centered nav only <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> + </div> + </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"> + <span class="navbar-toggler-icon"></span> + </button> + <a class="navbar-brand" href="#">Navbar</a> + + <div class="collapse navbar-collapse" id="containerNavbar"> + <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 mr-sm-2" type="text" placeholder="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </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"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse justify-content-md-center" id="containerNavbarCenter"> + <ul class="navbar-nav"> + <li class="nav-item active"> + <a class="nav-link" href="#">Centered nav only <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> + </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 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>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> + + + <!-- 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>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="../../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/examples/navbar/navbar.css b/docs/examples/navbars/navbar.css index d2195240b..04f8c6b7f 100644 --- a/docs/examples/navbar/navbar.css +++ b/docs/examples/navbars/navbar.css @@ -1,5 +1,5 @@ body { - padding-top: 20px; + /*padding-top: 20px;*/ padding-bottom: 20px; } diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html index 669221fa5..1e20591b5 100644 --- a/docs/examples/offcanvas/index.html +++ b/docs/examples/offcanvas/index.html @@ -19,23 +19,46 @@ </head> <body> - <nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> - <div class="container"> - <a class="navbar-brand" href="#">Project name</a> - <ul class="nav navbar-nav"> - <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> - <li class="nav-item"><a class="nav-link" href="#about">About</a></li> - <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> + + <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"> + <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"> + <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="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown01"> + <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> - </div><!-- /.container --> - </nav><!-- /.navbar --> + <form class="form-inline my-2 my-lg-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> + </form> + </div> + </nav> <div class="container"> <div class="row row-offcanvas row-offcanvas-right"> - <div class="col-xs-12 col-sm-9"> - <p class="float-xs-right hidden-sm-up"> + <div class="col-12 col-md-9"> + <p class="float-right hidden-md-up"> <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button> </p> <div class="jumbotron"> @@ -43,32 +66,32 @@ <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p> </div> <div class="row"> - <div class="col-xs-6 col-lg-4"> + <div class="col-6 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-secondary" href="#" role="button">View details »</a></p> </div><!--/span--> - <div class="col-xs-6 col-lg-4"> + <div class="col-6 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-secondary" href="#" role="button">View details »</a></p> </div><!--/span--> - <div class="col-xs-6 col-lg-4"> + <div class="col-6 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-secondary" href="#" role="button">View details »</a></p> </div><!--/span--> - <div class="col-xs-6 col-lg-4"> + <div class="col-6 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-secondary" href="#" role="button">View details »</a></p> </div><!--/span--> - <div class="col-xs-6 col-lg-4"> + <div class="col-6 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-secondary" href="#" role="button">View details »</a></p> </div><!--/span--> - <div class="col-xs-6 col-lg-4"> + <div class="col-6 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-secondary" href="#" role="button">View details »</a></p> @@ -76,7 +99,7 @@ </div><!--/row--> </div><!--/span--> - <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"> + <div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar"> <div class="list-group"> <a href="#" class="list-group-item active">Link</a> <a href="#" class="list-group-item">Link</a> @@ -95,7 +118,7 @@ <hr> <footer> - <p>© Company 2014</p> + <p>© Company 2017</p> </footer> </div><!--/.container--> diff --git a/docs/examples/offcanvas/offcanvas.css b/docs/examples/offcanvas/offcanvas.css index 2a72199d5..6047cb304 100644 --- a/docs/examples/offcanvas/offcanvas.css +++ b/docs/examples/offcanvas/offcanvas.css @@ -35,11 +35,21 @@ footer { .row-offcanvas-right .sidebar-offcanvas { + right: -100%; /* 12 columns */ + } + + .row-offcanvas-right.active + .sidebar-offcanvas { right: -50%; /* 6 columns */ } .row-offcanvas-left .sidebar-offcanvas { + left: -100%; /* 12 columns */ + } + + .row-offcanvas-left.active + .sidebar-offcanvas { left: -50%; /* 6 columns */ } diff --git a/docs/examples/starter-template/index.html b/docs/examples/starter-template/index.html index cb45245aa..d497e2a1b 100644 --- a/docs/examples/starter-template/index.html +++ b/docs/examples/starter-template/index.html @@ -20,19 +20,37 @@ <body> - <nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> - <a class="navbar-brand" href="#">Project name</a> - <ul class="nav navbar-nav"> - <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="#">About</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Contact</a> - </li> - </ul> + <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"> + <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"> + <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="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown01"> + <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-lg-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> + </form> + </div> </nav> <div class="container"> diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html index 855f0418d..d0a154bd3 100644 --- a/docs/examples/sticky-footer-navbar/index.html +++ b/docs/examples/sticky-footer-navbar/index.html @@ -21,40 +21,33 @@ <body> <!-- Fixed navbar --> - <div class="pos-f-t"> - <div class="collapse" id="navbar-header"> - <div class="container bg-inverse p-1"> - <h3>Collapsed content</h3> - <p>Toggleable via the navbar brand.</p> - </div> + <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"> + <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"> + <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"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> </div> - <nav class="navbar navbar-light navbar-static-top bg-faded"> - <div class="container"> - <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-expanded="false" aria-controls="exCollapsingNavbar2" aria-label="Toggle navigation"></button> - <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> - <a class="navbar-brand" href="#">Sticky footer</a> - <ul class="nav navbar-nav"> - <li class="nav-item active"> - <a class="nav-link" href="#">Nav item <span class="sr-only">(current)</span></a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Another nav item</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">More nav</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Last link</a> - </li> - </ul> - </div> - </div> - </nav> - </div> + </nav> <!-- Begin page content --> <div class="container"> - <div class="mt-1"> + <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> diff --git a/docs/examples/tooltip-viewport/index.html b/docs/examples/tooltip-viewport/index.html index ee990b975..2ca1ed2b0 100644 --- a/docs/examples/tooltip-viewport/index.html +++ b/docs/examples/tooltip-viewport/index.html @@ -20,7 +20,7 @@ <body> - <button class="btn btn-secondary float-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button> + <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> @@ -30,7 +30,7 @@ <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 class="btn btn-secondary float-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button> + <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> </div> |