mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 04:41:36 +02:00
Code Issues Releases Wiki Activity

Add an examples layout.

Browse Source 
Reduces duplication and makes maintenance easier.
This commit is contained in:
XhmikosR
2018-11-05 13:24:55 +02:00
parent e1b5b4f989
commit 807c1b6d06
24 changed files with 2230 additions and 2605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
site/_includes/stylesheet.html
View File

@@ -1,12 +1,16 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
{% if jekyll.environment == "production" %} {%- if jekyll.environment == "production" %}
<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous"> <link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
{% else %} {% else %}
<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/css/bootstrap.css" rel="stylesheet"> <link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/css/bootstrap.css" rel="stylesheet">
{% endif %} {% endif -%}
{%- if page.layout == "docs" or page.layout != "examples" -%}
<!-- Documentation extras --> <!-- Documentation extras -->
{% if page.layout == "docs" %} {% if page.layout == "docs" %}
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
{% endif %} {% endif %}
{% if page.layout != "examples" %}
<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/css/docs.min.css" rel="stylesheet"> <link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/css/docs.min.css" rel="stylesheet">
{% endif %}
{%- endif -%}

40
site/_layouts/examples.html Normal file
View File

@@ -0,0 +1,40 @@
<!doctype html>
<html lang="en"{% if page.html_class %} class="{{ page.html_class }}"{% endif %}>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="{{ site.authors }}">
<meta name="generator" content="Jekyll v{{ jekyll.version }}">
<title>{{ page.title | smartify }} · {{ site.title | smartify }}</title>
{% include stylesheet.html %}
{%- for css in page.extra_css %}
<!-- Custom styles for this template -->
<link href="{{ css }}" rel="stylesheet">
{%- endfor %}
</head>
<body{% if page.body_class %} class="{{ page.body_class }}"{% endif %}>
{{ content }}
{%- if page.include_js != false -%}
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
{%- if jekyll.environment == "production" -%}
<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/js/bootstrap.bundle.min.js" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script>
{%- else -%}
<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/js/bootstrap.bundle.js"></script>
{%- endif -%}
{%- if page.include_holder == true -%}
<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/holder.min.js"></script>
{%- endif -%}
{%- for js in page.extra_js %}
<script src="{{ js }}"></script>
{%- endfor %}
{%- endif -%}
</body>
</html>

37
site/docs/4.1/examples/album/index.html
View File

@@ -1,22 +1,9 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Album example
<meta charset="utf-8"> extra_css: "album.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> include_holder: true
<meta name="description" content=""> ---
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Album example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="album.css" rel="stylesheet">
</head>
<body>
<header> <header>
<div class="collapse bg-dark" id="navbarHeader"> <div class="collapse bg-dark" id="navbarHeader">
@@ -216,16 +203,6 @@
<a href="#">Back to top</a> <a href="#">Back to top</a>
</p> </p>
<p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p> <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p> <p>New to Bootstrap? <a href="{{ site.url }}">Visit the homepage</a> or read our <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/">getting started guide</a>.</p>
</div> </div>
</footer> </footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
<script src="../../assets/js/vendor/holder.min.js"></script>
</body>
</html>

49
site/docs/4.1/examples/blog/index.html
View File

@@ -1,23 +1,11 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Blog Template
<meta charset="utf-8"> extra_css:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900"
<meta name="description" content=""> - "blog.css"
<meta name="author" content=""> include_holder: true
<link rel="icon" href="../../../../favicon.ico"> ---
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
<link href="blog.css" rel="stylesheet">
</head>
<body>
<div class="container"> <div class="container">
<header class="blog-header py-3"> <header class="blog-header py-3">
@@ -74,7 +62,7 @@
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#">Continue reading</a> <a href="#">Continue reading</a>
</div> </div>
<img class="card-img-right flex-auto d-none d-lg-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap"> <img class="card-img-right flex-auto d-none d-lg-block" data-src="holder.js/200x250?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@@ -88,7 +76,7 @@
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#">Continue reading</a> <a href="#">Continue reading</a>
</div> </div>
<img class="card-img-right flex-auto d-none d-lg-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap"> <img class="card-img-right flex-auto d-none d-lg-block" data-src="holder.js/200x250?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
</div> </div>
</div> </div>
</div> </div>
@@ -211,20 +199,3 @@
<a href="#">Back to top</a> <a href="#">Back to top</a>
</p> </p>
</footer> </footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
<script src="../../assets/js/vendor/holder.min.js"></script>
<script>
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
</script>
</body>
</html>

