rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/4.0/examples/album/index.html
View File

@ -18,6 +18,7 @@
<body> <body>
<header>
<div class="collapse bg-dark" id="navbarHeader"> <div class="collapse bg-dark" id="navbarHeader">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -44,6 +45,9 @@
</button> </button>
</div> </div>
</div> </div>
</header>
<main role="main">
<section class="jumbotron text-center"> <section class="jumbotron text-center">
<div class="container"> <div class="container">
@ -103,6 +107,8 @@
</div> </div>
</div> </div>
</main>
<footer class="text-muted"> <footer class="text-muted">
<div class="container"> <div class="container">
<p class="float-right"> <p class="float-right">

10
docs/4.0/examples/blog/index.html
View File

@ -18,6 +18,7 @@
<body> <body>
<header>
<div class="blog-masthead"> <div class="blog-masthead">
<div class="container"> <div class="container">
<nav class="nav"> <nav class="nav">
@ -36,8 +37,9 @@
<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>

10
docs/4.0/examples/carousel/index.html
View File

@ -17,6 +17,7 @@
</head> </head>
<body> <body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Carousel</a> <a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
@ -40,6 +41,9 @@
</form> </form>
</div> </div>
</nav> </nav>
</header>
<main role="main">
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
@ -161,14 +165,16 @@
<!-- /END THE FEATURETTES --> <!-- /END THE FEATURETTES -->
</div><!-- /.container -->
<!-- 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

12
docs/4.0/examples/cover/index.html
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>

4
docs/4.0/examples/dashboard/index.html
View File

@ -17,6 +17,7 @@
</head> </head>
<body> <body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a> <a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <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">
@ -44,6 +45,7 @@
</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">

10
docs/4.0/examples/jumbotron/index.html
View File

@ -51,6 +51,8 @@
</div> </div>
</nav> </nav>
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action --> <!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron"> <div class="jumbotron">
<div class="container"> <div class="container">
@ -82,11 +84,13 @@
<hr> <hr>
<footer>
<p>&copy; Company 2017</p>
</footer>
</div> <!-- /container --> </div> <!-- /container -->
</main>
<footer class="container">
<p>&copy; Company 2017</p>
</footer>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->

8
docs/4.0/examples/justified-nav/index.html
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,7 +55,9 @@
</ul> </ul>
</div> </div>
</nav> </nav>
</div> </header>
<main role="main">
<!-- Jumbotron --> <!-- Jumbotron -->
<div class="jumbotron"> <div class="jumbotron">
@ -83,6 +85,8 @@
</div> </div>
</div> </div>
</main>
<!-- Site footer --> <!-- Site footer -->
<footer class="footer"> <footer class="footer">
<p>&copy; Company 2017</p> <p>&copy; Company 2017</p>

8
docs/4.0/examples/narrow-jumbotron/index.html
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,7 +34,9 @@
</ul> </ul>
</nav> </nav>
<h3 class="text-muted">Project name</h3> <h3 class="text-muted">Project name</h3>
</div> </header>
<main role="main">
<div class="jumbotron"> <div class="jumbotron">
<h1 class="display-3">Jumbotron heading</h1> <h1 class="display-3">Jumbotron heading</h1>
@ -66,6 +68,8 @@
</div> </div>
</div> </div>
</main>
<footer class="footer"> <footer class="footer">
<p>&copy; Company 2017</p> <p>&copy; Company 2017</p>
</footer> </footer>

4
docs/4.0/examples/navbar-top-fixed/index.html
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

4
docs/4.0/examples/navbar-top/index.html
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

2
docs/4.0/examples/navbars/index.html
View File

@ -322,6 +322,7 @@
</div> </div>
</nav> </nav>
<main role="main">
<div class="jumbotron"> <div class="jumbotron">
<div class="col-sm-8 mx-auto"> <div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1> <h1>Navbar examples</h1>
@ -332,6 +333,7 @@
</p> </p>
</div> </div>
</div> </div>
</main>
</div> </div>

6
docs/4.0/examples/offcanvas/index.html
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,12 +115,12 @@
<hr> <hr>
</main><!--/.container-->
<footer> <footer>
<p>&copy; Company 2017</p> <p>&copy; Company 2017</p>
</footer> </footer>
</div><!--/.container-->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->

4
docs/4.0/examples/starter-template/index.html
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

6
docs/4.0/examples/sticky-footer-navbar/index.html
View File

@ -18,6 +18,7 @@
<body> <body>
<header>
<!-- Fixed navbar --> <!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a> <a class="navbar-brand" href="#">Fixed navbar</a>
@ -42,15 +43,16 @@
</form> </form>
</div> </div>
</nav> </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">

4
docs/4.0/examples/sticky-footer/index.html
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">