Files

1 line
10 KiB
HTML
Raw Permalink Normal View History

2026-01-16 14:13:44 +08:00
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Turn checkboxes and radio buttons into toggle switches"><meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein"><title>Bootstrap Switch · Turn checkboxes and radio buttons into toggle switches</title><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link href="css/highlight.css" rel="stylesheet"><link href="https://unpkg.com/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet"><link href="https://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet"><link href="css/main.css" rel="stylesheet"></head><body><a href="https://github.com/Bttstrp/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a><header role="banner" class="navbar navbar-static-top bs-docs-nav"><div class="container"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a></div><nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse"><ul class="nav navbar-nav"><li><a href="https://github.com/Bttstrp/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li><li><a href="examples.html">Examples</a></li><li class="dropdown"><a href="#" data-toggle="dropdown">Documentation <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="/options.html">Options</a></li><li><a href="/methods.html">Methods</a></li><li><a href="/events.html">Events</a></li><li role="presentation" class="divider"></li><li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li></ul></li><li><a href="https://github.com/Bttstrp/bootstrap-switch/issues">Bug reports</a></li></ul></nav></div></header><main id="content" role="main"><div class="bs-docs-header"><div class="container"><h1>Examples</h1></div></div><div class="container"><div class="row"><div class="col-sm-6 col-lg-4"><h2 class="h4">State</h2><p><input id="switch-state" type="checkbox" checked="checked"></p><div class="btn-group"><button type="button" data-switch-toggle="state" class="btn btn-default">Toggle</button><button type="button" data-switch-set="state" data-switch-value="true" class="btn btn-default">Set true</button><button type="button" data-switch-set="state" data-switch-value="false" class="btn btn-default">Set false</button><button type="button" data-switch-get="state" class="btn btn-default">Get</button></div></div><div class="col-sm-6 col-lg-4"><h2 class="h4">Size</h2><p><input id="switch-size" type="checkbox" checked="checked" data-size="mini"></p><div class="btn-group"><button type="button" data-switch-set="size" data-switch-value="mini" class="btn btn-default">Mini</button><button type="button" data-switch-set="size" data-switch-value="small" class="btn btn-default">Small</button><button type="button" data-switch-set="size" data-switch-value="normal" class="btn btn-default">Normal</button><button type="button" data-switch-set="size" data-switch-value="large" class="btn btn-default">Large</button><button type="button" data-switch-get="size" class="btn btn-default">Get</button></div></div><div class="col-sm-6 col-lg-4"><h2 class="h4">Animate</h2><p><input id="switch-animate" type="checkbox" checked="checked"></p><p><button type="button" data-switch-toggle="animate" class="btn btn-default">Toggle</button><button type="button" data-switch-get="animate" class="btn btn-default">Get</button></p></div><div class="col-sm-6 col-lg-4"><h2 class="h4">Disabled</h2><p><input id="switch-disabled" type="checkbox" checked="checked" disabled="disabled"></p><p><button type="button" data-switch-toggle="disabled" c