twigg-app 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (208) hide show
  1. checksums.yaml +4 -4
  2. data/assets/javascripts/_bootstrap.js +7 -0
  3. data/assets/javascripts/_jquery.js +19 -0
  4. data/assets/javascripts/_tables.js +3 -0
  5. data/assets/javascripts/_views.js +10 -0
  6. data/assets/javascripts/application.js +9 -0
  7. data/{public/application.js → assets/javascripts/views/_commit_set_bar_chart.js} +32 -34
  8. data/assets/javascripts/views/_russia.js +61 -0
  9. data/assets/javascripts/views/_tags.js +56 -0
  10. data/assets/javascripts/views/_tags_word_cloud.js +51 -0
  11. data/assets/stylesheets/_bootstrap_overrides.scss +15 -0
  12. data/assets/stylesheets/_footer.scss +28 -0
  13. data/assets/stylesheets/_global.scss +14 -0
  14. data/assets/stylesheets/_tables.scss +20 -0
  15. data/assets/stylesheets/application.scss +10 -0
  16. data/assets/stylesheets/d3/_bar_chart.scss +25 -0
  17. data/assets/stylesheets/d3/_bubble_chart.scss +22 -0
  18. data/lib/twigg-app/app/routes.rb +4 -0
  19. data/lib/twigg-app/app/server.rb +78 -21
  20. data/lib/twigg-app/app/version.rb +1 -1
  21. data/public/vendor/bootstrap/Gruntfile.js +32 -10
  22. data/public/vendor/bootstrap/README.md +2 -0
  23. data/public/vendor/bootstrap/_config.yml +5 -10
  24. data/public/vendor/bootstrap/_includes/footer.html +2 -1
  25. data/public/vendor/bootstrap/_includes/nav-components.html +33 -31
  26. data/public/vendor/bootstrap/_includes/nav-css.html +32 -22
  27. data/public/vendor/bootstrap/_includes/nav-getting-started.html +17 -1
  28. data/public/vendor/bootstrap/_includes/nav-javascript.html +1 -1
  29. data/public/vendor/bootstrap/_includes/nav-main.html +1 -1
  30. data/public/vendor/bootstrap/_includes/social-buttons.html +1 -1
  31. data/public/vendor/bootstrap/_layouts/default.html +18 -14
  32. data/public/vendor/bootstrap/_layouts/home.html +9 -6
  33. data/public/vendor/bootstrap/assets/css/docs.css +584 -396
  34. data/public/vendor/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png +0 -0
  35. data/public/vendor/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png +0 -0
  36. data/public/vendor/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png +0 -0
  37. data/public/vendor/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png +0 -0
  38. data/public/vendor/bootstrap/assets/ico/favicon.png +0 -0
  39. data/public/vendor/bootstrap/assets/js/application.js +2 -1
  40. data/public/vendor/bootstrap/assets/js/customizer.js +160 -45
  41. data/public/vendor/bootstrap/assets/js/filesaver.js +169 -0
  42. data/public/vendor/bootstrap/assets/js/jquery.js +6 -5
  43. data/public/vendor/bootstrap/assets/js/raw-files.js +3 -0
  44. data/public/vendor/bootstrap/bower.json +1 -1
  45. data/public/vendor/bootstrap/components.html +787 -364
  46. data/public/vendor/bootstrap/composer.json +1 -1
  47. data/public/vendor/bootstrap/css.html +413 -248
  48. data/public/vendor/bootstrap/customize.html +413 -447
  49. data/public/vendor/bootstrap/dist/css/bootstrap-theme.css +384 -0
  50. data/public/vendor/bootstrap/dist/css/bootstrap-theme.min.css +1 -0
  51. data/public/vendor/bootstrap/dist/css/bootstrap.css +3033 -1807
  52. data/public/vendor/bootstrap/dist/css/bootstrap.min.css +1 -1
  53. data/public/vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.eot +0 -0
  54. data/public/vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.svg +228 -0
  55. data/public/vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf +0 -0
  56. data/public/vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff +0 -0
  57. data/public/vendor/bootstrap/dist/js/bootstrap.js +18 -12
  58. data/public/vendor/bootstrap/dist/js/bootstrap.min.js +1 -1
  59. data/public/vendor/bootstrap/examples/carousel/carousel.css +128 -0
  60. data/public/vendor/bootstrap/examples/carousel/index.html +201 -0
  61. data/public/vendor/bootstrap/examples/grid/grid.css +28 -0
  62. data/public/vendor/bootstrap/examples/grid/index.html +119 -0
  63. data/public/vendor/bootstrap/examples/jumbotron/index.html +111 -0
  64. data/public/vendor/bootstrap/examples/jumbotron/jumbotron.css +5 -0
  65. data/public/vendor/bootstrap/examples/jumbotron-narrow/index.html +78 -0
  66. data/public/vendor/bootstrap/examples/jumbotron-narrow/jumbotron-narrow.css +79 -0
  67. data/public/vendor/bootstrap/examples/justified-nav/index.html +79 -0
  68. data/public/vendor/bootstrap/examples/justified-nav/justified-nav.css +88 -0
  69. data/public/vendor/bootstrap/examples/navbar/index.html +83 -0
  70. data/public/vendor/bootstrap/examples/navbar/navbar.css +7 -0
  71. data/public/vendor/bootstrap/examples/navbar-fixed-top/index.html +86 -0
  72. data/public/vendor/bootstrap/examples/navbar-fixed-top/navbar-fixed-top.css +4 -0
  73. data/public/vendor/bootstrap/examples/navbar-static-top/index.html +87 -0
  74. data/public/vendor/bootstrap/examples/navbar-static-top/navbar-static-top.css +7 -0
  75. data/public/vendor/bootstrap/examples/non-responsive/index.html +96 -0
  76. data/public/vendor/bootstrap/examples/non-responsive/non-responsive.css +117 -0
  77. data/public/vendor/bootstrap/examples/offcanvas/index.html +127 -0
  78. data/public/vendor/bootstrap/examples/offcanvas/offcanvas.css +48 -0
  79. data/public/vendor/bootstrap/examples/offcanvas/offcanvas.js +5 -0
  80. data/public/vendor/bootstrap/examples/screenshots/carousel.jpg +0 -0
  81. data/public/vendor/bootstrap/examples/screenshots/grid.jpg +0 -0
  82. data/public/vendor/bootstrap/examples/screenshots/jumbotron-narrow.jpg +0 -0
  83. data/public/vendor/bootstrap/examples/screenshots/jumbotron.jpg +0 -0
  84. data/public/vendor/bootstrap/examples/screenshots/justified-nav.jpg +0 -0
  85. data/public/vendor/bootstrap/examples/screenshots/navbar-fixed.jpg +0 -0
  86. data/public/vendor/bootstrap/examples/screenshots/navbar-static.jpg +0 -0
  87. data/public/vendor/bootstrap/examples/screenshots/navbar.jpg +0 -0
  88. data/public/vendor/bootstrap/examples/screenshots/non-responsive.jpg +0 -0
  89. data/public/vendor/bootstrap/examples/screenshots/offcanvas.jpg +0 -0
  90. data/public/vendor/bootstrap/examples/screenshots/sign-in.jpg +0 -0
  91. data/public/vendor/bootstrap/examples/screenshots/starter-template.jpg +0 -0
  92. data/public/vendor/bootstrap/examples/screenshots/sticky-footer-navbar.jpg +0 -0
  93. data/public/vendor/bootstrap/examples/screenshots/sticky-footer.jpg +0 -0
  94. data/public/vendor/bootstrap/examples/screenshots/theme.jpg +0 -0
  95. data/public/vendor/bootstrap/examples/signin/index.html +46 -0
  96. data/public/vendor/bootstrap/examples/signin/signin.css +40 -0
  97. data/public/vendor/bootstrap/examples/starter-template/index.html +63 -0
  98. data/public/vendor/bootstrap/examples/starter-template/starter-template.css +7 -0
  99. data/public/vendor/bootstrap/examples/sticky-footer/index.html +51 -0
  100. data/public/vendor/bootstrap/examples/sticky-footer/sticky-footer.css +39 -0
  101. data/public/vendor/bootstrap/examples/sticky-footer-navbar/index.html +86 -0
  102. data/public/vendor/bootstrap/examples/sticky-footer-navbar/sticky-footer-navbar.css +46 -0
  103. data/public/vendor/bootstrap/examples/theme/index.html +387 -0
  104. data/public/vendor/bootstrap/examples/theme/theme.css +14 -0
  105. data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.eot +0 -0
  106. data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.svg +228 -0
  107. data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf +0 -0
  108. data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff +0 -0
  109. data/public/vendor/bootstrap/getting-started.html +513 -22
  110. data/public/vendor/bootstrap/index.html +3 -4
  111. data/public/vendor/bootstrap/javascript.html +123 -115
  112. data/public/vendor/bootstrap/js/dropdown.js +3 -3
  113. data/public/vendor/bootstrap/js/modal.js +5 -3
  114. data/public/vendor/bootstrap/js/tests/unit/modal.js +19 -0
  115. data/public/vendor/bootstrap/js/tests/vendor/jquery.js +6 -5
  116. data/public/vendor/bootstrap/js/tooltip.js +9 -5
  117. data/public/vendor/bootstrap/js/transition.js +1 -1
  118. data/public/vendor/bootstrap/less/alerts.less +7 -11
  119. data/public/vendor/bootstrap/less/bootstrap.less +17 -21
  120. data/public/vendor/bootstrap/less/button-groups.less +14 -10
  121. data/public/vendor/bootstrap/less/buttons.less +3 -2
  122. data/public/vendor/bootstrap/less/carousel.less +6 -1
  123. data/public/vendor/bootstrap/less/dropdowns.less +22 -5
  124. data/public/vendor/bootstrap/less/forms.less +36 -15
  125. data/public/vendor/bootstrap/less/glyphicons.less +232 -0
  126. data/public/vendor/bootstrap/less/grid.less +9 -3
  127. data/public/vendor/bootstrap/less/input-groups.less +1 -1
  128. data/public/vendor/bootstrap/less/jumbotron.less +16 -5
  129. data/public/vendor/bootstrap/less/labels.less +9 -5
  130. data/public/vendor/bootstrap/less/mixins.less +73 -43
  131. data/public/vendor/bootstrap/less/modals.less +8 -0
  132. data/public/vendor/bootstrap/less/navbar.less +251 -189
  133. data/public/vendor/bootstrap/less/navs.less +13 -12
  134. data/public/vendor/bootstrap/less/pager.less +1 -1
  135. data/public/vendor/bootstrap/less/pagination.less +20 -9
  136. data/public/vendor/bootstrap/less/panels.less +28 -8
  137. data/public/vendor/bootstrap/less/progress-bars.less +6 -10
  138. data/public/vendor/bootstrap/less/responsive-utilities.less +120 -49
  139. data/public/vendor/bootstrap/less/scaffolding.less +37 -18
  140. data/public/vendor/bootstrap/less/tables.less +84 -59
  141. data/public/vendor/bootstrap/less/theme.less +232 -0
  142. data/public/vendor/bootstrap/less/thumbnails.less +8 -19
  143. data/public/vendor/bootstrap/less/type.less +2 -2
  144. data/public/vendor/bootstrap/less/variables.less +63 -50
  145. data/public/vendor/bootstrap/package.json +2 -1
  146. data/public/vendor/components-backbone/LICENSE +22 -0
  147. data/public/vendor/components-backbone/README.md +10 -0
  148. data/public/vendor/components-backbone/backbone-min.js +4 -0
  149. data/public/vendor/components-backbone/backbone.js +1571 -0
  150. data/public/vendor/components-backbone/bower.json +17 -0
  151. data/public/vendor/components-backbone/component.json +21 -0
  152. data/public/vendor/components-backbone/composer.json +37 -0
  153. data/public/vendor/components-backbone/package.json +24 -0
  154. data/public/vendor/d3.layout.cloud.js +401 -0
  155. data/public/vendor/replacejs/CHANGELOG.md +4 -0
  156. data/public/vendor/replacejs/replace.js +21 -2
  157. data/public/vendor/underscore/CNAME +1 -0
  158. data/public/vendor/underscore/CONTRIBUTING.md +9 -0
  159. data/public/vendor/underscore/LICENSE +22 -0
  160. data/public/vendor/underscore/README.md +19 -0
  161. data/public/vendor/underscore/Rakefile +10 -0
  162. data/public/vendor/underscore/docs/docco.css +192 -0
  163. data/public/vendor/underscore/docs/favicon.ico +0 -0
  164. data/public/vendor/underscore/docs/images/background.png +0 -0
  165. data/public/vendor/underscore/docs/images/underscore.png +0 -0
  166. data/public/vendor/underscore/docs/underscore.html +823 -0
  167. data/public/vendor/underscore/favicon.ico +0 -0
  168. data/public/vendor/underscore/index.html +2467 -0
  169. data/public/vendor/underscore/index.js +1 -0
  170. data/public/vendor/underscore/package.json +16 -0
  171. data/public/vendor/underscore/test/arrays.js +200 -0
  172. data/public/vendor/underscore/test/chaining.js +59 -0
  173. data/public/vendor/underscore/test/collections.js +453 -0
  174. data/public/vendor/underscore/test/functions.js +265 -0
  175. data/public/vendor/underscore/test/index.html +44 -0
  176. data/public/vendor/underscore/test/objects.js +570 -0
  177. data/public/vendor/underscore/test/speed.js +75 -0
  178. data/public/vendor/underscore/test/utility.js +266 -0
  179. data/public/vendor/underscore/test/vendor/jquery.js +9404 -0
  180. data/public/vendor/underscore/test/vendor/jslitmus.js +670 -0
  181. data/public/vendor/underscore/test/vendor/qunit.css +235 -0
  182. data/public/vendor/underscore/test/vendor/qunit.js +1977 -0
  183. data/public/vendor/underscore/test/vendor/runner.js +98 -0
  184. data/public/vendor/underscore/underscore-min.js +1 -0
  185. data/public/vendor/underscore/underscore.js +1226 -0
  186. data/views/dashboard.haml +1 -1
  187. data/views/layout.haml +8 -4
  188. metadata +132 -25
  189. data/public/vendor/bootstrap/_layouts/customize.html +0 -52
  190. data/public/vendor/bootstrap/assets/js/jquery.bbq.min.js +0 -1287
  191. data/public/vendor/bootstrap-glyphicons/CHANGELOG.md +0 -3
  192. data/public/vendor/bootstrap-glyphicons/CNAME +0 -1
  193. data/public/vendor/bootstrap-glyphicons/CONTRIBUTING.md +0 -54
  194. data/public/vendor/bootstrap-glyphicons/LICENSE +0 -19
  195. data/public/vendor/bootstrap-glyphicons/README.md +0 -61
  196. data/public/vendor/bootstrap-glyphicons/_config.yml +0 -12
  197. data/public/vendor/bootstrap-glyphicons/composer.json +0 -9
  198. data/public/vendor/bootstrap-glyphicons/css/bootstrap-glyphicons.css +0 -2
  199. data/public/vendor/bootstrap-glyphicons/css/bootstrap.css +0 -9
  200. data/public/vendor/bootstrap-glyphicons/css/docs.css +0 -160
  201. data/public/vendor/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.eot +0 -0
  202. data/public/vendor/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.otf +0 -0
  203. data/public/vendor/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.svg +0 -175
  204. data/public/vendor/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.ttf +0 -0
  205. data/public/vendor/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.woff +0 -0
  206. data/public/vendor/bootstrap-glyphicons/index.html +0 -255
  207. data/public/vendor/bootstrap-glyphicons/less/bootstrap-glyphicons.less +0 -201
  208. data/public/vendor/bootstrap-glyphicons/package.json +0 -18
