mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-03 01:52:19 +01:00
520 lines
46 KiB
HTML
520 lines
46 KiB
HTML
<!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="Hugo 0.80.0">
|
||
|
||
<meta name="docsearch:language" content="en">
|
||
<meta name="docsearch:version" content="4.6">
|
||
|
||
<title>Buttons · Bootstrap v4.6</title>
|
||
|
||
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/components/buttons/">
|
||
|
||
|
||
|
||
<!-- Bootstrap core CSS -->
|
||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 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.6/assets/css/docs.css" rel="stylesheet">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||
<link rel="manifest" href="/docs/4.6/assets/img/favicons/manifest.json">
|
||
<link rel="mask-icon" href="/docs/4.6/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon.ico">
|
||
<meta name="msapplication-config" content="/docs/4.6/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.6/assets/brand/bootstrap-social-logo.png">
|
||
|
||
<!-- Facebook -->
|
||
<meta property="og:url" content="https://getbootstrap.com/docs/4.6/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="article">
|
||
<meta property="og:image" content="https://getbootstrap.com/docs/4.6/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('set', 'anonymizeIp', true);
|
||
ga('send', 'pageview');
|
||
</script>
|
||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||
|
||
|
||
</head>
|
||
<body>
|
||
<div class="skippy overflow-hidden">
|
||
<div class="container-xl">
|
||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||
<a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<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.6/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.6/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</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 ml-md-auto">
|
||
<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.6
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/">5.0.x</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</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 pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" 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 px-1 mx-1 py-3 my-n2" 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 px-1 mx-1 py-3 my-n2" 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 px-1 mx-1 py-3 my-n2" 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.6/getting-started/download/">Download</a>
|
||
</header>
|
||
|
||
|
||
<div class="container-fluid">
|
||
<div class="row flex-xl-nowrap">
|
||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||
<form role="search" 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.6">
|
||
<button class="btn 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>
|
||
|
||
<div class="collapse d-md-block row" id="bd-docs-nav">
|
||
<nav class="bd-links" aria-label="Main navigation">
|
||
|
||
<div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.6/getting-started/introduction/">
|
||
Getting started
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.6/layout/overview/">
|
||
Layout
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.6/content/reboot/">
|
||
Content
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="/docs/4.6/components/alerts/">
|
||
Components
|
||
</a>
|
||
<ul class="nav bd-sidenav">
|
||
<li>
|
||
<a href="/docs/4.6/components/alerts/">Alerts</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/badge/">Badge</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/breadcrumb/">Breadcrumb</a>
|
||
</li>
|
||
<li class="active bd-sidenav-active">
|
||
<a href="/docs/4.6/components/buttons/">Buttons</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/button-group/">Button group</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/card/">Card</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/carousel/">Carousel</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/collapse/">Collapse</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/dropdowns/">Dropdowns</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/forms/">Forms</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/input-group/">Input group</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/jumbotron/">Jumbotron</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/list-group/">List group</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/media-object/">Media object</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/modal/">Modal</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/navs/">Navs</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/navbar/">Navbar</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/pagination/">Pagination</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/popovers/">Popovers</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/progress/">Progress</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/scrollspy/">Scrollspy</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/spinners/">Spinners</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/toasts/">Toasts</a>
|
||
</li>
|
||
<li>
|
||
<a href="/docs/4.6/components/tooltips/">Tooltips</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.6/utilities/borders/">
|
||
Utilities
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.6/extend/approach/">
|
||
Extend
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.6/migration/">
|
||
Migration
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.6/about/overview/">
|
||
About
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||
<nav id="TableOfContents">
|
||
<ul>
|
||
<li><a href="#examples">Examples</a></li>
|
||
<li><a href="#disable-text-wrapping">Disable text wrapping</a></li>
|
||
<li><a href="#button-tags">Button tags</a></li>
|
||
<li><a href="#outline-buttons">Outline buttons</a></li>
|
||
<li><a href="#sizes">Sizes</a></li>
|
||
<li><a href="#active-state">Active state</a></li>
|
||
<li><a href="#disabled-state">Disabled state</a></li>
|
||
<li><a href="#button-plugin">Button plugin</a>
|
||
<ul>
|
||
<li><a href="#toggle-states">Toggle states</a></li>
|
||
<li><a href="#checkbox-and-radio-buttons">Checkbox and radio buttons</a></li>
|
||
<li><a href="#methods">Methods</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</nav>
|
||
|
||
|
||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4-dev/site/content/docs/4.6/components/buttons.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||
<h1 class="bd-title" id="content">Buttons</h1>
|
||
</div>
|
||
<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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Primary<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>Secondary<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-success"</span><span class="p">></span>Success<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-danger"</span><span class="p">></span>Danger<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-warning"</span><span class="p">></span>Warning<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-info"</span><span class="p">></span>Info<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-light"</span><span class="p">></span>Light<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-dark"</span><span class="p">></span>Dark<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-link"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||
<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>.sr-only</code> class.
|
||
</div>
|
||
|
||
<h2 id="disable-text-wrapping">Disable text wrapping</h2>
|
||
<p>If you don’t want the button text to wrap, you can add the <code>.text-nowrap</code> class to the button. In Sass, you can set <code>$btn-white-space: nowrap</code> to disable text wrapping for each button.</p>
|
||
<h2 id="button-tags">Button tags</h2>
|
||
<p>The <code>.btn</code> classes are designed to be used with the <code><button></code> element. However, you can also use these classes on <code><a></code> or <code><input></code> elements (though some browsers may apply a slightly different rendering).</p>
|
||
<p>When using button classes on <code><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>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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Input"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Submit"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"reset"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Reset"</span><span class="p">></span></code></pre></div>
|
||
<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>.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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span><span class="p">></span>Primary<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span><span class="p">></span>Secondary<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-success"</span><span class="p">></span>Success<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-danger"</span><span class="p">></span>Danger<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-warning"</span><span class="p">></span>Warning<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-info"</span><span class="p">></span>Info<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-light"</span><span class="p">></span>Light<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-dark"</span><span class="p">></span>Dark<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||
<div class="bd-callout bd-callout-info">
|
||
Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
|
||
</div>
|
||
|
||
<h2 id="sizes">Sizes</h2>
|
||
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary btn-lg"</span><span class="p">></span>Large button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="p">></span>Large button<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||
<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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary btn-sm"</span><span class="p">></span>Small button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="p">></span>Small button<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||
<p>Create block level buttons—those that span the full width of a parent—by adding <code>.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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary btn-lg btn-block"</span><span class="p">></span>Block level button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-lg btn-block"</span><span class="p">></span>Block level button<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||
<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><button></code>s as they use a pseudo-class</strong>. However, you can still force the same active appearance with <code>.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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary btn-lg active"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-pressed</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Primary link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-lg active"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-pressed</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span></code></pre></div>
|
||
<h2 id="disabled-state">Disabled state</h2>
|
||
<p>Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any <code><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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-lg btn-primary"</span> <span class="na">disabled</span><span class="p">></span>Primary button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">disabled</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||
<p>Disabled buttons using the <code><a></code> element behave a bit different:</p>
|
||
<ul>
|
||
<li><code><a></code>s don’t support the <code>disabled</code> attribute, so you must add the <code>.disabled</code> class to make it visually appear disabled.</li>
|
||
<li>Some future-friendly styles are included to disable all <code>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>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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary btn-lg disabled"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Primary link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-lg disabled"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span></code></pre></div>
|
||
<div class="bd-callout bd-callout-warning">
|
||
<h5 id="link-functionality-caveat">Link functionality caveat</h5>
|
||
<p>The <code>.disabled</code> class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code>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>tabindex="-1"</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
|
||
</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>data-toggle="button"</code> to toggle a button’s <code>active</code> state. If you’re pre-toggling a button, you must manually add the <code>.active</code> class <strong>and</strong> <code>aria-pressed="true"</code> to the <code><button></code>.</p>
|
||
<div class="bd-example">
|
||
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
|
||
Single toggle
|
||
</button>
|
||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-pressed</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||
Single toggle
|
||
<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||
<h3 id="checkbox-and-radio-buttons">Checkbox and radio buttons</h3>
|
||
<p>Bootstrap’s <code>.button</code> styles can be applied to other elements, such as <code><label></code>s, to provide checkbox or radio style button toggling. Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing those modified buttons to enable their toggling behavior via JavaScript and add <code>.btn-group-toggle</code> to style the <code><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>click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code><input type="reset"></code> or by manually applying the input’s <code>checked</code> property—you’ll need to toggle <code>.active</code> on the <code><label></code> manually.</p>
|
||
<p>Note that pre-checked buttons require you to manually add the <code>.active</code> class to the input’s <code><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> Checked
|
||
</label>
|
||
</div>
|
||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group-toggle"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"buttons"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary active"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="p">></span> Checked
|
||
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||
<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" checked> Active
|
||
</label>
|
||
<label class="btn btn-secondary">
|
||
<input type="radio" name="options" id="option2"> Radio
|
||
</label>
|
||
<label class="btn btn-secondary">
|
||
<input type="radio" name="options" id="option3"> Radio
|
||
</label>
|
||
</div>
|
||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group btn-group-toggle"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"buttons"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary active"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"options"</span> <span class="na">id</span><span class="o">=</span><span class="s">"option1"</span> <span class="na">checked</span><span class="p">></span> Active
|
||
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"options"</span> <span class="na">id</span><span class="o">=</span><span class="s">"option2"</span><span class="p">></span> Radio
|
||
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"options"</span> <span class="na">id</span><span class="o">=</span><span class="s">"option3"</span><span class="p">></span> Radio
|
||
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||
<h3 id="methods">Methods</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Method</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>$().button('toggle')</code></td>
|
||
<td>Toggles push state. Gives the button the appearance that it has been activated.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>$().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.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
|
||
|
||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
|
||
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||
|
||
<script src="/docs/4.6/assets/js/docs.min.js"></script>
|
||
|
||
</body>
|
||
</html>
|