35
site/docs/4.1/examples/carousel/index.html
View File

@@ -1,21 +1,9 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Carousel Template
<meta charset="utf-8"> extra_css: "carousel.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> include_holder: true
<meta name="description" content=""> ---
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
</head>
<body>
<header> <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">
@@ -174,14 +162,3 @@
<p>&copy; 2017-2018 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p> <p>&copy; 2017-2018 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer> </footer>
</main> </main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.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>
</body>
</html>

20
site/docs/4.1/examples/checkout/form-validation.js Normal file
View File

@@ -0,0 +1,20 @@
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation')
// Loop over them and prevent submission
Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
}, false)
}())

60
site/docs/4.1/examples/checkout/index.html
View File

@@ -1,26 +1,14 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Checkout example
<meta charset="utf-8"> extra_css: "form-validation.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> extra_js: "form-validation.js"
<meta name="description" content=""> body_class: "bg-light"
<meta name="author" content=""> ---
<link rel="icon" href="../../../../favicon.ico">
<title>Checkout example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="form-validation.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container"> <div class="container">
<div class="py-5 text-center"> <div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="../../assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <img class="d-block mx-auto mb-4" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h2>Checkout form</h2> <h2>Checkout form</h2>
<p class="lead">Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p> <p class="lead">Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div> </div>
@@ -233,35 +221,3 @@
</ul> </ul>
</footer> </footer>
</div> </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
<script src="../../assets/js/vendor/holder.min.js"></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>

36
site/docs/4.1/examples/cover/index.html
View File

@@ -1,22 +1,10 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Cover Template
<meta charset="utf-8"> extra_css: "cover.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> body_class: "text-center"
<meta name="description" content=""> include_js: false
<meta name="author" content=""> ---
<link rel="icon" href="../../../../favicon.ico">
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
</head>
<body class="text-center">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column"> <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto"> <header class="masthead mb-auto">
@@ -44,13 +32,3 @@
</div> </div>
</footer> </footer>
</div> </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

53
site/docs/4.1/examples/dashboard/dashboard.js Normal file
View File

@@ -0,0 +1,53 @@
/* globals Chart:false, feather:false */
(function () {
'use strict'
feather.replace()
// Graphs
var ctx = document.getElementById('myChart')
// eslint-disable-next-line no-unused-vars
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
],
datasets: [{
data: [
15339,
21345,
18483,
24003,
23489,
24092,
12034
],
lineTension: 0,
backgroundColor: 'transparent',
borderColor: '#007bff',
borderWidth: 4,
pointBackgroundColor: '#007bff'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false
}
}
})
}())

74
site/docs/4.1/examples/dashboard/index.html
View File

@@ -1,22 +1,13 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Dashboard Template
<meta charset="utf-8"> extra_css: "dashboard.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> extra_js:
<meta name="description" content=""> - "https://unpkg.com/feather-icons/dist/feather.min.js"
<meta name="author" content=""> - "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"
<link rel="icon" href="../../../../favicon.ico"> - "dashboard.js"
---
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow"> <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
@@ -253,50 +244,3 @@
</main> </main>
</div> </div>
</div> </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
<!-- Icons -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
lineTension: 0,
backgroundColor: 'transparent',
borderColor: '#007bff',
borderWidth: 4,
pointBackgroundColor: '#007bff'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false,
}
}
});
</script>
</body>
</html>

28
site/docs/4.1/examples/floating-labels/index.html
View File

@@ -1,25 +1,13 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Floating labels example
<meta charset="utf-8"> extra_css: "floating-labels.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> include_js: false
<meta name="description" content=""> ---
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Floating labels example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="floating-labels.css" rel="stylesheet">
</head>
<body>
<form class="form-signin"> <form class="form-signin">
<div class="text-center mb-4"> <div class="text-center mb-4">
<img class="mb-4" src="../../assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <img class="mb-4" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Floating labels</h1> <h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p> <p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
</div> </div>
@@ -42,5 +30,3 @@
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2018</p> <p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2018</p>
</form> </form>
</body>
</html>

27
site/docs/4.1/examples/grid/index.html
View File

@@ -1,22 +1,11 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Grid Template
<meta charset="utf-8"> extra_css: "grid.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> body_class: "py-4"
<meta name="description" content=""> include_js: false
<meta name="author" content=""> ---
<link rel="icon" href="../../../../favicon.ico">
<title>Grid Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="grid.css" rel="stylesheet">
</head>
<body class="py-4">
<div class="container"> <div class="container">
<h1>Bootstrap grid examples</h1> <h1>Bootstrap grid examples</h1>
@@ -135,5 +124,3 @@
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
</body>
</html>