@@ -2,16 +2,263 @@
2
2
  layout: default
3
3
  title: Components
4
4
  slug: components
5
- lead: "Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more."
5
+ lead: "Over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more."
6
6
  base_url: "../"
7
7
  ---
8
8
 
9
9
 
10
+ <!-- Glyphicons
11
+ ================================================== -->
12
+ <div class="bs-docs-section">
13
+ <div class="page-header">
14
+ <h1 id="glyphicons">Glyphicons</h1>
15
+ </div>
16
+
17
+ <h2 id="glyphicons-glyphs">Available glyphs</h2>
18
+ <p>Includes 180 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
19
+ <ul class="bs-glyphicons">
20
+ <li><span class="glyphicon glyphicon-adjust"></span> .glyphicon .glyphicon-adjust</li>
21
+ <li><span class="glyphicon glyphicon-align-center"></span> .glyphicon .glyphicon-align-center</li>
22
+ <li><span class="glyphicon glyphicon-align-justify"></span> .glyphicon .glyphicon-align-justify</li>
23
+ <li><span class="glyphicon glyphicon-align-left"></span> .glyphicon .glyphicon-align-left</li>
24
+ <li><span class="glyphicon glyphicon-align-right"></span> .glyphicon .glyphicon-align-right</li>
25
+ <li><span class="glyphicon glyphicon-arrow-down"></span> .glyphicon .glyphicon-arrow-down</li>
26
+ <li><span class="glyphicon glyphicon-arrow-left"></span> .glyphicon .glyphicon-arrow-left</li>
27
+ <li><span class="glyphicon glyphicon-arrow-right"></span> .glyphicon .glyphicon-arrow-right</li>
28
+ <li><span class="glyphicon glyphicon-arrow-up"></span> .glyphicon .glyphicon-arrow-up</li>
29
+ <li><span class="glyphicon glyphicon-asterisk"></span> .glyphicon .glyphicon-asterisk</li>
30
+ <li><span class="glyphicon glyphicon-backward"></span> .glyphicon .glyphicon-backward</li>
31
+ <li><span class="glyphicon glyphicon-ban-circle"></span> .glyphicon .glyphicon-ban-circle</li>
32
+ <li><span class="glyphicon glyphicon-barcode"></span> .glyphicon .glyphicon-barcode</li>
33
+ <li><span class="glyphicon glyphicon-bell"></span> .glyphicon .glyphicon-bell</li>
34
+ <li><span class="glyphicon glyphicon-bold"></span> .glyphicon .glyphicon-bold</li>
35
+ <li><span class="glyphicon glyphicon-book"></span> .glyphicon .glyphicon-book</li>
36
+ <li><span class="glyphicon glyphicon-bookmark"></span> .glyphicon .glyphicon-bookmark</li>
37
+ <li><span class="glyphicon glyphicon-briefcase"></span> .glyphicon .glyphicon-briefcase</li>
38
+ <li><span class="glyphicon glyphicon-bullhorn"></span> .glyphicon .glyphicon-bullhorn</li>
39
+ <li><span class="glyphicon glyphicon-calendar"></span> .glyphicon .glyphicon-calendar</li>
40
+ <li><span class="glyphicon glyphicon-camera"></span> .glyphicon .glyphicon-camera</li>
41
+ <li><span class="glyphicon glyphicon-certificate"></span> .glyphicon .glyphicon-certificate</li>
42
+ <li><span class="glyphicon glyphicon-check"></span> .glyphicon .glyphicon-check</li>
43
+ <li><span class="glyphicon glyphicon-chevron-down"></span> .glyphicon .glyphicon-chevron-down</li>
44
+ <li><span class="glyphicon glyphicon-chevron-left"></span> .glyphicon .glyphicon-chevron-left</li>
45
+ <li><span class="glyphicon glyphicon-chevron-right"></span> .glyphicon .glyphicon-chevron-right</li>
46
+ <li><span class="glyphicon glyphicon-chevron-up"></span> .glyphicon .glyphicon-chevron-up</li>
47
+ <li><span class="glyphicon glyphicon-circle-arrow-down"></span> .glyphicon .glyphicon-circle-arrow-down</li>
48
+ <li><span class="glyphicon glyphicon-circle-arrow-left"></span> .glyphicon .glyphicon-circle-arrow-left</li>
49
+ <li><span class="glyphicon glyphicon-circle-arrow-right"></span> .glyphicon .glyphicon-circle-arrow-right</li>
50
+ <li><span class="glyphicon glyphicon-circle-arrow-up"></span> .glyphicon .glyphicon-circle-arrow-up</li>
51
+ <li><span class="glyphicon glyphicon-cloud"></span> .glyphicon .glyphicon-cloud</li>
52
+ <li><span class="glyphicon glyphicon-cloud-download"></span> .glyphicon .glyphicon-cloud-download</li>
53
+ <li><span class="glyphicon glyphicon-cloud-upload"></span> .glyphicon .glyphicon-cloud-upload</li>
54
+ <li><span class="glyphicon glyphicon-cog"></span> .glyphicon .glyphicon-cog</li>
55
+ <li><span class="glyphicon glyphicon-collapse-down"></span> .glyphicon .glyphicon-collapse-down</li>
56
+ <li><span class="glyphicon glyphicon-collapse-up"></span> .glyphicon .glyphicon-collapse-up</li>
57
+ <li><span class="glyphicon glyphicon-comment"></span> .glyphicon .glyphicon-comment</li>
58
+ <li><span class="glyphicon glyphicon-compressed"></span> .glyphicon .glyphicon-compressed</li>
59
+ <li><span class="glyphicon glyphicon-copyright-mark"></span> .glyphicon .glyphicon-copyright-mark</li>
60
+ <li><span class="glyphicon glyphicon-credit-card"></span> .glyphicon .glyphicon-credit-card</li>
61
+ <li><span class="glyphicon glyphicon-cutlery"></span> .glyphicon .glyphicon-cutlery</li>
62
+ <li><span class="glyphicon glyphicon-dashboard"></span> .glyphicon .glyphicon-dashboard</li>
63
+ <li><span class="glyphicon glyphicon-download"></span> .glyphicon .glyphicon-download</li>
64
+ <li><span class="glyphicon glyphicon-download-alt"></span> .glyphicon .glyphicon-download-alt</li>
65
+ <li><span class="glyphicon glyphicon-earphone"></span> .glyphicon .glyphicon-earphone</li>
66
+ <li><span class="glyphicon glyphicon-edit"></span> .glyphicon .glyphicon-edit</li>
67
+ <li><span class="glyphicon glyphicon-eject"></span> .glyphicon .glyphicon-eject</li>
68
+ <li><span class="glyphicon glyphicon-envelope"></span> .glyphicon .glyphicon-envelope</li>
69
+ <li><span class="glyphicon glyphicon-euro"></span> .glyphicon .glyphicon-euro</li>
70
+ <li><span class="glyphicon glyphicon-exclamation-sign"></span> .glyphicon .glyphicon-exclamation-sign</li>
71
+ <li><span class="glyphicon glyphicon-expand"></span> .glyphicon .glyphicon-expand</li>
72
+ <li><span class="glyphicon glyphicon-export"></span> .glyphicon .glyphicon-export</li>
73
+ <li><span class="glyphicon glyphicon-eye-close"></span> .glyphicon .glyphicon-eye-close</li>
74
+ <li><span class="glyphicon glyphicon-eye-open"></span> .glyphicon .glyphicon-eye-open</li>
75
+ <li><span class="glyphicon glyphicon-facetime-video"></span> .glyphicon .glyphicon-facetime-video</li>
76
+ <li><span class="glyphicon glyphicon-fast-backward"></span> .glyphicon .glyphicon-fast-backward</li>
77
+ <li><span class="glyphicon glyphicon-fast-forward"></span> .glyphicon .glyphicon-fast-forward</li>
78
+ <li><span class="glyphicon glyphicon-file"></span> .glyphicon .glyphicon-file</li>
79
+ <li><span class="glyphicon glyphicon-film"></span> .glyphicon .glyphicon-film</li>
80
+ <li><span class="glyphicon glyphicon-filter"></span> .glyphicon .glyphicon-filter</li>
81
+ <li><span class="glyphicon glyphicon-fire"></span> .glyphicon .glyphicon-fire</li>
82
+ <li><span class="glyphicon glyphicon-flag"></span> .glyphicon .glyphicon-flag</li>
83
+ <li><span class="glyphicon glyphicon-flash"></span> .glyphicon .glyphicon-flash</li>
84
+ <li><span class="glyphicon glyphicon-floppy-disk"></span> .glyphicon .glyphicon-floppy-disk</li>
85
+ <li><span class="glyphicon glyphicon-floppy-open"></span> .glyphicon .glyphicon-floppy-open</li>
86
+ <li><span class="glyphicon glyphicon-floppy-remove"></span> .glyphicon .glyphicon-floppy-remove</li>
87
+ <li><span class="glyphicon glyphicon-floppy-save"></span> .glyphicon .glyphicon-floppy-save</li>
88
+ <li><span class="glyphicon glyphicon-floppy-saved"></span> .glyphicon .glyphicon-floppy-saved</li>
89
+ <li><span class="glyphicon glyphicon-folder-close"></span> .glyphicon .glyphicon-folder-close</li>
90
+ <li><span class="glyphicon glyphicon-folder-open"></span> .glyphicon .glyphicon-folder-open</li>
91
+ <li><span class="glyphicon glyphicon-font"></span> .glyphicon .glyphicon-font</li>
92
+ <li><span class="glyphicon glyphicon-forward"></span> .glyphicon .glyphicon-forward</li>
93
+ <li><span class="glyphicon glyphicon-fullscreen"></span> .glyphicon .glyphicon-fullscreen</li>
94
+ <li><span class="glyphicon glyphicon-gbp"></span> .glyphicon .glyphicon-gbp</li>
95
+ <li><span class="glyphicon glyphicon-gift"></span> .glyphicon .glyphicon-gift</li>
96
+ <li><span class="glyphicon glyphicon-glass"></span> .glyphicon .glyphicon-glass</li>
97
+ <li><span class="glyphicon glyphicon-globe"></span> .glyphicon .glyphicon-globe</li>
98
+ <li><span class="glyphicon glyphicon-hand-down"></span> .glyphicon .glyphicon-hand-down</li>
99
+ <li><span class="glyphicon glyphicon-hand-left"></span> .glyphicon .glyphicon-hand-left</li>
100
+ <li><span class="glyphicon glyphicon-hand-right"></span> .glyphicon .glyphicon-hand-right</li>
101
+ <li><span class="glyphicon glyphicon-hand-up"></span> .glyphicon .glyphicon-hand-up</li>
102
+ <li><span class="glyphicon glyphicon-hd-video"></span> .glyphicon .glyphicon-hd-video</li>
103
+ <li><span class="glyphicon glyphicon-hdd"></span> .glyphicon .glyphicon-hdd</li>
104
+ <li><span class="glyphicon glyphicon-header"></span> .glyphicon .glyphicon-header</li>
105
+ <li><span class="glyphicon glyphicon-headphones"></span> .glyphicon .glyphicon-headphones</li>
106
+ <li><span class="glyphicon glyphicon-heart"></span> .glyphicon .glyphicon-heart</li>
107
+ <li><span class="glyphicon glyphicon-heart-empty"></span> .glyphicon .glyphicon-heart-empty</li>
108
+ <li><span class="glyphicon glyphicon-home"></span> .glyphicon .glyphicon-home</li>
109
+ <li><span class="glyphicon glyphicon-import"></span> .glyphicon .glyphicon-import</li>
110
+ <li><span class="glyphicon glyphicon-inbox"></span> .glyphicon .glyphicon-inbox</li>
111
+ <li><span class="glyphicon glyphicon-indent-left"></span> .glyphicon .glyphicon-indent-left</li>
112
+ <li><span class="glyphicon glyphicon-indent-right"></span> .glyphicon .glyphicon-indent-right</li>
113
+ <li><span class="glyphicon glyphicon-info-sign"></span> .glyphicon .glyphicon-info-sign</li>
114
+ <li><span class="glyphicon glyphicon-italic"></span> .glyphicon .glyphicon-italic</li>
115
+ <li><span class="glyphicon glyphicon-leaf"></span> .glyphicon .glyphicon-leaf</li>
116
+ <li><span class="glyphicon glyphicon-link"></span> .glyphicon .glyphicon-link</li>
117
+ <li><span class="glyphicon glyphicon-list"></span> .glyphicon .glyphicon-list</li>
118
+ <li><span class="glyphicon glyphicon-list-alt"></span> .glyphicon .glyphicon-list-alt</li>
119
+ <li><span class="glyphicon glyphicon-lock"></span> .glyphicon .glyphicon-lock</li>
120
+ <li><span class="glyphicon glyphicon-log-in"></span> .glyphicon .glyphicon-log-in</li>
121
+ <li><span class="glyphicon glyphicon-log-out"></span> .glyphicon .glyphicon-log-out</li>
122
+ <li><span class="glyphicon glyphicon-magnet"></span> .glyphicon .glyphicon-magnet</li>
123
+ <li><span class="glyphicon glyphicon-map-marker"></span> .glyphicon .glyphicon-map-marker</li>
124
+ <li><span class="glyphicon glyphicon-minus"></span> .glyphicon .glyphicon-minus</li>
125
+ <li><span class="glyphicon glyphicon-minus-sign"></span> .glyphicon .glyphicon-minus-sign</li>
126
+ <li><span class="glyphicon glyphicon-move"></span> .glyphicon .glyphicon-move</li>
127
+ <li><span class="glyphicon glyphicon-music"></span> .glyphicon .glyphicon-music</li>
128
+ <li><span class="glyphicon glyphicon-new-window"></span> .glyphicon .glyphicon-new-window</li>
129
+ <li><span class="glyphicon glyphicon-off"></span> .glyphicon .glyphicon-off</li>
130
+ <li><span class="glyphicon glyphicon-ok"></span> .glyphicon .glyphicon-ok</li>
131
+ <li><span class="glyphicon glyphicon-ok-circle"></span> .glyphicon .glyphicon-ok-circle</li>
132
+ <li><span class="glyphicon glyphicon-ok-sign"></span> .glyphicon .glyphicon-ok-sign</li>
133
+ <li><span class="glyphicon glyphicon-open"></span> .glyphicon .glyphicon-open</li>
134
+ <li><span class="glyphicon glyphicon-paperclip"></span> .glyphicon .glyphicon-paperclip</li>
135
+ <li><span class="glyphicon glyphicon-pause"></span> .glyphicon .glyphicon-pause</li>
136
+ <li><span class="glyphicon glyphicon-pencil"></span> .glyphicon .glyphicon-pencil</li>
137
+ <li><span class="glyphicon glyphicon-phone"></span> .glyphicon .glyphicon-phone</li>
138
+ <li><span class="glyphicon glyphicon-phone-alt"></span> .glyphicon .glyphicon-phone-alt</li>
139
+ <li><span class="glyphicon glyphicon-picture"></span> .glyphicon .glyphicon-picture</li>
140
+ <li><span class="glyphicon glyphicon-plane"></span> .glyphicon .glyphicon-plane</li>
141
+ <li><span class="glyphicon glyphicon-play"></span> .glyphicon .glyphicon-play</li>
142
+ <li><span class="glyphicon glyphicon-play-circle"></span> .glyphicon .glyphicon-play-circle</li>
143
+ <li><span class="glyphicon glyphicon-plus"></span> .glyphicon .glyphicon-plus</li>
144
+ <li><span class="glyphicon glyphicon-plus-sign"></span> .glyphicon .glyphicon-plus-sign</li>
145
+ <li><span class="glyphicon glyphicon-print"></span> .glyphicon .glyphicon-print</li>
146
+ <li><span class="glyphicon glyphicon-pushpin"></span> .glyphicon .glyphicon-pushpin</li>
147
+ <li><span class="glyphicon glyphicon-qrcode"></span> .glyphicon .glyphicon-qrcode</li>
148
+ <li><span class="glyphicon glyphicon-question-sign"></span> .glyphicon .glyphicon-question-sign</li>
149
+ <li><span class="glyphicon glyphicon-random"></span> .glyphicon .glyphicon-random</li>
150
+ <li><span class="glyphicon glyphicon-record"></span> .glyphicon .glyphicon-record</li>
151
+ <li><span class="glyphicon glyphicon-refresh"></span> .glyphicon .glyphicon-refresh</li>
152
+ <li><span class="glyphicon glyphicon-registration-mark"></span> .glyphicon .glyphicon-registration-mark</li>
153
+ <li><span class="glyphicon glyphicon-remove"></span> .glyphicon .glyphicon-remove</li>
154
+ <li><span class="glyphicon glyphicon-remove-circle"></span> .glyphicon .glyphicon-remove-circle</li>
155
+ <li><span class="glyphicon glyphicon-remove-sign"></span> .glyphicon .glyphicon-remove-sign</li>
156
+ <li><span class="glyphicon glyphicon-repeat"></span> .glyphicon .glyphicon-repeat</li>
157
+ <li><span class="glyphicon glyphicon-resize-full"></span> .glyphicon .glyphicon-resize-full</li>
158
+ <li><span class="glyphicon glyphicon-resize-horizontal"></span> .glyphicon .glyphicon-resize-horizontal</li>
159
+ <li><span class="glyphicon glyphicon-resize-small"></span> .glyphicon .glyphicon-resize-small</li>
160
+ <li><span class="glyphicon glyphicon-resize-vertical"></span> .glyphicon .glyphicon-resize-vertical</li>
161
+ <li><span class="glyphicon glyphicon-retweet"></span> .glyphicon .glyphicon-retweet</li>
162
+ <li><span class="glyphicon glyphicon-road"></span> .glyphicon .glyphicon-road</li>
163
+ <li><span class="glyphicon glyphicon-save"></span> .glyphicon .glyphicon-save</li>
164
+ <li><span class="glyphicon glyphicon-saved"></span> .glyphicon .glyphicon-saved</li>
165
+ <li><span class="glyphicon glyphicon-screenshot"></span> .glyphicon .glyphicon-screenshot</li>
166
+ <li><span class="glyphicon glyphicon-sd-video"></span> .glyphicon .glyphicon-sd-video</li>
167
+ <li><span class="glyphicon glyphicon-search"></span> .glyphicon .glyphicon-search</li>
168
+ <li><span class="glyphicon glyphicon-send"></span> .glyphicon .glyphicon-send</li>
169
+ <li><span class="glyphicon glyphicon-share"></span> .glyphicon .glyphicon-share</li>
170
+ <li><span class="glyphicon glyphicon-share-alt"></span> .glyphicon .glyphicon-share-alt</li>
171
+ <li><span class="glyphicon glyphicon-shopping-cart"></span> .glyphicon .glyphicon-shopping-cart</li>
172
+ <li><span class="glyphicon glyphicon-signal"></span> .glyphicon .glyphicon-signal</li>
173
+ <li><span class="glyphicon glyphicon-sort"></span> .glyphicon .glyphicon-sort</li>
174
+ <li><span class="glyphicon glyphicon-sort-by-alphabet"></span> .glyphicon .glyphicon-sort-by-alphabet</li>
175
+ <li><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span> .glyphicon .glyphicon-sort-by-alphabet-alt</li>
176
+ <li><span class="glyphicon glyphicon-sort-by-attributes"></span> .glyphicon .glyphicon-sort-by-attributes</li>
177
+ <li><span class="glyphicon glyphicon-sort-by-attributes-alt"></span> .glyphicon .glyphicon-sort-by-attributes-alt</li>
178
+ <li><span class="glyphicon glyphicon-sort-by-order"></span> .glyphicon .glyphicon-sort-by-order</li>
179
+ <li><span class="glyphicon glyphicon-sort-by-order-alt"></span> .glyphicon .glyphicon-sort-by-order-alt</li>
180
+ <li><span class="glyphicon glyphicon-sound-5-1"></span> .glyphicon .glyphicon-sound-5-1</li>
181
+ <li><span class="glyphicon glyphicon-sound-6-1"></span> .glyphicon .glyphicon-sound-6-1</li>
182
+ <li><span class="glyphicon glyphicon-sound-7-1"></span> .glyphicon .glyphicon-sound-7-1</li>
183
+ <li><span class="glyphicon glyphicon-sound-dolby"></span> .glyphicon .glyphicon-sound-dolby</li>
184
+ <li><span class="glyphicon glyphicon-sound-stereo"></span> .glyphicon .glyphicon-sound-stereo</li>
185
+ <li><span class="glyphicon glyphicon-star"></span> .glyphicon .glyphicon-star</li>
186
+ <li><span class="glyphicon glyphicon-star-empty"></span> .glyphicon .glyphicon-star-empty</li>
187
+ <li><span class="glyphicon glyphicon-stats"></span> .glyphicon .glyphicon-stats</li>
188
+ <li><span class="glyphicon glyphicon-step-backward"></span> .glyphicon .glyphicon-step-backward</li>
189
+ <li><span class="glyphicon glyphicon-step-forward"></span> .glyphicon .glyphicon-step-forward</li>
190
+ <li><span class="glyphicon glyphicon-stop"></span> .glyphicon .glyphicon-stop</li>
191
+ <li><span class="glyphicon glyphicon-subtitles"></span> .glyphicon .glyphicon-subtitles</li>
192
+ <li><span class="glyphicon glyphicon-tag"></span> .glyphicon .glyphicon-tag</li>
193
+ <li><span class="glyphicon glyphicon-tags"></span> .glyphicon .glyphicon-tags</li>
194
+ <li><span class="glyphicon glyphicon-tasks"></span> .glyphicon .glyphicon-tasks</li>
195
+ <li><span class="glyphicon glyphicon-text-height"></span> .glyphicon .glyphicon-text-height</li>
196
+ <li><span class="glyphicon glyphicon-text-width"></span> .glyphicon .glyphicon-text-width</li>
197
+ <li><span class="glyphicon glyphicon-th"></span> .glyphicon .glyphicon-th</li>
198
+ <li><span class="glyphicon glyphicon-th-large"></span> .glyphicon .glyphicon-th-large</li>
199
+ <li><span class="glyphicon glyphicon-th-list"></span> .glyphicon .glyphicon-th-list</li>
200
+ <li><span class="glyphicon glyphicon-thumbs-down"></span> .glyphicon .glyphicon-thumbs-down</li>
201
+ <li><span class="glyphicon glyphicon-thumbs-up"></span> .glyphicon .glyphicon-thumbs-up</li>
202
+ <li><span class="glyphicon glyphicon-time"></span> .glyphicon .glyphicon-time</li>
203
+ <li><span class="glyphicon glyphicon-tint"></span> .glyphicon .glyphicon-tint</li>
204
+ <li><span class="glyphicon glyphicon-tower"></span> .glyphicon .glyphicon-tower</li>
205
+ <li><span class="glyphicon glyphicon-transfer"></span> .glyphicon .glyphicon-transfer</li>
206
+ <li><span class="glyphicon glyphicon-trash"></span> .glyphicon .glyphicon-trash</li>
207
+ <li><span class="glyphicon glyphicon-tree-conifer"></span> .glyphicon .glyphicon-tree-conifer</li>
208
+ <li><span class="glyphicon glyphicon-tree-deciduous"></span> .glyphicon .glyphicon-tree-deciduous</li>
209
+ <li><span class="glyphicon glyphicon-unchecked"></span> .glyphicon .glyphicon-unchecked</li>
210
+ <li><span class="glyphicon glyphicon-upload"></span> .glyphicon .glyphicon-upload</li>
211
+ <li><span class="glyphicon glyphicon-usd"></span> .glyphicon .glyphicon-usd</li>
212
+ <li><span class="glyphicon glyphicon-user"></span> .glyphicon .glyphicon-user</li>
213
+ <li><span class="glyphicon glyphicon-volume-down"></span> .glyphicon .glyphicon-volume-down</li>
214
+ <li><span class="glyphicon glyphicon-volume-off"></span> .glyphicon .glyphicon-volume-off</li>
215
+ <li><span class="glyphicon glyphicon-volume-up"></span> .glyphicon .glyphicon-volume-up</li>
216
+ <li><span class="glyphicon glyphicon-warning-sign"></span> .glyphicon .glyphicon-warning-sign</li>
217
+ <li><span class="glyphicon glyphicon-wrench"></span> .glyphicon .glyphicon-wrench</li>
218
+ <li><span class="glyphicon glyphicon-zoom-in"></span> .glyphicon .glyphicon-zoom-in</li>
219
+ <li><span class="glyphicon glyphicon-zoom-out"></span> .glyphicon .glyphicon-zoom-out</li>
220
+ </ul>
221
+
222
+
223
+ <h2 id="glyphicons-how-to-use">How to use</h2>
224
+ <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
225
+ {% highlight html %}
226
+ <span class="glyphicon glyphicon-search"></span>
227
+ {% endhighlight %}
228
+
229
+
230
+ <h2 id="glyphicons-examples">Examples</h2>
231
+ <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
232
+ <div class="bs-example">
233
+ <div class="btn-toolbar">
234
+ <div class="btn-group">
235
+ <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
236
+ <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
237
+ <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
238
+ <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
239
+ </div>
240
+ </div>
241
+ <div class="btn-toolbar">
242
+ <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button>
243
+ <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button>
244
+ <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button>
245
+ <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span> Star</button>
246
+ </div>
247
+ </div>
248
+ {% highlight html %}
249
+ <button type="button" class="btn btn-default btn-lg">
250
+ <span class="glyphicon glyphicon-star"></span> Star
251
+ </button>
252
+ {% endhighlight %}
253
+
254
+ </div>
255
+
256
+
10
257
  <!-- Dropdowns
