sass-twitter-bootstrap 0.1.0 → 2.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (245) hide show
  1. data/lib/{sass-twitter-bootstrap.rb → sass/twitter/bootstrap.rb} +1 -1
  2. data/lib/sass/twitter/bootstrap/rails.rb +1 -5
  3. data/lib/sass/twitter/bootstrap/rails/engine.rb +12 -0
  4. data/lib/sass/twitter/bootstrap/version.rb +1 -1
  5. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  6. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  7. data/vendor/assets/javascripts/twitter/bootstrap-alert.js +32 -28
  8. data/vendor/assets/javascripts/twitter/bootstrap-button.js +33 -29
  9. data/vendor/assets/javascripts/twitter/bootstrap-carousel.js +21 -33
  10. data/vendor/assets/javascripts/twitter/bootstrap-collapse.js +26 -47
  11. data/vendor/assets/javascripts/twitter/bootstrap-dropdown.js +10 -18
  12. data/vendor/assets/javascripts/twitter/bootstrap-modal.js +17 -25
  13. data/vendor/assets/javascripts/twitter/bootstrap-popover.js +10 -13
  14. data/vendor/assets/javascripts/twitter/bootstrap-scrollspy.js +18 -44
  15. data/vendor/assets/javascripts/twitter/bootstrap-tab.js +7 -12
  16. data/vendor/assets/javascripts/twitter/bootstrap-tooltip.js +35 -40
  17. data/vendor/assets/javascripts/twitter/bootstrap-transition.js +20 -30
  18. data/vendor/assets/javascripts/twitter/bootstrap-typeahead.js +15 -29
  19. data/vendor/assets/stylesheets/tests/buttons.html +139 -0
  20. data/vendor/assets/stylesheets/tests/css-tests.css +99 -1
  21. data/vendor/assets/stylesheets/tests/css-tests.html +519 -37
  22. data/vendor/assets/stylesheets/tests/forms-responsive.html +71 -0
  23. data/vendor/assets/stylesheets/tests/navbar-fixed-top.html +104 -0
  24. data/vendor/assets/stylesheets/tests/navbar-static-top.html +107 -0
  25. data/vendor/assets/stylesheets/tests/navbar.html +38 -39
  26. data/vendor/assets/stylesheets/twitter/_accordion.scss +0 -5
  27. data/vendor/assets/stylesheets/twitter/_alerts.scss +15 -3
  28. data/vendor/assets/stylesheets/twitter/_breadcrumbs.scss +0 -2
  29. data/vendor/assets/stylesheets/twitter/_button-groups.scss +32 -76
  30. data/vendor/assets/stylesheets/twitter/_buttons.scss +25 -33
  31. data/vendor/assets/stylesheets/twitter/_close.scss +1 -12
  32. data/vendor/assets/stylesheets/twitter/_code.scss +8 -8
  33. data/vendor/assets/stylesheets/twitter/_component-animations.scss +7 -9
  34. data/vendor/assets/stylesheets/twitter/_dropdowns.scss +45 -58
  35. data/vendor/assets/stylesheets/twitter/_forms.scss +146 -206
  36. data/vendor/assets/stylesheets/twitter/_grid.scss +5 -2
  37. data/vendor/assets/stylesheets/twitter/_hero-unit.scss +1 -3
  38. data/vendor/assets/stylesheets/twitter/_labels.scss +32 -0
  39. data/vendor/assets/stylesheets/twitter/_layouts.scss +2 -2
  40. data/vendor/assets/stylesheets/twitter/_mixins.scss +208 -273
  41. data/vendor/assets/stylesheets/twitter/_modals.scss +8 -14
  42. data/vendor/assets/stylesheets/twitter/_navbar.scss +73 -132
  43. data/vendor/assets/stylesheets/twitter/_navs.scss +43 -53
  44. data/vendor/assets/stylesheets/twitter/_pager.scss +0 -6
  45. data/vendor/assets/stylesheets/twitter/_pagination.scss +0 -1
  46. data/vendor/assets/stylesheets/twitter/_progress-bars.scss +6 -28
  47. data/vendor/assets/stylesheets/twitter/_reset.scss +4 -9
  48. data/vendor/assets/stylesheets/twitter/_scaffolding.scss +8 -4
  49. data/vendor/assets/stylesheets/twitter/_sprites.scss +7 -40
  50. data/vendor/assets/stylesheets/twitter/_tables.scss +33 -38
  51. data/vendor/assets/stylesheets/twitter/_thumbnails.scss +2 -14
  52. data/vendor/assets/stylesheets/twitter/_tooltip.scss +1 -1
  53. data/vendor/assets/stylesheets/twitter/_type.scss +14 -28
  54. data/vendor/assets/stylesheets/twitter/_variables.scss +19 -116
  55. data/vendor/assets/stylesheets/twitter/_wells.scss +0 -10
  56. data/vendor/assets/stylesheets/twitter/bootstrap.scss +7 -3
  57. data/vendor/assets/stylesheets/twitter/responsive.scss +301 -15
  58. metadata +25 -190
  59. data/.gitignore +0 -4
  60. data/Gemfile +0 -3
  61. data/Gemfile.lock +0 -14
  62. data/LICENSE +0 -176
  63. data/Makefile +0 -94
  64. data/README.md +0 -217
  65. data/Rakefile +0 -52
  66. data/bootstrap-2.0.4.css +0 -4661
  67. data/bootstrap-2.0.4.min.css +0 -9
  68. data/bootstrap-responsive-2.0.4.css +0 -932
  69. data/bootstrap-responsive-2.0.4.min.css +0 -9
  70. data/docs/assets/css/bootstrap-responsive.css +0 -932
  71. data/docs/assets/css/bootstrap.css +0 -4661
  72. data/docs/assets/css/docs.css +0 -846
  73. data/docs/assets/ico/apple-touch-icon-114-precomposed.png +0 -0
  74. data/docs/assets/ico/apple-touch-icon-144-precomposed.png +0 -0
  75. data/docs/assets/ico/apple-touch-icon-57-precomposed.png +0 -0
  76. data/docs/assets/ico/apple-touch-icon-72-precomposed.png +0 -0
  77. data/docs/assets/ico/favicon.ico +0 -0
  78. data/docs/assets/img/bird.png +0 -0
  79. data/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg +0 -0
  80. data/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg +0 -0
  81. data/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg +0 -0
  82. data/docs/assets/img/browsers.png +0 -0
  83. data/docs/assets/img/example-sites/fleetio.png +0 -0
  84. data/docs/assets/img/example-sites/jshint.png +0 -0
  85. data/docs/assets/img/example-sites/kippt.png +0 -0
  86. data/docs/assets/img/example-sites/soundready.png +0 -0
  87. data/docs/assets/img/examples/bootstrap-example-fluid.jpg +0 -0
  88. data/docs/assets/img/examples/bootstrap-example-hero.jpg +0 -0
  89. data/docs/assets/img/examples/bootstrap-example-starter.jpg +0 -0
  90. data/docs/assets/img/github-16px.png +0 -0
  91. data/docs/assets/img/glyphicons-halflings-white.png +0 -0
  92. data/docs/assets/img/glyphicons-halflings.png +0 -0
  93. data/docs/assets/img/glyphicons/glyphicons_009_magic.png +0 -0
  94. data/docs/assets/img/glyphicons/glyphicons_042_group.png +0 -0
  95. data/docs/assets/img/glyphicons/glyphicons_079_podium.png +0 -0
  96. data/docs/assets/img/glyphicons/glyphicons_082_roundabout.png +0 -0
  97. data/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png +0 -0
  98. data/docs/assets/img/glyphicons/glyphicons_163_iphone.png +0 -0
  99. data/docs/assets/img/glyphicons/glyphicons_214_resize_small.png +0 -0
  100. data/docs/assets/img/glyphicons/glyphicons_266_book_open.png +0 -0
  101. data/docs/assets/img/grid-18px-masked.png +0 -0
  102. data/docs/assets/img/icon-css3.png +0 -0
  103. data/docs/assets/img/icon-github.png +0 -0
  104. data/docs/assets/img/icon-html5.png +0 -0
  105. data/docs/assets/img/icon-twitter.png +0 -0
  106. data/docs/assets/img/less-logo-large.png +0 -0
  107. data/docs/assets/img/less-small.png +0 -0
  108. data/docs/assets/img/responsive-illustrations.png +0 -0
  109. data/docs/assets/js/README.md +0 -106
  110. data/docs/assets/js/application.js +0 -184
  111. data/docs/assets/js/bootstrap-alert.js +0 -90
  112. data/docs/assets/js/bootstrap-button.js +0 -96
  113. data/docs/assets/js/bootstrap-carousel.js +0 -169
  114. data/docs/assets/js/bootstrap-collapse.js +0 -157
  115. data/docs/assets/js/bootstrap-dropdown.js +0 -100
  116. data/docs/assets/js/bootstrap-modal.js +0 -218
  117. data/docs/assets/js/bootstrap-popover.js +0 -98
  118. data/docs/assets/js/bootstrap-scrollspy.js +0 -151
  119. data/docs/assets/js/bootstrap-tab.js +0 -135
  120. data/docs/assets/js/bootstrap-tooltip.js +0 -275
  121. data/docs/assets/js/bootstrap-transition.js +0 -61
  122. data/docs/assets/js/bootstrap-typeahead.js +0 -285
  123. data/docs/assets/js/bootstrap.js +0 -1825
  124. data/docs/assets/js/bootstrap.min.js +0 -6
  125. data/docs/assets/js/google-code-prettify/prettify.css +0 -30
  126. data/docs/assets/js/google-code-prettify/prettify.js +0 -28
  127. data/docs/assets/js/jquery.js +0 -9252
  128. data/docs/base-css.html +0 -1710
  129. data/docs/build/index.js +0 -44
  130. data/docs/build/node_modules/.bin/hulk +0 -93
  131. data/docs/build/node_modules/hogan.js/.git_ignore +0 -1
  132. data/docs/build/node_modules/hogan.js/.gitmodules +0 -3
  133. data/docs/build/node_modules/hogan.js/LICENSE +0 -177
  134. data/docs/build/node_modules/hogan.js/Makefile +0 -62
  135. data/docs/build/node_modules/hogan.js/README.md +0 -93
  136. data/docs/build/node_modules/hogan.js/bin/hulk +0 -93
  137. data/docs/build/node_modules/hogan.js/lib/compiler.js +0 -348
  138. data/docs/build/node_modules/hogan.js/lib/hogan.js +0 -20
  139. data/docs/build/node_modules/hogan.js/lib/template.js +0 -233
  140. data/docs/build/node_modules/hogan.js/package.json +0 -20
  141. data/docs/build/node_modules/hogan.js/test/html/list.html +0 -8
  142. data/docs/build/node_modules/hogan.js/test/index.html +0 -13
  143. data/docs/build/node_modules/hogan.js/test/index.js +0 -848
  144. data/docs/build/node_modules/hogan.js/test/mustache.js +0 -90
  145. data/docs/build/node_modules/hogan.js/test/spec.js +0 -77
  146. data/docs/build/node_modules/hogan.js/test/spec/Changes +0 -31
  147. data/docs/build/node_modules/hogan.js/test/spec/README.md +0 -65
  148. data/docs/build/node_modules/hogan.js/test/spec/Rakefile +0 -27
  149. data/docs/build/node_modules/hogan.js/test/spec/TESTING.md +0 -46
  150. data/docs/build/node_modules/hogan.js/test/spec/specs/comments.json +0 -1
  151. data/docs/build/node_modules/hogan.js/test/spec/specs/comments.yml +0 -103
  152. data/docs/build/node_modules/hogan.js/test/spec/specs/delimiters.json +0 -1
  153. data/docs/build/node_modules/hogan.js/test/spec/specs/delimiters.yml +0 -158
  154. data/docs/build/node_modules/hogan.js/test/spec/specs/interpolation.json +0 -1
  155. data/docs/build/node_modules/hogan.js/test/spec/specs/interpolation.yml +0 -230
  156. data/docs/build/node_modules/hogan.js/test/spec/specs/inverted.json +0 -1
  157. data/docs/build/node_modules/hogan.js/test/spec/specs/inverted.yml +0 -193
  158. data/docs/build/node_modules/hogan.js/test/spec/specs/partials.json +0 -1
  159. data/docs/build/node_modules/hogan.js/test/spec/specs/partials.yml +0 -109
  160. data/docs/build/node_modules/hogan.js/test/spec/specs/sections.json +0 -1
  161. data/docs/build/node_modules/hogan.js/test/spec/specs/sections.yml +0 -256
  162. data/docs/build/node_modules/hogan.js/test/spec/specs/~lambdas.json +0 -1
  163. data/docs/build/node_modules/hogan.js/test/spec/specs/~lambdas.yml +0 -149
  164. data/docs/build/node_modules/hogan.js/test/templates/list.mustache +0 -8
  165. data/docs/build/node_modules/hogan.js/tools/release.js +0 -74
  166. data/docs/build/node_modules/hogan.js/tools/web_templates.js +0 -32
  167. data/docs/build/node_modules/hogan.js/web/1.0.0/hogan.js +0 -500
  168. data/docs/build/node_modules/hogan.js/web/1.0.0/hogan.min.js +0 -14
  169. data/docs/build/node_modules/hogan.js/web/builds/1.0.0/hogan.js +0 -500
  170. data/docs/build/node_modules/hogan.js/web/builds/1.0.0/hogan.min.js +0 -14
  171. data/docs/build/node_modules/hogan.js/web/builds/1.0.3/hogan.js +0 -545
  172. data/docs/build/node_modules/hogan.js/web/builds/1.0.3/hogan.min.js +0 -5
  173. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.amd.js +0 -576
  174. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.common.js +0 -576
  175. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.js +0 -572
  176. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.amd.js +0 -5
  177. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.common.js +0 -5
  178. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.js +0 -5
  179. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.mustache.js +0 -5
  180. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.mustache.js +0 -619
  181. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/template-1.0.5.js +0 -233
  182. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/template-1.0.5.min.js +0 -5
  183. data/docs/build/node_modules/hogan.js/web/favicon.ico +0 -0
  184. data/docs/build/node_modules/hogan.js/web/images/logo.png +0 -0
  185. data/docs/build/node_modules/hogan.js/web/images/noise.png +0 -0
  186. data/docs/build/node_modules/hogan.js/web/images/small-hogan-icon.png +0 -0
  187. data/docs/build/node_modules/hogan.js/web/images/stripes.png +0 -0
  188. data/docs/build/node_modules/hogan.js/web/index.html.mustache +0 -139
  189. data/docs/build/node_modules/hogan.js/web/stylesheets/layout.css +0 -206
  190. data/docs/build/node_modules/hogan.js/web/stylesheets/skeleton.css +0 -236
  191. data/docs/build/node_modules/hogan.js/wrappers/amd.js.mustache +0 -21
  192. data/docs/build/node_modules/hogan.js/wrappers/common.js.mustache +0 -21
  193. data/docs/build/node_modules/hogan.js/wrappers/js.mustache +0 -17
  194. data/docs/build/node_modules/hogan.js/wrappers/mustache.js.mustache +0 -64
  195. data/docs/build/package.json +0 -6
  196. data/docs/components.html +0 -1931
  197. data/docs/download.html +0 -454
  198. data/docs/examples.html +0 -147
  199. data/docs/examples/fluid.html +0 -162
  200. data/docs/examples/hero.html +0 -109
  201. data/docs/examples/starter-template.html +0 -79
  202. data/docs/index.html +0 -259
  203. data/docs/javascript.html +0 -1520
  204. data/docs/less.html +0 -1060
  205. data/docs/scaffolding.html +0 -671
  206. data/docs/templates/layout.mustache +0 -146
  207. data/docs/templates/pages/base-css.mustache +0 -1594
  208. data/docs/templates/pages/components.mustache +0 -1815
  209. data/docs/templates/pages/download.mustache +0 -338
  210. data/docs/templates/pages/examples.mustache +0 -31
  211. data/docs/templates/pages/index.mustache +0 -144
  212. data/docs/templates/pages/javascript.mustache +0 -1405
  213. data/docs/templates/pages/less.mustache +0 -944
  214. data/docs/templates/pages/scaffolding.mustache +0 -555
  215. data/docs/templates/pages/upgrading.mustache +0 -194
  216. data/docs/upgrading.html +0 -310
  217. data/js/tests/index.html +0 -54
  218. data/js/tests/phantom.js +0 -63
  219. data/js/tests/server.js +0 -14
  220. data/js/tests/unit/bootstrap-alert.js +0 -56
  221. data/js/tests/unit/bootstrap-button.js +0 -77
  222. data/js/tests/unit/bootstrap-carousel.js +0 -28
  223. data/js/tests/unit/bootstrap-collapse.js +0 -54
  224. data/js/tests/unit/bootstrap-dropdown.js +0 -87
  225. data/js/tests/unit/bootstrap-modal.js +0 -114
  226. data/js/tests/unit/bootstrap-phantom.js +0 -21
  227. data/js/tests/unit/bootstrap-popover.js +0 -93
  228. data/js/tests/unit/bootstrap-scrollspy.js +0 -31
  229. data/js/tests/unit/bootstrap-tab.js +0 -61
  230. data/js/tests/unit/bootstrap-tooltip.js +0 -155
  231. data/js/tests/unit/bootstrap-transition.js +0 -13
  232. data/js/tests/unit/bootstrap-typeahead.js +0 -148
  233. data/js/tests/vendor/jquery.js +0 -9252
  234. data/js/tests/vendor/qunit.css +0 -232
  235. data/js/tests/vendor/qunit.js +0 -1510
  236. data/package.json +0 -25
  237. data/sass-twitter-bootstrap.gemspec +0 -19
  238. data/vendor/assets/javascripts/README.md +0 -112
  239. data/vendor/assets/javascripts/twitter/bootstrap.js +0 -12
  240. data/vendor/assets/stylesheets/twitter/_labels-badges.scss +0 -52
  241. data/vendor/assets/stylesheets/twitter/_responsive-1200px-min.scss +0 -26
  242. data/vendor/assets/stylesheets/twitter/_responsive-767px-max.scss +0 -149
  243. data/vendor/assets/stylesheets/twitter/_responsive-768px-979px.scss +0 -17
  244. data/vendor/assets/stylesheets/twitter/_responsive-navbar.scss +0 -153
  245. data/vendor/assets/stylesheets/twitter/_responsive-utilities.scss +0 -41