33
site/docs/4.1/examples/jumbotron/index.html
View File

@@ -1,22 +1,8 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Jumbotron Template
<meta charset="utf-8"> extra_css: "jumbotron.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ---
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
</head>
<body>
<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="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
@@ -91,12 +77,3 @@
<footer class="container"> <footer class="container">
<p>&copy; Company 2017-2018</p> <p>&copy; Company 2017-2018</p>
</footer> </footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

30
site/docs/4.1/examples/navbar-bottom/index.html
View File

@@ -1,24 +1,13 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Bottom navbar example
<meta charset="utf-8"> ---
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Bottom navbar example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container"> <div class="container">
<div class="jumbotron mt-3"> <div class="jumbotron mt-3">
<h1>Bottom Navbar example</h1> <h1>Bottom Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p> <p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</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="{{ site.baseurl }}/docs/{{ site.docs_version }}/components/navbar/" role="button">View navbar docs &raquo;</a>
</div> </div>
</div> </div>
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark"> <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
@@ -48,12 +37,3 @@
</ul> </ul>
</div> </div>
</nav> </nav>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

35
site/docs/4.1/examples/navbar-fixed/index.html
View File

@@ -1,22 +1,8 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Fixed top navbar example
<meta charset="utf-8"> extra_css: "navbar-top-fixed.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ---
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Fixed top navbar example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-top-fixed.css" rel="stylesheet">
</head>
<body>
<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>
@@ -46,15 +32,6 @@
<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="{{ site.baseurl }}/docs/{{ site.docs_version }}/components/navbar/" role="button">View navbar docs &raquo;</a>
</div> </div>
</main> </main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

35
site/docs/4.1/examples/navbar-static/index.html
View File

@@ -1,22 +1,8 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Top navbar example
<meta charset="utf-8"> extra_css: "navbar-top.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ---
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Top navbar example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-top.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="#">Top navbar</a> <a class="navbar-brand" href="#">Top navbar</a>
@@ -46,15 +32,6 @@
<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="{{ site.baseurl }}/docs/{{ site.docs_version }}/components/navbar/" role="button">View navbar docs &raquo;</a>
</div> </div>
</main> </main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

37
site/docs/4.1/examples/navbars/index.html
View File

@@ -1,22 +1,8 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Navbar Template
<meta charset="utf-8"> extra_css: "navbar.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ---
<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-dark bg-dark"> <nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Never expand</a> <a class="navbar-brand" href="#">Never expand</a>
@@ -326,21 +312,12 @@
<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>
<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-static/">top</a> and <a href="../navbar-fixed/">fixed top</a> examples.</p> <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-static/">top</a> and <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-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>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> <p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a> <a class="btn btn-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/components/navbar/" role="button">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> </div>
</main> </main>
</div> </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

40
site/docs/4.1/examples/offcanvas/index.html
View File

@@ -1,22 +1,11 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Offcanvas template
<meta charset="utf-8"> extra_css: "offcanvas.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> extra_js: "offcanvas.js"
<meta name="description" content=""> body_class: "bg-light"
<meta name="author" content=""> include_holder: true
<link rel="icon" href="../../../../favicon.ico"> ---
<title>Offcanvas template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
</head>
<body class="bg-light">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a> <a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a>
@@ -73,7 +62,7 @@
<main role="main" class="container"> <main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm"> <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm">
<img class="mr-3" src="../../assets/brand/bootstrap-outline.svg" alt="" width="48" height="48"> <img class="mr-3" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
<div class="lh-100"> <div class="lh-100">
<h6 class="mb-0 text-white lh-100">Bootstrap</h6> <h6 class="mb-0 text-white lh-100">Bootstrap</h6>
<small>Since 2011</small> <small>Since 2011</small>
@@ -145,14 +134,3 @@
</small> </small>
</div> </div>
</main> </main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
<script src="../../assets/js/vendor/holder.min.js"></script>
<script src="offcanvas.js"></script>
</body>
</html>

45
site/docs/4.1/examples/pricing/index.html
View File