11
258
  ================================================== -->
12
259
  <div class="bs-docs-section">
13
260
  <div class="page-header">
14
- <h1 id="dropdowns">Dropdown menus</h1>
261
+ <h1 id="dropdowns">Dropdowns</h1>
15
262
  </div>
16
263
  <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
17
264
 
@@ -42,7 +289,7 @@ base_url: "../"
42
289
  </div>
43
290
  {% endhighlight %}
44
291
 
45
- <h3 id="dropdowns-alignment">Aligning the menus</h3>
292
+ <h3 id="dropdowns-alignment">Aligninment options</h3>
46
293
  <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
47
294
  {% highlight html %}
48
295
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
@@ -50,7 +297,7 @@ base_url: "../"
50
297
  </ul>
51
298
  {% endhighlight %}
52
299
 
53
- <h3 id="dropdowns-headers">Dropdown headers</h3>
300
+ <h3 id="dropdowns-headers">Headers</h3>
54
301
  <p>Add a header to label sections of actions in any dropdown menu.</p>
55
302
  <div class="bs-example">
56
303
  <div class="dropdown clearfix">
@@ -76,7 +323,7 @@ base_url: "../"
76
323
  </ul>
77
324
  {% endhighlight %}
78
325
 
79
- <h3 id="dropdowns-disabled">Disabled menu options</h3>
326
+ <h3 id="dropdowns-disabled">Disabled menu items</h3>
80
327
  <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
81
328
  <div class="bs-example">
82
329
  <div class="dropdown clearfix">
@@ -112,7 +359,7 @@ base_url: "../"
112
359
  <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
113
360
  </div>
114
361
 
115
- <h3 id="btn-groups-single">Basic button group</h3>
362
+ <h3 id="btn-groups-single">Basic example</h3>
116
363
  <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
117
364
  <div class="bs-example">
118
365
  <div class="btn-group" style="margin: 9px 0 5px;">
@@ -129,7 +376,7 @@ base_url: "../"
129
376
  </div>
