button.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Button</title>
  8. <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
  9. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  10. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  11. <!--[if lt IE 9]>
  12. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  13. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  14. <![endif]-->
  15. </head>
  16. <body>
  17. <div class="container">
  18. <div class="page-header">
  19. <h1>Button <small>Bootstrap Visual Test</small></h1>
  20. </div>
  21. <button type="button" data-loading-text="Loading for 3 seconds..." class="btn btn-primary js-loading-button">
  22. Loading state
  23. </button>
  24. <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
  25. <div class="btn-group" data-toggle="buttons">
  26. <label class="btn btn-primary">
  27. <input type="checkbox"> checkbox 1
  28. </label>
  29. <label class="btn btn-primary">
  30. <input type="checkbox"> checkbox 2
  31. </label>
  32. <label class="btn btn-primary">
  33. <input type="checkbox"> checkbox 3
  34. </label>
  35. </div>
  36. <div class="btn-group" data-toggle="buttons">
  37. <label class="btn btn-primary">
  38. <input type="radio" name="options" id="option1"> Radio 1
  39. </label>
  40. <label class="btn btn-primary">
  41. <input type="radio" name="options" id="option2"> Radio 2
  42. </label>
  43. <label class="btn btn-primary">
  44. <input type="radio" name="options" id="option3"> Radio 3
  45. </label>
  46. </div>
  47. </div>
  48. <!-- JavaScript Includes -->
  49. <script src="../vendor/jquery.min.js"></script>
  50. <script src="../../transition.js"></script>
  51. <script src="../../button.js"></script>
  52. <!-- JavaScript Test -->
  53. <script>
  54. $(function () {
  55. $('.js-loading-button').on('click', function () {
  56. var btn = $(this).button('loading')
  57. setTimeout(function (){
  58. btn.button('reset')
  59. }, 3000)
  60. })
  61. })
  62. </script>
  63. </body>
  64. </html>