mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-16 21:18:25 +01:00
Publish docs for v4.3
This commit is contained in:
Mark Otto
Mark Otto
parent
3566a977a5
commit
d1a6aee460
@ -1,10 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/3.3/about/">
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/3.3/about/">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/3.3/about/">Click here if you are not redirected.</a>
|
||||
<script>location="https://getbootstrap.com/docs/3.3/about/"</script>
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/about/overview/">
|
||||
<script>location="https://getbootstrap.com/docs/4.3/about/overview/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.3/about/overview/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.3/about/overview/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https:/getbootstrap.com/docs/3.3/browser-bugs/">
|
||||
<meta http-equiv="refresh" content="0; url=https:/getbootstrap.com/docs/3.3/browser-bugs/">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https:/getbootstrap.com/docs/3.3/browser-bugs/">Click here if you are not redirected.</a>
|
||||
<script>location="https:/getbootstrap.com/docs/3.3/browser-bugs/"</script>
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/browser-bugs/">
|
||||
<script>location="https://getbootstrap.com/docs/4.3/browser-bugs/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.3/browser-bugs/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.3/browser-bugs/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/3.3/components/">
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/3.3/components/">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/3.3/components/">Click here if you are not redirected.</a>
|
||||
<script>location="https://getbootstrap.com/docs/3.3/components/"</script>
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/alerts/">
|
||||
<script>location="https://getbootstrap.com/docs/4.3/components/alerts/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.3/components/alerts/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.3/components/alerts/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
|
||||
559
docs/4.3/about/brand/index.html
Normal file
559
docs/4.3/about/brand/index.html
Normal file
@ -0,0 +1,559 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Brand guidelines · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/about/brand/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Brand guidelines">
|
||||
<meta name="twitter:description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/about/brand/">
|
||||
<meta property="og:title" content="Brand guidelines">
|
||||
<meta property="og:description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#download-mark">Download mark</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#name">Name</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#colors">Colors</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Brand guidelines</h1>
|
||||
<p class="bd-lead">Documentation and examples for Bootstrap’s logo and brand usage guidelines.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Have a need for Bootstrap’s brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp’s <a href="https://mailchimp.com/about/brand-assets/">Brand Assets</a>.</p>
|
||||
|
||||
<h2 id="mark-and-logo">Mark and logo</h2>
|
||||
|
||||
<p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in San Francisco Display Semibold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p>
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<img class="svg" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" />
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<img class="svg" src="/docs/4.3/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<span class="h1">Bootstrap</span>
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<span class="h1">Bootstrap</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="download-mark">Download mark</h2>
|
||||
|
||||
<p>Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.</p>
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<img class="svg" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" />
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<img class="svg" src="/docs/4.3/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" />
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<img class="svg" src="/docs/4.3/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="name">Name</h2>
|
||||
|
||||
<p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p>
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<span class="h3">Bootstrap</span>
|
||||
<strong class="text-success">Right</strong>
|
||||
</div>
|
||||
<div class="bd-brand-item">
|
||||
<span class="h3 text-muted">BootStrap</span>
|
||||
<strong class="text-warning">Wrong</strong>
|
||||
</div>
|
||||
<div class="bd-brand-item">
|
||||
<span class="h3 text-muted">Twitter Bootstrap</span>
|
||||
<strong class="text-warning">Wrong</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
|
||||
<p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it’s purple, it’s representative of Bootstrap.</p>
|
||||
|
||||
<div class="bd-brand">
|
||||
<div class="color-swatches">
|
||||
<div class="color-swatch bd-purple"></div>
|
||||
<div class="color-swatch bd-purple-light"></div>
|
||||
<div class="color-swatch bd-purple-lighter"></div>
|
||||
<div class="color-swatch bd-gray"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
docs/4.3/about/index.html
Normal file
11
docs/4.3/about/index.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/about/overview/">
|
||||
<script>location="https://getbootstrap.com/docs/4.3/about/overview/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.3/about/overview/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.3/about/overview/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
515
docs/4.3/about/license/index.html
Normal file
515
docs/4.3/about/license/index.html
Normal file
@ -0,0 +1,515 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>License FAQs · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/about/license/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="License FAQs">
|
||||
<meta name="twitter:description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/about/license/">
|
||||
<meta property="og:title" content="License FAQs">
|
||||
<meta property="og:description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">License FAQs</h1>
|
||||
<p class="bd-lead">Commonly asked questions about Bootstrap’s open source license.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Bootstrap is released under the MIT license and is copyright 2019 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
|
||||
|
||||
<h4 id="it-requires-you-to">It requires you to:</h4>
|
||||
|
||||
<ul>
|
||||
<li>Keep the license and copyright notice included in Bootstrap’s CSS and JavaScript files when you use them in your works</li>
|
||||
</ul>
|
||||
|
||||
<h4 id="it-permits-you-to">It permits you to:</h4>
|
||||
|
||||
<ul>
|
||||
<li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li>
|
||||
<li>Use Bootstrap in packages or distributions that you create</li>
|
||||
<li>Modify the source code</li>
|
||||
<li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li>
|
||||
</ul>
|
||||
|
||||
<h4 id="it-forbids-you-to">It forbids you to:</h4>
|
||||
|
||||
<ul>
|
||||
<li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li>
|
||||
<li>Hold the creators or copyright holders of Bootstrap liable</li>
|
||||
<li>Redistribute any piece of Bootstrap without proper attribution</li>
|
||||
<li>Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution</li>
|
||||
<li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li>
|
||||
</ul>
|
||||
|
||||
<h4 id="it-does-not-require-you-to">It does not require you to:</h4>
|
||||
|
||||
<ul>
|
||||
<li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
|
||||
<li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
|
||||
</ul>
|
||||
|
||||
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v4.3.0/LICENSE">in the project repository</a> for more information.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
497
docs/4.3/about/overview/index.html
Normal file
497
docs/4.3/about/overview/index.html
Normal file
@ -0,0 +1,497 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>About · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/about/overview/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="About">
|
||||
<meta name="twitter:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/about/overview/">
|
||||
<meta property="og:title" content="About">
|
||||
<meta property="og:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">About</h1>
|
||||
<p class="bd-lead">Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="team">Team</h2>
|
||||
|
||||
<p>Bootstrap is maintained by a <a href="https://github.com/orgs/twbs/people">small team of developers</a> on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
|
||||
|
||||
<h2 id="history">History</h2>
|
||||
|
||||
<p>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
|
||||
|
||||
<p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/engineering/en_us/a/2010/hack-week.html">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
|
||||
|
||||
<p>Originally <a href="https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html">released</a> on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, we’ve since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
|
||||
|
||||
<p>With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.</p>
|
||||
|
||||
<h2 id="get-involved">Get involved</h2>
|
||||
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.3.0/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
550
docs/4.3/about/team/index.html
Normal file
550
docs/4.3/about/team/index.html
Normal file
@ -0,0 +1,550 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Team · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/about/team/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Team">
|
||||
<meta name="twitter:description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/about/team/">
|
||||
<meta property="og:title" content="Team">
|
||||
<meta property="og:description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Team</h1>
|
||||
<p class="bd-lead">An overview of the founding team and core contributors to Bootstrap.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
|
||||
|
||||
<div class="list-group mb-3">
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/mdo">
|
||||
<img src="https://github.com/mdo.png" alt="@mdo" width="32" height="32" class="rounded mr-2" />
|
||||
<span>
|
||||
<strong>Mark Otto</strong> @mdo
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
|
||||
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded mr-2" />
|
||||
<span>
|
||||
<strong>Jacob Thornton</strong> @fat
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/cvrebert">
|
||||
<img src="https://github.com/cvrebert.png" alt="@cvrebert" width="32" height="32" class="rounded mr-2" />
|
||||
<span>
|
||||
<strong>Chris Rebert</strong> @cvrebert
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
|
||||
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded mr-2" />
|
||||
<span>
|
||||
<strong>XhmikosR</strong> @xhmikosr
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
|
||||
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded mr-2" />
|
||||
<span>
|
||||
<strong>Patrick H. Lauke</strong> @patrickhlauke
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
|
||||
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded mr-2" />
|
||||
<span>
|
||||
<strong>Gleb Mazovetskiy</strong> @glebm
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
|
||||
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded mr-2" />
|
||||
<span>
|
||||
<strong>Johann-S</strong> @johann-s
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/andresgalante">
|
||||
<img src="https://github.com/andresgalante.png" alt="@andresgalante" width="32" height="32" class="rounded mr-2" />
|
||||
<span>
|
||||
<strong>Andres Galante</strong> @andresgalante
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
|
||||
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded mr-2" />
|
||||
<span>
|
||||
<strong>Martijn Cuppens</strong> @martijncuppens
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.3.0/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
497
docs/4.3/about/translations/index.html
Normal file
497
docs/4.3/about/translations/index.html
Normal file
@ -0,0 +1,497 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Links to community-translated Bootstrap documentation sites.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Translations · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/about/translations/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Translations">
|
||||
<meta name="twitter:description" content="Links to community-translated Bootstrap documentation sites.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/about/translations/">
|
||||
<meta property="og:title" content="Translations">
|
||||
<meta property="og:description" content="Links to community-translated Bootstrap documentation sites.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Translations</h1>
|
||||
<p class="bd-lead">Links to community-translated Bootstrap documentation sites.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Community members have translated Bootstrap’s documentation into various languages. None are officially supported and they may not always be up to date.</p>
|
||||
|
||||
<ul>
|
||||
|
||||
<li><a href="https://bootstrap.hexschool.com/" hreflang="zh-tw">Bootstrap 4 繁體中文手冊 (中文(繁體))</a></li>
|
||||
|
||||
<li><a href="https://code.z01.com/v4/" hreflang="zh">Bootstrap 4 · 全球最流行的 HTML、CSS 和 JS 工具库。 (Chinese)</a></li>
|
||||
|
||||
<li><a href="https://getbootstrap.com.br/v4/" hreflang="pt-BR">Bootstrap 4 Português do Brasil (Brazilian Portuguese)</a></li>
|
||||
|
||||
<li><a href="https://getbootstrap.jp/" hreflang="ja">Bootstrap 4 日本語リファレンス (Japanese)</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p><strong>We don’t help organize or host translations, we just link to them.</strong></p>
|
||||
|
||||
<p>Finished a new or better translation? Open a pull request to add it to our list.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
5
docs/4.3/assets/brand/bootstrap-outline.svg
Normal file
5
docs/4.3/assets/brand/bootstrap-outline.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" viewBox="0 180 612 612" focusable="false" role="img">
|
||||
<title>Bootstrap</title>
|
||||
<path d="M510 186c25.5 0 49.6 10 67.8 28.2S606 256.5 606 282v408c0 25.5-10 49.6-28.2 67.8S535.5 786 510 786H102c-25.5 0-49.6-10-67.8-28.2S6 715.5 6 690V282c0-25.5 10-49.6 28.2-67.8S76.5 186 102 186h408m0-6H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102z"/>
|
||||
<path d="M166.3 313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 957 B |
5
docs/4.3/assets/brand/bootstrap-punchout.svg
Normal file
5
docs/4.3/assets/brand/bootstrap-punchout.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" viewBox="0 180 612 612" focusable="false" role="img">
|
||||
<title>Bootstrap</title>
|
||||
<path d="M383.5 521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8-.1-17.6-5.3-31.2-15.8-40.6zm-15.3-72c10-8.5 15-20.8 15-36.8 0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102c15 0 27.5-4.3 37.5-12.7z"/>
|
||||
<path d="M510 180H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102zm-55.8 429.8c-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 791 B |
BIN
docs/4.3/assets/brand/bootstrap-social-logo.png
Normal file
BIN
docs/4.3/assets/brand/bootstrap-social-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/4.3/assets/brand/bootstrap-social.png
Normal file
BIN
docs/4.3/assets/brand/bootstrap-social.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
5
docs/4.3/assets/brand/bootstrap-solid.svg
Normal file
5
docs/4.3/assets/brand/bootstrap-solid.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612" focusable="false" role="img">
|
||||
<title>Bootstrap</title>
|
||||
<path fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
|
||||
<path fill="#FFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 778 B |
8
docs/4.3/assets/css/docs.min.css
vendored
Normal file
8
docs/4.3/assets/css/docs.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
docs/4.3/assets/css/docs.min.css.map
Normal file
1
docs/4.3/assets/css/docs.min.css.map
Normal file
File diff suppressed because one or more lines are too long
BIN
docs/4.3/assets/img/bootstrap-themes.png
Normal file
BIN
docs/4.3/assets/img/bootstrap-themes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
docs/4.3/assets/img/bootstrap-themes@2x.png
Normal file
BIN
docs/4.3/assets/img/bootstrap-themes@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/4.3/assets/img/examples/album.png
Normal file
BIN
docs/4.3/assets/img/examples/album.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
docs/4.3/assets/img/examples/album@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/album@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/4.3/assets/img/examples/blog.png
Normal file
BIN
docs/4.3/assets/img/examples/blog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
docs/4.3/assets/img/examples/blog@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/blog@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
docs/4.3/assets/img/examples/carousel.png
Normal file
BIN
docs/4.3/assets/img/examples/carousel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
docs/4.3/assets/img/examples/carousel@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/carousel@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
docs/4.3/assets/img/examples/checkout.png
Normal file
BIN
docs/4.3/assets/img/examples/checkout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
docs/4.3/assets/img/examples/checkout@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/checkout@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
docs/4.3/assets/img/examples/cover.png
Normal file
BIN
docs/4.3/assets/img/examples/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
docs/4.3/assets/img/examples/cover@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/cover@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/4.3/assets/img/examples/dashboard.png
Normal file
BIN
docs/4.3/assets/img/examples/dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/4.3/assets/img/examples/dashboard@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/dashboard@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/4.3/assets/img/examples/floating-labels.png
Normal file
BIN
docs/4.3/assets/img/examples/floating-labels.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
docs/4.3/assets/img/examples/floating-labels@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/floating-labels@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/4.3/assets/img/examples/grid.png
Normal file
BIN
docs/4.3/assets/img/examples/grid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
docs/4.3/assets/img/examples/grid@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/grid@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
docs/4.3/assets/img/examples/jumbotron.png
Normal file
BIN
docs/4.3/assets/img/examples/jumbotron.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
docs/4.3/assets/img/examples/jumbotron@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/jumbotron@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
docs/4.3/assets/img/examples/navbar-bottom.png
Normal file
BIN
docs/4.3/assets/img/examples/navbar-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
docs/4.3/assets/img/examples/navbar-bottom@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/navbar-bottom@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/4.3/assets/img/examples/navbar-fixed.png
Normal file
BIN
docs/4.3/assets/img/examples/navbar-fixed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/4.3/assets/img/examples/navbar-fixed@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/navbar-fixed@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
docs/4.3/assets/img/examples/navbar-static.png
Normal file
BIN
docs/4.3/assets/img/examples/navbar-static.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/4.3/assets/img/examples/navbar-static@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/navbar-static@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/4.3/assets/img/examples/navbars.png
Normal file
BIN
docs/4.3/assets/img/examples/navbars.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/4.3/assets/img/examples/navbars@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/navbars@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/4.3/assets/img/examples/offcanvas.png
Normal file
BIN
docs/4.3/assets/img/examples/offcanvas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
docs/4.3/assets/img/examples/offcanvas@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/offcanvas@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/4.3/assets/img/examples/pricing.png
Normal file
BIN
docs/4.3/assets/img/examples/pricing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/4.3/assets/img/examples/pricing@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/pricing@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
docs/4.3/assets/img/examples/product.png
Normal file
BIN
docs/4.3/assets/img/examples/product.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/4.3/assets/img/examples/product@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/product@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
docs/4.3/assets/img/examples/sign-in.png
Normal file
BIN
docs/4.3/assets/img/examples/sign-in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
docs/4.3/assets/img/examples/sign-in@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/sign-in@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
docs/4.3/assets/img/examples/starter-template.png
Normal file
BIN
docs/4.3/assets/img/examples/starter-template.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
docs/4.3/assets/img/examples/starter-template@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/starter-template@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/4.3/assets/img/examples/sticky-footer-navbar.png
Normal file
BIN
docs/4.3/assets/img/examples/sticky-footer-navbar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/4.3/assets/img/examples/sticky-footer-navbar@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/sticky-footer-navbar@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
docs/4.3/assets/img/examples/sticky-footer.png
Normal file
BIN
docs/4.3/assets/img/examples/sticky-footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
docs/4.3/assets/img/examples/sticky-footer@2x.png
Normal file
BIN
docs/4.3/assets/img/examples/sticky-footer@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
docs/4.3/assets/img/favicons/android-chrome-192x192.png
Normal file
BIN
docs/4.3/assets/img/favicons/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
docs/4.3/assets/img/favicons/android-chrome-512x512.png
Normal file
BIN
docs/4.3/assets/img/favicons/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
docs/4.3/assets/img/favicons/apple-touch-icon.png
Normal file
BIN
docs/4.3/assets/img/favicons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
9
docs/4.3/assets/img/favicons/browserconfig.xml
Normal file
9
docs/4.3/assets/img/favicons/browserconfig.xml
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/docs/4.3/assets/img/favicons/mstile-150x150.png"/>
|
||||
<TileColor>#563d7c</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
BIN
docs/4.3/assets/img/favicons/favicon-16x16.png
Normal file
BIN
docs/4.3/assets/img/favicons/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
BIN
docs/4.3/assets/img/favicons/favicon-32x32.png
Normal file
BIN
docs/4.3/assets/img/favicons/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
20
docs/4.3/assets/img/favicons/manifest.json
Normal file
20
docs/4.3/assets/img/favicons/manifest.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "Bootstrap",
|
||||
"short_name": "Bootstrap",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/docs/4.3/assets/img/favicons/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/docs/4.3/assets/img/favicons/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": "/?utm_source=a2hs",
|
||||
"theme_color": "#563d7c",
|
||||
"background_color": "#563d7c",
|
||||
"display": "standalone"
|
||||
}
|
||||
BIN
docs/4.3/assets/img/favicons/mstile-144x144.png
Normal file
BIN
docs/4.3/assets/img/favicons/mstile-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
docs/4.3/assets/img/favicons/mstile-150x150.png
Normal file
BIN
docs/4.3/assets/img/favicons/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
docs/4.3/assets/img/favicons/mstile-310x150.png
Normal file
BIN
docs/4.3/assets/img/favicons/mstile-310x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
docs/4.3/assets/img/favicons/mstile-310x310.png
Normal file
BIN
docs/4.3/assets/img/favicons/mstile-310x310.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
docs/4.3/assets/img/favicons/mstile-70x70.png
Normal file
BIN
docs/4.3/assets/img/favicons/mstile-70x70.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
4
docs/4.3/assets/img/favicons/safari-pinned-tab.svg
Normal file
4
docs/4.3/assets/img/favicons/safari-pinned-tab.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="933.333" height="933.333" version="1" viewBox="0 0 700 700">
|
||||
<path d="M104.5.7C89.2 2.6 77.4 6.2 63.8 13.2 41.7 24.5 24.5 41.7 13.2 63.8 7.5 75.1 4.8 82.3 2.3 94 .6 102.1.5 114.3.5 350s.1 247.9 1.8 256c2.5 11.7 5.2 18.9 10.9 30.2 11.3 22.1 28.5 39.3 50.6 50.6 11.3 5.7 18.5 8.4 30.2 10.9 8.1 1.7 20.3 1.8 256 1.8s247.9-.1 256-1.8c11.7-2.5 18.9-5.2 30.2-10.9 22.1-11.3 39.3-28.5 50.6-50.6 5.7-11.3 8.4-18.5 10.9-30.2 1.7-8.1 1.8-20.3 1.8-256s-.1-247.9-1.8-256c-2.5-11.7-5.2-18.9-10.9-30.2C670.9 32.6 642.9 11 607 2.4 599.9.7 587.2.6 353.5.4 218.2.3 106.2.5 104.5.7zm315.3 153.6c47.4 9 75.3 30.5 85.6 65.9 5.1 17.8 5.6 43.1 1.1 60.3-2 7.5-7.9 20.3-12.2 26.4-8 11.3-21.9 22.8-36 30-3.5 1.7-6.3 3.5-6.3 3.9 0 .5 2.3 1.4 5.1 2 2.8.7 8.5 2.6 12.7 4.3 37.2 14.8 58.1 50.4 58.2 99 0 28.6-9 53.9-25.7 71.8-18.8 20.3-45.2 32.9-83.3 39.8-8.5 1.5-20.9 1.7-119.2 2l-109.8.4V151.9l110.8.4c95.5.3 111.8.6 119 2z"/>
|
||||
<path d="M262 266.5v56.6l65.3-.4c57.2-.3 65.9-.5 70.7-2 15.8-4.8 28.7-14.9 34.4-27.1 4.4-9.2 5.6-15.3 5.6-28.4-.1-25.1-7.5-39.8-24.3-47.7-14.1-6.7-14.2-6.7-86.4-7.2l-65.3-.5v56.7zm0 171.5v64.1l71.3-.3c69.8-.3 71.4-.4 79-2.6 11.4-3.2 19.2-7.7 27.2-15.7 12.1-12 16.8-24.9 16.8-46 0-20.8-5.1-34.3-17.3-45.9-7.9-7.4-15.8-11.6-28.1-14.7-8.1-2.1-10.5-2.2-78.6-2.6l-70.3-.5V438z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
22
docs/4.3/assets/js/docs.min.js
vendored
Normal file
22
docs/4.3/assets/js/docs.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
112
docs/4.3/assets/js/src/application.js
Normal file
112
docs/4.3/assets/js/src/application.js
Normal file
@ -0,0 +1,112 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 The Bootstrap Authors
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
/* global ClipboardJS: false, anchors: false, bsCustomFileInput: false */
|
||||
|
||||
(function ($) {
|
||||
'use strict'
|
||||
|
||||
$(function () {
|
||||
// Tooltip and popover demos
|
||||
$('.tooltip-demo').tooltip({
|
||||
selector: '[data-toggle="tooltip"]',
|
||||
container: 'body'
|
||||
})
|
||||
|
||||
$('[data-toggle="popover"]').popover()
|
||||
|
||||
$('.toast')
|
||||
.toast({
|
||||
autohide: false
|
||||
})
|
||||
.toast('show')
|
||||
|
||||
// Demos within modals
|
||||
$('.tooltip-test').tooltip()
|
||||
$('.popover-test').popover()
|
||||
|
||||
// Indeterminate checkbox example
|
||||
$('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
|
||||
|
||||
// Disable empty links in docs examples
|
||||
$('.bd-content [href="#"]').click(function (e) {
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
// Modal relatedTarget demo
|
||||
$('#exampleModal').on('show.bs.modal', function (event) {
|
||||
var $button = $(event.relatedTarget) // Button that triggered the modal
|
||||
var recipient = $button.data('whatever') // Extract info from data-* attributes
|
||||
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
|
||||
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
|
||||
var $modal = $(this)
|
||||
$modal.find('.modal-title').text('New message to ' + recipient)
|
||||
$modal.find('.modal-body input').val(recipient)
|
||||
})
|
||||
|
||||
// Activate animated progress bar
|
||||
$('.bd-toggle-animated-progress').on('click', function () {
|
||||
$(this).siblings('.progress').find('.progress-bar-striped').toggleClass('progress-bar-animated')
|
||||
})
|
||||
|
||||
// Insert copy to clipboard button before .highlight
|
||||
$('figure.highlight, div.highlight').each(function () {
|
||||
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
|
||||
$(this).before(btnHtml)
|
||||
$('.btn-clipboard')
|
||||
.tooltip()
|
||||
.on('mouseleave', function () {
|
||||
// Explicitly hide tooltip, since after clicking it remains
|
||||
// focused (as it's a button), so tooltip would otherwise
|
||||
// remain visible until focus is moved away
|
||||
$(this).tooltip('hide')
|
||||
})
|
||||
})
|
||||
|
||||
var clipboard = new ClipboardJS('.btn-clipboard', {
|
||||
target: function (trigger) {
|
||||
return trigger.parentNode.nextElementSibling
|
||||
}
|
||||
})
|
||||
|
||||
clipboard.on('success', function (e) {
|
||||
$(e.trigger)
|
||||
.attr('title', 'Copied!')
|
||||
.tooltip('_fixTitle')
|
||||
.tooltip('show')
|
||||
.attr('title', 'Copy to clipboard')
|
||||
.tooltip('_fixTitle')
|
||||
|
||||
e.clearSelection()
|
||||
})
|
||||
|
||||
clipboard.on('error', function (e) {
|
||||
var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
|
||||
var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
|
||||
|
||||
$(e.trigger)
|
||||
.attr('title', fallbackMsg)
|
||||
.tooltip('_fixTitle')
|
||||
.tooltip('show')
|
||||
.attr('title', 'Copy to clipboard')
|
||||
.tooltip('_fixTitle')
|
||||
})
|
||||
|
||||
anchors.options = {
|
||||
icon: '#'
|
||||
}
|
||||
anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
|
||||
$('.bd-content').children('h2, h3, h4, h5').wrapInner('<span class="bd-content-title"></span>')
|
||||
|
||||
bsCustomFileInput.init()
|
||||
})
|
||||
}(jQuery))
|
||||
47
docs/4.3/assets/js/src/ie-emulation-modes-warning.js
Normal file
47
docs/4.3/assets/js/src/ie-emulation-modes-warning.js
Normal file
@ -0,0 +1,47 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
// Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
function emulatedIEMajorVersion() {
|
||||
var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent)
|
||||
if (groups === null) {
|
||||
return null
|
||||
}
|
||||
var ieVersionNum = parseInt(groups[1], 10)
|
||||
var ieMajorVersion = Math.floor(ieVersionNum)
|
||||
return ieMajorVersion
|
||||
}
|
||||
|
||||
function actualNonEmulatedIEMajorVersion() {
|
||||
// Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
|
||||
// IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx
|
||||
// @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx
|
||||
var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // eslint-disable-line no-new-func
|
||||
if (typeof jscriptVersion === 'undefined') {
|
||||
return 11 // IE11+ not in emulation mode
|
||||
}
|
||||
if (jscriptVersion < 9) {
|
||||
return 8 // IE8 (or lower; haven't tested on IE<8)
|
||||
}
|
||||
return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode
|
||||
}
|
||||
|
||||
var ua = window.navigator.userAgent
|
||||
if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) {
|
||||
return // Opera, which might pretend to be IE
|
||||
}
|
||||
var emulated = emulatedIEMajorVersion()
|
||||
if (emulated === null) {
|
||||
return // Not IE
|
||||
}
|
||||
var nonEmulated = actualNonEmulatedIEMajorVersion()
|
||||
|
||||
if (emulated !== nonEmulated) {
|
||||
// eslint-disable-next-line no-alert
|
||||
window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
|
||||
}
|
||||
}())
|
||||
55
docs/4.3/assets/js/src/search.js
Normal file
55
docs/4.3/assets/js/src/search.js
Normal file
@ -0,0 +1,55 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
if (!window.docsearch) {
|
||||
return
|
||||
}
|
||||
|
||||
var inputElement = document.getElementById('search-input')
|
||||
var siteDocsVersion = inputElement.getAttribute('data-docs-version')
|
||||
|
||||
function getOrigin() {
|
||||
var location = window.location
|
||||
var origin = location.origin
|
||||
|
||||
if (!origin) {
|
||||
var port = location.port ? ':' + location.port : ''
|
||||
|
||||
origin = location.protocol + '//' + location.hostname + port
|
||||
}
|
||||
|
||||
return origin
|
||||
}
|
||||
|
||||
window.docsearch({
|
||||
apiKey: '5990ad008512000bba2cf951ccf0332f',
|
||||
indexName: 'bootstrap',
|
||||
inputSelector: '#search-input',
|
||||
algoliaOptions: {
|
||||
facetFilters: ['version:' + siteDocsVersion]
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
var siteurl = getOrigin()
|
||||
var urlRE = /^https?:\/\/getbootstrap\.com/
|
||||
|
||||
// When in production, return the result as is,
|
||||
// otherwise remove our url from it.
|
||||
hit.url = siteurl.match(urlRE) ? hit.url : hit.url.replace(urlRE, '')
|
||||
|
||||
// Prevent jumping to first header
|
||||
if (hit.anchor === 'content') {
|
||||
hit.url = hit.url.replace(/#content$/, '')
|
||||
hit.anchor = null
|
||||
}
|
||||
|
||||
return hit
|
||||
})
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
})
|
||||
}())
|
||||
6
docs/4.3/assets/js/vendor/anchor.min.js
vendored
Normal file
6
docs/4.3/assets/js/vendor/anchor.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
docs/4.3/assets/js/vendor/bs-custom-file-input.min.js
vendored
Normal file
7
docs/4.3/assets/js/vendor/bs-custom-file-input.min.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* bsCustomFileInput v1.3.1 (https://github.com/Johann-S/bs-custom-file-input)
|
||||
* Copyright 2018 Johann-S <johann.servoire@gmail.com>
|
||||
* Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
|
||||
*/
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.bsCustomFileInput=t()}(this,function(){"use strict";var d={CUSTOMFILE:'.custom-file input[type="file"]',CUSTOMFILELABEL:".custom-file-label",FORM:"form",INPUT:"input"},r=function(e){if(0<e.childNodes.length)for(var t=[].slice.call(e.childNodes),n=0;n<t.length;n++){var r=t[n];if(3!==r.nodeType)return r}return e},u=function(e){var t=e.bsCustomFileInput.defaultText,n=e.parentNode.querySelector(d.CUSTOMFILELABEL);n&&(r(n).innerHTML=t)},n=!!window.File,l=function(e){if(e.hasAttribute("multiple")&&n)return[].slice.call(e.files).map(function(e){return e.name}).join(", ");if(-1===e.value.indexOf("fakepath"))return e.value;var t=e.value.split("\\");return t[t.length-1]};function v(){var e=this.parentNode.querySelector(d.CUSTOMFILELABEL);if(e){var t=r(e),n=l(this);n.length?t.innerHTML=n:u(this)}}function p(){for(var e=[].slice.call(this.querySelectorAll(d.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),t=0,n=e.length;t<n;t++)u(e[t])}var m="bsCustomFileInput",L="reset",h="change";return{init:function(e,t){void 0===e&&(e=d.CUSTOMFILE),void 0===t&&(t=d.FORM);for(var n,r,l,i=[].slice.call(document.querySelectorAll(e)),o=[].slice.call(document.querySelectorAll(t)),u=0,c=i.length;u<c;u++){var f=i[u];Object.defineProperty(f,m,{value:{defaultText:(n=f,r=void 0,void 0,r="",l=n.parentNode.querySelector(d.CUSTOMFILELABEL),l&&(r=l.innerHTML),r)},writable:!0}),f.addEventListener(h,v)}for(var a=0,s=o.length;a<s;a++)o[a].addEventListener(L,p),Object.defineProperty(o[a],m,{value:!0,writable:!0})},destroy:function(){for(var e=[].slice.call(document.querySelectorAll(d.FORM)).filter(function(e){return!!e.bsCustomFileInput}),t=[].slice.call(document.querySelectorAll(d.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),n=0,r=t.length;n<r;n++){var l=t[n];u(l),l[m]=void 0,l.removeEventListener(h,v)}for(var i=0,o=e.length;i<o;i++)e[i].removeEventListener(L,p),e[i][m]=void 0}}});
|
||||
//# sourceMappingURL=bs-custom-file-input.min.js.map
|
||||
7
docs/4.3/assets/js/vendor/clipboard.min.js
vendored
Normal file
7
docs/4.3/assets/js/vendor/clipboard.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
docs/4.3/assets/js/vendor/jquery-slim.min.js
vendored
Normal file
2
docs/4.3/assets/js/vendor/jquery-slim.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1393
docs/4.3/browser-bugs/index.html
Normal file
1393
docs/4.3/browser-bugs/index.html
Normal file
File diff suppressed because it is too large
Load Diff
735
docs/4.3/components/alerts/index.html
Normal file
735
docs/4.3/components/alerts/index.html
Normal file
@ -0,0 +1,735 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Alerts · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/alerts/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Alerts">
|
||||
<meta name="twitter:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/components/alerts/">
|
||||
<meta property="og:title" content="Alerts">
|
||||
<meta property="og:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#link-color">Link color</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#additional-content">Additional content</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#dismissing">Dismissing</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#javascript-behavior">JavaScript behavior</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#triggers">Triggers</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Alerts</h1>
|
||||
<p class="bd-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code class="highlighter-rouge">.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts jQuery plugin</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple primary alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-secondary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple secondary alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple success alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple danger alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple warning alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple info alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-light"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple light alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-dark"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple dark alert—check it out!
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="link-color">Link color</h3>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple primary alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-secondary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple secondary alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple success alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple danger alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple warning alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple info alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-light"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple light alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-dark"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple dark alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="additional-content">Additional content</h3>
|
||||
|
||||
<p>Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<hr />
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"alert-heading"</span><span class="nt">></span>Well done!<span class="nt"></h4></span>
|
||||
<span class="nt"><p></span>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.<span class="nt"></p></span>
|
||||
<span class="nt"><hr></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="dismissing">Dismissing</h3>
|
||||
|
||||
<p>Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:</p>
|
||||
|
||||
<ul>
|
||||
<li>Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.3/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>. The compiled version includes this.</li>
|
||||
<li>Add a dismiss button and the <code class="highlighter-rouge">.alert-dismissible</code> class, which adds extra padding to the right of the alert and positions the <code class="highlighter-rouge">.close</code> button.</li>
|
||||
<li>On the dismiss button, add the <code class="highlighter-rouge">data-dismiss="alert"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code class="highlighter-rouge"><button></code> element with it for proper behavior across all devices.</li>
|
||||
<li>To animate alerts when dismissing them, be sure to add the <code class="highlighter-rouge">.fade</code> and <code class="highlighter-rouge">.show</code> classes.</li>
|
||||
</ul>
|
||||
|
||||
<p>You can see this in action with a live demo:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
<span class="nt"><strong></span>Holy guacamole!<span class="nt"></strong></span> You should check in on some of those fields below.
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||
|
||||
<h3 id="triggers">Triggers</h3>
|
||||
|
||||
<p>Enable dismissal of an alert via JavaScript:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.alert'</span><span class="p">).</span><span class="nx">alert</span><span class="p">()</span></code></pre></figure>
|
||||
|
||||
<p>Or with <code class="highlighter-rouge">data</code> attributes on a button <strong>within the alert</strong>, as demonstrated above:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
|
||||
<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<p>Note that closing an alert will remove it from the DOM.</p>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().alert()</code></td>
|
||||
<td>Makes an alert listen for click events on descendant elements which have the <code class="highlighter-rouge">data-dismiss="alert"</code> attribute. (Not necessary when using the data-api’s auto-initialization.)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().alert('close')</code></td>
|
||||
<td>Closes an alert by removing it from the DOM. If the <code class="highlighter-rouge">.fade</code> and <code class="highlighter-rouge">.show</code> classes are present on the element, the alert will fade out before it is removed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().alert('dispose')</code></td>
|
||||
<td>Destroys an element’s alert.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.alert'</span><span class="p">).</span><span class="nx">alert</span><span class="p">(</span><span class="s1">'close'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<p>Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">close.bs.alert</code></td>
|
||||
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">closed.bs.alert</code></td>
|
||||
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myAlert'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'closed.bs.alert'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
612
docs/4.3/components/badge/index.html
Normal file
612
docs/4.3/components/badge/index.html
Normal file
@ -0,0 +1,612 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Badges · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/badge/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Badges">
|
||||
<meta name="twitter:description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/components/badge/">
|
||||
<meta property="og:title" content="Badges">
|
||||
<meta property="og:description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#contextual-variations">Contextual variations</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#pill-badges">Pill badges</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#links">Links</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Badges</h1>
|
||||
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code class="highlighter-rouge">em</code> units.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
|
||||
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
|
||||
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
|
||||
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
|
||||
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
|
||||
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h1></span>
|
||||
<span class="nt"><h2></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h2></span>
|
||||
<span class="nt"><h3></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h3></span>
|
||||
<span class="nt"><h4></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h4></span>
|
||||
<span class="nt"><h5></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h5></span>
|
||||
<span class="nt"><h6></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h6></span></code></pre></figure>
|
||||
|
||||
<p>Badges can be used as part of links or buttons to provide a counter.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary">
|
||||
Notifications <span class="badge badge-light">4</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>
|
||||
Notifications <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>4<span class="nt"></span></span>
|
||||
<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
|
||||
|
||||
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary">
|
||||
Profile <span class="badge badge-light">9</span>
|
||||
<span class="sr-only">unread messages</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>
|
||||
Profile <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>9<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>unread messages<span class="nt"></span></span>
|
||||
<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h2 id="contextual-variations">Contextual variations</h2>
|
||||
|
||||
<p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-primary"</span><span class="nt">></span>Primary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>Secondary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-success"</span><span class="nt">></span>Success<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-danger"</span><span class="nt">></span>Danger<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-warning"</span><span class="nt">></span>Warning<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-info"</span><span class="nt">></span>Info<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>Light<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">></span>Dark<span class="nt"></span></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="pill-badges">Pill badges</h2>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.badge-pill</code> modifier class to make badges more rounded (with a larger <code class="highlighter-rouge">border-radius</code> and additional horizontal <code class="highlighter-rouge">padding</code>). Useful if you miss the badges from v3.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<span class="badge badge-pill badge-primary">Primary</span>
|
||||
<span class="badge badge-pill badge-secondary">Secondary</span>
|
||||
<span class="badge badge-pill badge-success">Success</span>
|
||||
<span class="badge badge-pill badge-danger">Danger</span>
|
||||
<span class="badge badge-pill badge-warning">Warning</span>
|
||||
<span class="badge badge-pill badge-info">Info</span>
|
||||
<span class="badge badge-pill badge-light">Light</span>
|
||||
<span class="badge badge-pill badge-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-primary"</span><span class="nt">></span>Primary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-secondary"</span><span class="nt">></span>Secondary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-success"</span><span class="nt">></span>Success<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-danger"</span><span class="nt">></span>Danger<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-warning"</span><span class="nt">></span>Warning<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-info"</span><span class="nt">></span>Info<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-light"</span><span class="nt">></span>Light<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-dark"</span><span class="nt">></span>Dark<span class="nt"></span></span></code></pre></figure>
|
||||
|
||||
<h2 id="links">Links</h2>
|
||||
|
||||
<p>Using the contextual <code class="highlighter-rouge">.badge-*</code> classes on an <code class="highlighter-rouge"><a></code> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<a href="#" class="badge badge-primary">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
<a href="#" class="badge badge-danger">Danger</a>
|
||||
<a href="#" class="badge badge-warning">Warning</a>
|
||||
<a href="#" class="badge badge-info">Info</a>
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-primary"</span><span class="nt">></span>Primary<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>Secondary<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-success"</span><span class="nt">></span>Success<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-danger"</span><span class="nt">></span>Danger<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-warning"</span><span class="nt">></span>Warning<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-info"</span><span class="nt">></span>Info<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>Light<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">></span>Dark<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
547
docs/4.3/components/breadcrumb/index.html
Normal file
547
docs/4.3/components/breadcrumb/index.html
Normal file
@ -0,0 +1,547 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Breadcrumb · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/breadcrumb/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Breadcrumb">
|
||||
<meta name="twitter:description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/components/breadcrumb/">
|
||||
<meta property="og:title" content="Breadcrumb">
|
||||
<meta property="og:description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Breadcrumb</h1>
|
||||
<p class="bd-lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>Home<span class="nt"></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"></nav></span>
|
||||
|
||||
<span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>Library<span class="nt"></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"></nav></span>
|
||||
|
||||
<span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Library<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>Data<span class="nt"></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<h2 id="changing-the-separator">Changing the separator</h2>
|
||||
|
||||
<p>Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code class="highlighter-rouge">::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code class="highlighter-rouge">content</code></a>. They can be changed by changing <code class="highlighter-rouge">$breadcrumb-divider</code>. The <a href="https://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method">quote</a> function is needed to generate the quotes around a string, so if you want <code class="highlighter-rouge">></code> as separator, you can use this:</p>
|
||||
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$breadcrumb-divider</span><span class="p">:</span> <span class="nf">quote</span><span class="p">(</span><span class="s2">">"</span><span class="p">);</span>
|
||||
</code></pre></div></div>
|
||||
|
||||
<p>It’s also possible to use a <strong>base64 embedded SVG icon</strong>:</p>
|
||||
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$breadcrumb-divider</span><span class="p">:</span> <span class="sx">url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+)</span><span class="p">;</span>
|
||||
</code></pre></div></div>
|
||||
|
||||
<p>The separator can be removed by setting <code class="highlighter-rouge">$breadcrumb-divider</code> to <code class="highlighter-rouge">none</code>:</p>
|
||||
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$breadcrumb-divider</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
|
||||
</code></pre></div></div>
|
||||
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
|
||||
<p>Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as <code class="highlighter-rouge">aria-label="breadcrumb"</code> to describe the type of navigation provided in the <code class="highlighter-rouge"><nav></code> element, as well as applying an <code class="highlighter-rouge">aria-current="page"</code> to the last item of the set to indicate that it represents the current page.</p>
|
||||
|
||||
<p>For more information, see the <a href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb">WAI-ARIA Authoring Practices for the breadcrumb pattern</a>.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
744
docs/4.3/components/button-group/index.html
Normal file
744
docs/4.3/components/button-group/index.html
Normal file
@ -0,0 +1,744 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Button group · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/button-group/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Button group">
|
||||
<meta name="twitter:description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/components/button-group/">
|
||||
<meta property="og:title" content="Button group">
|
||||
<meta property="og:description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#button-toolbar">Button toolbar</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#sizing">Sizing</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#nesting">Nesting</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#vertical-variation">Vertical variation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Button group</h1>
|
||||
<p class="bd-lead">Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="basic-example">Basic example</h2>
|
||||
|
||||
<p>Wrap a series of buttons with <code class="highlighter-rouge">.btn</code> in <code class="highlighter-rouge">.btn-group</code>. Add on optional JavaScript radio and checkbox style behavior with <a href="/docs/4.3/components/buttons/#button-plugin">our buttons plugin</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Basic example"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Left<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Middle<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Right<span class="nt"></button></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="ensure-correct-role-and-provide-a-label">Ensure correct <code class="highlighter-rouge">role</code> and provide a label</h5>
|
||||
|
||||
<p>In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate <code class="highlighter-rouge">role</code> attribute needs to be provided. For button groups, this would be <code class="highlighter-rouge">role="group"</code>, while toolbars should have a <code class="highlighter-rouge">role="toolbar"</code>.</p>
|
||||
|
||||
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use <code class="highlighter-rouge">aria-label</code>, but alternatives such as <code class="highlighter-rouge">aria-labelledby</code> can also be used.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="button-toolbar">Button toolbar</h2>
|
||||
|
||||
<p>Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="btn-group mr-2" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-secondary">5</button>
|
||||
<button type="button" class="btn btn-secondary">6</button>
|
||||
<button type="button" class="btn btn-secondary">7</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-secondary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-toolbar"</span> <span class="na">role=</span><span class="s">"toolbar"</span> <span class="na">aria-label=</span><span class="s">"Toolbar with button groups"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group mr-2"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"First group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>1<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>2<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>3<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>4<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group mr-2"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Second group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>5<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>6<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>7<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Third group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>8<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-toolbar mb-3"</span> <span class="na">role=</span><span class="s">"toolbar"</span> <span class="na">aria-label=</span><span class="s">"Toolbar with button groups"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group mr-2"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"First group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>1<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>2<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>3<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>4<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"btnGroupAddon"</span><span class="nt">></span>@<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Input group example"</span> <span class="na">aria-label=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby=</span><span class="s">"btnGroupAddon"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-toolbar justify-content-between"</span> <span class="na">role=</span><span class="s">"toolbar"</span> <span class="na">aria-label=</span><span class="s">"Toolbar with button groups"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"First group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>1<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>2<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>3<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>4<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"btnGroupAddon2"</span><span class="nt">></span>@<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Input group example"</span> <span class="na">aria-label=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby=</span><span class="s">"btnGroupAddon2"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
|
||||
<p>Instead of applying button sizing classes to every button in a group, just add <code class="highlighter-rouge">.btn-group-*</code> to each <code class="highlighter-rouge">.btn-group</code>, including each one when nesting multiple groups.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<br />
|
||||
<div class="btn-group" role="group" aria-label="Default button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<br />
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-lg"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-sm"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="nesting">Nesting</h2>
|
||||
|
||||
<p>Place a <code class="highlighter-rouge">.btn-group</code> within another <code class="highlighter-rouge">.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Button group with nested dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>1<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>2<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">id=</span><span class="s">"btnGroupDrop1"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"btnGroupDrop1"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="vertical-variation">Vertical variation</h2>
|
||||
|
||||
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong>Split button dropdowns are not supported here.</strong></p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group-vertical"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
728
docs/4.3/components/buttons/index.html
Normal file
728
docs/4.3/components/buttons/index.html
Normal file
@ -0,0 +1,728 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Buttons · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/buttons/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Buttons">
|
||||
<meta name="twitter:description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/components/buttons/">
|
||||
<meta property="og:title" content="Buttons">
|
||||
<meta property="og:description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#button-tags">Button tags</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#outline-buttons">Outline buttons</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#sizes">Sizes</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#active-state">Active state</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#disabled-state">Disabled state</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#button-plugin">Button plugin</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#toggle-states">Toggle states</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#checkbox-and-radio-buttons">Checkbox and radio buttons</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Buttons</h1>
|
||||
<p class="bd-lead">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Secondary<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-light"</span><span class="nt">></span>Light<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">></span>Dark<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">></span>Link<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="button-tags">Button tags</h2>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.btn</code> classes are designed to be used with the <code class="highlighter-rouge"><button></code> element. However, you can also use these classes on <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><input></code> elements (though some browsers may apply a slightly different rendering).</p>
|
||||
|
||||
<p>When using button classes on <code class="highlighter-rouge"><a></code> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a <code class="highlighter-rouge">role="button"</code> to appropriately convey their purpose to assistive technologies such as screen readers.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<a class="btn btn-primary" href="#" role="button">Link</a>
|
||||
<button class="btn btn-primary" type="submit">Button</button>
|
||||
<input class="btn btn-primary" type="button" value="Input" />
|
||||
<input class="btn btn-primary" type="submit" value="Submit" />
|
||||
<input class="btn btn-primary" type="reset" value="Reset" />
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"Input"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"Submit"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"reset"</span> <span class="na">value=</span><span class="s">"Reset"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<h2 id="outline-buttons">Outline buttons</h2>
|
||||
|
||||
<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code class="highlighter-rouge">.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
<button type="button" class="btn btn-outline-info">Info</button>
|
||||
<button type="button" class="btn btn-outline-light">Light</button>
|
||||
<button type="button" class="btn btn-outline-dark">Dark</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">></span>Secondary<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">></span>Success<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">></span>Info<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-light"</span><span class="nt">></span>Light<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-dark"</span><span class="nt">></span>Dark<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h2 id="sizes">Sizes</h2>
|
||||
|
||||
<p>Fancy larger or smaller buttons? Add <code class="highlighter-rouge">.btn-lg</code> or <code class="highlighter-rouge">.btn-sm</code> for additional sizes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<p>Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">.btn-block</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h2 id="active-state">Active state</h2>
|
||||
|
||||
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. <strong>There’s no need to add a class to <code class="highlighter-rouge"><button></code>s as they use a pseudo-class</strong>. However, you can still force the same active appearance with <code class="highlighter-rouge">.active</code> (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg active"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"true"</span><span class="nt">></span>Primary link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg active"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"true"</span><span class="nt">></span>Link<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
<h2 id="disabled-state">Disabled state</h2>
|
||||
|
||||
<p>Make buttons look inactive by adding the <code class="highlighter-rouge">disabled</code> boolean attribute to any <code class="highlighter-rouge"><button></code> element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-lg btn-primary" disabled="">Primary button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg" disabled="">Button</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-primary"</span> <span class="na">disabled</span><span class="nt">></span>Primary button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">disabled</span><span class="nt">></span>Button<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<p>Disabled buttons using the <code class="highlighter-rouge"><a></code> element behave a bit different:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge"><a></code>s don’t support the <code class="highlighter-rouge">disabled</code> attribute, so you must add the <code class="highlighter-rouge">.disabled</code> class to make it visually appear disabled.</li>
|
||||
<li>Some future-friendly styles are included to disable all <code class="highlighter-rouge">pointer-events</code> on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.</li>
|
||||
<li>Disabled buttons should include the <code class="highlighter-rouge">aria-disabled="true"</code> attribute to indicate the state of the element to assistive technologies.</li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-example">
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg disabled"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Primary link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg disabled"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Link<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="link-functionality-caveat">Link functionality caveat</h5>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.disabled</code> class uses <code class="highlighter-rouge">pointer-events: none</code> to try to disable the link functionality of <code class="highlighter-rouge"><a></code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code class="highlighter-rouge">pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a <code class="highlighter-rouge">tabindex="-1"</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="button-plugin">Button plugin</h2>
|
||||
|
||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||
|
||||
<h3 id="toggle-states">Toggle states</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">data-toggle="button"</code> to toggle a button’s <code class="highlighter-rouge">active</code> state. If you’re pre-toggling a button, you must manually add the <code class="highlighter-rouge">.active</code> class <strong>and</strong> <code class="highlighter-rouge">aria-pressed="true"</code> to the <code class="highlighter-rouge"><button></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
Single toggle
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"false"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span>
|
||||
Single toggle
|
||||
<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h3 id="checkbox-and-radio-buttons">Checkbox and radio buttons</h3>
|
||||
|
||||
<p>Bootstrap’s <code class="highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="highlighter-rouge"><label></code>s, to provide checkbox or radio style button toggling. Add <code class="highlighter-rouge">data-toggle="buttons"</code> to a <code class="highlighter-rouge">.btn-group</code> containing those modified buttons to enable their toggling behavior via JavaScript and add <code class="highlighter-rouge">.btn-group-toggle</code> to style the <code class="highlighter-rouge"><input></code>s within your buttons. <strong>Note that you can create single input-powered buttons or groups of them.</strong></p>
|
||||
|
||||
<p>The checked state for these buttons is <strong>only updated via <code class="highlighter-rouge">click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code class="highlighter-rouge"><input type="reset"></code> or by manually applying the input’s <code class="highlighter-rouge">checked</code> property—you’ll need to toggle <code class="highlighter-rouge">.active</code> on the <code class="highlighter-rouge"><label></code> manually.</p>
|
||||
|
||||
<p>Note that pre-checked buttons require you to manually add the <code class="highlighter-rouge">.active</code> class to the input’s <code class="highlighter-rouge"><label></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-secondary active">
|
||||
<input type="checkbox" checked="" autocomplete="off" /> Checked
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> Checked
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-secondary active">
|
||||
<input type="radio" name="options" id="option1" autocomplete="off" checked="" /> Active
|
||||
</label>
|
||||
<label class="btn btn-secondary">
|
||||
<input type="radio" name="options" id="option2" autocomplete="off" /> Radio
|
||||
</label>
|
||||
<label class="btn btn-secondary">
|
||||
<input type="radio" name="options" id="option3" autocomplete="off" /> Radio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">checked</span><span class="nt">></span> Active
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option2"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> Radio
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option3"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> Radio
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().button('toggle')</code></td>
|
||||
<td>Toggles push state. Gives the button the appearance that it has been activated.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().button('dispose')</code></td>
|
||||
<td>Destroys an element’s button.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1846
docs/4.3/components/card/index.html
Normal file
1846
docs/4.3/components/card/index.html
Normal file
File diff suppressed because it is too large
Load Diff
1011
docs/4.3/components/carousel/index.html
Normal file
1011
docs/4.3/components/carousel/index.html
Normal file
File diff suppressed because it is too large
Load Diff
833
docs/4.3/components/collapse/index.html
Normal file
833
docs/4.3/components/collapse/index.html
Normal file
@ -0,0 +1,833 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Collapse · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/collapse/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Collapse">
|
||||
<meta name="twitter:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/components/collapse/">
|
||||
<meta property="og:title" content="Collapse">
|
||||
<meta property="og:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#multiple-targets">Multiple targets</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#accordion-example">Accordion example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#via-data-attributes">Via data attributes</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#options">Options</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h4"><a href="#collapseoptions">.collapse(options)</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#collapsetoggle">.collapse('toggle')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#collapseshow">.collapse('show')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#collapsehide">.collapse('hide')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#collapsedispose">.collapse('dispose')</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Collapse</h1>
|
||||
<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
|
||||
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code class="highlighter-rouge">height</code> from its current value to <code class="highlighter-rouge">0</code>. Given how CSS handles animations, you cannot use <code class="highlighter-rouge">padding</code> on a <code class="highlighter-rouge">.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.3/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Click the buttons below to show and hide another element via class changes:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.collapse</code> hides content</li>
|
||||
<li><code class="highlighter-rouge">.collapsing</code> is applied during transitions</li>
|
||||
<li><code class="highlighter-rouge">.collapse.show</code> shows content</li>
|
||||
</ul>
|
||||
|
||||
<p>You can use a link with the <code class="highlighter-rouge">href</code> attribute, or a button with the <code class="highlighter-rouge">data-target</code> attribute. In both cases, the <code class="highlighter-rouge">data-toggle="collapse"</code> is required.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p>
|
||||
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
||||
Link with href
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
||||
Button with data-target
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">id=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="multiple-targets">Multiple targets</h2>
|
||||
|
||||
<p>A <code class="highlighter-rouge"><button></code> or <code class="highlighter-rouge"><a></code> can show and hide multiple elements by referencing them with a JQuery selector in its <code class="highlighter-rouge">href</code> or <code class="highlighter-rouge">data-target</code> attribute.
|
||||
Multiple <code class="highlighter-rouge"><button></code> or <code class="highlighter-rouge"><a></code> can show and hide an element if they each reference it with their <code class="highlighter-rouge">href</code> or <code class="highlighter-rouge">data-target</code> attribute</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p>
|
||||
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">></span>Toggle first element<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#multiCollapseExample2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample2"</span><span class="nt">></span>Toggle second element<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">".multi-collapse"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1 multiCollapseExample2"</span><span class="nt">></span>Toggle both elements<span class="nt"></button></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse multi-collapse"</span> <span class="na">id=</span><span class="s">"multiCollapseExample1"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse multi-collapse"</span> <span class="na">id=</span><span class="s">"multiCollapseExample2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="accordion-example">Accordion example</h2>
|
||||
|
||||
<p>Using the <a href="/docs/4.3/components/card/">card</a> component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use <code class="highlighter-rouge">.accordion</code> as a wrapper.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingOne">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingTwo">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingThree">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"accordion"</span> <span class="na">id=</span><span class="s">"accordionExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">></span>
|
||||
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-link"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">></span>
|
||||
Collapsible Group Item #1
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></h2></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseOne"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">aria-labelledby=</span><span class="s">"headingOne"</span> <span class="na">data-parent=</span><span class="s">"#accordionExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">></span>
|
||||
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-link collapsed"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">></span>
|
||||
Collapsible Group Item #2
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></h2></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseTwo"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">aria-labelledby=</span><span class="s">"headingTwo"</span> <span class="na">data-parent=</span><span class="s">"#accordionExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">></span>
|
||||
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-link collapsed"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">></span>
|
||||
Collapsible Group Item #3
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></h2></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseThree"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">aria-labelledby=</span><span class="s">"headingThree"</span> <span class="na">data-parent=</span><span class="s">"#accordionExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
|
||||
<p>Be sure to add <code class="highlighter-rouge">aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code class="highlighter-rouge">aria-expanded="false"</code>. If you’ve set the collapsible element to be open by default using the <code class="highlighter-rouge">show</code> class, set <code class="highlighter-rouge">aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element). If the control element’s HTML element is not a button (e.g., an <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><div></code>), the attribute <code class="highlighter-rouge">role="button"</code> should be added to the element.</p>
|
||||
|
||||
<p>If your control element is targeting a single collapsible element – i.e. the <code class="highlighter-rouge">data-target</code> attribute is pointing to an <code class="highlighter-rouge">id</code> selector – you should add the <code class="highlighter-rouge">aria-controls</code> attribute to the control element, containing the <code class="highlighter-rouge">id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
|
||||
|
||||
<p>Note that Bootstrap’s current implementation does not cover the various keyboard interactions described in the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion">WAI-ARIA Authoring Practices 1.1 accordion pattern</a> - you will need to include these yourself with custom JavaScript.</p>
|
||||
|
||||
<h2 id="usage">Usage</h2>
|
||||
|
||||
<p>The collapse plugin utilizes a few classes to handle the heavy lifting:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.collapse</code> hides the content</li>
|
||||
<li><code class="highlighter-rouge">.collapse.show</code> shows the content</li>
|
||||
<li><code class="highlighter-rouge">.collapsing</code> is added when the transition starts, and removed when it finishes</li>
|
||||
</ul>
|
||||
|
||||
<p>These classes can be found in <code class="highlighter-rouge">_transitions.scss</code>.</p>
|
||||
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
|
||||
<p>Just add <code class="highlighter-rouge">data-toggle="collapse"</code> and a <code class="highlighter-rouge">data-target</code> to the element to automatically assign control of one or more collapsible elements. The <code class="highlighter-rouge">data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code class="highlighter-rouge">collapse</code> to the collapsible element. If you’d like it to default open, add the additional class <code class="highlighter-rouge">show</code>.</p>
|
||||
|
||||
<p>To add accordion-like group management to a collapsible area, add the data attribute <code class="highlighter-rouge">data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
|
||||
|
||||
<h3 id="via-javascript">Via JavaScript</h3>
|
||||
|
||||
<p>Enable manually with:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.collapse'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">()</span></code></pre></figure>
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-parent=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">Type</th>
|
||||
<th style="width: 50px;">Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>parent</td>
|
||||
<td>selector | jQuery object | DOM element </td>
|
||||
<td>false</td>
|
||||
<td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Toggles the collapsible element on invocation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
|
||||
|
||||
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||
|
||||
<p><a href="/docs/4.3/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
|
||||
</div>
|
||||
|
||||
<h4 id="collapseoptions"><code class="highlighter-rouge">.collapse(options)</code></h4>
|
||||
|
||||
<p>Activates your content as a collapsible element. Accepts an optional options <code class="highlighter-rouge">object</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapsible'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">({</span>
|
||||
<span class="na">toggle</span><span class="p">:</span> <span class="kc">false</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h4 id="collapsetoggle"><code class="highlighter-rouge">.collapse('toggle')</code></h4>
|
||||
|
||||
<p>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.collapse</code> or <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
|
||||
|
||||
<h4 id="collapseshow"><code class="highlighter-rouge">.collapse('show')</code></h4>
|
||||
|
||||
<p>Shows a collapsible element. <strong>Returns to the caller before the collapsible element has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.collapse</code> event occurs).</p>
|
||||
|
||||
<h4 id="collapsehide"><code class="highlighter-rouge">.collapse('hide')</code></h4>
|
||||
|
||||
<p>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
|
||||
|
||||
<h4 id="collapsedispose"><code class="highlighter-rouge">.collapse('dispose')</code></h4>
|
||||
|
||||
<p>Destroys an element’s collapse.</p>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<p>Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.bs.collapse</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.bs.collapse</td>
|
||||
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.bs.collapse</td>
|
||||
<td>This event is fired immediately when the <code>hide</code> method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.bs.collapse</td>
|
||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapsible'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.collapse'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1605
docs/4.3/components/dropdowns/index.html
Normal file
1605
docs/4.3/components/dropdowns/index.html
Normal file
File diff suppressed because it is too large
Load Diff
2709
docs/4.3/components/forms/index.html
Normal file
2709
docs/4.3/components/forms/index.html
Normal file
File diff suppressed because it is too large
Load Diff
11
docs/4.3/components/index.html
Normal file
11
docs/4.3/components/index.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/alerts/">
|
||||
<script>location="https://getbootstrap.com/docs/4.3/components/alerts/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.3/components/alerts/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.3/components/alerts/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
1135
docs/4.3/components/input-group/index.html
Normal file
1135
docs/4.3/components/input-group/index.html
Normal file
File diff suppressed because it is too large
Load Diff
516
docs/4.3/components/jumbotron/index.html
Normal file
516
docs/4.3/components/jumbotron/index.html
Normal file
@ -0,0 +1,516 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Lightweight, flexible component for showcasing hero unit style content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Jumbotron · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/jumbotron/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Jumbotron">
|
||||
<meta name="twitter:description" content="Lightweight, flexible component for showcasing hero unit style content.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/components/jumbotron/">
|
||||
<meta property="og:title" content="Jumbotron">
|
||||
<meta property="og:description" content="Lightweight, flexible component for showcasing hero unit style content.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Jumbotron</h1>
|
||||
<p class="bd-lead">Lightweight, flexible component for showcasing hero unit style content.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="jumbotron">
|
||||
<h1 class="display-4">Hello, world!</h1>
|
||||
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
||||
<hr class="my-4" />
|
||||
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"jumbotron"</span><span class="nt">></span>
|
||||
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">></span>Hello, world!<span class="nt"></h1></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">></span>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<span class="nt"></p></span>
|
||||
<span class="nt"><hr</span> <span class="na">class=</span><span class="s">"my-4"</span><span class="nt">></span>
|
||||
<span class="nt"><p></span>It uses utility classes for typography and spacing to space content out within the larger container.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Learn more<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>To make the jumbotron full width, and without rounded corners, add the <code class="highlighter-rouge">.jumbotron-fluid</code> modifier class and add a <code class="highlighter-rouge">.container</code> or <code class="highlighter-rouge">.container-fluid</code> within.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="jumbotron jumbotron-fluid">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Fluid jumbotron</h1>
|
||||
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"jumbotron jumbotron-fluid"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">></span>Fluid jumbotron<span class="nt"></h1></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">></span>This is a modified jumbotron that occupies the entire horizontal space of its parent.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1057
docs/4.3/components/list-group/index.html
Normal file
1057
docs/4.3/components/list-group/index.html
Normal file
File diff suppressed because it is too large
Load Diff
697
docs/4.3/components/media-object/index.html
Normal file
697
docs/4.3/components/media-object/index.html
Normal file
@ -0,0 +1,697 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Media object · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/media-object/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Media object">
|
||||
<meta name="twitter:description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/components/media-object/">
|
||||
<meta property="og:title" content="Media object">
|
||||
<meta property="og:description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#nesting">Nesting</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#alignment">Alignment</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#order">Order</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#media-list">Media list</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Media object</h1>
|
||||
<p class="bd-lead">Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">media object</a> helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.</p>
|
||||
|
||||
<p>Below is an example of a single media object. Only two classes are required—the wrapping <code class="highlighter-rouge">.media</code> and the <code class="highlighter-rouge">.media-body</code> around your content. Optional padding and margin can be controlled through <a href="/docs/4.3/utilities/spacing/">spacing utilities</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="flexbug-12-inline-elements-arent-treated-as-flex-items">Flexbug #12: Inline elements aren’t treated as flex items</h5>
|
||||
|
||||
<p>Internet Explorer 10-11 do not render inline elements like links or images (or <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code> pseudo-elements) as flex items. The only workaround is to set a non-inline <code class="highlighter-rouge">display</code> value (e.g., <code class="highlighter-rouge">block</code>, <code class="highlighter-rouge">inline-block</code>, or <code class="highlighter-rouge">flex</code>). We suggest using <code class="highlighter-rouge">.d-flex</code>, one of our <a href="/docs/4.3/utilities/display/">display utilities</a>, as an easy fix.</p>
|
||||
|
||||
<p><strong>Source:</strong> <a href="https://github.com/philipwalton/flexbugs#flexbug-12">Flexbugs on GitHub</a></p>
|
||||
</div>
|
||||
|
||||
<h2 id="nesting">Nesting</h2>
|
||||
|
||||
<p>Media objects can be infinitely nested, though we suggest you stop at some point. Place nested <code class="highlighter-rouge">.media</code> within the <code class="highlighter-rouge">.media-body</code> of a parent media object.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<div class="media mt-3">
|
||||
<a class="mr-3" href="#">
|
||||
<svg class="bd-placeholder-img" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media mt-3"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="alignment">Alignment</h2>
|
||||
|
||||
<p>Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your <code class="highlighter-rouge">.media-body</code> content.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<svg class="bd-placeholder-img align-self-start mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Top-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"align-self-start mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Top-aligned media<span class="nt"></h5></span>
|
||||
<span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span>
|
||||
<span class="nt"><p></span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<svg class="bd-placeholder-img align-self-center mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Center-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"align-self-center mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Center-aligned media<span class="nt"></h5></span>
|
||||
<span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<svg class="bd-placeholder-img align-self-end mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Bottom-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"align-self-end mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Bottom-aligned media<span class="nt"></h5></span>
|
||||
<span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="order">Order</h2>
|
||||
|
||||
<p>Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the <code class="highlighter-rouge">order</code> property (to an integer of your choosing).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
<svg class="bd-placeholder-img ml-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>Media object<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"ml-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="media-list">Media list</h2>
|
||||
|
||||
<p>Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <code class="highlighter-rouge"><ul></code> or <code class="highlighter-rouge"><ol></code>, add the <code class="highlighter-rouge">.list-unstyled</code> to remove any browser default list styles, and then apply <code class="highlighter-rouge">.media</code> to your <code class="highlighter-rouge"><li></code>s. As always, use spacing utilities wherever needed to fine tune.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-unstyled">
|
||||
<li class="media">
|
||||
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="media my-4">
|
||||
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>List-based media object<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"media my-4"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>List-based media object<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>List-based media object<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1373
docs/4.3/components/modal/index.html
Normal file
1373
docs/4.3/components/modal/index.html
Normal file
File diff suppressed because it is too large
Load Diff
1342
docs/4.3/components/navbar/index.html
Normal file
1342
docs/4.3/components/navbar/index.html
Normal file
File diff suppressed because it is too large
Load Diff
1332
docs/4.3/components/navs/index.html
Normal file
1332
docs/4.3/components/navs/index.html
Normal file
File diff suppressed because it is too large
Load Diff
758
docs/4.3/components/pagination/index.html
Normal file
758
docs/4.3/components/pagination/index.html
Normal file
@ -0,0 +1,758 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Pagination · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/pagination/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Pagination">
|
||||
<meta name="twitter:description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/components/pagination/">
|
||||
<meta property="og:title" content="Pagination">
|
||||
<meta property="og:description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#working-with-icons">Working with icons</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#disabled-and-active-states">Disabled and active states</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#sizing">Sizing</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#alignment">Alignment</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Pagination</h1>
|
||||
<p class="bd-lead">Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
|
||||
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code class="highlighter-rouge"><nav></code> element to identify it as a navigation section to screen readers and other assistive technologies.</p>
|
||||
|
||||
<p>In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive <code class="highlighter-rouge">aria-label</code> for the <code class="highlighter-rouge"><nav></code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code class="highlighter-rouge">aria-label="Search results pages"</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"Page navigation example"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Previous<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>1<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>2<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>3<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Next<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<h2 id="working-with-icons">Working with icons</h2>
|
||||
|
||||
<p>Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with <code class="highlighter-rouge">aria</code> attributes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"Page navigation example"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">aria-label=</span><span class="s">"Previous"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>1<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>2<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>3<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">aria-label=</span><span class="s">"Next"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&raquo;</span><span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<h2 id="disabled-and-active-states">Disabled and active states</h2>
|
||||
|
||||
<p>Pagination links are customizable for different circumstances. Use <code class="highlighter-rouge">.disabled</code> for links that appear un-clickable and <code class="highlighter-rouge">.active</code> to indicate the current page.</p>
|
||||
|
||||
<p>While the <code class="highlighter-rouge">.disabled</code> class uses <code class="highlighter-rouge">pointer-events: none</code> to <em>try</em> to disable the link functionality of <code class="highlighter-rouge"><a></code>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add <code class="highlighter-rouge">tabindex="-1"</code> on disabled links and use custom JavaScript to fully disable their functionality.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item active" aria-current="page">
|
||||
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Previous<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>1<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>2 <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>3<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Next<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<p>You can optionally swap out active or disabled anchors for <code class="highlighter-rouge"><span></code>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<span class="page-link">Previous</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">
|
||||
2
|
||||
<span class="sr-only">(current)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"page-link"</span><span class="nt">></span>Previous<span class="nt"></span></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>1<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"page-link"</span><span class="nt">></span>
|
||||
2
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>3<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Next<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
|
||||
<p>Fancy larger or smaller pagination? Add <code class="highlighter-rouge">.pagination-lg</code> or <code class="highlighter-rouge">.pagination-sm</code> for additional sizes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-lg">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">
|
||||
1
|
||||
<span class="sr-only">(current)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination pagination-lg"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"page-link"</span><span class="nt">></span>
|
||||
1
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>2<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>3<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-sm">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">
|
||||
1
|
||||
<span class="sr-only">(current)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination pagination-sm"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"page-link"</span><span class="nt">></span>
|
||||
1
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>2<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>3<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<h2 id="alignment">Alignment</h2>
|
||||
|
||||
<p>Change the alignment of pagination components with <a href="/docs/4.3/utilities/flex/">flexbox utilities</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"Page navigation example"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination justify-content-center"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Previous<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>1<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>2<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>3<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Next<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-end">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"Page navigation example"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination justify-content-end"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Previous<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>1<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>2<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>3<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Next<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
863
docs/4.3/components/popovers/index.html
Normal file
863
docs/4.3/components/popovers/index.html
Normal file
@ -0,0 +1,863 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.3">
|
||||
|
||||
<title>Popovers · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/popovers/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Popovers">
|
||||
<meta name="twitter:description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/components/popovers/">
|
||||
<meta property="og:title" content="Popovers">
|
||||
<meta property="og:description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.3
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.3/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.3/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.3/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example-enable-popovers-everywhere">Example: Enable popovers everywhere</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example-using-the-container-option">Example: Using the container option</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#four-directions">Four directions</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#dismiss-on-next-click">Dismiss on next click</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#disabled-elements">Disabled elements</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#options">Options</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h4"><a href="#popoveroptions">$().popover(options)</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#popovershow">.popover('show')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#popoverhide">.popover('hide')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#popovertoggle">.popover('toggle')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#popoverdispose">.popover('dispose')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#popoverenable">.popover('enable')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#popoverdisable">.popover('disable')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#popovertoggleenabled">.popover('toggleEnabled')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#popoverupdate">.popover('update')</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Popovers</h1>
|
||||
<p class="bd-lead">Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
|
||||
<p>Things to know when using the popover plugin:</p>
|
||||
|
||||
<ul>
|
||||
<li>Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</li>
|
||||
<li>Popovers require the <a href="/docs/4.3/components/tooltips/">tooltip plugin</a> as a dependency.</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.3/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
|
||||
<li>Popovers are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
|
||||
<li>Zero-length <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">content</code> values will never show a popover.</li>
|
||||
<li>Specify <code class="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
|
||||
<li>Triggering popovers on hidden elements will not work.</li>
|
||||
<li>Popovers for <code class="highlighter-rouge">.disabled</code> or <code class="highlighter-rouge">disabled</code> elements must be triggered on a wrapper element.</li>
|
||||
<li>When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width. Use <code class="highlighter-rouge">.text-nowrap</code> on your <code class="highlighter-rouge"><a></code>s to avoid this behavior.</li>
|
||||
<li>Popovers must be hidden before their corresponding elements have been removed from the DOM.</li>
|
||||
<li>Popovers can be triggered thanks to an element inside a shadow DOM.</li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.3/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<p>Keep reading to see how popovers work with some examples.</p>
|
||||
|
||||
<h2 id="example-enable-popovers-everywhere">Example: Enable popovers everywhere</h2>
|
||||
|
||||
<p>One way to initialize all popovers on a page would be to select them by their <code class="highlighter-rouge">data-toggle</code> attribute:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'[data-toggle="popover"]'</span><span class="p">).</span><span class="nx">popover</span><span class="p">()</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h2 id="example-using-the-container-option">Example: Using the <code class="highlighter-rouge">container</code> option</h2>
|
||||
|
||||
<p>When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom <code class="highlighter-rouge">container</code> so that the popover’s HTML appears within that element instead.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.example-popover'</span><span class="p">).</span><span class="nx">popover</span><span class="p">({</span>
|
||||
<span class="na">container</span><span class="p">:</span> <span class="s1">'body'</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-danger"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">title=</span><span class="s">"Popover title"</span> <span class="na">data-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">></span>Click to toggle popover<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h3 id="four-directions">Four directions</h3>
|
||||
|
||||
<p>Four options are available: top, right, bottom, and left aligned.</p>
|
||||
|
||||
<div class="bd-example popover-demo">
|
||||
<div class="bd-example-popovers">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-container=</span><span class="s">"body"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">data-content=</span><span class="s">"Vivamus sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></span>
|
||||
Popover on top
|
||||
<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-container=</span><span class="s">"body"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-placement=</span><span class="s">"right"</span> <span class="na">data-content=</span><span class="s">"Vivamus sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></span>
|
||||
Popover on right
|
||||
<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-container=</span><span class="s">"body"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">data-content=</span><span class="s">"Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></span>
|
||||
Popover on bottom
|
||||
<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-container=</span><span class="s">"body"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-placement=</span><span class="s">"left"</span> <span class="na">data-content=</span><span class="s">"Vivamus sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></span>
|
||||
Popover on left
|
||||
<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h3 id="dismiss-on-next-click">Dismiss on next click</h3>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">focus</code> trigger to dismiss popovers on the user’s next click of a different element than the toggle element.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="specific-markup-required-for-dismiss-on-next-click">Specific markup required for dismiss-on-next-click</h4>
|
||||
|
||||
<p>For proper cross-browser and cross-platform behavior, you must use the <code class="highlighter-rouge"><a></code> tag, <em>not</em> the <code class="highlighter-rouge"><button></code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"><code class="highlighter-rouge">tabindex</code></a> attribute.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">tabindex=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-danger"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-trigger=</span><span class="s">"focus"</span> <span class="na">title=</span><span class="s">"Dismissible popover"</span> <span class="na">data-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">></span>Dismissible popover<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.popover-dismiss'</span><span class="p">).</span><span class="nx">popover</span><span class="p">({</span>
|
||||
<span class="na">trigger</span><span class="p">:</span> <span class="s1">'focus'</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h3 id="disabled-elements">Disabled elements</h3>
|
||||
|
||||
<p>Elements with the <code class="highlighter-rouge">disabled</code> attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <code class="highlighter-rouge"><div></code> or <code class="highlighter-rouge"><span></code> and override the <code class="highlighter-rouge">pointer-events</code> on the disabled element.</p>
|
||||
|
||||
<p>For disabled popover triggers, you may also prefer <code class="highlighter-rouge">data-trigger="hover"</code> so that the popover appears as immediate visual feedback to your users as they may not expect to <em>click</em> on a disabled element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
|
||||
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled="">Disabled button</button>
|
||||
</span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"d-inline-block"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-content=</span><span class="s">"Disabled popover"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">style=</span><span class="s">"pointer-events: none;"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">disabled</span><span class="nt">></span>Disabled button<span class="nt"></button></span>
|
||||
<span class="nt"></span></span></code></pre></figure>
|
||||
|
||||
<h2 id="usage">Usage</h2>
|
||||
|
||||
<p>Enable popovers via JavaScript:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-animation=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">Type</th>
|
||||
<th style="width: 50px;">Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>animation</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Apply a CSS fade transition to the popover</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>container</td>
|
||||
<td>string | element | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content</td>
|
||||
<td>string | element | function</td>
|
||||
<td>''</td>
|
||||
<td>
|
||||
<p>Default content value if <code>data-content</code> attribute isn't present.</p>
|
||||
<p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
<td>number | object</td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
|
||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
||||
<p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>html</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string | function</td>
|
||||
<td>'right'</td>
|
||||
<td>
|
||||
<p>How to position the popover - auto | top | bottom | left | right.<br />When <code>auto</code> is specified, it will dynamically reorient the popover.</p>
|
||||
<p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selector</td>
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://codepen.io/Johann-S/pen/djJYPb">an informative example</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>template</td>
|
||||
<td>string</td>
|
||||
<td><code>'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'</code></td>
|
||||
<td>
|
||||
<p>Base HTML to use when creating the popover.</p>
|
||||
<p>The popover's <code>title</code> will be injected into the <code>.popover-header</code>.</p>
|
||||
<p>The popover's <code>content</code> will be injected into the <code>.popover-body</code>.</p>
|
||||
<p><code>.arrow</code> will become the popover's arrow.</p>
|
||||
<p>The outermost wrapper element should have the <code>.popover</code> class.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>string | element | function</td>
|
||||
<td>''</td>
|
||||
<td>
|
||||
<p>Default title value if <code>title</code> attribute isn't present.</p>
|
||||
<p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'click'</td>
|
||||
<td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. <code>manual</code> cannot be combined with any other trigger.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offset</td>
|
||||
<td>number | string</td>
|
||||
<td>0</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fallbackPlacement</td>
|
||||
<td>string | array</td>
|
||||
<td>'flip'</td>
|
||||
<td>Allow to specify which position Popper will use on fallback. For more information refer to
|
||||
Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>boundary</td>
|
||||
<td>string | element</td>
|
||||
<td>'scrollParent'</td>
|
||||
<td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4 id="data-attributes-for-individual-popovers">Data attributes for individual popovers</h4>
|
||||
|
||||
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
|
||||
|
||||
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||
|
||||
<p><a href="/docs/4.3/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
|
||||
</div>
|
||||
|
||||
<h4 id="popoveroptions"><code class="highlighter-rouge">$().popover(options)</code></h4>
|
||||
|
||||
<p>Initializes popovers for an element collection.</p>
|
||||
|
||||
<h4 id="popovershow"><code class="highlighter-rouge">.popover('show')</code></h4>
|
||||
|
||||
<p>Reveals an element’s popover. <strong>Returns to the caller before the popover has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover. Popovers whose both title and content are zero-length are never displayed.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popoverhide"><code class="highlighter-rouge">.popover('hide')</code></h4>
|
||||
|
||||
<p>Hides an element’s popover. <strong>Returns to the caller before the popover has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popovertoggle"><code class="highlighter-rouge">.popover('toggle')</code></h4>
|
||||
|
||||
<p>Toggles an element’s popover. <strong>Returns to the caller before the popover has actually been shown or hidden</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.popover</code> or <code class="highlighter-rouge">hidden.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popoverdispose"><code class="highlighter-rouge">.popover('dispose')</code></h4>
|
||||
|
||||
<p>Hides and destroys an element’s popover. Popovers that use delegation (which are created using <a href="#options">the <code class="highlighter-rouge">selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'dispose'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popoverenable"><code class="highlighter-rouge">.popover('enable')</code></h4>
|
||||
|
||||
<p>Gives an element’s popover the ability to be shown. <strong>Popovers are enabled by default.</strong></p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'enable'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popoverdisable"><code class="highlighter-rouge">.popover('disable')</code></h4>
|
||||
|
||||
<p>Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'disable'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popovertoggleenabled"><code class="highlighter-rouge">.popover('toggleEnabled')</code></h4>
|
||||
|
||||
<p>Toggles the ability for an element’s popover to be shown or hidden.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'toggleEnabled'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popoverupdate"><code class="highlighter-rouge">.popover('update')</code></h4>
|
||||
|
||||
<p>Updates the position of an element’s popover.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'update'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.bs.popover</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.bs.popover</td>
|
||||
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.bs.popover</td>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.bs.popover</td>
|
||||
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>inserted.bs.popover</td>
|
||||
<td>This event is fired after the <code>show.bs.popover</code> event when the popover template has been added to the DOM.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myPopover'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.popover'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user