130
377
  {% endhighlight %}
131
378
 
132
- <h3 id="btn-groups-toolbar">Multiple button groups</h3>
379
+ <h3 id="btn-groups-toolbar">Button toolbar</h3>
133
380
  <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
134
381
  <div class="bs-example">
135
382
  <div class="btn-toolbar" style="margin: 0;">
@@ -157,40 +404,46 @@ base_url: "../"
157
404
  </div>
158
405
  {% endhighlight %}
159
406
 
160
- <h3 id="btn-groups-sizing">Button group sizing</h3>
407
+ <h3 id="btn-groups-sizing">Sizing</h3>
161
408
  <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
162
409
  <div class="bs-example">
163
- <div class="btn-group btn-group-lg">
164
- <button type="button" class="btn btn-default">Left</button>
165
- <button type="button" class="btn btn-default">Middle</button>
166
- <button type="button" class="btn btn-default">Right</button>
410
+ <div class="btn-toolbar">
411
+ <div class="btn-group btn-group-lg">
412
+ <button type="button" class="btn btn-default">Left</button>
413
+ <button type="button" class="btn btn-default">Middle</button>
414
+ <button type="button" class="btn btn-default">Right</button>
415
+ </div>
167
416
  </div>
168
- <div class="btn-group">
169
- <button type="button" class="btn btn-default">Left</button>
170
- <button type="button" class="btn btn-default">Middle</button>
171
- <button type="button" class="btn btn-default">Right</button>
417
+ <div class="btn-toolbar">
418
+ <div class="btn-group">
419
+ <button type="button" class="btn btn-default">Left</button>
420
+ <button type="button" class="btn btn-default">Middle</button>
421
+ <button type="button" class="btn btn-default">Right</button>
422
+ </div>
172
423
  </div>
173
- <div class="btn-group btn-group-sm">
174
- <button type="button" class="btn btn-default">Left</button>
175
- <button type="button" class="btn btn-default">Middle</button>
176
- <button type="button" class="btn btn-default">Right</button>
424
+ <div class="btn-toolbar">
425
+ <div class="btn-group btn-group-sm">
426
+ <button type="button" class="btn btn-default">Left</button>
427
+ <button type="button" class="btn btn-default">Middle</button>
428
+ <button type="button" class="btn btn-default">Right</button>
429
+ </div>
177
430
  </div>
178
- <div class="btn-group btn-group-xs">
179
- <button type="button" class="btn btn-default">Left</button>
180
- <button type="button" class="btn btn-default">Middle</button>
181
- <button type="button" class="btn btn-default">Right</button>
431
+ <div class="btn-toolbar">
432
+ <div class="btn-group btn-group-xs">
433
+ <button type="button" class="btn btn-default">Left</button>
434
+ <button type="button" class="btn btn-default">Middle</button>
435
+ <button type="button" class="btn btn-default">Right</button>
436
+ </div>
182
437
  </div>
183
438
  </div>
184
439
  {% highlight html %}
185
- <div class="btn-toolbar">
186
- <div class="btn-group btn-group-lg">...</div>
187
- <div class="btn-group">...</div>
188
- <div class="btn-group btn-group-sm">...</div>
189
- <div class="btn-group btn-group-xs">...</div>
190
- </div>
440
+ <div class="btn-group btn-group-lg">...</div>
441
+ <div class="btn-group">...</div>
442
+ <div class="btn-group btn-group-sm">...</div>
443
+ <div class="btn-group btn-group-xs">...</div>
191
444
  {% endhighlight %}
192
445
 
193
- <h3 id="btn-groups-nested">Nested button groups</h3>
446
+ <h3 id="btn-groups-nested">Nesting</h3>
194
447
  <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
195
448
  <div class="bs-example">
196
449
  <div class="btn-group">
@@ -198,11 +451,11 @@ base_url: "../"
198
451
  <button type="button" class="btn btn-default">2</button>
199
452
 
200
453
  <div class="btn-group">
201
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
454
+ <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
202
455
  Dropdown
203
456
  <span class="caret"></span>
204
457
  </button>
205
- <ul class="dropdown-menu">
458
+ <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
206
459
  <li><a href="#">Dropdown link</a></li>
207
460
  <li><a href="#">Dropdown link</a></li>
208
461
  </ul>
@@ -227,18 +480,18 @@ base_url: "../"
227
480
  </div>
228
481
  {% endhighlight %}
229
482
 
230
- <h3 id="btn-groups-vertical">Vertical button groups</h3>
483
+ <h3 id="btn-groups-vertical">Vertical variation</h3>
231
484
  <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
232
485
  <div class="bs-example">
233
486
  <div class="btn-group-vertical">
234
487
  <button type="button" class="btn btn-default">Button</button>
235
488
  <button type="button" class="btn btn-default">Button</button>
236
489
  <div class="btn-group">
237
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
490
+ <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
238
491
  Dropdown
239
492
  <span class="caret"></span>
240
493
  </button>
241
- <ul class="dropdown-menu">
494
+ <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
242
495
  <li><a href="#">Dropdown link</a></li>
243
496
  <li><a href="#">Dropdown link</a></li>
244
497
  </ul>
@@ -246,31 +499,31 @@ base_url: "../"
246
499
  <button type="button" class="btn btn-default">Button</button>
247
500
  <button type="button" class="btn btn-default">Button</button>
248
501
  <div class="btn-group">
249
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
502
+ <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
250
503
  Dropdown
251
504
  <span class="caret"></span>
252
505
  </button>
253
- <ul class="dropdown-menu">
506
+ <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
254
507
  <li><a href="#">Dropdown link</a></li>
255
508
  <li><a href="#">Dropdown link</a></li>
256
509
  </ul>
257
510
  </div>
258
511
  <div class="btn-group">
259
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
512
+ <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
260
513
  Dropdown
261
514
  <span class="caret"></span>
262
515
  </button>
263
- <ul class="dropdown-menu">
516
+ <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
264
517
  <li><a href="#">Dropdown link</a></li>
265
518
  <li><a href="#">Dropdown link</a></li>
266
519
  </ul>
267
520
  </div>
268
521
  <div class="btn-group">
269
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
522
+ <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
270
523
  Dropdown
271
524
  <span class="caret"></span>
272
525
  </button>
273
- <ul class="dropdown-menu">
526
+ <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
274
527
  <li><a href="#">Dropdown link</a></li>
275
528
  <li><a href="#">Dropdown link</a></li>
276
529
  </ul>
@@ -283,7 +536,7 @@ base_url: "../"
283
536
  </div>
284
537
  {% endhighlight %}
285
538
 
286
- <h3 id="btn-groups-justified">Justified button groups</h3>
539
+ <h3 id="btn-groups-justified">Justified link variation</h3>
287
540
  <p>Make a group of buttons stretch at the same size to span the entire width of its parent.</p>
288
541
 
289
542
  <div class="bs-callout bs-callout-warning">
@@ -312,7 +565,7 @@ base_url: "../"
312
565
  ================================================== -->
313
566
  <div class="bs-docs-section">
314
567
  <div class="page-header">
315
- <h1 id="btn-dropdowns">Button dropdown menus</h1>
568
+ <h1 id="btn-dropdowns">Button dropdowns</h1>
316
569
  </div>
317
570
  <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
318
571
 
@@ -324,58 +577,66 @@ base_url: "../"
324
577
  <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
325
578
  <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
326
579
  <div class="bs-example">
327
- <div class="btn-toolbar" style="margin-bottom: 10px;">
328
- <div class="btn-group">
329
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
330
- <ul class="dropdown-menu">
331
- <li><a href="#">Action</a></li>
332
- <li><a href="#">Another action</a></li>
333
- <li><a href="#">Something else here</a></li>
334
- <li class="divider"></li>
335
- <li><a href="#">Separated link</a></li>
336
- </ul>
337
- </div><!-- /btn-group -->
338
- <div class="btn-group">
339
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
340
- <ul class="dropdown-menu">
341
- <li><a href="#">Action</a></li>
342
- <li><a href="#">Another action</a></li>
343
- <li><a href="#">Something else here</a></li>
344
- <li class="divider"></li>
345
- <li><a href="#">Separated link</a></li>
346
- </ul>
347
- </div><!-- /btn-group -->
348
- <div class="btn-group">
349
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
350
- <ul class="dropdown-menu">
351
- <li><a href="#">Action</a></li>
352
- <li><a href="#">Another action</a></li>
353
- <li><a href="#">Something else here</a></li>
354
- <li class="divider"></li>
355
- <li><a href="#">Separated link</a></li>
356
- </ul>
357
- </div><!-- /btn-group -->
358
- <div class="btn-group">
359
- <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
360
- <ul class="dropdown-menu">
361
- <li><a href="#">Action</a></li>
362
- <li><a href="#">Another action</a></li>
363
- <li><a href="#">Something else here</a></li>
364
- <li class="divider"></li>
365
- <li><a href="#">Separated link</a></li>
366
- </ul>
367
- </div><!-- /btn-group -->
368
- <div class="btn-group">
369
- <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
370
- <ul class="dropdown-menu">
371
- <li><a href="#">Action</a></li>
372
- <li><a href="#">Another action</a></li>
373
- <li><a href="#">Something else here</a></li>
374
- <li class="divider"></li>
375
- <li><a href="#">Separated link</a></li>
376
- </ul>
377
- </div><!-- /btn-group -->
378
- </div>
580
+ <div class="btn-group">
581
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
582
+ <ul class="dropdown-menu" role="menu">
583
+ <li><a href="#">Action</a></li>
584
+ <li><a href="#">Another action</a></li>
585
+ <li><a href="#">Something else here</a></li>
586
+ <li class="divider"></li>
587
+ <li><a href="#">Separated link</a></li>
588
+ </ul>
589
+ </div><!-- /btn-group -->
590
+ <div class="btn-group">
591
+ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
592
+ <ul class="dropdown-menu" role="menu">
593
+ <li><a href="#">Action</a></li>
594
+ <li><a href="#">Another action</a></li>
595
+ <li><a href="#">Something else here</a></li>
596
+ <li class="divider"></li>
597
+ <li><a href="#">Separated link</a></li>
598
+ </ul>
599
+ </div><!-- /btn-group -->
600
+ <div class="btn-group">
601
+ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
602
+ <ul class="dropdown-menu" role="menu">
603
+ <li><a href="#">Action</a></li>
604
+ <li><a href="#">Another action</a></li>
605
+ <li><a href="#">Something else here</a></li>
606
+ <li class="divider"></li>
607
+ <li><a href="#">Separated link</a></li>
608
+ </ul>
609
+ </div><!-- /btn-group -->
610
+ <div class="btn-group">
611
+ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
612
+ <ul class="dropdown-menu" role="menu">
613
+ <li><a href="#">Action</a></li>
614
+ <li><a href="#">Another action</a></li>
615
+ <li><a href="#">Something else here</a></li>
616
+ <li class="divider"></li>
617
+ <li><a href="#">Separated link</a></li>
618
+ </ul>
619
+ </div><!-- /btn-group -->
620
+ <div class="btn-group">
621
+ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
622
+ <ul class="dropdown-menu" role="menu">
623
+ <li><a href="#">Action</a></li>
624
+ <li><a href="#">Another action</a></li>
625
+ <li><a href="#">Something else here</a></li>
626
+ <li class="divider"></li>
627
+ <li><a href="#">Separated link</a></li>
628
+ </ul>
629
+ </div><!-- /btn-group -->
630
+ <div class="btn-group">
631
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
632
+ <ul class="dropdown-menu" role="menu">
633
+ <li><a href="#">Action</a></li>
634
+ <li><a href="#">Another action</a></li>
635
+ <li><a href="#">Something else here</a></li>
636
+ <li class="divider"></li>
637
+ <li><a href="#">Separated link</a></li>
638
+ </ul>
639
+ </div><!-- /btn-group -->
379
640
  </div>
380
641
  {% highlight html %}
381
642
  <!-- Single button -->
@@ -383,7 +644,7 @@ base_url: "../"
383
644
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
384
645
  Action <span class="caret"></span>
385
646
  </button>
386
- <ul class="dropdown-menu">
647
+ <ul class="dropdown-menu" role="menu">
387
648
  <li><a href="#">Action</a></li>
388
649
  <li><a href="#">Another action</a></li>
389
650
  <li><a href="#">Something else here</a></li>
@@ -396,72 +657,81 @@ base_url: "../"
396
657
  <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
397
658
  <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
398
659
  <div class="bs-example">
