diff options
Diffstat (limited to 'docs/examples')
27 files changed, 701 insertions, 553 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 ccf8d035b..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,32 +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"> - ☰ - </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> @@ -104,7 +107,7 @@ <footer class="text-muted"> <div class="container"> - <p class="pull-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/blog/index.html b/docs/examples/blog/index.html index bfbb955b5..e4ef18ddc 100644 --- a/docs/examples/blog/index.html +++ b/docs/examples/blog/index.html @@ -148,7 +148,7 @@ </div><!-- /.container --> <footer class="blog-footer"> - <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> + <p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p> <a href="#">Back to top</a> </p> diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css index 52c93a296..58fdde1cb 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,17 +35,12 @@ 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; +.carousel-indicators li { + width: .75rem; + height: .75rem; + margin-right: .25rem; + margin-left: .25rem; + border-radius: 50%; } diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index 51ce13d70..71f3c17f4 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-inverse navbar-fixed-top navbar-toggleable-md 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="nav navbar-nav mt-2 mt-lg-0"> + <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> @@ -129,7 +131,7 @@ <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> </div> <div class="col-md-5"> - <img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div> </div> @@ -141,7 +143,7 @@ <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> </div> <div class="col-md-5 pull-md-7"> - <img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div> </div> @@ -153,7 +155,7 @@ <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> </div> <div class="col-md-5"> - <img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div> </div> @@ -164,7 +166,7 @@ <!-- FOOTER --> <footer> - <p class="pull-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/cover/index.html b/docs/examples/cover/index.html index 930e10bf8..9518792dd 100644 --- a/docs/examples/cover/index.html +++ b/docs/examples/cover/index.html @@ -47,7 +47,7 @@ <div class="mastfoot"> <div class="inner"> - <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> + <p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> </div> </div> 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 5a80654ff..a1f34cb94 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -19,75 +19,105 @@ </head> <body> - - <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"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> + <nav class="navbar navbar-inverse navbar-fixed-top bg-inverse navbar-toggleable-md"> + <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="#">Project name</a> - <div id="navbar"> - <nav class="nav navbar-nav pull-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="pull-xs-right"> - <input type="text" class="form-control" placeholder="Search..."> + <a class="navbar-brand" href="#">Dashboard</a> + + <div class="collapse navbar-collapse" id="navbarsExampleDefault"> + <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="#">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"> + <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"> + <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"> + <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"> @@ -217,7 +247,7 @@ </tbody> </table> </div> - </div> + </main> </div> </div> @@ -228,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 33140b1e1..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="http://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 500799f3a..7479a7fb3 100644 --- a/docs/examples/index.md +++ b/docs/examples/index.md @@ -10,30 +10,30 @@ 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> <h4>Grids</h4> <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p> </div> - <div class="clearfix hidden-sm-up"></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,23 +47,23 @@ 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> <h4>Static top navbar</h4> <p>Super basic template with a static top navbar along with some additional content.</p> </div> - <div class="clearfix hidden-sm-up"></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,71 +77,71 @@ 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> <h4>Cover</h4> <p>A one-page template for building simple and beautiful home pages.</p> </div> - <div class="clearfix hidden-sm-up"></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> <h4>Blog</h4> <p>Simple two-column blog layout with custom navigation, header, and type.</p> </div> - <div class="clearfix hidden-sm-up"></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> <h4>Sign-in page</h4> <p>Custom form layout and design for a simple sign in form.</p> </div> - <div class="clearfix hidden-sm-up"></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! <a href="{{ site.baseurl }}components/#nav-justified">Not too Safari friendly.</a></p> + <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> <h4>Sticky footer</h4> <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p> </div> - <div class="clearfix hidden-sm-up"></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..a062629a0 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-inverse navbar-fixed-top bg-inverse navbar-toggleable-md"> + <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="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="#">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 fc55d0648..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 pull-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 bda85c409..1ec4bf6a9 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,25 +20,35 @@ <body> - <div class="pos-f-t"> - <div class="collapse" id="navbar-header"> - <div class="container-fluid bg-inverse p-a-1"> - <h3>Collapsed content</h3> - <p>Toggleable via the navbar brand.</p> - </div> + <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md 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="nav navbar-nav mt-2 mt-lg-0"> + <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"> - ☰ - </button> - </div> - </div> + </nav> <div class="container"> <div class="jumbotron"> <h1>Navbar example</h1> <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p> - <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a> + <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> </div> </div> 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 52c61098f..e000fa256 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,23 +20,35 @@ <body> - <div class="collapse" id="navbar-header"> - <div class="container-fluid bg-inverse p-a-1"> - <h3>Collapsed content</h3> - <p>Toggleable via the navbar brand.</p> - </div> - </div> - <div class="navbar navbar-light bg-faded navbar-static-top m-b-1"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header"> - ☰ + <nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse mb-3"> + <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> - </div> + <a class="navbar-brand" href="#">Fixed navbar</a> + <div class="collapse navbar-collapse" id="navbarCollapse"> + <ul class="nav navbar-nav mt-2 mt-lg-0"> + <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> <div class="container"> <div class="jumbotron"> <h1>Navbar example</h1> <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p> - <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a> + <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> </div> </div> diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html deleted file mode 100644 index d0beae127..000000000 --- a/docs/examples/navbar/index.html +++ /dev/null @@ -1,74 +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"> - ☰ - </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 pull-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..f56a85d88 --- /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-inverse bg-inverse navbar-toggleable-md"> + <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="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="#">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> + + <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="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="#">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-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> + </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" id="navbarsExampleCenteredNav"> + <ul class="nav navbar-nav text-md-center"> + <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="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="#">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-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> + + <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" id="containerNavbarCenter"> + <ul class="nav navbar-nav text-md-center"> + <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-lg 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 b3faba6b9..7036277e2 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> + + <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse navbar-toggleable-md"> + <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="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> + <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="pull-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..b2f106b56 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-inverse bg-inverse navbar-fixed-top navbar-toggleable-md"> + <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="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="#">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 aa8b8c5c8..e972de7f5 100644 --- a/docs/examples/sticky-footer-navbar/index.html +++ b/docs/examples/sticky-footer-navbar/index.html @@ -21,42 +21,33 @@ <body> <!-- Fixed navbar --> - <div class="pos-f-t"> - <div class="collapse" id="navbar-header"> - <div class="container bg-inverse p-a-1"> - <h3>Collapsed content</h3> - <p>Toggleable via the navbar brand.</p> - </div> + <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md 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="nav navbar-nav mt-2 mt-lg-0"> + <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"> - ☰ - </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="m-t-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/sticky-footer/index.html b/docs/examples/sticky-footer/index.html index bc16be251..3d305166e 100644 --- a/docs/examples/sticky-footer/index.html +++ b/docs/examples/sticky-footer/index.html @@ -22,7 +22,7 @@ <!-- Begin page content --> <div class="container"> - <div class="m-t-1"> + <div class="mt-1"> <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> diff --git a/docs/examples/tooltip-viewport/index.html b/docs/examples/tooltip-viewport/index.html index 63e9156b5..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 pull-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 pull-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> |