mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Structure examples with appropriate <main>, <header>, <footer>

Browse Source 
Structure examples with appropriate `<main>`, `<header>`, `<footer>`
This commit is contained in:
Patrick H. Lauke
2017-09-13 19:51:08 +01:00
committed by GitHub
parent 3e546cacb4
commit d1b3c0c98d
15 changed files with 422 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/4.0/examples/album/index.html
+85 -79
View File
@@ -18,90 +18,96 @@
<body> <body>
<div class="collapse bg-dark" id="navbarHeader"> <header>
<div class="container"> <div class="collapse bg-dark" id="navbarHeader">
<div class="row"> <div class="container">
<div class="col-sm-8 py-4"> <div class="row">
<h4 class="text-white">About</h4> <div class="col-sm-8 py-4">
<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> <h4 class="text-white">About</h4>
</div> <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 class="col-sm-4 py-4"> </div>
<h4 class="text-white">Contact</h4> <div class="col-sm-4 py-4">
<ul class="list-unstyled"> <h4 class="text-white">Contact</h4>
<li><a href="#" class="text-white">Follow on Twitter</a></li> <ul class="list-unstyled">
<li><a href="#" class="text-white">Like on Facebook</a></li> <li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Email me</a></li> <li><a href="#" class="text-white">Like on Facebook</a></li>
</ul> <li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="navbar navbar-dark bg-dark">
<div class="navbar navbar-dark bg-dark"> <div class="container d-flex justify-content-between">
<div class="container d-flex justify-content-between"> <a href="#" class="navbar-brand">Album</a>
<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">
<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>
<span class="navbar-toggler-icon"></span> </button>
</button>
</div>
</div>
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary">Main call to action</a>
<a href="#" class="btn btn-secondary">Secondary action</a>
</p>
</div>
</section>
<div class="album text-muted">
<div class="container">
<div class="row">
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div> </div>
</div> </div>
</div> </header>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary">Main call to action</a>
<a href="#" class="btn btn-secondary">Secondary action</a>
</p>
</div>
</section>
<div class="album text-muted">
<div class="container">
<div class="row">
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted"> <footer class="text-muted">
<div class="container"> <div class="container">
docs/4.0/examples/blog/index.html
+21 -19
View File
@@ -18,26 +18,28 @@
<body> <body>
<div class="blog-masthead"> <header>
<div class="container"> <div class="blog-masthead">
<nav class="nav"> <div class="container">
<a class="nav-link active" href="#">Home</a> <nav class="nav">
<a class="nav-link" href="#">New features</a> <a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Press</a> <a class="nav-link" href="#">New features</a>
<a class="nav-link" href="#">New hires</a> <a class="nav-link" href="#">Press</a>
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">New hires</a>
</nav> <a class="nav-link" href="#">About</a>
</nav>
</div>
</div> </div>
</div>
<div class="blog-header"> <div class="blog-header">
<div class="container"> <div class="container">
<h1 class="blog-title">The Bootstrap Blog</h1> <h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">An example blog template built with Bootstrap.</p> <p class="lead blog-description">An example blog template built with Bootstrap.</p>
</div>
</div> </div>
</div> </header>
<div class="container"> <main role="main" class="container">
<div class="row"> <div class="row">
@@ -109,7 +111,7 @@
</div><!-- /.blog-main --> </div><!-- /.blog-main -->
<div class="col-sm-3 ml-sm-auto blog-sidebar"> <aside class="col-sm-3 ml-sm-auto blog-sidebar">
<div class="sidebar-module sidebar-module-inset"> <div class="sidebar-module sidebar-module-inset">
<h4>About</h4> <h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
@@ -139,11 +141,11 @@
<li><a href="#">Facebook</a></li> <li><a href="#">Facebook</a></li>
</ol> </ol>
</div> </div>
</div><!-- /.blog-sidebar --> </aside><!-- /.blog-sidebar -->
</div><!-- /.row --> </div><!-- /.row -->
</div><!-- /.container --> </main><!-- /.container -->
<footer class="blog-footer"> <footer class="blog-footer">
<p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
docs/4.0/examples/carousel/index.html
+137 -131
View File
@@ -17,158 +17,164 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <header>
<a class="navbar-brand" href="#">Carousel</a> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="#">Carousel</a>
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
<div class="collapse navbar-collapse" id="navbarCollapse"> </button>
<ul class="navbar-nav mr-auto"> <div class="collapse navbar-collapse" id="navbarCollapse">
<li class="nav-item active"> <ul class="navbar-nav mr-auto">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <li class="nav-item active">
</li> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<li class="nav-item"> </li>
<a class="nav-link" href="#">Link</a> <li class="nav-item">
</li> <a class="nav-link" href="#">Link</a>
<li class="nav-item"> </li>
<a class="nav-link disabled" href="#">Disabled</a> <li class="nav-item">
</li> <a class="nav-link disabled" href="#">Disabled</a>
</ul> </li>
<form class="form-inline mt-2 mt-md-0"> </ul>
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <form class="form-inline mt-2 mt-md-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</form> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div> </form>
</nav> </div>
</nav>
</header>
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <main role="main">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <div id="myCarousel" class="carousel slide" data-ride="carousel">
<li data-target="#myCarousel" data-slide-to="1"></li> <ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</ol> <li data-target="#myCarousel" data-slide-to="1"></li>
<div class="carousel-inner"> <li data-target="#myCarousel" data-slide-to="2"></li>
<div class="carousel-item active"> </ol>
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <div class="carousel-inner">
<div class="container"> <div class="carousel-item active">
<div class="carousel-caption text-left"> <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<h1>Example headline.</h1> <div class="container">
<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> <div class="carousel-caption text-left">
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> <h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="carousel-item"> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<div class="container"> <span class="sr-only">Previous</span>
<div class="carousel-caption"> </a>
<h1>Another example headline.</h1> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<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> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> <span class="sr-only">Next</span>
</div> </a>
</div>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div> </div>
</div> </div>
<div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <hr class="featurette-divider">
<div class="container">
<div class="carousel-caption text-right"> <div class="row featurette">
<h1>One more for good measure.</h1> <div class="col-md-7 order-md-2">
<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> <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> <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>
<div class="col-md-5 order-md-1">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div> </div>
</div> </div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<hr class="featurette-divider">
<!-- Marketing messaging and featurettes <div class="row featurette">
================================================== --> <div class="col-md-7">
<!-- Wrap the rest of the page in another container to center all the content. --> <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<div class="container marketing"> </div>
<div class="col-md-5">
<!-- Three columns of text below the carousel --> <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
<div class="row"> </div>
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider"> <hr class="featurette-divider">
<div class="row featurette"> <!-- /END THE FEATURETTES -->
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5 order-md-1">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider"> </div><!-- /.container -->
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer class="container">
<p class="float-right"><a href="#">Back to top</a></p> <p class="float-right"><a href="#">Back to top</a></p>
<p>&copy; 2017 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p> <p>&copy; 2017 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer> </footer>
</div><!-- /.container --> </main>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
docs/4.0/examples/cover/index.html
+6 -6
View File
@@ -24,7 +24,7 @@
<div class="cover-container"> <div class="cover-container">
<div class="masthead clearfix"> <header class="masthead clearfix">
<div class="inner"> <div class="inner">
<h3 class="masthead-brand">Cover</h3> <h3 class="masthead-brand">Cover</h3>
<nav class="nav nav-masthead"> <nav class="nav nav-masthead">
@@ -33,21 +33,21 @@
<a class="nav-link" href="#">Contact</a> <a class="nav-link" href="#">Contact</a>
</nav> </nav>
</div> </div>
</div> </header>
<div class="inner cover"> <main role="main" class="inner cover">
<h1 class="cover-heading">Cover your page.</h1> <h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead"> <p class="lead">
<a href="#" class="btn btn-lg btn-secondary">Learn more</a> <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
</p> </p>
</div> </main>
<div class="mastfoot"> <footer class="mastfoot">
<div class="inner"> <div class="inner">
<p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div> </div>
</div> </footer>
</div> </div>
docs/4.0/examples/dashboard/index.html
+29 -27
View File
@@ -17,33 +17,35 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <header>
<a class="navbar-brand" href="#">Dashboard</a> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="#">Dashboard</a>
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault"> <div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Settings</a> <a class="nav-link" href="#">Settings</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Profile</a> <a class="nav-link" href="#">Profile</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Help</a> <a class="nav-link" href="#">Help</a>
</li> </li>
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> </form>
</div> </div>
</nav> </nav>
</header>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
@@ -91,7 +93,7 @@
</ul> </ul>
</nav> </nav>
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main"> <main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3">
<h1>Dashboard</h1> <h1>Dashboard</h1>
<section class="row text-center placeholders"> <section class="row text-center placeholders">
docs/4.0/examples/jumbotron/index.html
+35 -31
View File
@@ -51,42 +51,46 @@
</div> </div>
</nav> </nav>
<!-- Main jumbotron for a primary marketing message or call to action --> <main role="main">
<div class="jumbotron">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>
<div class="container"> <div class="container">
<h1 class="display-3">Hello, world!</h1> <!-- Example row of columns -->
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <div class="row">
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p> <div class="col-md-4">
</div> <h2>Heading</h2>
</div> <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 &raquo;</a></p>
<div class="container"> </div>
<!-- Example row of columns --> <div class="col-md-4">
<div class="row"> <h2>Heading</h2>
<div class="col-md-4"> <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>
<h2>Heading</h2> <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
<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> </div>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p> <div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
</div> </div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<hr> <hr>
<footer> </div> <!-- /container -->
<p>&copy; Company 2017</p>
</footer>
</div> <!-- /container -->
</main>
<footer class="container">
<p>&copy; Company 2017</p>
</footer>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
docs/4.0/examples/justified-nav/index.html
+28 -24
View File
@@ -20,7 +20,7 @@
<div class="container"> <div class="container">
<div class="masthead"> <header class="masthead">
<h3 class="text-muted">Project name</h3> <h3 class="text-muted">Project name</h3>
<nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3"> <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
@@ -55,33 +55,37 @@
</ul> </ul>
</div> </div>
</nav> </nav>
</div> </header>
<!-- Jumbotron --> <main role="main">
<div class="jumbotron">
<h1>Marketing stuff!</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>
</div>
<!-- Example row of columns --> <!-- Jumbotron -->
<div class="row"> <div class="jumbotron">
<div class="col-lg-4"> <h1>Marketing stuff!</h1>
<h2>Heading</h2> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
<p>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-lg btn-success" href="#" role="button">Get started today</a></p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div> </div>
<div class="col-lg-4">
<h2>Heading</h2> <!-- Example row of columns -->
<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> <div class="row">
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p> <div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
</div> </div>
<div class="col-lg-4">
<h2>Heading</h2> </main>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<!-- Site footer --> <!-- Site footer -->
<footer class="footer"> <footer class="footer">
docs/4.0/examples/narrow-jumbotron/index.html
+29 -25
View File
@@ -19,7 +19,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="header clearfix"> <header class="header clearfix">
<nav> <nav>
<ul class="nav nav-pills float-right"> <ul class="nav nav-pills float-right">
<li class="nav-item"> <li class="nav-item">
@@ -34,37 +34,41 @@
</ul> </ul>
</nav> </nav>
<h3 class="text-muted">Project name</h3> <h3 class="text-muted">Project name</h3>
</div> </header>
<div class="jumbotron"> <main role="main">
<h1 class="display-3">Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
</div>
<div class="row marketing"> <div class="jumbotron">
<div class="col-lg-6"> <h1 class="display-3">Jumbotron heading</h1>
<h4>Subheading</h4> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div> </div>
<div class="col-lg-6"> <div class="row marketing">
<h4>Subheading</h4> <div class="col-lg-6">
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4> <h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4> <h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div> </div>
</div>
</main>
<footer class="footer"> <footer class="footer">
<p>&copy; Company 2017</p> <p>&copy; Company 2017</p>
docs/4.0/examples/navbar-top-fixed/index.html
+2 -2
View File
@@ -42,13 +42,13 @@
</div> </div>
</nav> </nav>
<div class="container"> <main role="main" class="container">
<div class="jumbotron"> <div class="jumbotron">
<h1>Navbar example</h1> <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> <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 &raquo;</a> <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</div> </div>
</div> </main>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
docs/4.0/examples/navbar-top/index.html
+2 -2
View File
@@ -42,13 +42,13 @@
</div> </div>
</nav> </nav>
<div class="container"> <main role="main" class="container">
<div class="jumbotron"> <div class="jumbotron">
<h1>Navbar example</h1> <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> <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 &raquo;</a> <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</div> </div>
</div> </main>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
docs/4.0/examples/navbars/index.html
+11 -9
View File
@@ -322,16 +322,18 @@
</div> </div>
</nav> </nav>
<div class="jumbotron"> <main role="main">
<div class="col-sm-8 mx-auto"> <div class="jumbotron">
<h1>Navbar examples</h1> <div class="col-sm-8 mx-auto">
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p> <h1>Navbar examples</h1>
<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>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
<p> <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>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a> <p>
</p> <a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</p>
</div>
</div> </div>
</div> </main>
</div> </div>
docs/4.0/examples/offcanvas/index.html
+5 -5
View File
@@ -51,7 +51,7 @@
</div> </div>
</nav> </nav>
<div class="container"> <main role="main" class="container">
<div class="row row-offcanvas row-offcanvas-right"> <div class="row row-offcanvas row-offcanvas-right">
@@ -115,11 +115,11 @@
<hr> <hr>
<footer> </main><!--/.container-->
<p>&copy; Company 2017</p>
</footer>
</div><!--/.container--> <footer>
<p>&copy; Company 2017</p>
</footer>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
docs/4.0/examples/starter-template/index.html
+2 -2
View File
@@ -51,14 +51,14 @@
</div> </div>
</nav> </nav>
<div class="container"> <main role="main" class="container">
<div class="starter-template"> <div class="starter-template">
<h1>Bootstrap starter template</h1> <h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div> </div>
</div><!-- /.container --> </main><!-- /.container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
docs/4.0/examples/sticky-footer-navbar/index.html
+28 -26
View File
@@ -18,39 +18,41 @@
<body> <body>
<!-- Fixed navbar --> <header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <!-- Fixed navbar -->
<a class="navbar-brand" href="#">Fixed navbar</a> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="#">Fixed navbar</a>
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
<div class="collapse navbar-collapse" id="navbarCollapse"> </button>
<ul class="navbar-nav mr-auto"> <div class="collapse navbar-collapse" id="navbarCollapse">
<li class="nav-item active"> <ul class="navbar-nav mr-auto">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <li class="nav-item active">
</li> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<li class="nav-item"> </li>
<a class="nav-link" href="#">Link</a> <li class="nav-item">
</li> <a class="nav-link" href="#">Link</a>
<li class="nav-item"> </li>
<a class="nav-link disabled" href="#">Disabled</a> <li class="nav-item">
</li> <a class="nav-link disabled" href="#">Disabled</a>
</ul> </li>
<form class="form-inline mt-2 mt-md-0"> </ul>
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <form class="form-inline mt-2 mt-md-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</form> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div> </form>
</nav> </div>
</nav>
</header>
<!-- Begin page content --> <!-- Begin page content -->
<div class="container"> <main role="main" class="container">
<div class="mt-3"> <div class="mt-3">
<h1>Sticky footer with fixed navbar</h1> <h1>Sticky footer with fixed navbar</h1>
</div> </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 &gt; .container</code>.</p> <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 &gt; .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div> </main>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
docs/4.0/examples/sticky-footer/index.html
+2 -2
View File
@@ -19,13 +19,13 @@
<body> <body>
<!-- Begin page content --> <!-- Begin page content -->
<div class="container"> <main role="main" class="container">
<div class="mt-1"> <div class="mt-1">
<h1>Sticky footer</h1> <h1>Sticky footer</h1>
</div> </div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div> </main>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">