399
- <div class="btn-toolbar" style="margin: 0;">
400
- <div class="btn-group">
401
- <button type="button" class="btn btn-default">Action</button>
402
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
403
- <ul class="dropdown-menu">
404
- <li><a href="#">Action</a></li>
405
- <li><a href="#">Another action</a></li>
406
- <li><a href="#">Something else here</a></li>
407
- <li class="divider"></li>
408
- <li><a href="#">Separated link</a></li>
409
- </ul>
410
- </div><!-- /btn-group -->
411
- <div class="btn-group">
412
- <button type="button" class="btn btn-primary">Action</button>
413
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
414
- <ul class="dropdown-menu">
415
- <li><a href="#">Action</a></li>
416
- <li><a href="#">Another action</a></li>
417
- <li><a href="#">Something else here</a></li>
418
- <li class="divider"></li>
419
- <li><a href="#">Separated link</a></li>
420
- </ul>
421
- </div><!-- /btn-group -->
422
- <div class="btn-group">
423
- <button type="button" class="btn btn-danger">Danger</button>
424
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
425
- <ul class="dropdown-menu">
426
- <li><a href="#">Action</a></li>
427
- <li><a href="#">Another action</a></li>
428
- <li><a href="#">Something else here</a></li>
429
- <li class="divider"></li>
430
- <li><a href="#">Separated link</a></li>
431
- </ul>
432
- </div><!-- /btn-group -->
433
- <div class="btn-group">
434
- <button type="button" class="btn btn-warning">Warning</button>
435
- <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
436
- <ul class="dropdown-menu">
437
- <li><a href="#">Action</a></li>
438
- <li><a href="#">Another action</a></li>
439
- <li><a href="#">Something else here</a></li>
440
- <li class="divider"></li>
441
- <li><a href="#">Separated link</a></li>
442
- </ul>
443
- </div><!-- /btn-group -->
444
- <div class="btn-group">
445
- <button type="button" class="btn btn-success">Success</button>
446
- <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
447
- <ul class="dropdown-menu">
448
- <li><a href="#">Action</a></li>
449
- <li><a href="#">Another action</a></li>
450
- <li><a href="#">Something else here</a></li>
451
- <li class="divider"></li>
452
- <li><a href="#">Separated link</a></li>
453
- </ul>
454
- </div><!-- /btn-group -->
455
- </div><!-- /btn-toolbar -->
660
+ <div class="btn-group">
661
+ <button type="button" class="btn btn-default">Default</button>
662
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
663
+ <ul class="dropdown-menu" role="menu">
664
+ <li><a href="#">Action</a></li>
665
+ <li><a href="#">Another action</a></li>
666
+ <li><a href="#">Something else here</a></li>
667
+ <li class="divider"></li>
668
+ <li><a href="#">Separated link</a></li>
669
+ </ul>
670
+ </div><!-- /btn-group -->
671
+ <div class="btn-group">
672
+ <button type="button" class="btn btn-primary">Primary</button>
673
+ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
674
+ <ul class="dropdown-menu" role="menu">
675
+ <li><a href="#">Action</a></li>
676
+ <li><a href="#">Another action</a></li>
677
+ <li><a href="#">Something else here</a></li>
678
+ <li class="divider"></li>
679
+ <li><a href="#">Separated link</a></li>
680
+ </ul>
681
+ </div><!-- /btn-group -->
682
+ <div class="btn-group">
683
+ <button type="button" class="btn btn-success">Success</button>
684
+ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
685
+ <ul class="dropdown-menu" role="menu">
686
+ <li><a href="#">Action</a></li>
687
+ <li><a href="#">Another action</a></li>
688
+ <li><a href="#">Something else here</a></li>
689
+ <li class="divider"></li>
690
+ <li><a href="#">Separated link</a></li>
691
+ </ul>
692
+ </div><!-- /btn-group -->
693
+ <div class="btn-group">
694
+ <button type="button" class="btn btn-info">Info</button>
695
+ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
696
+ <ul class="dropdown-menu" role="menu">
697
+ <li><a href="#">Action</a></li>
698
+ <li><a href="#">Another action</a></li>
699
+ <li><a href="#">Something else here</a></li>
700
+ <li class="divider"></li>
701
+ <li><a href="#">Separated link</a></li>
702
+ </ul>
703
+ </div><!-- /btn-group -->
704
+ <div class="btn-group">
705
+ <button type="button" class="btn btn-warning">Warning</button>
706
+ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
707
+ <ul class="dropdown-menu" role="menu">
708
+ <li><a href="#">Action</a></li>
709
+ <li><a href="#">Another action</a></li>
710
+ <li><a href="#">Something else here</a></li>
711
+ <li class="divider"></li>
712
+ <li><a href="#">Separated link</a></li>
713
+ </ul>
714
+ </div><!-- /btn-group -->
715
+ <div class="btn-group">
716
+ <button type="button" class="btn btn-danger">Danger</button>
717
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
718
+ <ul class="dropdown-menu" role="menu">
719
+ <li><a href="#">Action</a></li>
720
+ <li><a href="#">Another action</a></li>
721
+ <li><a href="#">Something else here</a></li>
722
+ <li class="divider"></li>
723
+ <li><a href="#">Separated link</a></li>
724
+ </ul>
725
+ </div><!-- /btn-group -->
456
726
  </div>
457
727
  {% highlight html %}
458
728
  <!-- Split button -->
459
729
  <div class="btn-group">
460
- <button type="button" class="btn btn-default">Action</button>
461
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
730
+ <button type="button" class="btn btn-danger">Action</button>
731
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
462
732
  <span class="caret"></span>
463
733
  </button>
464
- <ul class="dropdown-menu">
734
+ <ul class="dropdown-menu" role="menu">
465
735
  <li><a href="#">Action</a></li>
466
736
  <li><a href="#">Another action</a></li>
467
737
  <li><a href="#">Something else here</a></li>
@@ -471,15 +741,15 @@ base_url: "../"
471
741
  </div>
472
742
  {% endhighlight %}
473
743
 
474
- <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
744
+ <h3 id="btn-dropdowns-sizing">Sizing</h3>
475
745
  <p>Button dropdowns work with buttons of all sizes.</p>
476
746
  <div class="bs-example">
477
- <div class="btn-toolbar" style="margin: 0;">
747
+ <div class="btn-toolbar">
478
748
  <div class="btn-group">
479
749
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
480
750
  Large button <span class="caret"></span>
481
751
  </button>
482
- <ul class="dropdown-menu">
752
+ <ul class="dropdown-menu" role="menu">
483
753
  <li><a href="#">Action</a></li>
484
754
  <li><a href="#">Another action</a></li>
485
755
  <li><a href="#">Something else here</a></li>
@@ -487,11 +757,13 @@ base_url: "../"
487
757
  <li><a href="#">Separated link</a></li>
488
758
  </ul>
489
759
  </div><!-- /btn-group -->
760
+ </div><!-- /btn-toolbar -->
761
+ <div class="btn-toolbar">
490
762
  <div class="btn-group">
491
763
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
492
764
  Small button <span class="caret"></span>
493
765
  </button>
494
- <ul class="dropdown-menu">
766
+ <ul class="dropdown-menu" role="menu">
495
767
  <li><a href="#">Action</a></li>
496
768
  <li><a href="#">Another action</a></li>
497
769
  <li><a href="#">Something else here</a></li>
@@ -499,11 +771,13 @@ base_url: "../"
499
771
  <li><a href="#">Separated link</a></li>
500
772
  </ul>
501
773
  </div><!-- /btn-group -->
774
+ </div><!-- /btn-toolbar -->
775
+ <div class="btn-toolbar">
502
776
  <div class="btn-group">
503
777
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
504
778
  Extra small button <span class="caret"></span>
505
779
  </button>
506
- <ul class="dropdown-menu">
780
+ <ul class="dropdown-menu" role="menu">
507
781
  <li><a href="#">Action</a></li>
508
782
  <li><a href="#">Another action</a></li>
509
783
  <li><a href="#">Something else here</a></li>
@@ -545,14 +819,14 @@ base_url: "../"
545
819
  </div>
546
820
  {% endhighlight %}
547
821
 
548
- <h3 id="btn-dropdowns-dropup">Dropup buttons</h3>
822
+ <h3 id="btn-dropdowns-dropup">Dropup variation</h3>
549
823
  <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
550
824
  <div class="bs-example">
551
825
  <div class="btn-toolbar">
552
826
  <div class="btn-group dropup">
553
827
  <button type="button" class="btn btn-default">Dropup</button>
554
828
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
555
- <ul class="dropdown-menu">
829
+ <ul class="dropdown-menu" role="menu">
556
830
  <li><a href="#">Action</a></li>
557
831
  <li><a href="#">Another action</a></li>
558
832
  <li><a href="#">Something else here</a></li>
@@ -563,7 +837,7 @@ base_url: "../"
563
837
  <div class="btn-group dropup">
564
838
  <button type="button" class="btn btn-primary">Right dropup</button>
565
839
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
566
- <ul class="dropdown-menu pull-right">
840
+ <ul class="dropdown-menu pull-right" role="menu">
567
841
  <li><a href="#">Action</a></li>
568
842
  <li><a href="#">Another action</a></li>
569
843
  <li><a href="#">Something else here</a></li>
@@ -607,7 +881,7 @@ base_url: "../"
607
881
  <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
608
882
  </div>
609
883
 
610
- <h2 id="input-groups-basic">Basic input group</h2>
884
+ <h2 id="input-groups-basic">Basic example</h2>
611
885
  <form class="bs-example bs-example-form" role="form">
612
886
  <div class="input-group">
613
887
  <span class="input-group-addon">@</span>
@@ -643,7 +917,8 @@ base_url: "../"
643
917
  </div>
644
918
  {% endhighlight %}
645
919
 
646
- <h2 id="input-groups-sizes">Optional sizes</h2>
920
+
921
+ <h2 id="input-groups-sizing">Sizing</h2>
647
922
  <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
648
923
  <form class="bs-example bs-example-form" role="form">
649
924
  <div class="input-group input-group-lg">
@@ -679,7 +954,7 @@ base_url: "../"
679
954
  {% endhighlight %}
680
955
 
681
956
 
682
- <h2 id="input-groups-checkboxes-radios">Checkboxes and radio buttons</h2>
957
+ <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
683
958
  <p>Place any checkbox or radio option within an input group's addon instead of text.</p>
684
959
  <form class="bs-example bs-example-form">
685
960
  <div class="row">
@@ -723,7 +998,7 @@ base_url: "../"
723
998
  {% endhighlight %}
724
999
 
725
1000
 
726
- <h2 id="input-groups-buttons">Buttons instead of text</h2>
1001
+ <h2 id="input-groups-buttons">Button addons</h2>
727
1002
  <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
728
1003
  <form class="bs-example bs-example-form">
729
1004
  <div class="row">
@@ -774,7 +1049,7 @@ base_url: "../"
774
1049
  <div class="input-group">
775
1050
  <div class="input-group-btn">
776
1051
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
777
- <ul class="dropdown-menu">
1052
+ <ul class="dropdown-menu" role="menu">
778
1053
  <li><a href="#">Action</a></li>
779
1054
  <li><a href="#">Another action</a></li>
780
1055
  <li><a href="#">Something else here</a></li>
@@ -790,7 +1065,7 @@ base_url: "../"
790
1065
  <input type="text" class="form-control">
791
1066
  <div class="input-group-btn">
792
1067
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
793
- <ul class="dropdown-menu pull-right">
1068
+ <ul class="dropdown-menu pull-right" role="menu">
794
1069
  <li><a href="#">Action</a></li>
795
1070
  <li><a href="#">Another action</a></li>
796
1071
  <li><a href="#">Something else here</a></li>
@@ -837,7 +1112,7 @@ base_url: "../"
837
1112
  </div><!-- /.row -->
838
1113
  {% endhighlight %}
839
1114
 
840
- <h2 id="input-groups-buttons-segmented">Segmented dropdown groups</h2>
1115
+ <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
841
1116
  <form class="bs-example bs-example-form" role="form">
842
1117
  <div class="row">
843
1118
  <div class="col-lg-6">
@@ -847,7 +1122,7 @@ base_url: "../"
847
1122
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
848
1123
  <span class="caret"></span>
849
1124
  </button>
850
- <ul class="dropdown-menu">
1125
+ <ul class="dropdown-menu" role="menu">
851
1126
  <li><a href="#">Action</a></li>
852
1127
  <li><a href="#">Another action</a></li>
853
1128
  <li><a href="#">Something else here</a></li>
@@ -866,7 +1141,7 @@ base_url: "../"
866
1141
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
867
1142
  <span class="caret"></span>
868
1143
  </button>
869
- <ul class="dropdown-menu pull-right">
1144
+ <ul class="dropdown-menu pull-right" role="menu">
870
1145
  <li><a href="#">Action</a></li>
871
1146
  <li><a href="#">Another action</a></li>
872
1147
  <li><a href="#">Something else here</a></li>
@@ -954,9 +1229,8 @@ base_url: "../"
954
1229
  </ul>
955
1230
  {% endhighlight %}
956
1231
 
957
- <h2>Options</h2>
958
1232
 
959
- <h3 id="nav-justified">Justified links</h3>
1233
+ <h2 id="nav-justified">Justified</h2>
960
1234
  <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
961
1235
  <div class="bs-example">
962
1236
  <ul class="nav nav-tabs nav-justified">
@@ -980,7 +1254,8 @@ base_url: "../"
980
1254
  </ul>
981
1255
  {% endhighlight %}
982
1256
 
983
- <h3 id="nav-disabled-links">Disabled state</h3>
1257
+
1258
+ <h2 id="nav-disabled-links">Disabled links</h2>
984
1259
  <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
985
1260
 
986
1261
  <div class="bs-callout bs-callout-warning">
@@ -1004,36 +1279,27 @@ base_url: "../"
1004
1279
  {% endhighlight %}
1005
1280
 
1006
1281
 
1007
- <h3 id="nav-alignment">Component alignment</h3>
1008
- <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
1009
-
1010
-
1011
- <hr class="bs-docs-separator">
1012
-
1013
-
1014
- <h2 id="nav-dropdowns">Dropdowns</h2>
1282
+ <h2 id="nav-dropdowns">Using dropdowns</h2>
1015
1283
  <p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
1016
1284
 
1017
1285
  <h3>Tabs with dropdowns</h3>
1018
1286
  <div class="bs-example">
1019
- <nav class="navbar" role="navigation">
1020
- <ul class="nav nav-tabs">
1021
- <li class="active"><a href="#">Home</a></li>
1022
- <li><a href="#">Help</a></li>
1023
- <li class="dropdown">
1024
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
1025
- Dropdown <span class="caret"></span>
1026
- </a>
1027
- <ul class="dropdown-menu">
1028
- <li><a href="#">Action</a></li>
1029
- <li><a href="#">Another action</a></li>
1030
- <li><a href="#">Something else here</a></li>
1031
- <li class="divider"></li>
1032
- <li><a href="#">Separated link</a></li>
1033
- </ul>
1034
- </li>
1035
- </ul>
1036
- </nav>
1287
+ <ul class="nav nav-tabs">
1288
+ <li class="active"><a href="#">Home</a></li>
1289
+ <li><a href="#">Help</a></li>
1290
+ <li class="dropdown">
1291
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">
1292
+ Dropdown <span class="caret"></span>
1293
+ </a>
1294
+ <ul class="dropdown-menu" role="menu">
1295
+ <li><a href="#">Action</a></li>
1296
+ <li><a href="#">Another action</a></li>
1297
+ <li><a href="#">Something else here</a></li>
1298
+ <li class="divider"></li>
1299
+ <li><a href="#">Separated link</a></li>
1300
+ </ul>
1301
+ </li>
1302
+ </ul>
1037
1303
  </div>
1038
1304
  {% highlight html %}
1039
1305
  <ul class="nav nav-tabs">
@@ -1059,7 +1325,7 @@ base_url: "../"
1059
1325
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
1060
1326
  Dropdown <span class="caret"></span>
1061
1327
  </a>
1062
- <ul class="dropdown-menu">
1328
+ <ul class="dropdown-menu" role="menu">
1063
1329
  <li><a href="#">Action</a></li>
1064
1330
  <li><a href="#">Another action</a></li>
1065
1331
  <li><a href="#">Something else here</a></li>
@@ -1098,8 +1364,13 @@ base_url: "../"
1098
1364
  <h2 id="navbar-default">Default navbar</h2>
1099
1365
  <p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
1100
1366
 