@@ -1,1815 +0,0 @@
1
- <!-- Masthead
2
- ================================================== -->
3
- <header class="jumbotron subhead" id="overview">
4
- <h1>{{_i}}Components{{/i}}</h1>
5
- <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
6
- <div class="subnav">
7
- <ul class="nav nav-pills">
8
- <li class="dropdown">
9
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Buttons{{/i}} <b class="caret"></b></a>
10
- <ul class="dropdown-menu">
11
- <li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
12
- <li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
13
- </ul>
14
- </li>
15
- <li class="dropdown">
16
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Navigation{{/i}} <b class="caret"></b></a>
17
- <ul class="dropdown-menu">
18
- <li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
19
- <li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
20
- <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
21
- <li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li>
22
- </ul>
23
- </li>
24
- <li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
25
- <li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
26
- <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
27
- <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
28
- <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
29
- <li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
30
- <li><a href="#misc">{{_i}}Miscellaneous{{/i}}</a></li>
31
- </ul>
32
- </div>
33
- </header>
34
-
35
-
36
-
37
- <!-- Button Groups
38
- ================================================== -->
39
- <section id="buttonGroups">
40
- <div class="page-header">
41
- <h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
42
- </div>
43
- <div class="row">
44
- <div class="span4">
45
- <h3>{{_i}}Button groups{{/i}}</h3>
46
- <p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.{{/i}}</p>
47
- <h3>{{_i}}Best practices{{/i}}</h3>
48
- <p>{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
49
- <ul>
50
- <li>{{_i}}Always use the same element in a single button group, <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>.{{/i}}</li>
51
- <li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
52
- <li>{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}</li>
53
- </ul>
54
- <p>{{_i}}<span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}</p>
55
- </div>
56
- <div class="span4">
57
- <h3>{{_i}}Default example{{/i}}</h3>
58
- <p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
59
- <div class="">
60
- <div class="btn-group" style="margin: 9px 0;">
61
- <button class="btn">{{_i}}Left{{/i}}</button>
62
- <button class="btn">{{_i}}Middle{{/i}}</button>
63
- <button class="btn">{{_i}}Right{{/i}}</button>
64
- </div>
65
- </div>
66
- <pre class="prettyprint linenums">
67
- &lt;div class="btn-group"&gt;
68
- &lt;button class="btn"&gt;1&lt;/button&gt;
69
- &lt;button class="btn"&gt;2&lt;/button&gt;
70
- &lt;button class="btn"&gt;3&lt;/button&gt;
71
- &lt;/div&gt;
72
- </pre>
73
- <h3>{{_i}}Toolbar example{{/i}}</h3>
74
- <p>{{_i}}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.{{/i}}</p>
75
- <div class="btn-toolbar">
76
- <div class="btn-group">
77
- <button class="btn">1</button>
78
- <button class="btn">2</button>
79
- <button class="btn">3</button>
80
- <button class="btn">4</button>
81
- </div>
82
- <div class="btn-group">
83
- <button class="btn">5</button>
84
- <button class="btn">6</button>
85
- <button class="btn">7</button>
86
- </div>
87
- <div class="btn-group">
88
- <button class="btn">8</button>
89
- </div>
90
- </div>
91
- <pre class="prettyprint linenums">
92
- &lt;div class="btn-toolbar"&gt;
93
- &lt;div class="btn-group"&gt;
94
- ...
95
- &lt;/div&gt;
96
- &lt;/div&gt;
97
- </pre>
98
- </div>
99
- <div class="span4">
100
- <h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
101
- <p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
102
- <p><a class="btn js-btn" href="./javascript.html#buttons">{{_i}}Get the javascript &raquo;{{/i}}</a></p>
103
- <h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
104
- <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
105
- </div>
106
- </div>
107
- </section>
108
-
109
-
110
-
111
- <!-- Split button dropdowns
112
- ================================================== -->
113
- <section id="buttonDropdowns">
114
- <div class="page-header">
115
- <h1>{{_i}}Button dropdown menus{{/i}} <small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1>
116
- </div>
117
-
118
- <h2>{{_i}}Button dropdowns{{/i}}</h2>
119
- <div class="row">
120
- <div class="span4">
121
- <h3>{{_i}}Overview and examples{{/i}}</h3>
122
- <p>{{_i}}Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.{{/i}}</p>
123
- <div class="btn-toolbar" style="margin-top: 18px;">
124
- <div class="btn-group">
125
- <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
126
- <ul class="dropdown-menu">
127
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
128
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
129
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
130
- <li class="divider"></li>
131
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
132
- </ul>
133
- </div><!-- /btn-group -->
134
- <div class="btn-group">
135
- <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
136
- <ul class="dropdown-menu">
137
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
138
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
139
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
140
- <li class="divider"></li>
141
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
142
- </ul>
143
- </div><!-- /btn-group -->
144
- <div class="btn-group">
145
- <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">{{_i}}Danger{{/i}} <span class="caret"></span></button>
146
- <ul class="dropdown-menu">
147
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
148
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
149
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
150
- <li class="divider"></li>
151
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
152
- </ul>
153
- </div><!-- /btn-group -->
154
- </div>
155
- <div class="btn-toolbar">
156
- <div class="btn-group">
157
- <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">{{_i}}Warning{{/i}} <span class="caret"></span></button>
158
- <ul class="dropdown-menu">
159
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
160
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
161
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
162
- <li class="divider"></li>
163
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
164
- </ul>
165
- </div><!-- /btn-group -->
166
- <div class="btn-group">
167
- <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">{{_i}}Success{{/i}} <span class="caret"></span></button>
168
- <ul class="dropdown-menu">
169
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
170
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
171
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
172
- <li class="divider"></li>
173
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
174
- </ul>
175
- </div><!-- /btn-group -->
176
- <div class="btn-group">
177
- <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">{{_i}}Info{{/i}} <span class="caret"></span></button>
178
- <ul class="dropdown-menu">
179
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
180
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
181
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
182
- <li class="divider"></li>
183
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
184
- </ul>
185
- </div><!-- /btn-group -->
186
- <div class="btn-group">
187
- <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">{{_i}}Inverse{{/i}} <span class="caret"></span></button>
188
- <ul class="dropdown-menu">
189
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
190
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
191
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
192
- <li class="divider"></li>
193
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
194
- </ul>
195
- </div><!-- /btn-group -->
196
- </div><!-- /btn-toolbar -->
197
- </div>
198
- <div class="span8">
199
- <h3>{{_i}}Example markup{{/i}}</h3>
200
- <p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p>
201
- <pre class="prettyprint linenums">
202
- &lt;div class="btn-group"&gt;
203
- &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
204
- {{_i}}Action{{/i}}
205
- &lt;span class="caret"&gt;&lt;/span&gt;
206
- &lt;/a&gt;
207
- &lt;ul class="dropdown-menu"&gt;
208
- &lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
209
- &lt;/ul&gt;
210
- &lt;/div&gt;
211
- </pre>
212
- </div>
213
- </div>
214
- <div class="row">
215
- <div class="span4">
216
- <h3>{{_i}}Works with all button sizes{{/i}}</h3>
217
- <p>{{_i}}Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.{{/i}}</p>
218
- <div class="btn-toolbar" style="margin-top: 18px;">
219
- <div class="btn-group">
220
- <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">{{_i}}Large button{{/i}} <span class="caret"></span></button>
221
- <ul class="dropdown-menu">
222
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
223
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
224
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
225
- <li class="divider"></li>
226
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
227
- </ul>
228
- </div><!-- /btn-group -->
229
- <div class="btn-group">
230
- <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">{{_i}}Small button{{/i}} <span class="caret"></span></button>
231
- <ul class="dropdown-menu">
232
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
233
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
234
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
235
- <li class="divider"></li>
236
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
237
- </ul>
238
- </div><!-- /btn-group -->
239
- <div class="btn-group">
240
- <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">{{_i}}Mini button{{/i}} <span class="caret"></span></button>
241
- <ul class="dropdown-menu">
242
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
243
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
244
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
245
- <li class="divider"></li>
246
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
247
- </ul>
248
- </div><!-- /btn-group -->
249
- </div><!-- /btn-toolbar -->
250
- </div><!--/span-->
251
- <div class="span4">
252
- <h3>{{_i}}Requires javascript{{/i}}</h3>
253
- <p>{{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
254
- <p>{{_i}}In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
255
- </div><!--/span-->
256
- </div><!--/row-->
257
- <br>
258
-
259
- <h2>{{_i}}Split button dropdowns{{/i}}</h2>
260
- <div class="row">
261
- <div class="span4">
262
- <h3>{{_i}}Overview and examples{{/i}}</h3>
263
- <p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
264
- <div class="btn-toolbar" style="margin-top: 18px;">
265
- <div class="btn-group">
266
- <button class="btn">{{_i}}Action{{/i}}</button>
267
- <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
268
- <ul class="dropdown-menu">
269
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
270
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
271
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
272
- <li class="divider"></li>
273
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
274
- </ul>
275
- </div><!-- /btn-group -->
276
- <div class="btn-group">
277
- <button class="btn btn-primary">{{_i}}Action{{/i}}</button>
278
- <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
279
- <ul class="dropdown-menu">
280
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
281
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
282
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
283
- <li class="divider"></li>
284
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
285
- </ul>
286
- </div><!-- /btn-group -->
287
- <div class="btn-group">
288
- <button class="btn btn-danger">{{_i}}Danger{{/i}}</button>
289
- <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
290
- <ul class="dropdown-menu">
291
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
292
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
293
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
294
- <li class="divider"></li>
295
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
296
- </ul>
297
- </div><!-- /btn-group -->
298
- </div>
299
- <div class="btn-toolbar">
300
- <div class="btn-group">
301
- <button class="btn btn-warning">{{_i}}Warning{{/i}}</button>
302
- <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
303
- <ul class="dropdown-menu">
304
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
305
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
306
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
307
- <li class="divider"></li>
308
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
309
- </ul>
310
- </div><!-- /btn-group -->
311
- <div class="btn-group">
312
- <button class="btn btn-success">{{_i}}Success{{/i}}</button>
313
- <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
314
- <ul class="dropdown-menu">
315
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
316
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
317
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
318
- <li class="divider"></li>
319
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
320
- </ul>
321
- </div><!-- /btn-group -->
322
- <div class="btn-group">
323
- <button class="btn btn-info">{{_i}}Info{{/i}}</button>
324
- <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
325
- <ul class="dropdown-menu">
326
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
327
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
328
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
329
- <li class="divider"></li>
330
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
331
- </ul>
332
- </div><!-- /btn-group -->
333
- </div>
334
- <div class="btn-toolbar">
335
- <div class="btn-group">
336
- <button class="btn btn-inverse">{{_i}}Inverse{{/i}}</button>
337
- <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
338
- <ul class="dropdown-menu">
339
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
340
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
341
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
342
- <li class="divider"></li>
343
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
344
- </ul>
345
- </div><!-- /btn-group -->
346
- </div><!-- /btn-toolbar -->
347
- <h3>{{_i}}Sizes{{/i}}</h3>
348
- <p>{{_i}}Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.{{/i}}</p>
349
- <div class="btn-toolbar">
350
- <div class="btn-group">
351
- <button class="btn btn-large">{{_i}}Large action{{/i}}</button>
352
- <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
353
- <ul class="dropdown-menu">
354
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
355
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
356
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
357
- <li class="divider"></li>
358
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
359
- </ul>
360
- </div><!-- /btn-group -->
361
- </div><!-- /btn-toolbar -->
362
- <div class="btn-toolbar">
363
- <div class="btn-group">
364
- <button class="btn btn-small">{{_i}}Small action{{/i}}</button>
365
- <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
366
- <ul class="dropdown-menu">
367
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
368
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
369
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
370
- <li class="divider"></li>
371
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
372
- </ul>
373
- </div><!-- /btn-group -->
374
- </div><!-- /btn-toolbar -->
375
- <div class="btn-toolbar">
376
- <div class="btn-group">
377
- <button class="btn btn-mini">{{_i}}Mini action{{/i}}</button>
378
- <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
379
- <ul class="dropdown-menu">
380
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
381
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
382
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
383
- <li class="divider"></li>
384
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
385
- </ul>
386
- </div><!-- /btn-group -->
387
- </div><!-- /btn-toolbar -->
388
- <pre class="prettyprint linenums">
389
- &lt;div class="btn-group"&gt;
390
- ...
391
- &lt;ul class="dropdown-menu pull-right"&gt;
392
- &lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
393
- &lt;/ul&gt;
394
- &lt;/div&gt;
395
- </pre>
396
- </div>
397
- <div class="span8">
398
- <h3>{{_i}}Example markup{{/i}}</h3>
399
- <p>{{_i}}We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.{{/i}}</p>
400
- <pre class="prettyprint linenums">
401
- &lt;div class="btn-group"&gt;
402
- &lt;button class="btn"&gt;{{_i}}Action{{/i}}&lt;/button&gt;
403
- &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
404
- &lt;span class="caret"&gt;&lt;/span&gt;
405
- &lt;/button&gt;
406
- &lt;ul class="dropdown-menu"&gt;
407
- &lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
408
- &lt;/ul&gt;
409
- &lt;/div&gt;
410
- </pre>
411
- <h3>{{_i}}Dropup menus{{/i}}</h3>
412
- <p>{{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.{{/i}}</p>
413
- <div class="btn-toolbar" style="margin-top: 9px;">
414
- <div class="btn-group dropup">
415
- <button class="btn">{{_i}}Dropup{{/i}}</button>
416
- <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
417
- <ul class="dropdown-menu">
418
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
419
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
420
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
421
- <li class="divider"></li>
422
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
423
- </ul>
424
- </div><!-- /btn-group -->
425
- <div class="btn-group dropup">
426
- <button class="btn primary">{{_i}}Right dropup{{/i}}</button>
427
- <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
428
- <ul class="dropdown-menu pull-right">
429
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
430
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
431
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
432
- <li class="divider"></li>
433
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
434
- </ul>
435
- </div><!-- /btn-group -->
436
- </div>
437
- <pre class="prettyprint linenums">
438
- &lt;div class="btn-group dropup"&gt;
439
- &lt;button class="btn"&gt;{{_i}}Dropup{{/i}}&lt;/button&gt;
440
- &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
441
- &lt;span class="caret"&gt;&lt;/span&gt;
442
- &lt;/button&gt;
443
- &lt;ul class="dropdown-menu"&gt;
444
- &lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
445
- &lt;/ul&gt;
446
- &lt;/div&gt;
447
- </pre>
448
-
449
- </div>
450
- </div>
451
- </section>
452
-
453
-
454
-
455
- <!-- Nav, Tabs, & Pills
456
- ================================================== -->
457
- <section id="navs">
458
- <div class="page-header">
459
- <h1>{{_i}}Nav, tabs, and pills{{/i}} <small>{{_i}}Highly customizable list-style navigation{{/i}}</small></h1>
460
- </div>
461
-
462
- <h2>{{_i}}Lightweight defaults{{/i}} <small>{{_i}}Same markup, different classes{{/i}}</small></h2>
463
- <div class="row">
464
- <div class="span4">
465
- <h3>{{_i}}Powerful base class{{/i}}</h3>
466
- <p>{{_i}}All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
467
- <h3>{{_i}}When to use{{/i}}</h3>
468
- <p>{{_i}}Tabs and pills are great for sections of content or navigating between pages of related content.{{/i}}</p>
469
- <h3>{{_i}}Component alignment{{/i}}</h3>
470
- <p>{{_i}}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.{{/i}}</p>
471
- </div>
472
- <div class="span4">
473
- <h3>{{_i}}Basic tabs{{/i}}</h3>
474
- <p>{{_i}}Take a regular <code>&lt;ul&gt;</code> of links and add <code>.nav-tabs</code>:{{/i}}</p>
475
- <ul class="nav nav-tabs">
476
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
477
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
478
- <li><a href="#">{{_i}}Messages{{/i}}</a></li>
479
- </ul>
480
- <pre class="prettyprint linenums">
481
- &lt;ul class="nav nav-tabs"&gt;
482
- &lt;li class="active"&gt;
483
- &lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;
484
- &lt;/li&gt;
485
- &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
486
- &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
487
- &lt;/ul&gt;
488
- </pre>
489
- </div>
490
- <div class="span4">
491
- <h3>{{_i}}Basic pills{{/i}}</h3>
492
- <p>{{_i}}Take that same HTML, but use <code>.nav-pills</code> instead:{{/i}}</p>
493
- <ul class="nav nav-pills">
494
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
495
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
496
- <li><a href="#">{{_i}}Messages{{/i}}</a></li>
497
- </ul>
498
- <pre class="prettyprint linenums">
499
- &lt;ul class="nav nav-pills"&gt;
500
- &lt;li class="active"&gt;
501
- &lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;
502
- &lt;/li&gt;
503
- &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
504
- &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
505
- &lt;/ul&gt;
506
- </pre>
507
- </div>
508
- </div>
509
-
510
- <h2>{{_i}}Stackable{{/i}} <small>{{_i}}Make tabs or pills vertical{{/i}}</small></h2>
511
- <div class="row">
512
- <div class="span4">
513
- <h3>{{_i}}How to stack 'em{{/i}}</h3>
514
- <p>{{_i}}As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.{{/i}}</p>
515
- </div>
516
- <div class="span4">
517
- <h3>{{_i}}Stacked tabs{{/i}}</h3>
518
- <ul class="nav nav-tabs nav-stacked">
519
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
520
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
521
- <li><a href="#">{{_i}}Messages{{/i}}</a></li>
522
- </ul>
523
- <pre class="prettyprint linenums">
524
- &lt;ul class="nav nav-tabs nav-stacked"&gt;
525
- ...
526
- &lt;/ul&gt;
527
- </pre>
528
- </div>
529
- <div class="span4">
530
- <h3>{{_i}}Stacked pills{{/i}}</h3>
531
- <ul class="nav nav-pills nav-stacked">
532
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
533
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
534
- <li><a href="#">{{_i}}Messages{{/i}}</a></li>
535
- </ul>
536
- <pre class="prettyprint linenums">
537
- &lt;ul class="nav nav-pills nav-stacked"&gt;
538
- ...
539
- &lt;/ul&gt;
540
- </pre>
541
- </div>
542
- </div>
543
-
544
- <h2>{{_i}}Dropdowns{{/i}} <small>{{_i}}For advanced nav components{{/i}}</small></h2>
545
- <div class="row">
546
- <div class="span4">
547
- <h3>{{_i}}Rich menus made easy{{/i}}</h3>
548
- <p>{{_i}}Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.{{/i}}</p>
549
- <p>{{_i}}Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.{{/i}}</p>
550
- </div>
551
- <div class="span4">
552
- <h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
553
- <ul class="nav nav-tabs">
554
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
555
- <li><a href="#">{{_i}}Help{{/i}}</a></li>
556
- <li class="dropdown">
557
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
558
- <ul class="dropdown-menu">
559
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
560
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
561
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
562
- <li class="divider"></li>
563
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
564
- </ul>
565
- </li>
566
- </ul>
567
- <pre class="prettyprint linenums">
568
- &lt;ul class="nav nav-tabs"&gt;
569
- &lt;li class="dropdown"&gt;
570
- &lt;a class="dropdown-toggle"
571
- data-toggle="dropdown"
572
- href="#"&gt;
573
- {{_i}}Dropdown{{/i}}
574
- &lt;b class="caret"&gt;&lt;/b&gt;
575
- &lt;/a&gt;
576
- &lt;ul class="dropdown-menu"&gt;
577
- &lt;!-- {{_i}}links{{/i}} --&gt;
578
- &lt;/ul&gt;
579
- &lt;/li&gt;
580
- &lt;/ul&gt;
581
- </pre>
582
- </div>
583
- <div class="span4">
584
- <h3>{{_i}}Pills with dropdowns{{/i}}</h3>
585
- <ul class="nav nav-pills">
586
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
587
- <li><a href="#">{{_i}}Help{{/i}}</a></li>
588
- <li class="dropdown">
589
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
590
- <ul class="dropdown-menu">
591
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
592
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
593
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
594
- <li class="divider"></li>
595
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
596
- </ul>
597
- </li>
598
- </ul>
599
- <pre class="prettyprint linenums">
600
- &lt;ul class="nav nav-pills"&gt;
601
- &lt;li class="dropdown"&gt;
602
- &lt;a class="dropdown-toggle"
603
- data-toggle="dropdown"
604
- href="#"&gt;
605
- {{_i}}Dropdown{{/i}}
606
- &lt;b class="caret"&gt;&lt;/b&gt;
607
- &lt;/a&gt;
608
- &lt;ul class="dropdown-menu"&gt;
609
- &lt;!-- {{_i}}links{{/i}} --&gt;
610
- &lt;/ul&gt;
611
- &lt;/li&gt;
612
- &lt;/ul&gt;
613
- </pre>
614
- </div>
615
- </div>
616
-
617
- <h2>{{_i}}Nav lists{{/i}} <small>{{_i}}Build simple stacked navs, great for sidebars{{/i}}</small></h2>
618
- <div class="row">
619
- <div class="span4">
620
- <h3>{{_i}}Application-style navigation{{/i}}</h3>
621
- <p>{{_i}}Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}</p>
622
- <p>{{_i}}Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.{{/i}}</p>
623
- <hr>
624
- <h4>{{_i}}With icons{{/i}}</h4>
625
- <p>{{_i}}Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.{{/i}}</p>
626
- <h4>{{_i}}Horizontal dividers{{/i}}</h4>
627
- <p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</p>
628
- <pre class="prettyprint linenums">
629
- &lt;ul class="nav nav-list"&gt;
630
- ...
631
- &lt;li class="divider"&gt;&lt;/li&gt;
632
- ...
633
- &lt;/ul&gt;
634
- </pre>
635
- </div>
636
- <div class="span4">
637
- <h3>{{_i}}Example nav list{{/i}}</h3>
638
- <p>{{_i}}Take a list of links and add <code>class="nav nav-list"</code>:{{/i}}</p>
639
- <div class="well" style="padding: 8px 0;">
640
- <ul class="nav nav-list">
641
- <li class="nav-header">{{_i}}List header{{/i}}</li>
642
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
643
- <li><a href="#">{{_i}}Library{{/i}}</a></li>
644
- <li><a href="#">{{_i}}Applications{{/i}}</a></li>
645
- <li class="nav-header">{{_i}}Another list header{{/i}}</li>
646
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
647
- <li><a href="#">{{_i}}Settings{{/i}}</a></li>
648
- <li class="divider"></li>
649
- <li><a href="#">{{_i}}Help{{/i}}</a></li>
650
- </ul>
651
- </div> <!-- /well -->
652
- <pre class="prettyprint linenums">
653
- &lt;ul class="nav nav-list"&gt;
654
- &lt;li class="nav-header"&gt;
655
- {{_i}}List header{{/i}}
656
- &lt;/li&gt;
657
- &lt;li class="active"&gt;
658
- &lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;
659
- &lt;/li&gt;
660
- &lt;li&gt;
661
- &lt;a href="#"&gt;{{_i}}Library{{/i}}&lt;/a&gt;
662
- &lt;/li&gt;
663
- ...
664
- &lt;/ul&gt;
665
- </pre>
666
- </div>
667
- <div class="span4">
668
- <h3>{{_i}}Example with icons{{/i}}</h3>
669
- <p>{{_i}}Same example, but with <code>&lt;i&gt;</code> tags for icons.{{/i}}</p>
670
- <div class="well" style="padding: 8px 0;">
671
- <ul class="nav nav-list">
672
- <li class="nav-header">{{_i}}List header{{/i}}</li>
673
- <li class="active"><a href="#"><i class="icon-white icon-home"></i> {{_i}}Home{{/i}}</a></li>
674
- <li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
675
- <li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
676
- <li class="nav-header">{{_i}}Another list header{{/i}}</li>
677
- <li><a href="#"><i class="icon-user"></i> {{_i}}Profile{{/i}}</a></li>
678
- <li><a href="#"><i class="icon-cog"></i> {{_i}}Settings{{/i}}</a></li>
679
- <li class="divider"></li>
680
- <li><a href="#"><i class="icon-flag"></i> {{_i}}Help{{/i}}</a></li>
681
- </ul>
682
- </div> <!-- /well -->
683
- <pre class="prettyprint linenums">
684
- &lt;ul class="nav nav-list"&gt;
685
- ...
686
- &lt;li&gt;
687
- &lt;a href="#"&gt;
688
- &lt;i class="icon-book"&gt;&lt;/i&gt;
689
- {{_i}}Library{{/i}}
690
- &lt;/a&gt;
691
- &lt;/li&gt;
692
- ...
693
- &lt;/ul&gt;
694
- </pre>
695
- </div>
696
- </div>
697
-
698
-
699
- <h2>{{_i}}Tabbable nav{{/i}} <small>{{_i}}Bring tabs to life via javascript{{/i}}</small></h2>
700
- <div class="row">
701
- <div class="span4">
702
- <h3>{{_i}}What's included{{/i}}</h3>
703
- <p>{{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}</p>
704
- <p>{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}</p>
705
- <hr>
706
- <h4>{{_i}}Fade in tabs{{/i}}</h4>
707
- <p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
708
- <hr>
709
- <h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
710
- <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
711
- <p><a class="btn" href="./javascript.html#tabs">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
712
- </div>
713
- <div class="span8">
714
- <h3>{{_i}}Tabbable example{{/i}}</h3>
715
- <p>{{_i}}To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.{{/i}}</p>
716
- <div class="tabbable" style="margin-bottom: 18px;">
717
- <ul class="nav nav-tabs">
718
- <li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
719
- <li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
720
- <li><a href="#tab3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
721
- </ul>
722
- <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
723
- <div class="tab-pane active" id="tab1">
724
- <p>{{_i}}I'm in Section 1.{{/i}}</p>
725
- </div>
726
- <div class="tab-pane" id="tab2">
727
- <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
728
- </div>
729
- <div class="tab-pane" id="tab3">
730
- <p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
731
- </div>
732
- </div>
733
- </div> <!-- /tabbable -->
734
- <p>{{_i}}For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.{{/i}}</p>
735
-
736
- <h3>{{_i}}Straightforward markup{{/i}}</h3>
737
- <p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
738
- <pre class="prettyprint linenums">
739
- &lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;
740
- &lt;ul class="nav nav-tabs"&gt;
741
- &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;{{_i}}Section 1{{/i}}&lt;/a&gt;&lt;/li&gt;
742
- &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;{{_i}}Section 2{{/i}}&lt;/a&gt;&lt;/li&gt;
743
- &lt;/ul&gt;
744
- &lt;div class="tab-content"&gt;
745
- &lt;div class="tab-pane active" id="tab1"&gt;
746
- &lt;p&gt;{{_i}}I'm in Section 1.{{/i}}&lt;/p&gt;
747
- &lt;/div&gt;
748
- &lt;div class="tab-pane" id="tab2"&gt;
749
- &lt;p&gt;{{_i}}Howdy, I'm in Section 2.{{/i}}&lt;/p&gt;
750
- &lt;/div&gt;
751
- &lt;/div&gt;
752
- &lt;/div&gt;
753
- </pre>
754
- </div>
755
- </div>
756
-
757
-
758
- <h3>{{_i}}Tabbable in any direction{{/i}}</h3>
759
- <div class="row">
760
- <div class="span4">
761
- <h4>{{_i}}Tabs on the bottom{{/i}}</h4>
762
- <p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p>
763
- <div class="tabbable tabs-below">
764
- <div class="tab-content">
765
- <div class="tab-pane active" id="A">
766
- <p>{{_i}}I'm in Section A.{{/i}}</p>
767
- </div>
768
- <div class="tab-pane" id="B">
769
- <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
770
- </div>
771
- <div class="tab-pane" id="C">
772
- <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
773
- </div>
774
- </div>
775
- <ul class="nav nav-tabs">
776
- <li class="active"><a href="#A" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
777
- <li><a href="#B" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
778
- <li><a href="#C" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
779
- </ul>
780
- </div> <!-- /tabbable -->
781
- <pre class="prettyprint linenums" style="margin-top: 11px;">
782
- &lt;div class="tabbable tabs-below"&gt;
783
- &lt;div class="tab-content"&gt;
784
- ...
785
- &lt;/div&gt;
786
- &lt;ul class="nav nav-tabs"&gt;
787
- ...
788
- &lt;/ul&gt;
789
- &lt;/div&gt;
790
- </pre>
791
- </div>
792
- <div class="span4">
793
- <h4>{{_i}}Tabs on the left{{/i}}</h4>
794
- <p>{{_i}}Swap the class to put tabs on the left.{{/i}}</p>
795
- <div class="tabbable tabs-left">
796
- <ul class="nav nav-tabs">
797
- <li class="active"><a href="#lA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
798
- <li><a href="#lB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
799
- <li><a href="#lC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
800
- </ul>
801
- <div class="tab-content">
802
- <div class="tab-pane active" id="lA">
803
- <p>{{_i}}I'm in Section A.{{/i}}</p>
804
- </div>
805
- <div class="tab-pane" id="lB">
806
- <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
807
- </div>
808
- <div class="tab-pane" id="lC">
809
- <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
810
- </div>
811
- </div>
812
- </div> <!-- /tabbable -->
813
- <pre class="prettyprint linenums">
814
- &lt;div class="tabbable tabs-left"&gt;
815
- &lt;ul class="nav nav-tabs"&gt;
816
- ...
817
- &lt;/ul&gt;
818
- &lt;div class="tab-content"&gt;
819
- ...
820
- &lt;/div&gt;
821
- &lt;/div&gt;
822
- </pre>
823
- </div>
824
- <div class="span4">
825
- <h4>{{_i}}Tabs on the right{{/i}}</h4>
826
- <p>{{_i}}Swap the class to put tabs on the right.{{/i}}</p>
827
- <div class="tabbable tabs-right">
828
- <ul class="nav nav-tabs">
829
- <li class="active"><a href="#rA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
830
- <li><a href="#rB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
831
- <li><a href="#rC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
832
- </ul>
833
- <div class="tab-content">
834
- <div class="tab-pane active" id="rA">
835
- <p>{{_i}}I'm in Section A.{{/i}}</p>
836
- </div>
837
- <div class="tab-pane" id="rB">
838
- <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
839
- </div>
840
- <div class="tab-pane" id="rC">
841
- <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
842
- </div>
843
- </div>
844
- </div> <!-- /tabbable -->
845
- <pre class="prettyprint linenums">
846
- &lt;div class="tabbable tabs-right"&gt;
847
- &lt;ul class="nav nav-tabs"&gt;
848
- ...
849
- &lt;/ul&gt;
850
- &lt;div class="tab-content"&gt;
851
- ...
852
- &lt;/div&gt;
853
- &lt;/div&gt;
854
- </pre>
855
- </div>
856
- </div>
857
-
858
- </section>
859
-
860
-
861
-
862
- <!-- Navbar
863
- ================================================== -->
864
- <section id="navbar">
865
- <div class="page-header">
866
- <h1>{{_i}}Navbar{{/i}}</h1>
867
- </div>
868
- <h2>{{_i}}Static navbar example{{/i}}</h2>
869
- <p>{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}</p>
870
- <div class="navbar">
871
- <div class="navbar-inner">
872
- <div class="container">
873
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
874
- <span class="icon-bar"></span>
875
- <span class="icon-bar"></span>
876
- <span class="icon-bar"></span>
877
- </a>
878
- <a class="brand" href="#">{{_i}}Project name{{/i}}</a>
879
- <div class="nav-collapse">
880
- <ul class="nav">
881
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
882
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
883
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
884
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
885
- <li class="dropdown">
886
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
887
- <ul class="dropdown-menu">
888
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
889
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
890
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
891
- <li class="divider"></li>
892
- <li class="nav-header">Nav header</li>
893
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
894
- <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
895
- </ul>
896
- </li>
897
- </ul>
898
- <form class="navbar-search pull-left" action="">
899
- <input type="text" class="search-query span2" placeholder="Search">
900
- </form>
901
- <ul class="nav pull-right">
902
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
903
- <li class="divider-vertical"></li>
904
- <li class="dropdown">
905
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
906
- <ul class="dropdown-menu">
907
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
908
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
909
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
910
- <li class="divider"></li>
911
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
912
- </ul>
913
- </li>
914
- </ul>
915
- </div><!-- /.nav-collapse -->
916
- </div>
917
- </div><!-- /navbar-inner -->
918
- </div><!-- /navbar -->
919
-
920
- <div class="row">
921
- <div class="span8">
922
- <h3>{{_i}}Navbar scaffolding{{/i}}</h3>
923
- <p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
924
- <pre class="prettyprint linenums">
925
- &lt;div class="navbar"&gt;
926
- &lt;div class="navbar-inner"&gt;
927
- &lt;div class="container"&gt;
928
- ...
929
- &lt;/div&gt;
930
- &lt;/div&gt;
931
- &lt;/div&gt;
932
- </pre>
933
- <h3>{{_i}}Fixed navbar{{/i}}</h3>
934
- <p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
935
- <div class="row">
936
- <div class="span4">
937
- <pre class="prettyprint linenums">
938
- &lt;div class="navbar navbar-fixed-top"&gt;
939
- ...
940
- &lt;/div&gt;
941
- </pre>
942
- </div><!--/span-->
943
- <div class="span4">
944
- <pre class="prettyprint linenums">
945
- &lt;div class="navbar navbar-fixed-bottom"&gt;
946
- ...
947
- &lt;/div&gt;
948
- </pre>
949
- </div><!--/span-->
950
- </div><!--/row-->
951
- <p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
952
- <h3>{{_i}}Brand name{{/i}}</h3>
953
- <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
954
- <pre class="prettyprint linenums">
955
- &lt;a class="brand" href="#"&gt;
956
- {{_i}}Project name{{/i}}
957
- &lt;/a&gt;
958
- </pre>
959
- <h3>{{_i}}Forms in navbar{{/i}}</h3>
960
- <p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p>
961
- <pre class="prettyprint linenums">
962
- &lt;form class="navbar-form pull-left"&gt;
963
- &lt;input type="text" class="span2"&gt;
964
- &lt;/form&gt;
965
- </pre>
966
- <p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
967
- <pre class="prettyprint linenums">
968
- &lt;form class="navbar-search pull-left"&gt;
969
- &lt;input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}"&gt;
970
- &lt;/form&gt;
971
- </pre>
972
- <h3>{{_i}}Optional responsive variation{{/i}}</h3>
973
- <p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
974
- <pre class="prettyprint linenums">
975
- &lt;div class="navbar"&gt;
976
- &lt;div class="navbar-inner"&gt;
977
- &lt;div class="container"&gt;
978
-
979
- &lt;!-- {{_i}}.btn-navbar is used as the toggle for collapsed navbar content{{/i}} --&gt;
980
- &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
981
- &lt;span class="icon-bar"&gt;&lt;/span&gt;
982
- &lt;span class="icon-bar"&gt;&lt;/span&gt;
983
- &lt;span class="icon-bar"&gt;&lt;/span&gt;
984
- &lt;/a&gt;
985
-
986
- &lt;!-- {{_i}}Be sure to leave the brand out there if you want it shown{{/i}} --&gt;
987
- &lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
988
-
989
- &lt;!-- {{_i}}Everything you want hidden at 940px or less, place within here{{/i}} --&gt;
990
- &lt;div class="nav-collapse"&gt;
991
- &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
992
- &lt;/div&gt;
993
-
994
- &lt;/div&gt;
995
- &lt;/div&gt;
996
- &lt;/div&gt;
997
- </pre>
998
- <div class="alert alert-info">
999
- <strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
1000
- </div>
1001
-
1002
- </div><!-- /.span -->
1003
- <div class="span4">
1004
- <h3>{{_i}}Nav links{{/i}}</h3>
1005
- <p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
1006
- <pre class="prettyprint linenums">
1007
- &lt;ul class="nav"&gt;
1008
- &lt;li class="active"&gt;
1009
- &lt;a href="#">{{_i}}Home{{/i}}&lt;/a&gt;
1010
- &lt;/li&gt;
1011
- &lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
1012
- &lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
1013
- &lt;/ul&gt;
1014
- </pre>
1015
- <p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p>
1016
- <pre class="prettyprint linenums">
1017
- &lt;ul class="nav"&gt;
1018
- ...
1019
- &lt;li class="divider-vertical"&gt;&lt;/li&gt;
1020
- ...
1021
- &lt;/ul&gt;
1022
- </pre>
1023
- <h3>{{_i}}Component alignment{{/i}}</h3>
1024
- <p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
1025
- <h3>{{_i}}Adding dropdown menus{{/i}}</h3>
1026
- <p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
1027
- <pre class="prettyprint linenums">
1028
- &lt;ul class="nav"&gt;
1029
- &lt;li class="dropdown"&gt;
1030
- &lt;a href="#"
1031
- class="dropdown-toggle"
1032
- data-toggle="dropdown">
1033
- {{_i}}Account{{/i}}
1034
- &lt;b class="caret"&gt;&lt;/b&gt;
1035
- &lt;/a&gt;
1036
- &lt;ul class="dropdown-menu"&gt;
1037
- ...
1038
- &lt;/ul&gt;
1039
- &lt;/li&gt;
1040
- &lt;/ul&gt;
1041
- </pre>
1042
- <p><a class="btn" href="./javascript.html#dropdowns">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
1043
- <hr>
1044
- <h3>{{_i}}Text in the navbar{{/i}}</h3>
1045
- <p>{{_i}}Wrap strings of text in a <code>&lt;.navbar-text&gt;</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.{{/i}}</p>
1046
- </div><!-- /.span -->
1047
- </div><!-- /.row -->
1048
-
1049
- </section>
1050
-
1051
-
1052
-
1053
- <!-- Breadcrumbs
1054
- ================================================== -->
1055
- <section id="breadcrumbs">
1056
- <div class="page-header">
1057
- <h1>{{_i}}Breadcrumbs{{/i}} <small></small></h1>
1058
- </div>
1059
-
1060
- <div class="row">
1061
- <div class="span6">
1062
- <h3>{{_i}}Why use them{{/i}}</h3>
1063
- <p>{{_i}}Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.{{/i}}</p>
1064
-
1065
- <h3>{{_i}}Examples{{/i}}</h3>
1066
- <p>{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}</p>
1067
- <ul class="breadcrumb">
1068
- <li class="active">{{_i}}Home{{/i}}</li>
1069
- </ul>
1070
- <ul class="breadcrumb">
1071
- <li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
1072
- <li class="active">{{_i}}Library{{/i}}</li>
1073
- </ul>
1074
- <ul class="breadcrumb">
1075
- <li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
1076
- <li><a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span></li>
1077
- <li class="active">{{_i}}Data{{/i}}</li>
1078
- </ul>
1079
- </div>
1080
- <div class="span6">
1081
- <h3>{{_i}}Markup{{/i}}</h3>
1082
- <p>{{_i}}HTML is your standard unordered list with links.{{/i}}</p>
1083
- <pre class="prettyprint linenums">
1084
- &lt;ul class="breadcrumb"&gt;
1085
- &lt;li&gt;
1086
- &lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
1087
- &lt;/li&gt;
1088
- &lt;li&gt;
1089
- &lt;a href="#"&gt;{{_i}}Library{{/i}}&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
1090
- &lt;/li&gt;
1091
- &lt;li class="active"&gt;{{_i}}Data{{/i}}&lt;/li&gt;
1092
- &lt;/ul&gt;
1093
- </pre>
1094
- </div>
1095
- </div>
1096
-
1097
- </section>
1098
-
1099
-
1100
-
1101
- <!-- Pagination
1102
- ================================================== -->
1103
- <section id="pagination">
1104
- <div class="page-header">
1105
- <h1>{{_i}}Pagination{{/i}} <small>{{_i}}Two options for paging through content{{/i}}</small></h1>
1106
- </div>
1107
-
1108
- <h2>{{_i}}Multicon-page pagination{{/i}}</h2>
1109
- <div class="row">
1110
- <div class="span4">
1111
- <h3>{{_i}}When to use{{/i}}</h3>
1112
- <p>{{_i}}Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}</p>
1113
- <h3>{{_i}}Stateful page links{{/i}}</h3>
1114
- <p>{{_i}}Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.{{/i}}</p>
1115
- <h3>{{_i}}Flexible alignment{{/i}}</h3>
1116
- <p>{{_i}}Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p>
1117
- </div>
1118
- <div class="span4">
1119
- <h3>{{_i}}Examples{{/i}}</h3>
1120
- <p>{{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}</p>
1121
- <div class="pagination">
1122
- <ul>
1123
- <li class="disabled"><a href="#">&laquo;</a></li>
1124
- <li class="active"><a href="#">1</a></li>
1125
- <li><a href="#">2</a></li>
1126
- <li><a href="#">3</a></li>
1127
- <li><a href="#">4</a></li>
1128
- <li><a href="#">&raquo;</a></li>
1129
- </ul>
1130
- </div>
1131
- <div class="pagination">
1132
- <ul>
1133
- <li><a href="#">&laquo;</a></li>
1134
- <li><a href="#">10</a></li>
1135
- <li class="active"><a href="#">11</a></li>
1136
- <li><a href="#">12</a></li>
1137
- <li><a href="#">&raquo;</a></li>
1138
- </ul>
1139
- </div>
1140
- <div class="pagination">
1141
- <ul>
1142
- <li><a href="#">&laquo;</a></li>
1143
- <li class="active"><a href="#">10</a></li>
1144
- <li class="disabled"><a href="#">...</a></li>
1145
- <li><a href="#">20</a></li>
1146
- <li><a href="#">&raquo;</a></li>
1147
- </ul>
1148
- </div>
1149
- <div class="pagination pagination-centered">
1150
- <ul>
1151
- <li class="active"><a href="#">1</a></li>
1152
- <li><a href="#">2</a></li>
1153
- <li><a href="#">3</a></li>
1154
- <li><a href="#">4</a></li>
1155
- <li><a href="#">5</a></li>
1156
- </ul>
1157
- </div>
1158
- </div>
1159
- <div class="span4">
1160
- <h3>{{_i}}Markup{{/i}}</h3>
1161
- <p>{{_i}}Wrapped in a <code>&lt;div&gt;</code>, pagination is just a <code>&lt;ul&gt;</code>.{{/i}}</p>
1162
- <pre class="prettyprint linenums">
1163
- &lt;div class="pagination"&gt;
1164
- &lt;ul&gt;
1165
- &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li>
1166
- &lt;li class="active"&gt;
1167
- &lt;a href="#"&gt;1&lt;/a&gt;
1168
- &lt;/li&gt;
1169
- &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
1170
- &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
1171
- &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
1172
- &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li>
1173
- &lt;/ul&gt;
1174
- &lt;/div&gt;
1175
- </pre>
1176
- </div>
1177
- </div><!-- /row -->
1178
-
1179
- <h2>{{_i}}Pager{{/i}} <small>{{_i}}For quick previous and next links{{/i}}</small></h2>
1180
- <div class="row">
1181
- <div class="span4">
1182
- <h3>{{_i}}About pager{{/i}}</h3>
1183
- <p>{{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
1184
- <h4>{{_i}}Optional disabled state{{/i}}</h4>
1185
- <p>{{_i}}Pager links also use the general <code>.disabled</code> class from the pagination.{{/i}}</p>
1186
- </div>
1187
- <div class="span4">
1188
- <h3>{{_i}}Default example{{/i}}</h3>
1189
- <p>{{_i}}By default, the pager centers links.{{/i}}</p>
1190
- <ul class="pager">
1191
- <li><a href="#">{{_i}}Previous{{/i}}</a></li>
1192
- <li><a href="#">{{_i}}Next{{/i}}</a></li>
1193
- </ul>
1194
- <pre class="prettyprint linenums">
1195
- &lt;ul class="pager"&gt;
1196
- &lt;li&gt;
1197
- &lt;a href="#"&gt;{{_i}}Previous{{/i}}&lt;/a&gt;
1198
- &lt;/li&gt;
1199
- &lt;li&gt;
1200
- &lt;a href="#"&gt;{{_i}}Next{{/i}}&lt;/a&gt;
1201
- &lt;/li&gt;
1202
- &lt;/ul&gt;
1203
- </pre>
1204
- </div>
1205
- <div class="span4">
1206
- <h3>{{_i}}Aligned links{{/i}}</h3>
1207
- <p>{{_i}}Alternatively, you can align each link to the sides:{{/i}}</p>
1208
- <ul class="pager">
1209
- <li class="previous"><a href="#">{{_i}}&larr; Older{{/i}}</a></li>
1210
- <li class="next"><a href="#">{{_i}}Newer &rarr;{{/i}}</a></li>
1211
- </ul>
1212
- <pre class="prettyprint linenums">
1213
- &lt;ul class="pager"&gt;
1214
- &lt;li class="previous"&gt;
1215
- &lt;a href="#"&gt;{{_i}}&amp;larr; Older{{/i}}&lt;/a&gt;
1216
- &lt;/li&gt;
1217
- &lt;li class="next"&gt;
1218
- &lt;a href="#"&gt;{{_i}}Newer &amp;rarr;{{/i}}&lt;/a&gt;
1219
- &lt;/li&gt;
1220
- &lt;/ul&gt;
1221
- </pre>
1222
- </div>
1223
- </div><!-- /row -->
1224
- </section>
1225
-
1226
-
1227
-
1228
- <!-- Labels
1229
- ================================================== -->
1230
- <section id="labels">
1231
- <div class="page-header">
1232
- <h1>{{_i}}Inline labels{{/i}} <small>{{_i}}Label and annotate text{{/i}}</small></h1>
1233
- </div>
1234
- <table class="table table-bordered table-striped">
1235
- <thead>
1236
- <tr>
1237
- <th>{{_i}}Labels{{/i}}</th>
1238
- <th>{{_i}}Markup{{/i}}</th>
1239
- </tr>
1240
- </thead>
1241
- <tbody>
1242
- <tr>
1243
- <td>
1244
- <span class="label">{{_i}}Default{{/i}}</span>
1245
- </td>
1246
- <td>
1247
- <code>&lt;span class="label"&gt;{{_i}}Default{{/i}}&lt;/span&gt;</code>
1248
- </td>
1249
- </tr>
1250
- <tr>
1251
- <td>
1252
- <span class="label label-success">{{_i}}Success{{/i}}</span>
1253
- </td>
1254
- <td>
1255
- <code>&lt;span class="label label-success"&gt;{{_i}}Success{{/i}}&lt;/span&gt;</code>
1256
- </td>
1257
- </tr>
1258
- <tr>
1259
- <td>
1260
- <span class="label label-warning">{{_i}}Warning{{/i}}</span>
1261
- </td>
1262
- <td>
1263
- <code>&lt;span class="label label-warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
1264
- </td>
1265
- </tr>
1266
- <tr>
1267
- <td>
1268
- <span class="label label-important">{{_i}}Important{{/i}}</span>
1269
- </td>
1270
- <td>
1271
- <code>&lt;span class="label label-important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
1272
- </td>
1273
- </tr>
1274
- <tr>
1275
- <td>
1276
- <span class="label label-info">{{_i}}Info{{/i}}</span>
1277
- </td>
1278
- <td>
1279
- <code>&lt;span class="label label-info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
1280
- </td>
1281
- </tr>
1282
- <tr>
1283
- <td>
1284
- <span class="label label-inverse">{{_i}}Inverse{{/i}}</span>
1285
- </td>
1286
- <td>
1287
- <code>&lt;span class="label label-inverse"&gt;{{_i}}Inverse{{/i}}&lt;/span&gt;</code>
1288
- </td>
1289
- </tr>
1290
- </tbody>
1291
- </table>
1292
- </section>
1293
-
1294
-
1295
-
1296
- <!-- Badges
1297
- ================================================== -->
1298
- <section id="badges">
1299
- <div class="page-header">
1300
- <h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
1301
- </div>
1302
- <div class="row">
1303
- <div class="span4">
1304
- <h3>About</h3>
1305
- <p>{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}</p>
1306
- </div><!-- /.span -->
1307
- <div class="span8">
1308
- <h3>Available classes</h3>
1309
- <table class="table table-bordered table-striped">
1310
- <thead>
1311
- <tr>
1312
- <th>{{_i}}Name{{/i}}</th>
1313
- <th>{{_i}}Example{{/i}}</th>
1314
- <th>{{_i}}Markup{{/i}}</th>
1315
- </tr>
1316
- </thead>
1317
- <tbody>
1318
- <tr>
1319
- <td>
1320
- {{_i}}Default{{/i}}
1321
- </td>
1322
- <td>
1323
- <span class="badge">1</span>
1324
- </td>
1325
- <td>
1326
- <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
1327
- </td>
1328
- </tr>
1329
- <tr>
1330
- <td>
1331
- {{_i}}Success{{/i}}
1332
- </td>
1333
- <td>
1334
- <span class="badge badge-success">2</span>
1335
- </td>
1336
- <td>
1337
- <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
1338
- </td>
1339
- </tr>
1340
- <tr>
1341
- <td>
1342
- {{_i}}Warning{{/i}}
1343
- </td>
1344
- <td>
1345
- <span class="badge badge-warning">4</span>
1346
- </td>
1347
- <td>
1348
- <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
1349
- </td>
1350
- </tr>
1351
- <tr>
1352
- <td>
1353
- {{_i}}Important{{/i}}
1354
- </td>
1355
- <td>
1356
- <span class="badge badge-important">6</span>
1357
- </td>
1358
- <td>
1359
- <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
1360
- </td>
1361
- </tr>
1362
- <tr>
1363
- <td>
1364
- {{_i}}Info{{/i}}
1365
- </td>
1366
- <td>
1367
- <span class="badge badge-info">8</span>
1368
- </td>
1369
- <td>
1370
- <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
1371
- </td>
1372
- </tr>
1373
- <tr>
1374
- <td>
1375
- {{_i}}Inverse{{/i}}
1376
- </td>
1377
- <td>
1378
- <span class="badge badge-inverse">10</span>
1379
- </td>
1380
- <td>
1381
- <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
1382
- </td>
1383
- </tr>
1384
- </tbody>
1385
- </table>
1386
- </div><!-- /.span -->
1387
- </div><!-- /.row -->
1388
- </section>
1389
-
1390
-
1391
-
1392
- <!-- Typographic components
1393
- ================================================== -->
1394
- <section id="typography">
1395
- <div class="page-header">
1396
- <h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
1397
- </div>
1398
- <h2>{{_i}}Hero unit{{/i}}</h2>
1399
- <div class="row">
1400
- <div class="span4">
1401
- <p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
1402
- <h3>{{_i}}Markup{{/i}}</h3>
1403
- <p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
1404
- <pre class="prettyprint linenums">
1405
- &lt;div class="hero-unit"&gt;
1406
- &lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
1407
- &lt;p&gt;{{_i}}Tagline{{/i}}&lt;/p&gt;
1408
- &lt;p&gt;
1409
- &lt;a class="btn btn-primary btn-large"&gt;
1410
- {{_i}}Learn more{{/i}}
1411
- &lt;/a&gt;
1412
- &lt;/p&gt;
1413
- &lt;/div&gt;
1414
- </pre>
1415
- </div>
1416
- <div class="span8">
1417
- <div class="hero-unit">
1418
- <h1>{{_i}}Hello, world!{{/i}}</h1>
1419
- <p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
1420
- <p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
1421
- </div>
1422
- </div>
1423
- </div><!-- /row -->
1424
- <h2>{{_i}}Page header{{/i}}</h2>
1425
- <div class="row">
1426
- <div class="span4">
1427
- <p>{{_i}}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 most other components (with additional styles).{{/i}}</p>
1428
- </div>
1429
- <div class="span8">
1430
- <div class="page-header">
1431
- <h1>{{_i}}Example page header{{/i}} <small>{{_i}}Subtext for header{{/i}}</small></h1>
1432
- </div>
1433
- <pre class="prettyprint linenums">
1434
- &lt;div class="page-header"&gt;
1435
- &lt;h1&gt;{{_i}}Example page header{{/i}}&lt;/h1&gt;
1436
- &lt;/div&gt;
1437
- </pre>
1438
- </div>
1439
- </div><!-- /row -->
1440
- </section>
1441
-
1442
-
1443
-
1444
- <!-- Thumbnails
1445
- ================================================== -->
1446
- <section id="thumbnails">
1447
- <div class="page-header">
1448
- <h1>{{_i}}Thumbnails{{/i}} <small>{{_i}}Grids of images, videos, text, and more{{/i}}</small></h1>
1449
- </div>
1450
-
1451
- <div class="row">
1452
- <div class="span6">
1453
- <h2>{{_i}}Default thumbnails{{/i}}</h2>
1454
- <p>{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}</p>
1455
- <ul class="thumbnails">
1456
- <li class="span3">
1457
- <a href="#" class="thumbnail">
1458
- <img src="http://placehold.it/260x180" alt="">
1459
- </a>
1460
- </li>
1461
- <li class="span3">
1462
- <a href="#" class="thumbnail">
1463
- <img src="http://placehold.it/260x180" alt="">
1464
- </a>
1465
- </li>
1466
- <li class="span3">
1467
- <a href="#" class="thumbnail">
1468
- <img src="http://placehold.it/260x180" alt="">
1469
- </a>
1470
- </li>
1471
- <li class="span3">
1472
- <a href="#" class="thumbnail">
1473
- <img src="http://placehold.it/260x180" alt="">
1474
- </a>
1475
- </li>
1476
- </ul>
1477
- </div>
1478
- <div class="span6">
1479
- <h2>{{_i}}Highly customizable{{/i}}</h2>
1480
- <p>{{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}</p>
1481
- <ul class="thumbnails">
1482
- <li class="span3">
1483
- <div class="thumbnail">
1484
- <img src="http://placehold.it/260x180" alt="">
1485
- <div class="caption">
1486
- <h5>{{_i}}Thumbnail label{{/i}}</h5>
1487
- <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>
1488
- <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
1489
- </div>
1490
- </div>
1491
- </li>
1492
- <li class="span3">
1493
- <div class="thumbnail">
1494
- <img src="http://placehold.it/260x180" alt="">
1495
- <div class="caption">
1496
- <h5>{{_i}}Thumbnail label{{/i}}</h5>
1497
- <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>
1498
- <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
1499
- </div>
1500
- </div>
1501
- </li>
1502
- </ul>
1503
- </div>
1504
- </div>
1505
-
1506
- <div class="row">
1507
- <div class="span4">
1508
- <h3>{{_i}}Why use thumbnails{{/i}}</h3>
1509
- <p>{{_i}}Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}</p>
1510
- </div>
1511
- <div class="span4">
1512
- <h3>{{_i}}Simple, flexible markup{{/i}}</h3>
1513
- <p>{{_i}}Thumbnail markup is simple&mdash;a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}</p>
1514
- </div>
1515
- <div class="span4">
1516
- <h3>{{_i}}Uses grid column sizes{{/i}}</h3>
1517
- <p>{{_i}}Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.{{/i}}</p>
1518
- </div>
1519
- </div>
1520
-
1521
- <div class="row">
1522
- <div class="span6">
1523
- <h2>{{_i}}The markup{{/i}}</h2>
1524
- <p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
1525
- <pre class="prettyprint linenums">
1526
- &lt;ul class="thumbnails"&gt;
1527
- &lt;li class="span3"&gt;
1528
- &lt;a href="#" class="thumbnail"&gt;
1529
- &lt;img src="http://placehold.it/260x180" alt=""&gt;
1530
- &lt;/a&gt;
1531
- &lt;/li&gt;
1532
- ...
1533
- &lt;/ul&gt;
1534
- </pre>
1535
- <p>{{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:{{/i}}</p>
1536
- <pre class="prettyprint linenums">
1537
- &lt;ul class="thumbnails"&gt;
1538
- &lt;li class="span3"&gt;
1539
- &lt;div class="thumbnail"&gt;
1540
- &lt;img src="http://placehold.it/260x180" alt=""&gt;
1541
- &lt;h5&gt;{{_i}}Thumbnail label{{/i}}&lt;/h5&gt;
1542
- &lt;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt;
1543
- &lt;/div&gt;
1544
- &lt;/li&gt;
1545
- ...
1546
- &lt;/ul&gt;
1547
- </pre>
1548
- </div>
1549
- <div class="span6">
1550
- <h2>{{_i}}More examples{{/i}}</h2>
1551
- <p>{{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}</p>
1552
- <ul class="thumbnails">
1553
- <li class="span4">
1554
- <a href="#" class="thumbnail">
1555
- <img src="http://placehold.it/360x268" alt="">
1556
- </a>
1557
- </li>
1558
- <li class="span2">
1559
- <a href="#" class="thumbnail">
1560
- <img src="http://placehold.it/160x120" alt="">
1561
- </a>
1562
- </li>
1563
- <li class="span2">
1564
- <a href="#" class="thumbnail">
1565
- <img src="http://placehold.it/160x120" alt="">
1566
- </a>
1567
- </li>
1568
- <li class="span2">
1569
- <a href="#" class="thumbnail">
1570
- <img src="http://placehold.it/160x120" alt="">
1571
- </a>
1572
- </li>
1573
- <li class="span2">
1574
- <a href="#" class="thumbnail">
1575
- <img src="http://placehold.it/160x120" alt="">
1576
- </a>
1577
- </li>
1578
- <li class="span2">
1579
- <a href="#" class="thumbnail">
1580
- <img src="http://placehold.it/160x120" alt="">
1581
- </a>
1582
- </li>
1583
- </ul>
1584
- </div>
1585
- </div>
1586
-
1587
- </section>
1588
-
1589
-
1590
-
1591
- <!-- Alerts
1592
- ================================================== -->
1593
- <section id="alerts">
1594
- <div class="page-header">
1595
- <h1>{{_i}}Alerts{{/i}} <small>{{_i}}Styles for success, warning, and error messages{{/i}}</small></h1>
1596
- </div>
1597
-
1598
- <h2>{{_i}}Lightweight defaults{{/i}}</h2>
1599
- <div class="row">
1600
- <div class="span4">
1601
- <h3>{{_i}}Rewritten base class{{/i}}</h3>
1602
- <p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</code>.{{/i}}</p>
1603
- <h3>{{_i}}Single alert message{{/i}}</h3>
1604
- <p>{{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.{{/i}}</p>
1605
- <hr>
1606
- <h3>{{_i}}Goes great with javascript{{/i}}</h3>
1607
- <p>{{_i}}Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.{{/i}}</p>
1608
- <p><a class="btn js-btn" href="./javascript.html#alerts">{{_i}}Get the plugin &raquo;</a>{{/i}}</p>
1609
- </div>
1610
- <div class="span8">
1611
- <h3>{{_i}}Example alerts{{/i}}</h3>
1612
- <p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
1613
- <div class="alert">
1614
- <button type="button" class="close" data-dismiss="alert">&times;</button>
1615
- <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
1616
- </div>
1617
- <pre class="prettyprint linenums">
1618
- &lt;div class="alert"&gt;
1619
- &lt;button class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
1620
- &lt;strong&gt;{{_i}}Warning!{{/i}}&lt;/strong&gt; {{_i}}Best check yo self, you're not looking too good.{{/i}}
1621
- &lt;/div&gt;
1622
- </pre>
1623
- <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code>&lt;button&gt;</code> element with the data attribute, which we have opted to do for our docs. When using <code>&lt;button&gt;</code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
1624
- <p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
1625
- <div class="alert alert-block">
1626
- <button type="button" class="close" data-dismiss="alert">&times;</button>
1627
- <h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
1628
- <p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
1629
- </div>
1630
- <pre class="prettyprint linenums">
1631
- &lt;div class="alert alert-block"&gt;
1632
- &lt;a class="close" data-dismiss="alert" href="#"&gt;&times;&lt;/a&gt;
1633
- &lt;h4 class="alert-heading"&gt;{{_i}}Warning!{{/i}}&lt;/h4&gt;
1634
- {{_i}}Best check yo self, you're not...{{/i}}
1635
- &lt;/div&gt;
1636
- </pre>
1637
- </div>
1638
- </div>
1639
-
1640
- <h2>{{_i}}Contextual alternatives{{/i}} <small>{{_i}}Add optional classes to change an alert's connotation{{/i}}</small></h2>
1641
- <div class="row">
1642
- <div class="span4">
1643
- <h3>{{_i}}Error or danger{{/i}}</h3>
1644
- <div class="alert alert-error">
1645
- <button type="button" class="close" data-dismiss="alert">&times;</button>
1646
- <strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}}
1647
- </div>
1648
- <pre class="prettyprint linenums">
1649
- &lt;div class="alert alert-error"&gt;
1650
- ...
1651
- &lt;/div&gt;
1652
- </pre>
1653
- </div>
1654
- <div class="span4">
1655
- <h3>{{_i}}Success{{/i}}</h3>
1656
- <div class="alert alert-success">
1657
- <button type="button" class="close" data-dismiss="alert">&times;</button>
1658
- <strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}}
1659
- </div>
1660
- <pre class="prettyprint linenums">
1661
- &lt;div class="alert alert-success"&gt;
1662
- ...
1663
- &lt;/div&gt;
1664
- </pre>
1665
- </div>
1666
- <div class="span4">
1667
- <h3>{{_i}}Information{{/i}}</h3>
1668
- <div class="alert alert-info">
1669
- <button type="button" class="close" data-dismiss="alert">&times;</button>
1670
- <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}}
1671
- </div>
1672
- <pre class="prettyprint linenums">
1673
- &lt;div class="alert alert-info"&gt;
1674
- ...
1675
- &lt;/div&gt;
1676
- </pre>
1677
- </div>
1678
- </div>
1679
-
1680
- </section>
1681
-
1682
-
1683
-
1684
- <!-- Progress bars
1685
- ================================================== -->
1686
- <section id="progress">
1687
- <div class="page-header">
1688
- <h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
1689
- </div>
1690
-
1691
- <h2>{{_i}}Examples and markup{{/i}}</h2>
1692
- <div class="row">
1693
- <div class="span4">
1694
- <h3>{{_i}}Basic{{/i}}</h3>
1695
- <p>{{_i}}Default progress bar with a vertical gradient.{{/i}}</p>
1696
- <div class="progress">
1697
- <div class="bar" style="width: 60%;"></div>
1698
- </div>
1699
- <pre class="prettyprint linenums">
1700
- &lt;div class="progress"&gt;
1701
- &lt;div class="bar"
1702
- style="width: 60%;"&gt;&lt;/div&gt;
1703
- &lt;/div&gt;
1704
- </pre>
1705
- </div>
1706
- <div class="span4">
1707
- <h3>{{_i}}Striped{{/i}}</h3>
1708
- <p>{{_i}}Uses a gradient to create a striped effect (no IE).{{/i}}</p>
1709
- <div class="progress progress-striped">
1710
- <div class="bar" style="width: 20%;"></div>
1711
- </div>
1712
- <pre class="prettyprint linenums">
1713
- &lt;div class="progress progress-striped"&gt;
1714
- &lt;div class="bar"
1715
- style="width: 20%;"&gt;&lt;/div&gt;
1716
- &lt;/div&gt;
1717
- </pre>
1718
- </div>
1719
- <div class="span4">
1720
- <h3>{{_i}}Animated{{/i}}</h3>
1721
- <p>{{_i}}Takes the striped example and animates it (no IE).{{/i}}</p>
1722
- <div class="progress progress-striped active">
1723
- <div class="bar" style="width: 45%"></div>
1724
- </div>
1725
- <pre class="prettyprint linenums">
1726
- &lt;div class="progress progress-striped
1727
- active"&gt;
1728
- &lt;div class="bar"
1729
- style="width: 40%;"&gt;&lt;/div&gt;
1730
- &lt;/div&gt;
1731
- </pre>
1732
- </div>
1733
- </div>
1734
-
1735
- <h2>{{_i}}Options and browser support{{/i}}</h2>
1736
- <div class="row">
1737
- <div class="span3">
1738
- <h3>{{_i}}Additional colors{{/i}}</h3>
1739
- <p>{{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}</p>
1740
- <div class="progress progress-info" style="margin-bottom: 9px;">
1741
- <div class="bar" style="width: 20%"></div>
1742
- </div>
1743
- <div class="progress progress-success" style="margin-bottom: 9px;">
1744
- <div class="bar" style="width: 40%"></div>
1745
- </div>
1746
- <div class="progress progress-warning" style="margin-bottom: 9px;">
1747
- <div class="bar" style="width: 60%"></div>
1748
- </div>
1749
- <div class="progress progress-danger" style="margin-bottom: 9px;">
1750
- <div class="bar" style="width: 80%"></div>
1751
- </div>
1752
- </div>
1753
- <div class="span3">
1754
- <h3>{{_i}}Striped bars{{/i}}</h3>
1755
- <p>{{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}</p>
1756
- <div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
1757
- <div class="bar" style="width: 20%"></div>
1758
- </div>
1759
- <div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
1760
- <div class="bar" style="width: 40%"></div>
1761
- </div>
1762
- <div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
1763
- <div class="bar" style="width: 60%"></div>
1764
- </div>
1765
- <div class="progress progress-danger progress-striped" style="margin-bottom: 9px;">
1766
- <div class="bar" style="width: 80%"></div>
1767
- </div>
1768
- </div>
1769
- <div class="span3">
1770
- <h3>{{_i}}Behavior{{/i}}</h3>
1771
- <p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
1772
- <p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
1773
- </div>
1774
- <div class="span3">
1775
- <h3>{{_i}}Browser support{{/i}}</h3>
1776
- <p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p>
1777
- <p>{{_i}}Opera and IE do not support animations at this time.{{/i}}</p>
1778
- </div>
1779
- </div>
1780
-
1781
- </section>
1782
-
1783
-
1784
-
1785
-
1786
-
1787
- <!-- Miscellaneous
1788
- ================================================== -->
1789
- <section id="misc">
1790
- <div class="page-header">
1791
- <h1>{{_i}}Miscellaneous{{/i}} <small>{{_i}}Lightweight utility components{{/i}}</small></h1>
1792
- </div>
1793
- <div class="row">
1794
- <div class="span4">
1795
- <h2>{{_i}}Wells{{/i}}</h2>
1796
- <p>{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}</p>
1797
- <div class="well">
1798
- {{_i}}Look, I'm in a well!{{/i}}
1799
- </div>
1800
- <pre class="prettyprint linenums">
1801
- &lt;div class="well"&gt;
1802
- ...
1803
- &lt;/div&gt;
1804
- </pre>
1805
- </div><!--/span-->
1806
- <div class="span4">
1807
- <h2>{{_i}}Close icon{{/i}}</h2>
1808
- <p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
1809
- <p><button class="close" style="float: none;">&times;</button></p>
1810
- <pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
1811
- <p>{{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}</p>
1812
- <pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
1813
- </div><!--/span-->
1814
- </div><!--/row-->
1815
- </section>