@@ -1,22 +1,9 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Pricing example
<meta charset="utf-8"> extra_css: "pricing.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> include_js: false
<meta name="description" content=""> ---
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Pricing example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="pricing.css" rel="stylesheet">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5> <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
@@ -86,7 +73,7 @@
<footer class="pt-4 my-md-5 pt-md-5 border-top"> <footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row"> <div class="row">
<div class="col-12 col-md"> <div class="col-12 col-md">
<img class="mb-2" src="../../assets/brand/bootstrap-solid.svg" alt="" width="24" height="24"> <img class="mb-2" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">&copy; 2017-2018</small> <small class="d-block mb-3 text-muted">&copy; 2017-2018</small>
</div> </div>
<div class="col-6 col-md"> <div class="col-6 col-md">
@@ -121,21 +108,3 @@
</div> </div>
</footer> </footer>
</div> </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
<script src="../../assets/js/vendor/holder.min.js"></script>
<script>
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
</script>
</body>
</html>

42
site/docs/4.1/examples/product/index.html
View File

@@ -1,22 +1,8 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Product example
<meta charset="utf-8"> extra_css: "product.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ---
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Product example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="product.css" rel="stylesheet">
</head>
<body>
<nav class="site-header sticky-top py-1"> <nav class="site-header sticky-top py-1">
<div class="container d-flex flex-column flex-md-row justify-content-between"> <div class="container d-flex flex-column flex-md-row justify-content-between">
@@ -157,21 +143,3 @@
</div> </div>
</div> </div>
</footer> </footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
<script src="../../assets/js/vendor/holder.min.js"></script>
<script>
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
</script>
</body>
</html>

29
site/docs/4.1/examples/sign-in/index.html
View File

@@ -1,24 +1,13 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Signin Template
<meta charset="utf-8"> extra_css: "signin.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> body_class: "text-center"
<meta name="description" content=""> include_js: false
<meta name="author" content=""> ---
<link rel="icon" href="../../../../favicon.ico">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin"> <form class="form-signin">
<img class="mb-4" src="../../assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <img class="mb-4" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1> <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label> <label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
@@ -32,5 +21,3 @@
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p> <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
</form> </form>
</body>
</html>

33
site/docs/4.1/examples/starter-template/index.html
View File

@@ -1,22 +1,8 @@
<!doctype html> ---
<html lang="en"> layout: examples
<head> title: Starter Template
<meta charset="utf-8"> extra_css: "starter-template.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ---
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
@@ -59,12 +45,3 @@
</div> </div>
</main><!-- /.container --> </main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

37
site/docs/4.1/examples/sticky-footer-navbar/index.html
View File

@@ -1,22 +1,10 @@
<!doctype html> ---
<html lang="en" class="h-100"> layout: examples
<head> title: Sticky Footer Navbar Template
<meta charset="utf-8"> extra_css: "sticky-footer-navbar.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> html_class: "h-100"
<meta name="description" content=""> body_class: "d-flex flex-column h-100"
<meta name="author" content=""> ---
<link rel="icon" href="../../../../favicon.ico">
<title>Sticky Footer Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header> <header>
<!-- Fixed navbar --> <!-- Fixed navbar -->
@@ -50,7 +38,7 @@
<div class="container"> <div class="container">
<h1 class="mt-5">Sticky footer with fixed navbar</h1> <h1 class="mt-5">Sticky footer with fixed navbar</h1>
<p class="lead">Pin a 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>main &gt; .container</code>.</p> <p class="lead">Pin a 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>main &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="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p>
</div> </div>
</main> </main>
@@ -59,12 +47,3 @@
<span class="text-muted">Place sticky footer content here.</span> <span class="text-muted">Place sticky footer content here.</span>
</div> </div>
</footer> </footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

30
site/docs/4.1/examples/sticky-footer/index.html
View File

@@ -1,29 +1,17 @@
<!doctype html> ---
<html lang="en" class="h-100"> layout: examples
<head> title: Sticky Footer Template
<meta charset="utf-8"> extra_css: "sticky-footer.css"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> html_class: "h-100"
<meta name="description" content=""> body_class: "d-flex flex-column h-100"
<meta name="author" content=""> ---
<link rel="icon" href="../../../../favicon.ico">
<title>Sticky Footer Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<!-- Begin page content --> <!-- Begin page content -->
<main role="main" class="flex-shrink-0"> <main role="main" class="flex-shrink-0">
<div class="container"> <div class="container">
<h1 class="mt-5">Sticky footer</h1> <h1 class="mt-5">Sticky footer</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p class="lead">Pin a 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="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer-navbar/">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div> </div>
</main> </main>
@@ -32,5 +20,3 @@
<span class="text-muted">Place sticky footer content here.</span> <span class="text-muted">Place sticky footer content here.</span>
</div> </div>
</footer> </footer>
</body>
</html>