1367
+ <div class="bs-callout bs-callout-info">
1368
+ <h4>Customize the collapsing point</h4>
1369
+ <p>Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</p>
1370
+ </div>
1371
+
1101
1372
  <div class="bs-example">
1102
- <nav class="navbar" role="navigation">
1373
+ <nav class="navbar navbar-default" role="navigation">
1103
1374
  <!-- Brand and toggle get grouped for better mobile display -->
1104
1375
  <div class="navbar-header">
1105
1376
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
@@ -1108,18 +1379,17 @@ base_url: "../"
1108
1379
  <span class="icon-bar"></span>
1109
1380
  <span class="icon-bar"></span>
1110
1381
  </button>
1111
- <a class="navbar-brand" href="#">Title</a>
1382
+ <a class="navbar-brand" href="#">Brand</a>
1112
1383
  </div>
1113
1384
 
1114
1385
  <!-- Collect the nav links, forms, and other content for toggling -->
1115
1386
  <div class="collapse navbar-collapse navbar-ex1-collapse">
1116
1387
  <ul class="nav navbar-nav">
1117
- <li class="active"><a href="#">Home</a></li>
1118
- <li><a href="#">Link</a></li>
1388
+ <li class="active"><a href="#">Link</a></li>
1119
1389
  <li><a href="#">Link</a></li>
1120
1390
  <li class="dropdown">
1121
1391
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
1122
- <ul class="dropdown-menu">
1392
+ <ul class="dropdown-menu" role="menu">
1123
1393
  <li><a href="#">Action</a></li>
1124
1394
  <li><a href="#">Another action</a></li>
1125
1395
  <li><a href="#">Something else here</a></li>
@@ -1138,7 +1408,7 @@ base_url: "../"
1138
1408
  <li><a href="#">Link</a></li>
1139
1409
  <li class="dropdown">
1140
1410
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
1141
- <ul class="dropdown-menu">
1411
+ <ul class="dropdown-menu" role="menu">
1142
1412
  <li><a href="#">Action</a></li>
1143
1413
  <li><a href="#">Another action</a></li>
1144
1414
  <li><a href="#">Something else here</a></li>
@@ -1150,7 +1420,7 @@ base_url: "../"
1150
1420
  </nav>
1151
1421
  </div>
1152
1422
  {% highlight html %}
1153
- <nav class="navbar" role="navigation">
1423
+ <nav class="navbar navbar-default" role="navigation">
1154
1424
  <!-- Brand and toggle get grouped for better mobile display -->
1155
1425
  <div class="navbar-header">
1156
1426
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
@@ -1159,14 +1429,13 @@ base_url: "../"
1159
1429
  <span class="icon-bar"></span>
1160
1430
  <span class="icon-bar"></span>
1161
1431
  </button>
1162
- <a class="navbar-brand" href="#">Title</a>
1432
+ <a class="navbar-brand" href="#">Brand</a>
1163
1433
  </div>
1164
1434
 
1165
1435
  <!-- Collect the nav links, forms, and other content for toggling -->
1166
1436
  <div class="collapse navbar-collapse navbar-ex1-collapse">
1167
1437
  <ul class="nav navbar-nav">
1168
- <li class="active"><a href="#">Home</a></li>
1169
- <li><a href="#">Link</a></li>
1438
+ <li class="active"><a href="#">Link</a></li>
1170
1439
  <li><a href="#">Link</a></li>
1171
1440
  <li class="dropdown">
1172
1441
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
@@ -1179,7 +1448,7 @@ base_url: "../"
1179
1448
  </ul>
1180
1449
  </li>
1181
1450
  </ul>
1182
- <form class="navbar-form navbar-left" action="" role="search">
1451
+ <form class="navbar-form navbar-left" role="search">
1183
1452
  <div class="form-group">
1184
1453
  <input type="text" class="form-control" placeholder="Search">
1185
1454
  </div>
@@ -1212,13 +1481,10 @@ base_url: "../"
1212
1481
  </div>
1213
1482
 
1214
1483
 
1215
- <h2 id="navbar-optional-content">Optional navbar content</h2>
1216
- <p>Quickly add other types of content, beyond links or forms, to a navbar with a few classes.</p>
1217
-
1218
- <h3 id="navbar-buttons">Buttons</h3>
1484
+ <h2 id="navbar-buttons">Buttons</h2>
1219
1485
  <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
1220
1486
  <div class="bs-example">
1221
- <nav class="navbar" role="navigation">
1487
+ <nav class="navbar navbar-default" role="navigation">
1222
1488
  <div class="navbar-header">
1223
1489
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
1224
1490
  <span class="sr-only">Toggle navigation</span>
@@ -1226,7 +1492,7 @@ base_url: "../"
1226
1492
  <span class="icon-bar"></span>
1227
1493
  <span class="icon-bar"></span>
1228
1494
  </button>
1229
- <a class="navbar-brand" href="#">Title</a>
1495
+ <a class="navbar-brand" href="#">Brand</a>
1230
1496
  </div>
1231
1497
  <div class="collapse navbar-collapse navbar-ex2-collapse">
1232
1498
  <button type="button" class="btn btn-default navbar-btn">Sign in</button>
@@ -1237,10 +1503,11 @@ base_url: "../"
1237
1503
  <button type="button" class="btn btn-default navbar-btn">Sign in</button>
1238
1504
  {% endhighlight %}
1239
1505
 
1240
- <h3 id="navbar-text">Text in navbars</h3>
1506
+
1507
+ <h2 id="navbar-text">Text</h2>
1241
1508
  <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
1242
1509
  <div class="bs-example">
1243
- <nav class="navbar" role="navigation">
1510
+ <nav class="navbar navbar-default" role="navigation">
1244
1511
  <div class="navbar-header">
1245
1512
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex3-collapse">
1246
1513
  <span class="sr-only">Toggle navigation</span>
@@ -1248,7 +1515,7 @@ base_url: "../"
1248
1515
  <span class="icon-bar"></span>
1249
1516
  <span class="icon-bar"></span>
1250
1517
  </button>
1251
- <a class="navbar-brand" href="#">Title</a>
1518
+ <a class="navbar-brand" href="#">Brand</a>
1252
1519
  </div>
1253
1520
  <div class="collapse navbar-collapse navbar-ex3-collapse">
1254
1521
  <p class="navbar-text">Signed in as Mark Otto</p>
@@ -1259,10 +1526,11 @@ base_url: "../"
1259
1526
  <p class="navbar-text">Signed in as Mark Otto</p>
1260
1527
  {% endhighlight %}
1261
1528
 
1262
- <h3 id="navbar-links">Non-nav links</h3>
1529
+
1530
+ <h2 id="navbar-links">Non-nav links</h2>
1263
1531
  <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
1264
1532
  <div class="bs-example">
1265
- <nav class="navbar" role="navigation">
1533
+ <nav class="navbar navbar-default" role="navigation">
1266
1534
  <div class="navbar-header">
1267
1535
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex4-collapse">
1268
1536
  <span class="sr-only">Toggle navigation</span>
@@ -1270,7 +1538,7 @@ base_url: "../"
1270
1538
  <span class="icon-bar"></span>
1271
1539
  <span class="icon-bar"></span>
1272
1540
  </button>
1273
- <a class="navbar-brand" href="#">Title</a>
1541
+ <a class="navbar-brand" href="#">Brand</a>
1274
1542
  </div>
1275
1543
  <div class="collapse navbar-collapse navbar-ex4-collapse">
1276
1544
  <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
@@ -1281,18 +1549,16 @@ base_url: "../"
1281
1549
  <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
1282
1550
  {% endhighlight %}
1283
1551
 
1284
- <h3 id="navbar-component-alignment">Component alignment</h3>
1552
+
1553
+ <h2 id="navbar-component-alignment">Component alignment</h2>
1285
1554
  <p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code>&lt;ul&gt;</code> with the respective utility class applied.</p>
1286
1555
  <p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
1287
1556
 
1288
1557
 
1289
- <h2>Optional display variations</h2>
1290
- <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>. These will also remove rounded corners.</p>
1291
-
1292
- <h3 id="navbar-fixed-top">Fixed to top</h3>
1558
+ <h2 id="navbar-fixed-top">Fixed to top</h2>
1293
1559
  <p>Add <code>.navbar-fixed-top</code>.</p>
1294
1560
  <div class="bs-example bs-navbar-top-example">
1295
- <nav class="navbar navbar-fixed-top" role="navigation">
1561
+ <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
1296
1562
  <!-- Brand and toggle get grouped for better mobile display -->
1297
1563
  <div class="navbar-header">
1298
1564
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse">
@@ -1301,7 +1567,7 @@ base_url: "../"
1301
1567
  <span class="icon-bar"></span>
1302
1568
  <span class="icon-bar"></span>
1303
1569
  </button>
1304
- <a class="navbar-brand" href="#">Title</a>
1570
+ <a class="navbar-brand" href="#">Brand</a>
1305
1571
  </div>
1306
1572
 
1307
1573
  <!-- Collect the nav links, forms, and other content for toggling -->
@@ -1315,7 +1581,7 @@ base_url: "../"
1315
1581
  </nav>
1316
1582
  </div><!-- /example -->
1317
1583
  {% highlight html %}
1318
- <nav class="navbar navbar-fixed-top" role="navigation">
1584
+ <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
1319
1585
  ...
1320
1586
  </nav>
1321
1587
  {% endhighlight %}
@@ -1329,10 +1595,11 @@ body { padding-top: 70px; }
1329
1595
  <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
1330
1596
  </div>
1331
1597
 
1332
- <h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
1598
+
1599
+ <h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
1333
1600
  <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
1334
1601
  <div class="bs-example bs-navbar-bottom-example">
1335
- <nav class="navbar navbar-fixed-bottom" role="navigation">
1602
+ <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
1336
1603
  <!-- Brand and toggle get grouped for better mobile display -->
1337
1604
  <div class="navbar-header">
1338
1605
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse">
@@ -1341,7 +1608,7 @@ body { padding-top: 70px; }
1341
1608
  <span class="icon-bar"></span>
1342
1609
  <span class="icon-bar"></span>
1343
1610
  </button>
1344
- <a class="navbar-brand" href="#">Title</a>
1611
+ <a class="navbar-brand" href="#">Brand</a>
1345
1612
  </div>
1346
1613
 
1347
1614
  <!-- Collect the nav links, forms, and other content for toggling -->
@@ -1355,7 +1622,7 @@ body { padding-top: 70px; }
1355
1622
  </nav>
1356
1623
  </div><!-- /example -->
1357
1624
  {% highlight html %}
1358
- <nav class="navbar navbar-fixed-bottom" role="navigation">
1625
+ <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
1359
1626
  ...
1360
1627
  </nav>
1361
1628
  {% endhighlight %}
@@ -1369,10 +1636,11 @@ body { padding-bottom: 70px; }
1369
1636
  <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
1370
1637
  </div>
1371
1638
 
1372
- <h3 id="navbar-static-top">Static top navbar</h3>
1639
+
1640
+ <h2 id="navbar-static-top">Static top</h2>
1373
1641
  <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
1374
1642
  <div class="bs-example bs-navbar-top-example">
1375
- <nav class="navbar navbar-static-top" role="navigation">
1643
+ <nav class="navbar navbar-default navbar-static-top" role="navigation">
1376
1644
  <!-- Brand and toggle get grouped for better mobile display -->
1377
1645
  <div class="navbar-header">
1378
1646
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse">
@@ -1381,7 +1649,7 @@ body { padding-bottom: 70px; }
1381
1649
  <span class="icon-bar"></span>
1382
1650
  <span class="icon-bar"></span>
1383
1651
  </button>
1384
- <a class="navbar-brand" href="#">Title</a>
1652
+ <a class="navbar-brand" href="#">Brand</a>
1385
1653
  </div>
1386
1654
 
1387
1655
  <!-- Collect the nav links, forms, and other content for toggling -->
@@ -1395,13 +1663,13 @@ body { padding-bottom: 70px; }
1395
1663
  </nav>
1396
1664
  </div><!-- /example -->
1397
1665
  {% highlight html %}
1398
- <nav class="navbar navbar-static-top" role="navigation">
1666
+ <nav class="navbar navbar-default navbar-static-top" role="navigation">
1399
1667
  ...
1400
1668
  </nav>
1401
1669
  {% endhighlight %}
1402
1670
 
1403
1671
 
1404
- <h2 id="navbar-inverted">Inverted variation</h2>
1672
+ <h2 id="navbar-inverted">Inverted navbar</h2>
1405
1673
  <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
1406
1674
  <div class="bs-example">
1407
1675
  <nav class="navbar navbar-inverse" role="navigation">
@@ -1413,7 +1681,7 @@ body { padding-bottom: 70px; }
1413
1681
  <span class="icon-bar"></span>
1414
1682
  <span class="icon-bar"></span>
1415
1683
  </button>
1416
- <a class="navbar-brand" href="#">Title</a>
1684
+ <a class="navbar-brand" href="#">Brand</a>
1417
1685
  </div>
1418
1686
 
1419
1687
  <!-- Collect the nav links, forms, and other content for toggling -->
@@ -1445,25 +1713,25 @@ body { padding-bottom: 70px; }
1445
1713
  <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
1446
1714
  <p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
1447
1715
  <div class="bs-example">
1448
- <ul class="breadcrumb">
1716
+ <ol class="breadcrumb">
1449
1717
  <li class="active">Home</li>
1450
- </ul>
1451
- <ul class="breadcrumb">
1718
+ </ol>
1719
+ <ol class="breadcrumb">
1452
1720
  <li><a href="#">Home</a></li>
1453
1721
  <li class="active">Library</li>
1454
- </ul>
1455
- <ul class="breadcrumb" style="margin-bottom: 5px;">
1722
+ </ol>
1723
+ <ol class="breadcrumb" style="margin-bottom: 5px;">
1456
1724
  <li><a href="#">Home</a></li>
1457
1725
  <li><a href="#">Library</a></li>
1458
1726
  <li class="active">Data</li>
1459
- </ul>
1727
+ </ol>
1460
1728
  </div>
1461
1729
  {% highlight html %}
1462
- <ul class="breadcrumb">
1730
+ <ol class="breadcrumb">
1463
1731
  <li><a href="#">Home</a></li>
1464
1732
  <li><a href="#">Library</a></li>
1465
1733
  <li class="active">Data</li>
1466
- </ul>
1734
+ </ol>
1467
1735
  {% endhighlight %}
1468
1736
  </div>
1469
1737
 
@@ -1532,7 +1800,7 @@ body { padding-bottom: 70px; }
1532
1800
  {% endhighlight %}
