buttons.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Buttons &middot; Bootstrap</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <!-- Le styles -->
  10. <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
  11. <style>
  12. body {
  13. padding-top: 30px;
  14. padding-bottom: 30px;
  15. }
  16. </style>
  17. <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
  18. <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  19. <!--[if lt IE 9]>
  20. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  21. <![endif]-->
  22. <!-- Le fav and touch icons -->
  23. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
  24. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
  25. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
  26. <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
  27. <link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
  28. </head>
  29. <body>
  30. <div class="container">
  31. <h2>Dropups</h2>
  32. <div class="btn-toolbar">
  33. <div class="btn-group dropup">
  34. <button class="btn">Dropup</button>
  35. <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  36. <ul class="dropdown-menu">
  37. <li><a href="#">Action</a></li>
  38. <li><a href="#">Another action</a></li>
  39. <li><a href="#">Something else here</a></li>
  40. <li class="divider"></li>
  41. <li><a href="#">Separated link</a></li>
  42. </ul>
  43. </div><!-- /btn-group -->
  44. <div class="btn-group dropup">
  45. <button class="btn btn-primary">Dropup</button>
  46. <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  47. <ul class="dropdown-menu">
  48. <li><a href="#">Action</a></li>
  49. <li><a href="#">Another action</a></li>
  50. <li><a href="#">Something else here</a></li>
  51. <li class="divider"></li>
  52. <li><a href="#">Separated link</a></li>
  53. </ul>
  54. </div><!-- /btn-group -->
  55. <div class="btn-group dropup">
  56. <button class="btn btn-danger">Dropup</button>
  57. <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  58. <ul class="dropdown-menu">
  59. <li><a href="#">Action</a></li>
  60. <li><a href="#">Another action</a></li>
  61. <li><a href="#">Something else here</a></li>
  62. <li class="divider"></li>
  63. <li><a href="#">Separated link</a></li>
  64. </ul>
  65. </div><!-- /btn-group -->
  66. <div class="btn-group dropup">
  67. <button class="btn btn-warning">Dropup</button>
  68. <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  69. <ul class="dropdown-menu">
  70. <li><a href="#">Action</a></li>
  71. <li><a href="#">Another action</a></li>
  72. <li><a href="#">Something else here</a></li>
  73. <li class="divider"></li>
  74. <li><a href="#">Separated link</a></li>
  75. </ul>
  76. </div><!-- /btn-group -->
  77. <div class="btn-group dropup">
  78. <button class="btn btn-success">Dropup</button>
  79. <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  80. <ul class="dropdown-menu">
  81. <li><a href="#">Action</a></li>
  82. <li><a href="#">Another action</a></li>
  83. <li><a href="#">Something else here</a></li>
  84. <li class="divider"></li>
  85. <li><a href="#">Separated link</a></li>
  86. </ul>
  87. </div><!-- /btn-group -->
  88. <div class="btn-group dropup">
  89. <button class="btn btn-info">Dropup</button>
  90. <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  91. <ul class="dropdown-menu">
  92. <li><a href="#">Action</a></li>
  93. <li><a href="#">Another action</a></li>
  94. <li><a href="#">Something else here</a></li>
  95. <li class="divider"></li>
  96. <li><a href="#">Separated link</a></li>
  97. </ul>
  98. </div><!-- /btn-group -->
  99. <div class="btn-group dropup">
  100. <button class="btn btn-inverse">Dropup</button>
  101. <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  102. <ul class="dropdown-menu">
  103. <li><a href="#">Action</a></li>
  104. <li><a href="#">Another action</a></li>
  105. <li><a href="#">Something else here</a></li>
  106. <li class="divider"></li>
  107. <li><a href="#">Separated link</a></li>
  108. </ul>
  109. </div><!-- /btn-group -->
  110. </div><!-- /btn-toolbar -->
  111. </div> <!-- /container -->
  112. <!-- Le javascript
  113. ================================================== -->
  114. <!-- Placed at the end of the document so the pages load faster -->
  115. <script src="../../docs/assets/js/jquery.js"></script>
  116. <script src="../../docs/assets/js/bootstrap-transition.js"></script>
  117. <script src="../../docs/assets/js/bootstrap-alert.js"></script>
  118. <script src="../../docs/assets/js/bootstrap-modal.js"></script>
  119. <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
  120. <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
  121. <script src="../../docs/assets/js/bootstrap-tab.js"></script>
  122. <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
  123. <script src="../../docs/assets/js/bootstrap-popover.js"></script>
  124. <script src="../../docs/assets/js/bootstrap-button.js"></script>
  125. <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
  126. <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
  127. <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
  128. </body>
  129. </html>