AutorÃa | Ultima modificación | Ver Log |
<!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="Bootstrap 4 Toggle is a bootstrap plugin that converts checkboxes into responsive toggles."><meta name="keywords" content="bootstrap, toggle, switch, bootstrap-toggle, bootstrap-switch, bootstrap-checkbox"><meta name="author" content="https://github.com/gitbrent"><meta name="version" content="v3.7.0"><meta name="robots" content="index, follow"><meta name="revisit-after" content="1 month"><title>Bootstrap 4 Toggle Switch Button Checkbox</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"><link rel="stylesheet" href="css/bootstrap4-toggle.css"><link rel="stylesheet" href="doc/stylesheet.css"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script></head><body><header><nav class="navbar navbar-expand-lg navbar-light bg-light container mb-3" role="navigation"><a class="navbar-brand" href="#">Bootstrap 4 Toggle</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav ml-auto align-items-center"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#installation">Installation</a></li><li class="nav-item"><a class="nav-link" href="#demos">Demos</a></li><li class="nav-item"><a class="nav-link d-none d-sm-none d-md-block" href="#usage">Usage</a></li><li class="nav-item"><a class="nav-link d-none d-sm-none d-md-block" href="#api">API</a></li><li class="nav-item"><a class="nav-link d-none d-sm-none d-md-block" href="#events">Events</a></li><li class="nav-item"><a class="nav-link" href="https://github.com/gitbrent/bootstrap4-toggle/">GitHub</a></li><li class="nav-item"><a class="nav-link" href="https://github.com/gitbrent/bootstrap4-toggle/archive/master.zip">Download</a></li></ul></div></nav><div class="mast-head"><div class="container"><h1>Bootstrap Switch Button</h1><p><strong>Bootstrap Toggle</strong> is a jQuery plugin/widget that converts plain checkboxes into responsive toggle switch buttons.</p><!--<div class="mast-links"><iframe src="https://ghbtns.com/github-btn.html?user=gitbrent&repo=bootstrap4-toggle&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe><iframe src="https://ghbtns.com/github-btn.html?user=gitbrent&repo=bootstrap4-toggle&type=star&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe></div>--></div></div></header><main><section id="updated" class="container my-5"><div class="alert alert-success" role="alert"><h3 class="alert-heading">Made for Bootstrap 4!</h3><h6 class="font-weight-light">This page and all of the switch buttons shown are running on Bootstrap 4.3</h6><hr><div class="row"><div class="col-12 col-md-4 mb-1 mb-md-0"><div class="row align-items-center"><div class="col-2 p-0 p-md-2 text-right"><i class="fas fa-check-circle text-success d-none d-sm-none d-md-none d-lg-block" style="font-size:48px"></i><i class="fas fa-check-circle text-success d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i></div><div class="col-10">Supports touch events</div></div></div><div class="col-12 col-md-4 mb-1 mb-md-0"><div class="row align-items-center"><div class="col-2 p-0 p-md-2 text-right"><i class="fas fa-check-circle text-success d-none d-sm-none d-md-none d-lg-block" style="font-size:48px"></i><i class="fas fa-check-circle text-success d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i></div><div class="col-10">Supports outline colors</div></div></div><div class="col-12 col-md-4 mb-1 mb-md-0"><div class="row align-items-center"><div class="col-2 p-0 p-md-2 text-right"><i class="fas fa-check-circle text-success d-none d-sm-none d-md-none d-lg-block" style="font-size:48px"></i><i class="fas fa-check-circle text-success d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i></div><div class="col-10">Includes a mini (-xs) size</div></div></div></div></div></section><section id="installation" class="container my-5"><h2>Installation</h2><hr><h3 class="text-secondary mt-4">CDN</h3><code class="highlight"><link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script></code><h3 class="text-secondary mt-4">Download</h3><a href="https://github.com/gitbrent/bootstrap4-toggle/releases/latest">GitHub Latest release</a><h3 class="text-secondary mt-4">NPM</h3><code class="highlight">npm install bootstrap4-toggle</code><h3 class="text-secondary mt-4">Yarn</h3><code class="highlight">yarn add bootstrap4-toggle</code></section><section id="demos" class="container my-5"><h2>Demos</h2><hr><h3 class="text-secondary mt-4">Sizes</h3><p>Bootstrap toggle is available in different sizes.</p><div class="example"><input type="checkbox" checked data-toggle="toggle" data-size="lg"><input type="checkbox" checked data-toggle="toggle"><input type="checkbox" checked data-toggle="toggle" data-size="sm"><input type="checkbox" checked data-toggle="toggle" data-size="xs"></div><h3 class="text-secondary mt-4">Custom Sizes</h3><p>Bootstrap toggle can handle custom sizes by <code>data-width</code> and <code>data-height</code> options.</p><div class="example"><input type="checkbox" checked data-toggle="toggle" data-width="100" data-height="75"><input type="checkbox" checked data-toggle="toggle" data-height="75"><input type="checkbox" checked data-toggle="toggle" data-width="100"></div><h3 class="text-secondary mt-4">Colors</h3><p>Bootstrap Toggle implements all standard bootstrap 4 button colors.</p><div class="example"><input type="checkbox" checked data-toggle="toggle" data-onstyle="primary"><input type="checkbox" checked data-toggle="toggle" data-onstyle="secondary"><input type="checkbox" checked data-toggle="toggle" data-onstyle="success"><input type="checkbox" checked data-toggle="toggle" data-onstyle="danger"><input type="checkbox" checked data-toggle="toggle" data-onstyle="warning"><input type="checkbox" checked data-toggle="toggle" data-onstyle="info"><input type="checkbox" checked data-toggle="toggle" data-onstyle="light"><input type="checkbox" checked data-toggle="toggle" data-onstyle="dark"></div><h3 class="text-secondary mt-4">Outline Colors</h3><p>Bootstrap Toggle implements all standard bootstrap 4 button outline colors.</p><div class="example"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-primary" data-offstyle="outline-secondary"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-secondary" data-offstyle="outline-success"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-danger" data-offstyle="outline-warning"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-warning" data-offstyle="outline-info"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-info" data-offstyle="outline-light"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-light" data-offstyle="outline-dark"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-dark" data-offstyle="outline-primary"></div><h3 class="text-secondary mt-4">Dark Theme Colors</h3><p>Bootstrap Toggle colors look great on dark backgrounds.</p><div class="example bg-dark"><input type="checkbox" checked data-toggle="toggle" data-onstyle="primary" data-offstyle="secondary"><input type="checkbox" checked data-toggle="toggle" data-onstyle="secondary" data-offstyle="success"><input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger"><input type="checkbox" checked data-toggle="toggle" data-onstyle="danger" data-offstyle="warning"><input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"><input type="checkbox" checked data-toggle="toggle" data-onstyle="info" data-offstyle="light"><input type="checkbox" checked data-toggle="toggle" data-onstyle="light" data-offstyle="dark" data-style="border"><input type="checkbox" checked data-toggle="toggle" data-onstyle="dark" data-offstyle="light" data-style="border"></div><h3 class="text-secondary mt-4">Dark Theme Outline Colors</h3><p>Bootstrap Toggle outline colors look great on dark backgrounds.</p><div class="example bg-dark"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-primary" data-offstyle="outline-secondary"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-secondary" data-offstyle="outline-success"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-danger" data-offstyle="outline-warning"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-warning" data-offstyle="outline-info"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-info" data-offstyle="outline-light"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-light" data-offstyle="outline-dark" data-style="border"><input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-dark" data-offstyle="outline-light" data-style="border"></div><h3 class="text-secondary mt-4">Custom Style</h3><p>Style the buttons to fit an existing UX.</p><div class="example"><!-- iOS Style: Rounded --><style>.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20rem; }.toggle.ios .toggle-handle { border-radius: 20rem; }</style><input type="checkbox" checked data-toggle="toggle" data-style="ios"><!-- Android Style: No radius --><style>.toggle.android { border-radius: 0px;}.toggle.android .toggle-handle { border-radius: 0px; }</style><input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info"></div><h3 class="text-secondary mt-4">Custom Text</h3><p>The text can be changed easily with attributes or options.</p><div class="example"><input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger"></div><h3 class="text-secondary mt-4">HTML, Icons, Images</h3><p>You can easily add icons or images since html is supported for on/off text.</p><div class="example"><input type="checkbox" checked data-toggle="toggle" data-on="<i class='fa fa-play'></i> Play" data-off="<i class='fa fa-pause'></i> Pause"></div><h3 class="text-secondary mt-4">Multiple Lines of Text</h3><p>Toggles with multiple lines will adjust its heights.</p><div class="example"><input type="checkbox" checked data-toggle="toggle" data-on="Hello<br>World" data-off="Goodbye<br>World"></div><h3 class="text-secondary mt-4">Animation Speed</h3><p>Transition speed can be easily controlled with css <code>transition</code> property on <code>.toggle-group</code>. You can also turn animation off completely.</p><div class="example"><style>.slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }.fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; }.quick .toggle-group { transition: none; -webkit-transition: none; }</style><input type="checkbox" checked data-toggle="toggle" data-style="slow"><input type="checkbox" checked data-toggle="toggle" data-style="fast"><input type="checkbox" checked data-toggle="toggle" data-style="quick"></div><h3 class="text-secondary mt-4">Stacked checkboxes</h3><p>Simply add <code>data-toggle="toggle"</code> to convert checkboxes into toggles.</p><div class="example"><div class="form-check pl-0"><input id="stackedCheck1" class="form-check-input" type="checkbox" data-toggle="toggle" checked><label for="stackedCheck1" class="form-check-label">Enabled</label></div><div class="form-check pl-0"><input id="stackedCheck2" class="form-check-input" type="checkbox" data-toggle="toggle" disabled><label for="stackedCheck2" class="form-check-label">Disabled</label></div></div><h3 class="text-secondary mt-4">Inline Checkboxes</h3><p>Simply add <code>data-toggle="toggle"</code> to a convert checkboxes into toggles.</p><div class="example"><div class="form-check form-check-inline"><input id="inlineCheckbox1" class="form-check-input" type="checkbox" data-toggle="toggle" data-style="mr-1" checked><label for="inlineCheckbox1" class="form-check-label">Enabled</label></div><div class="form-check form-check-inline"><input id="inlineCheckbox2" class="form-check-input" type="checkbox" data-toggle="toggle" data-style="mr-1" disabled><label for="inlineCheckbox2" class="form-check-label">Disabled</label></div></div><section><section id="usage" class="container my-5 d-none d-sm-none d-md-block"><h2>Usage</h2><hr><h3 class="text-secondary mt-4">Initialize with HTML</h3><p>Simply add <code>data-toggle="toggle"</code> to convert checkboxes into toggles.</p><div class="example"><input id="chkToggle1" type="checkbox" data-toggle="toggle" checked></div><h3 class="text-secondary mt-4">Initialize with JavaScript</h3><p>Simply call the <code>bootstrapToggle</code> method to convert checkboxes into toggles. See <a href="#api">Options</a> for additional colors, etc.</p><div class="example"><input id="chkToggle2" type="checkbox" checked><script>$(function(){ $('#chkToggle2').bootstrapToggle() });</script></div></section><section id="api" class="container my-5 d-none d-sm-none d-md-block"><h2>API</h2><hr><h3 class="text-secondary mt-4">Options</h3><p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-on="Enabled"</code>.</p><div class="example"><input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled"><input type="checkbox" id="toggle-two"><script>$(function() {$('#toggle-two').bootstrapToggle({on: 'Enabled',off: 'Disabled'});})</script></div><div class="table-responsive"><table class="table table-striped table-condensed"><thead><tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>on</code></td><td class="text-nowrap">string | html</td><td><code>"On"</code></td><td>Text of the <em>on</em> toggle label.</td></tr><tr><td><code>off</code></td><td>string | html</td><td><code>"Off"</code></td><td>Text of the <em>off</em> toggle label.</td></tr><tr><td><code class="text-nowrap">onstyle</code></td><td>string</td><td><code class="text-nowrap">"primary"</code></td><td>Style of the <em>on</em> toggle.<br>Possible values are:<code>primary</code>, <code>secondary</code>, <code>success</code>, <code>danger</code>, <code>warning</code>, <code>info</code>, <code>light</code>, <code>dark</code><br><small class="text-muted">Refer to Bootstrap <a href="https://getbootstrap.com/docs/4.3/components/buttons/" target="_blank">Button Options</a> documentation for more information.</small></td></tr><tr><td><code class="text-nowrap">offstyle</code></td><td>string</td><td><code class="text-nowrap">"light"</code></td><td>Style of the <em>off</em> toggle.<br>Possible values are:<code>primary</code>, <code>secondary</code>, <code>success</code>, <code>danger</code>, <code>warning</code>, <code>info</code>, <code>light</code>, <code>dark</code><br><small class="text-muted">Refer to Bootstrap <a href="https://getbootstrap.com/docs/4.3/components/buttons/" target="_blank">Button Options</a> documentation for more information.</small></td></tr><tr><td><code>size<code></td><td>string</td><td><em>null</em></td><td>Size of the toggle. If set to <em>null</em>, button is default/normal size.<br>Possible values are:<code>lg</code>, <code>sm</code>, <code>xs</code><br><small class="text-muted">Refer to Bootstrap <a href="https://getbootstrap.com/docs/4.3/components/buttons/#sizes" target="_blank">Button Sizes</a> documentation for more information.</small></td></tr><tr><td><code>style</code></td><td>string</td><td><em>null</em></td><td>Appends the provided value to the toggle's class attribute.Use this to apply custom styles to the toggle.</td></tr><tr><td><code>width</code></td><td>integer</td><td><em>null</em></td><td>Sets the width of the toggle.<br>If set to <em>null</em>, width will be calculated.</td></tr><tr><td><code>height</code></td><td>integer</td><td><em>null</em></td><td>Sets the height of the toggle.<br>If set to <em>null</em>, height will be calculated.</td></tr></tbody></table></div><h3 class="text-secondary mt-4">Methods</h3><p>Methods can be used to control toggles directly.</p><div class="example"><input id="toggle-demo" type="checkbox" data-toggle="toggle"></div><div class="table-responsive"><table class="table table-striped table-condensed"><thead><tr><th>Method</th><th>Example</th><th>Description</th><th>Demo</th></tr></thead><tbody><tr><td><em>initialize</em></td><td><code>$('#toggle-demo').bootstrapToggle()</code></td><td>Initializes the toggle plugin with options</td><td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.init('#toggle-demo')">Initialize</button></td></tr><tr><td>destroy</td><td><code>$('#toggle-demo').bootstrapToggle('destroy')</code></td><td>Destroys the toggle</td><td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.destroy('#toggle-demo')">Destroy</button></td></tr><tr><td>on</td><td><code>$('#toggle-demo').bootstrapToggle('on')</code></td><td>Sets the toggle to 'On' state</td><td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.on('#toggle-demo')">On</button></td></tr><tr><td>off</td><td><code>$('#toggle-demo').bootstrapToggle('off')</code></td><td>Sets the toggle to 'Off' state</td><td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.off('#toggle-demo')">Off</button></td></tr><tr><td>toggle</td><td><code>$('#toggle-demo').bootstrapToggle('toggle')</code></td><td>Toggles the state of the toggle</td><td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.toggle('#toggle-demo')">Toggle</button></td></tr><tr><td>enable</td><td><code>$('#toggle-demo').bootstrapToggle('enable')</code></td><td>Enables the toggle</td><td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.enable('#toggle-demo')">Enable</button></td></tr><tr><td>disable</td><td><code>$('#toggle-demo').bootstrapToggle('disable')</code></td><td>Disables the toggle</td><td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.disable('#toggle-demo')">Disable</button></td></tr></tbody></table></div><h3 class="text-secondary mt-4">Checked State</h3><p>You can determine the checked state of a toggle using the `checked` property.</p><div class="example"><input id="toggle-state" type="checkbox" data-toggle="toggle"></div><div id="chkState" class="example"><button type="button" class="btn btn-outline-primary" onClick="showChkState()">Show Toggle State</button></div><p><div>Use the element property for checked state</div><code>document.getElementById('toggle-state').checked</code><div>Returns true/false</div></p></section><section id="events" class="container my-5 d-none d-sm-none d-md-block"><h2>Events</h2><hr><h3 class="text-secondary mt-4">Event Propagation</h3><p><div class="label label-primary">Notes</div>• All events are propagated to and from input element to the toggle.<br>• Listen for events on the <code><input type="checkbox"></code> directly as the toggle stays synced with the input.</p><div class="example"><input id="toggle-event" type="checkbox" data-toggle="toggle"><div id="console-event"></div><script>$(function() {$('#toggle-event').change(function() {$('#console-event').html('Toggle: ' + $(this).prop('checked'))})})</script></div><h3 class="text-secondary mt-4">Stopping Event Propagation</h3><p>Passing <code>true</code> to the on/off methods will enable the silent option to prevent the control from propagating the change event incases where you want to update the controls on/off state, but do not want to fire the onChange event.</p><div class="example"><input id="toggle-silent" type="checkbox" data-toggle="toggle" onchange="$('#chgConsole').text(new Date().toISOString()+' ... change event fired!')"><button class="btn btn-success" onclick="toggleApiOnSilent()" >On by API (silent)</button><button class="btn btn-success" onclick="toggleApiOffSilent()">Off by API (silent)</button><button class="btn btn-warning" onclick="toggleApiOnNotSilent()">On by API (not silent)</button><button class="btn btn-warning" onclick="toggleApiOffNotSilent()">On by API (not silent)</button><script>function toggleApiOnSilent() {$('#toggle-silent').bootstrapToggle('on', true);}function toggleApiOffSilent() {$('#toggle-silent').bootstrapToggle('off', true);}function toggleApiOnNotSilent() {$('#toggle-silent').bootstrapToggle('on');}function toggleApiOffNotSilent() {$('#toggle-silent').bootstrapToggle('off');}</script><pre class="mb-0"><code id="chgConsole" class="text-info"></code></pre></div><h3 class="text-secondary mt-4">API vs Input</h3><p>This also means that using the API or Input to trigger events will work both ways.</p><div class="example"><input id="toggle-trigger" type="checkbox" data-toggle="toggle"><button class="btn btn-success" onclick="toggleApiOn()" >On by API</button><button class="btn btn-danger" onclick="toggleApiOff()">Off by API</button><button class="btn btn-success" onclick="toggleInpOn()" >On by Input</button><button class="btn btn-danger" onclick="toggleInpOff()">Off by Input</button><script>function toggleApiOn() {$('#toggle-trigger').bootstrapToggle('on');}function toggleApiOff() {$('#toggle-trigger').bootstrapToggle('off');}function toggleInpOn() {$('#toggle-trigger').prop('checked', true).change();}function toggleInpOff() {$('#toggle-trigger').prop('checked', false).change();}</script></div></section></main><footer class="bg-light border-top p-4"><div class="container"><h4 class="font-weight-light">Original by <a href="https://github.com/minhur" target="_blank">Min Hur</a> |Updated by <a href="https://github.com/gitbrent" target="_blank">Brent Ely</a> |Available on <a href="https://github.com/gitbrent/bootstrap4-toggle" target_"blank">GitHub</a> |Licensed <a href="https://github.com/gitbrent/bootstrap4-toggle/blob/master/LICENSE" target_"blank">MIT</a></h4><p class="mt-4 mb-0"><iframe src="https://ghbtns.com/github-btn.html?user=gitbrent&repo=bootstrap4-toggle&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe><iframe src="https://ghbtns.com/github-btn.html?user=gitbrent&repo=bootstrap4-toggle&type=star&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe></p></div></footer><!-- vvv scripts vvv --><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script><script src="doc/script.js"></script><script src="js/bootstrap4-toggle.js"></script><!-- ^^^ scripts ^^^ --><script>function showChkState() {$('#chkState .badge').remove();var chkBool = document.getElementById('toggle-state').checked;$('#chkState button').after('<div class="badge badge-success px-3 py-2 mb-2 mx-3">'+chkBool+'</div>');}</script><!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-75147115-4"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-75147115-4');</script></body></html>