1533
1801
 
1534
1802
 
1535
- <h3>Sizes</h3>
1803
+ <h3>Sizing</h3>
1536
1804
  <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
1537
1805
  <div class="bs-example">
1538
1806
  <div>
@@ -1653,17 +1921,19 @@ body { padding-bottom: 70px; }
1653
1921
  <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
1654
1922
  <div class="bs-example">
1655
1923
  <span class="label label-default">Default</span>
1924
+ <span class="label label-primary">Primary</span>
1656
1925
  <span class="label label-success">Success</span>
1926
+ <span class="label label-info">Info</span>
1657
1927
  <span class="label label-warning">Warning</span>
1658
1928
  <span class="label label-danger">Danger</span>
1659
- <span class="label label-info">Info</span>
1660
1929
  </div>
1661
1930
  {% highlight html %}
1662
1931
  <span class="label label-default">Default</span>
1932
+ <span class="label label-primary">Primary</span>
1663
1933
  <span class="label label-success">Success</span>
1934
+ <span class="label label-info">Info</span>
1664
1935
  <span class="label label-warning">Warning</span>
1665
1936
  <span class="label label-danger">Danger</span>
1666
- <span class="label label-info">Info</span>
1667
1937
  {% endhighlight %}
1668
1938
 
1669
1939
  </div>
@@ -1733,31 +2003,41 @@ body { padding-bottom: 70px; }
1733
2003
 
1734
2004
 
1735
2005
 
1736
- <!-- Typographic components
2006
+ <!-- Jumbotron
1737
2007
  ================================================== -->
1738
2008
  <div class="bs-docs-section">
1739
2009
  <div class="page-header">
1740
- <h1 id="type-components">Typographic components</h1>
2010
+ <h1 id="jumbotron">Jumbotron</h1>
1741
2011
  </div>
1742
-
1743
- <h2 id="type-components-jumbotron">Jumbotron</h2>
1744
- <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
2012
+ <p>A lightweight, flexible component that can optional extend the entire viewport to showcase key content on your site. To make the jumbotron full width, don't include it within a <code>.container</code>. Placing it within a container will keep it at the width of the rest of your content and provide rounded corners.</p>
1745
2013
  <div class="bs-example">
1746
2014
  <div class="jumbotron">
1747
- <h1>Hello, world!</h1>
1748
- <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
1749
- <p><a class="btn btn-primary btn-lg">Learn more</a></p>
2015
+ <div class="container">
2016
+ <h1>Hello, world!</h1>
2017
+ <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
2018
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
2019
+ </div>
1750
2020
  </div>
1751
2021
  </div>
1752
2022
  {% highlight html %}
1753
2023
  <div class="jumbotron">
1754
- <h1>Hello, world!</h1>
1755
- <p>...</p>
1756
- <p><a class="btn btn-primary btn-lg">Learn more</a></p>
2024
+ <div class="container">
2025
+ <h1>Hello, world!</h1>
2026
+ <p>...</p>
2027
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
2028
+ </div>
1757
2029
  </div>
1758
2030
  {% endhighlight %}
2031
+ </div>
1759
2032
 
1760
- <h2 id="type-components-page-header">Page header</h2>
2033
+
2034
+
2035
+ <!-- Page header
2036
+ ================================================== -->
2037
+ <div class="bs-docs-section">
2038
+ <div class="page-header">
2039
+ <h1 id="page-header">Page header</h1>
2040
+ </div>
1761
2041
  <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>
1762
2042
  <div class="bs-example">
1763
2043
  <div class="page-header">
@@ -1781,26 +2061,26 @@ body { padding-bottom: 70px; }
1781
2061
  </div>
1782
2062
  <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
1783
2063
 
1784
- <h3 id="thumbnails-default">Default thumbnails</h3>
2064
+ <h3 id="thumbnails-default">Default example</h3>
1785
2065
  <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
1786
2066
  <div class="bs-example">
1787
2067
  <div class="row">
1788
- <div class="col-lg-3">
2068
+ <div class="col-sm-6 col-md-3">
1789
2069
  <a href="#" class="thumbnail">
1790
2070
  <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
1791
2071
  </a>
1792
2072
  </div>
1793
- <div class="col-lg-3">
2073
+ <div class="col-sm-6 col-md-3">
1794
2074
  <a href="#" class="thumbnail">
1795
2075
  <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
1796
2076
  </a>
1797
2077
  </div>
1798
- <div class="col-lg-3">
2078
+ <div class="col-sm-6 col-md-3">
1799
2079
  <a href="#" class="thumbnail">
1800
2080
  <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
1801
2081
  </a>
1802
2082
  </div>
1803
- <div class="col-lg-3">
2083
+ <div class="col-sm-6 col-md-3">
1804
2084
  <a href="#" class="thumbnail">
1805
2085
  <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
1806
2086
  </a>
@@ -1809,7 +2089,7 @@ body { padding-bottom: 70px; }
1809
2089
  </div><!-- /.bs-example -->
1810
2090
  {% highlight html %}
1811
2091
  <div class="row">
1812
- <div class="col-lg-3">
2092
+ <div class="col-sm-6 col-md-3">
1813
2093
  <a href="#" class="thumbnail">
1814
2094
  <img data-src="holder.js/100%x180" alt="...">
1815
2095
  </a>
@@ -1818,37 +2098,37 @@ body { padding-bottom: 70px; }
1818
2098
  </div>
1819
2099
  {% endhighlight %}
1820
2100
 
1821
- <h3 id="thumbnails-custom-content">Custom content thumbnails</h3>
2101
+ <h3 id="thumbnails-custom-content">Custom content</h3>
1822
2102
  <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
1823
2103
  <div class="bs-example">
1824
2104
  <div class="row">
1825
- <div class="col-lg-4">
2105
+ <div class="col-sm-6 col-md-3">
1826
2106
  <div class="thumbnail">
1827
2107
  <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
1828
2108
  <div class="caption">
1829
2109
  <h3>Thumbnail label</h3>
1830
2110
  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
1831
- <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
2111
+ <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
1832
2112
  </div>
1833
2113
  </div>
1834
2114
  </div>
1835
- <div class="col-lg-4">
2115
+ <div class="col-sm-6 col-md-3">
1836
2116
  <div class="thumbnail">
1837
2117
  <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
1838
2118
  <div class="caption">
1839
2119
  <h3>Thumbnail label</h3>
1840
2120
  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
1841
- <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
2121
+ <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
1842
2122
  </div>
1843
2123
  </div>
1844
2124
  </div>
1845
- <div class="col-lg-4">
2125
+ <div class="col-sm-6 col-md-3">
1846
2126
  <div class="thumbnail">
1847
2127
  <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
1848
2128
  <div class="caption">
1849
2129
  <h3>Thumbnail label</h3>
1850
2130
  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
1851
- <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
2131
+ <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
1852
2132
  </div>
1853
2133
  </div>
1854
2134
  </div>
@@ -1856,13 +2136,13 @@ body { padding-bottom: 70px; }
1856
2136
  </div><!-- /.bs-example -->
1857
2137
  {% highlight html %}
1858
2138
  <div class="row">
1859
- <div class="col-lg-4">
2139
+ <div class="col-sm-6 col-md-3">
1860
2140
  <div class="thumbnail">
1861
2141
  <img data-src="holder.js/300x200" alt="...">
1862
2142
  <div class="caption">
1863
2143
  <h3>Thumbnail label</h3>
1864
2144
  <p>...</p>
1865
- <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
2145
+ <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
1866
2146
  </div>
1867
2147
  </div>
1868
2148
  </div>
@@ -1881,37 +2161,33 @@ body { padding-bottom: 70px; }
1881
2161
  </div>
1882
2162
  <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>
1883
2163
 
1884
- <h2 id="alerts-default">Default alert</h2>
1885
- <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
2164
+ <h2 id="alerts-examples">Examples</h2>
2165
+ <p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
1886
2166
 
1887
- <div class="bs-example">
1888
- <div class="alert">
1889
- <strong>Warning!</strong> Best check yo self, you're not looking too good.
1890
- </div>
2167
+ <div class="bs-callout bs-callout-info">
2168
+ <h4>No default class</h4>
2169
+ <p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
1891
2170
  </div>
1892
- {% highlight html %}
1893
- <div class="alert">
1894
- <strong>Warning!</strong> Best check yo self, you're not looking too good.
1895
- </div>
1896
- {% endhighlight %}
1897
2171
 
1898
- <h2 id="alerts-alternatives">Contextual alternatives</h2>
1899
- <p>Add optional classes to change an alert's connotation.</p>
1900
2172
  <div class="bs-example">
1901
- <div class="alert alert-danger">
1902
- <strong>Oh snap!</strong> Change a few things up and try submitting again.
1903
- </div>
1904
2173
  <div class="alert alert-success">
1905
2174
  <strong>Well done!</strong> You successfully read this important alert message.
1906
2175
  </div>
1907
2176
  <div class="alert alert-info">
1908
2177
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
1909
2178
  </div>
2179
+ <div class="alert alert-warning">
2180
+ <strong>Warning!</strong> Best check yo self, you're not looking too good.
2181
+ </div>
2182
+ <div class="alert alert-danger">
2183
+ <strong>Oh snap!</strong> Change a few things up and try submitting again.
2184
+ </div>
1910
2185
  </div>
1911
2186
  {% highlight html %}
1912
- <div class="alert alert-danger">...</div>
1913
2187
  <div class="alert alert-success">...</div>
1914
2188
  <div class="alert alert-info">...</div>
2189
+ <div class="alert alert-warning">...</div>
2190
+ <div class="alert alert-danger">...</div>
1915
2191
  {% endhighlight %}
1916
2192
 
1917
2193
  <h2 id="alerts-dismissable">Dismissable alerts</h2>
@@ -1937,26 +2213,32 @@ body { padding-bottom: 70px; }
1937
2213
  <h2 id="alerts-links">Links in alerts</h2>
1938
2214
  <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
1939
2215
  <div class="bs-example">
1940
- <div class="alert alert-danger">
1941
- <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
1942
- </div>
1943
2216
  <div class="alert alert-success">
1944
2217
  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
1945
2218
  </div>
1946
2219
  <div class="alert alert-info">
1947
2220
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
1948
2221
  </div>
2222
+ <div class="alert alert-warning">
2223
+ <strong>Warning!</strong> Best check yo self, you're <a href="#" class="alert-link">not looking too good</a>.
2224
+ </div>
2225
+ <div class="alert alert-danger">
2226
+ <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
2227
+ </div>
1949
2228
  </div>
1950
2229
  {% highlight html %}
1951
- <div class="alert alert-danger">
1952
- <a href="#" class="alert-link">...</a>
1953
- </div>
1954
2230
  <div class="alert alert-success">
1955
2231
  <a href="#" class="alert-link">...</a>
1956
2232
  </div>
1957
2233
  <div class="alert alert-info">
1958
2234
  <a href="#" class="alert-link">...</a>
1959
2235
  </div>
2236
+ <div class="alert alert-warning">
2237
+ <a href="#" class="alert-link">...</a>
2238
+ </div>
2239
+ <div class="alert alert-danger">
2240
+ <a href="#" class="alert-link">...</a>
2241
+ </div>
1960
2242
  {% endhighlight %}
1961
2243
  </div>
1962
2244
 
@@ -1976,44 +2258,56 @@ body { padding-bottom: 70px; }
1976
2258
  <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
1977
2259
  </div>
1978
2260
 
1979
- <h3 id="progress-basic">Basic</h3>
1980
- <p>Default progress bar with a vertical gradient.</p>
2261
+ <h3 id="progress-basic">Basic example</h3>
2262
+ <p>Default progress bar.</p>
1981
2263
  <div class="bs-example">
1982
2264
  <div class="progress">
1983
- <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
2265
+ <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
2266
+ <span class="sr-only">60% Complete</span>
2267
+ </div>
1984
2268
  </div>
1985
2269
  </div>
1986
2270
  {% highlight html %}
1987
2271
  <div class="progress">
1988
- <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
2272
+ <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
2273
+ <span class="sr-only">60% Complete</span>
2274
+ </div>
1989
2275
  </div>
1990
2276
  {% endhighlight %}
1991
2277
 
1992
2278
  <h3 id="progress-alternatives">Contextual alternatives</h3>
1993
2279
  <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
1994
2280
  <div class="bs-example">
1995
- <div class="progress" style="margin-bottom: 9px;">
1996
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
2281
+ <div class="progress">
2282
+ <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
2283
+ <span class="sr-only">40% Complete (success)</span>
2284
+ </div>
1997
2285
  </div>
1998
- <div class="progress" style="margin-bottom: 9px;">
1999
- <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
2286
+ <div class="progress">
2287
+ <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
2288
+ <span class="sr-only">20% Complete</span>
2289
+ </div>
2000
2290
  </div>
2001
- <div class="progress" style="margin-bottom: 9px;">
2002
- <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
2291
+ <div class="progress">
2292
+ <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
2293
+ <span class="sr-only">60% Complete (warning)</span>
2294
+ </div>
2003
2295
  </div>
2004
2296
  <div class="progress">
2005
- <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
2297
+ <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
2298
+ <span class="sr-only">80% Complete (danger)</span>
2299
+ </div>
2006
2300
  </div>
2007
2301
  </div>
2008
2302
  {% highlight html %}
2009
2303
  <div class="progress">
2010
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
2011
- <span class="sr-only">20% Complete</span>
2304
+ <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
2305
+ <span class="sr-only">40% Complete (success)</span>
2012
2306
  </div>
2013
2307
  </div>
2014
2308
  <div class="progress">
2015
- <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
2016
- <span class="sr-only">40% Complete (success)</span>
2309
+ <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
2310
+ <span class="sr-only">20% Complete</span>
2017
2311
  </div>
2018
2312
  </div>
2019
2313
  <div class="progress">
@@ -2031,28 +2325,36 @@ body { padding-bottom: 70px; }
2031
2325
  <h3 id="progress-striped">Striped</h3>
2032
2326
  <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
2033
2327
  <div class="bs-example">
2034
- <div class="progress progress-striped" style="margin-bottom: 9px;">
2035
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
2328
+ <div class="progress progress-striped" >
2329
+ <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
2330
+ <span class="sr-only">40% Complete (success)</span>
2331
+ </div>
2036
2332
  </div>
2037
- <div class="progress progress-striped" style="margin-bottom: 9px;">
2038
- <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
2333
+ <div class="progress progress-striped">
2334
+ <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
2335
+ <span class="sr-only">20% Complete</span>
2336
+ </div>
2039
2337
  </div>
2040
- <div class="progress progress-striped" style="margin-bottom: 9px;">
2041
- <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
2338
+ <div class="progress progress-striped">
2339
+ <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
2340
+ <span class="sr-only">60% Complete (warning)</span>
2341
+ </div>
2042
2342
  </div>
2043
2343
  <div class="progress progress-striped">
2044
- <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
2344
+ <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
2345
+ <span class="sr-only">80% Complete (danger)</span>
2346
+ </div>
2045
2347
  </div>
2046
2348
  </div>
2047
2349
  {% highlight html %}
2048
2350
  <div class="progress progress-striped">
2049
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
2050
- <span class="sr-only">20% Complete</span>
2351
+ <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
2352
+ <span class="sr-only">40% Complete (success)</span>
2051
2353
  </div>
2052
2354
  </div>
2053
2355
  <div class="progress progress-striped">
2054
- <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
2055
- <span class="sr-only">40% Complete (success)</span>
2356
+ <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
2357
+ <span class="sr-only">20% Complete</span>
2056
2358
  </div>
2057
2359
  </div>
2058
2360
  <div class="progress progress-striped">
@@ -2077,7 +2379,7 @@ body { padding-bottom: 70px; }
2077
2379
  {% highlight html %}
2078
2380
  <div class="progress progress-striped active">
2079
2381
  <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
2080
- <span class='sr-only'>45% Complete</span>
2382
+ <span class="sr-only">45% Complete</span>
2081
2383
  </div>
2082
2384
  </div>
2083
2385
  {% endhighlight %}
@@ -2086,16 +2388,28 @@ body { padding-bottom: 70px; }
2086
2388
  <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
2087
2389
  <div class="bs-example">
2088
2390
  <div class="progress">
2089
- <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
2090
- <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
2091
- <div class="progress-bar progress-bar-danger" style="width: 10%"><span class='sr-only'>10% Complete (danger)</span></div>
2391
+ <div class="progress-bar progress-bar-success" style="width: 35%">
2392
+ <span class="sr-only">35% Complete (success)</span>
2393
+ </div>
2394
+ <div class="progress-bar progress-bar-warning" style="width: 20%">
2395
+ <span class="sr-only">20% Complete (warning)</span>
2396
+ </div>
2397
+ <div class="progress-bar progress-bar-danger" style="width: 10%">
2398
+ <span class="sr-only">10% Complete (danger)</span>
2399
+ </div>
2092
2400
  </div>
2093
2401
  </div>
2094
2402
  {% highlight html %}
2095
2403
  <div class="progress">
2096
- <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
2097
- <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
2098
- <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
2404
+ <div class="progress-bar progress-bar-success" style="width: 35%">
2405
+ <span class="sr-only">35% Complete (success)</span>
2406
+ </div>
2407
+ <div class="progress-bar progress-bar-warning" style="width: 20%">
2408
+ <span class="sr-only">20% Complete (warning)</span>
2409
+ </div>
2410
+ <div class="progress-bar progress-bar-danger" style="width: 10%">
2411
+ <span class="sr-only">10% Complete (danger)</span>
2412
+ </div>
2099
2413
  </div>
2100
2414
  {% endhighlight %}
2101
2415
  </div>
@@ -2225,8 +2539,6 @@ body { padding-bottom: 70px; }
2225
2539
 
2226
2540
 
2227
2541
 
2228
-
2229
-
2230
2542
  <!-- List group
2231
2543
  ================================================== -->
2232
2544
  <div class="bs-docs-section">
@@ -2235,7 +2547,7 @@ body { padding-bottom: 70px; }
2235
2547
  </div>
2236
2548
  <p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
2237
2549
 
2238
- <h3 id="list-group-basic">Basic list group</h3>
2550
+ <h3 id="list-group-basic">Basic example</h3>
2239
2551
  <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
2240
2552
  <div class="bs-example">
2241
2553
  <ul class="list-group">
@@ -2256,7 +2568,7 @@ body { padding-bottom: 70px; }
2256
2568
  </ul>
2257
2569
  {% endhighlight %}
2258
2570
 
2259
- <h3 id="list-group-badges">With badges</h3>
2571
+ <h3 id="list-group-badges">Badges</h3>
2260
2572
  <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
2261
2573
  <div class="bs-example">
2262
2574
  <ul class="list-group">
@@ -2283,7 +2595,7 @@ body { padding-bottom: 70px; }
2283
2595
  </ul>
2284
2596
  {% endhighlight %}
2285
2597
 
2286
- <h3 id="list-group-linked">Linked list group</h3>
2598
+ <h3 id="list-group-linked">Linked items</h3>
2287
2599
  <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
2288
2600
  <div class="bs-example">
2289
2601
  <div class="list-group">
@@ -2347,17 +2659,17 @@ body { padding-bottom: 70px; }
2347
2659
  </div>
2348
2660
  <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
2349
2661
 
2350
- <h3 id="panels-basic">Basic panel</h3>
2662
+ <h3 id="panels-basic">Basic example</h3>
2351
2663
  <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
2352
2664
  <div class="bs-example">
2353
- <div class="panel">
2665
+ <div class="panel panel-default">
2354
2666
  <div class="panel-body">
2355
2667
  Basic panel example
2356
2668
  </div>
2357
2669
  </div>
2358
2670
  </div>
2359
2671
  {% highlight html %}
2360
- <div class="panel">
2672
+ <div class="panel panel-default">
2361
2673
  <div class="panel-body">
2362
2674
  Basic panel example
2363
2675
  </div>
@@ -2367,13 +2679,13 @@ body { padding-bottom: 70px; }
2367
2679
  <h3 id="panels-heading">Panel with heading</h3>
2368
2680
  <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
2369
2681
  <div class="bs-example">
2370
- <div class="panel">
2371
- <div class="panel-heading">Panel heading</div>
2682
+ <div class="panel panel-default">
2683
+ <div class="panel-heading">Panel heading without title</div>
2372
2684
  <div class="panel-body">
2373
2685
  Panel content
2374
2686
  </div>
2375
2687
  </div>
2376
- <div class="panel">
2688
+ <div class="panel panel-default">
2377
2689
  <div class="panel-heading">
2378
2690
  <h3 class="panel-title">Panel title</h3>
2379
2691
  </div>
@@ -2383,14 +2695,14 @@ body { padding-bottom: 70px; }
2383
2695
  </div>
2384
2696
  </div>
2385
2697
  {% highlight html %}
2386
- <div class="panel">
2387
- <div class="panel-heading">Panel heading</div>
2698
+ <div class="panel panel-default">
2699
+ <div class="panel-heading">Panel heading without title</div>
2388
2700
  <div class="panel-body">
2389
2701
  Panel content
2390
2702
  </div>
2391
2703
  </div>
2392
2704
 
2393
- <div class="panel">
2705
+ <div class="panel panel-default">
2394
2706
  <div class="panel-heading">
2395
2707
  <h3 class="panel-title">Panel title</h3>
2396
2708
  </div>
@@ -2401,9 +2713,9 @@ body { padding-bottom: 70px; }
2401
2713
  {% endhighlight %}
2402
2714
 
2403
2715
  <h3 id="panels-footer">Panel with footer</h3>
2404
- <p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
2716
+ <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
2405
2717
  <div class="bs-example">
2406
- <div class="panel">
2718
+ <div class="panel panel-default">
2407
2719
  <div class="panel-body">
2408
2720
  Panel content
2409
2721
  </div>
@@ -2411,7 +2723,7 @@ body { padding-bottom: 70px; }
2411
2723
  </div>
2412
2724
  </div>
2413
2725
  {% highlight html %}
2414
- <div class="panel">
2726
+ <div class="panel panel-default">
2415
2727
  <div class="panel-body">
2416
2728
  Panel content
2417
2729
  </div>
@@ -2438,7 +2750,7 @@ body { padding-bottom: 70px; }
2438
2750
  Panel content
2439
2751
  </div>
2440
2752
  </div>
2441
- <div class="panel panel-warning">
2753
+ <div class="panel panel-info">
2442
2754
  <div class="panel-heading">
2443
2755
  <h3 class="panel-title">Panel title</h3>
2444
2756
  </div>
@@ -2446,7 +2758,7 @@ body { padding-bottom: 70px; }
2446
2758
  Panel content
2447
2759
  </div>
2448
2760
  </div>
2449
- <div class="panel panel-danger">
2761
+ <div class="panel panel-warning">
2450
2762
  <div class="panel-heading">
2451
2763
  <h3 class="panel-title">Panel title</h3>
2452
2764
  </div>
@@ -2454,7 +2766,7 @@ body { padding-bottom: 70px; }
2454
2766
  Panel content
2455
2767
  </div>
2456
2768
  </div>
2457
- <div class="panel panel-info">
2769
+ <div class="panel panel-danger">
2458
2770
  <div class="panel-heading">
2459
2771
  <h3 class="panel-title">Panel title</h3>
2460
2772
  </div>
@@ -2466,15 +2778,126 @@ body { padding-bottom: 70px; }
2466
2778
  {% highlight html %}
2467
2779
  <div class="panel panel-primary">...</div>
2468
2780
  <div class="panel panel-success">...</div>
2781
+ <div class="panel panel-info">...</div>
2469
2782
  <div class="panel panel-warning">...</div>
2470
2783
  <div class="panel panel-danger">...</div>
2471
- <div class="panel panel-info">...</div>
2472
2784
  {% endhighlight %}
2473
2785
 
2786
+ <h3 id="panels-tables">With tables</h3>
2787
+ <p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
2788
+ <div class="bs-example">
2789
+ <div class="panel panel-default">
2790
+ <!-- Default panel contents -->
2791
+ <div class="panel-heading">Panel heading</div>
2792
+ <div class="panel-body">
2793
+ <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
2794
+ </div>
2795
+
2796
+ <!-- Table -->
2797
+ <table class="table">
2798
+ <thead>
2799
+ <tr>
2800
+ <th>#</th>
2801
+ <th>First Name</th>
2802
+ <th>Last Name</th>
2803
+ <th>Username</th>
2804
+ </tr>
2805
+ </thead>
2806
+ <tbody>
2807
+ <tr>
2808
+ <td>1</td>
2809
+ <td>Mark</td>
2810
+ <td>Otto</td>
2811
+ <td>@mdo</td>
2812
+ </tr>
2813
+ <tr>
2814
+ <td>2</td>
2815
+ <td>Jacob</td>
2816
+ <td>Thornton</td>
2817
+ <td>@fat</td>
2818
+ </tr>
2819
+ <tr>
2820
+ <td>3</td>
2821
+ <td>Larry</td>
2822
+ <td>the Bird</td>
2823
+ <td>@twitter</td>
2824
+ </tr>
2825
+ </tbody>
2826
+ </table>
2827
+ </div>
2828
+ </div>
2829
+ {% highlight html %}
2830
+ <div class="panel panel-default">
2831
+ <!-- Default panel contents -->
2832
+ <div class="panel-heading">Panel heading</div>
2833
+ <div class="panel-body">
2834
+ <p>...</p>
2835
+ </div>
2836
+
2837
+ <!-- Table -->
2838
+ <table class="table">
2839
+ ...
2840
+ </table>
2841
+ </div>
2842
+ {% endhighlight %}
2843
+
2844
+ <p>If there is no panel body, the component moves from panel header to table without interruption.</p>
2845
+ <div class="bs-example">
2846
+ <div class="panel panel-default">
2847
+ <!-- Default panel contents -->
2848
+ <div class="panel-heading">Panel heading</div>
2849
+
2850
+ <!-- Table -->
2851
+ <table class="table">
2852
+ <thead>
2853
+ <tr>
2854
+ <th>#</th>
2855
+ <th>First Name</th>
2856
+ <th>Last Name</th>
2857
+ <th>Username</th>
2858
+ </tr>
2859
+ </thead>
2860
+ <tbody>
2861
+ <tr>
2862
+ <td>1</td>
2863
+ <td>Mark</td>
2864
+ <td>Otto</td>
2865
+ <td>@mdo</td>
2866
+ </tr>
2867
+ <tr>
2868
+ <td>2</td>
2869
+ <td>Jacob</td>
2870
+ <td>Thornton</td>
2871
+ <td>@fat</td>
2872
+ </tr>
2873
+ <tr>
2874
+ <td>3</td>
2875
+ <td>Larry</td>
2876
+ <td>the Bird</td>
2877
+ <td>@twitter</td>
2878
+ </tr>
2879
+ </tbody>
2880
+ </table>
2881
+ </div>
2882
+ </div>
2883
+ {% highlight html %}
2884
+ <div class="panel panel-default">
2885
+ <!-- Default panel contents -->
2886
+ <div class="panel-heading">Panel heading</div>
2887
+
2888
+ <!-- Table -->
2889
+ <table class="table">
2890
+ ...
2891
+ </table>
2892
+ </div>
2893
+ {% endhighlight %}
2894
+
2895
+
2896
+
2474
2897
  <h3 id="panels-list-group">With list groups</h3>
2475
2898
  <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
2476
2899
  <div class="bs-example">
2477
- <div class="panel">
2900
+ <div class="panel panel-default">
2478
2901
  <!-- Default panel contents -->
2479
2902
  <div class="panel-heading">Panel heading</div>
2480
2903
  <div class="panel-body">
@@ -2492,7 +2915,7 @@ body { padding-bottom: 70px; }
2492
2915
  </div>
2493
2916
  </div>
2494
2917
  {% highlight html %}
2495
- <div class="panel">
2918
+ <div class="panel panel-default">
2496
2919
  <!-- Default panel contents -->
2497
2920
  <div class="panel-heading">Panel heading</div>
2498
2921
  <div class="panel-body">
@@ -2537,7 +2960,7 @@ body { padding-bottom: 70px; }
2537
2960
  <p>Control padding and rounded corners with two optional modifier classes.</p>
2538
2961
  <div class="bs-example">
2539
2962
  <div class="well well-lg">
2540
- Look, I'm in a well!
2963
+ Look, I'm in a large well!
2541
2964
  </div>
2542
2965
  </div>
2543
2966
  {% highlight html %}
@@ -2546,7 +2969,7 @@ body { padding-bottom: 70px; }
2546
2969
 
2547
2970
  <div class="bs-example">
2548
2971
  <div class="well well-sm">
2549
- Look, I'm in a well!
2972
+ Look, I'm in a small well!
2550
2973
  </div>
2551
2974
  </div>
2552
2975
  {% highlight html %}