bootstrapped-rails 2.0.8 → 2.0.8.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (152) hide show
  1. data/lib/bootstrapped-rails/version.rb +1 -1
  2. metadata +7 -157
  3. data/vendor/assets/twitter/docs/assets/bootstrap.zip +0 -0
  4. data/vendor/assets/twitter/docs/assets/css/bootstrap-responsive.css +0 -567
  5. data/vendor/assets/twitter/docs/assets/css/bootstrap.css +0 -3365
  6. data/vendor/assets/twitter/docs/assets/css/docs.css +0 -790
  7. data/vendor/assets/twitter/docs/assets/ico/bootstrap-apple-114x114.png +0 -0
  8. data/vendor/assets/twitter/docs/assets/ico/bootstrap-apple-57x57.png +0 -0
  9. data/vendor/assets/twitter/docs/assets/ico/bootstrap-apple-72x72.png +0 -0
  10. data/vendor/assets/twitter/docs/assets/ico/favicon.ico +0 -0
  11. data/vendor/assets/twitter/docs/assets/img/bird.png +0 -0
  12. data/vendor/assets/twitter/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg +0 -0
  13. data/vendor/assets/twitter/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg +0 -0
  14. data/vendor/assets/twitter/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg +0 -0
  15. data/vendor/assets/twitter/docs/assets/img/browsers.png +0 -0
  16. data/vendor/assets/twitter/docs/assets/img/example-diagram-01.png +0 -0
  17. data/vendor/assets/twitter/docs/assets/img/example-diagram-02.png +0 -0
  18. data/vendor/assets/twitter/docs/assets/img/example-diagram-03.png +0 -0
  19. data/vendor/assets/twitter/docs/assets/img/example-sites/bartop.png +0 -0
  20. data/vendor/assets/twitter/docs/assets/img/example-sites/fleetio.png +0 -0
  21. data/vendor/assets/twitter/docs/assets/img/example-sites/jshint.png +0 -0
  22. data/vendor/assets/twitter/docs/assets/img/example-sites/kippt.png +0 -0
  23. data/vendor/assets/twitter/docs/assets/img/example-sites/railwayjs.png +0 -0
  24. data/vendor/assets/twitter/docs/assets/img/example-sites/totalwireframe.png +0 -0
  25. data/vendor/assets/twitter/docs/assets/img/examples/bootstrap-example-fluid.jpg +0 -0
  26. data/vendor/assets/twitter/docs/assets/img/examples/bootstrap-example-hero.jpg +0 -0
  27. data/vendor/assets/twitter/docs/assets/img/examples/bootstrap-example-starter.jpg +0 -0
  28. data/vendor/assets/twitter/docs/assets/img/github-16px.png +0 -0
  29. data/vendor/assets/twitter/docs/assets/img/glyphicons-halflings-white.png +0 -0
  30. data/vendor/assets/twitter/docs/assets/img/glyphicons-halflings.png +0 -0
  31. data/vendor/assets/twitter/docs/assets/img/glyphicons/glyphicons_009_magic.png +0 -0
  32. data/vendor/assets/twitter/docs/assets/img/glyphicons/glyphicons_042_group.png +0 -0
  33. data/vendor/assets/twitter/docs/assets/img/glyphicons/glyphicons_079_podium.png +0 -0
  34. data/vendor/assets/twitter/docs/assets/img/glyphicons/glyphicons_082_roundabout.png +0 -0
  35. data/vendor/assets/twitter/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png +0 -0
  36. data/vendor/assets/twitter/docs/assets/img/glyphicons/glyphicons_163_iphone.png +0 -0
  37. data/vendor/assets/twitter/docs/assets/img/glyphicons/glyphicons_214_resize_small.png +0 -0
  38. data/vendor/assets/twitter/docs/assets/img/glyphicons/glyphicons_266_book_open.png +0 -0
  39. data/vendor/assets/twitter/docs/assets/img/grid-18px-masked.png +0 -0
  40. data/vendor/assets/twitter/docs/assets/img/icon-css3.png +0 -0
  41. data/vendor/assets/twitter/docs/assets/img/icon-github.png +0 -0
  42. data/vendor/assets/twitter/docs/assets/img/icon-html5.png +0 -0
  43. data/vendor/assets/twitter/docs/assets/img/icon-twitter.png +0 -0
  44. data/vendor/assets/twitter/docs/assets/img/less-logo-large.png +0 -0
  45. data/vendor/assets/twitter/docs/assets/img/less-small.png +0 -0
  46. data/vendor/assets/twitter/docs/assets/img/responsive-illustrations.png +0 -0
  47. data/vendor/assets/twitter/docs/assets/js/README.md +0 -106
  48. data/vendor/assets/twitter/docs/assets/js/application.js +0 -180
  49. data/vendor/assets/twitter/docs/assets/js/bootstrap-alert.js +0 -91
  50. data/vendor/assets/twitter/docs/assets/js/bootstrap-button.js +0 -98
  51. data/vendor/assets/twitter/docs/assets/js/bootstrap-carousel.js +0 -154
  52. data/vendor/assets/twitter/docs/assets/js/bootstrap-collapse.js +0 -136
  53. data/vendor/assets/twitter/docs/assets/js/bootstrap-dropdown.js +0 -92
  54. data/vendor/assets/twitter/docs/assets/js/bootstrap-modal.js +0 -209
  55. data/vendor/assets/twitter/docs/assets/js/bootstrap-popover.js +0 -95
  56. data/vendor/assets/twitter/docs/assets/js/bootstrap-scrollspy.js +0 -125
  57. data/vendor/assets/twitter/docs/assets/js/bootstrap-tab.js +0 -130
  58. data/vendor/assets/twitter/docs/assets/js/bootstrap-tooltip.js +0 -270
  59. data/vendor/assets/twitter/docs/assets/js/bootstrap-transition.js +0 -51
  60. data/vendor/assets/twitter/docs/assets/js/bootstrap-typeahead.js +0 -271
  61. data/vendor/assets/twitter/docs/assets/js/google-code-prettify/prettify.css +0 -30
  62. data/vendor/assets/twitter/docs/assets/js/google-code-prettify/prettify.js +0 -28
  63. data/vendor/assets/twitter/docs/assets/js/jquery.js +0 -9252
  64. data/vendor/assets/twitter/docs/base-css.html +0 -1582
  65. data/vendor/assets/twitter/docs/build/index.js +0 -33
  66. data/vendor/assets/twitter/docs/build/node_modules/.bin/hulk +0 -93
  67. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/.git_ignore +0 -1
  68. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/.gitmodules +0 -3
  69. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/LICENSE +0 -177
  70. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/Makefile +0 -62
  71. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/README.md +0 -93
  72. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/bin/hulk +0 -93
  73. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/lib/compiler.js +0 -348
  74. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/lib/hogan.js +0 -20
  75. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/lib/template.js +0 -233
  76. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/package.json +0 -20
  77. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/html/list.html +0 -8
  78. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/index.html +0 -13
  79. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/index.js +0 -848
  80. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/mustache.js +0 -90
  81. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec.js +0 -77
  82. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/Changes +0 -31
  83. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/README.md +0 -65
  84. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/Rakefile +0 -27
  85. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/TESTING.md +0 -46
  86. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/comments.json +0 -1
  87. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/comments.yml +0 -103
  88. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/delimiters.json +0 -1
  89. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/delimiters.yml +0 -158
  90. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/interpolation.json +0 -1
  91. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/interpolation.yml +0 -230
  92. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/inverted.json +0 -1
  93. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/inverted.yml +0 -193
  94. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/partials.json +0 -1
  95. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/partials.yml +0 -109
  96. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/sections.json +0 -1
  97. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/sections.yml +0 -256
  98. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/~lambdas.json +0 -1
  99. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/spec/specs/~lambdas.yml +0 -149
  100. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/test/templates/list.mustache +0 -8
  101. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/tools/release.js +0 -74
  102. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/tools/web_templates.js +0 -32
  103. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/1.0.0/hogan.js +0 -500
  104. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/1.0.0/hogan.min.js +0 -14
  105. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.0/hogan.js +0 -500
  106. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.0/hogan.min.js +0 -14
  107. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.3/hogan.js +0 -545
  108. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.3/hogan.min.js +0 -5
  109. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.amd.js +0 -576
  110. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.common.js +0 -576
  111. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.js +0 -572
  112. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.amd.js +0 -5
  113. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.common.js +0 -5
  114. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.js +0 -5
  115. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.mustache.js +0 -5
  116. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.mustache.js +0 -619
  117. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/template-1.0.5.js +0 -233
  118. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/template-1.0.5.min.js +0 -5
  119. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/favicon.ico +0 -0
  120. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/images/logo.png +0 -0
  121. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/images/noise.png +0 -0
  122. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/images/small-hogan-icon.png +0 -0
  123. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/images/stripes.png +0 -0
  124. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/index.html.mustache +0 -139
  125. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/stylesheets/layout.css +0 -206
  126. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/web/stylesheets/skeleton.css +0 -236
  127. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/wrappers/amd.js.mustache +0 -21
  128. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/wrappers/common.js.mustache +0 -21
  129. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/wrappers/js.mustache +0 -17
  130. data/vendor/assets/twitter/docs/build/node_modules/hogan.js/wrappers/mustache.js.mustache +0 -64
  131. data/vendor/assets/twitter/docs/build/package.json +0 -6
  132. data/vendor/assets/twitter/docs/components.html +0 -1517
  133. data/vendor/assets/twitter/docs/download.html +0 -362
  134. data/vendor/assets/twitter/docs/examples.html +0 -145
  135. data/vendor/assets/twitter/docs/examples/fluid.html +0 -150
  136. data/vendor/assets/twitter/docs/examples/hero.html +0 -107
  137. data/vendor/assets/twitter/docs/examples/starter-template.html +0 -77
  138. data/vendor/assets/twitter/docs/index.html +0 -249
  139. data/vendor/assets/twitter/docs/javascript.html +0 -1465
  140. data/vendor/assets/twitter/docs/less.html +0 -795
  141. data/vendor/assets/twitter/docs/scaffolding.html +0 -438
  142. data/vendor/assets/twitter/docs/templates/layout.mustache +0 -132
  143. data/vendor/assets/twitter/docs/templates/pages/base-css.mustache +0 -1468
  144. data/vendor/assets/twitter/docs/templates/pages/components.mustache +0 -1403
  145. data/vendor/assets/twitter/docs/templates/pages/download.mustache +0 -248
  146. data/vendor/assets/twitter/docs/templates/pages/examples.mustache +0 -31
  147. data/vendor/assets/twitter/docs/templates/pages/index.mustache +0 -136
  148. data/vendor/assets/twitter/docs/templates/pages/javascript.mustache +0 -1352
  149. data/vendor/assets/twitter/docs/templates/pages/less.mustache +0 -681
  150. data/vendor/assets/twitter/docs/templates/pages/scaffolding.mustache +0 -324
  151. data/vendor/assets/twitter/docs/templates/pages/upgrading.mustache +0 -183
  152. data/vendor/assets/twitter/docs/upgrading.html +0 -297
@@ -1,236 +0,0 @@
1
- /*
2
- * Skeleton V1.1
3
- * Copyright 2011, Dave Gamache
4
- * www.getskeleton.com
5
- * Free to use under the MIT license.
6
- * http://www.opensource.org/licenses/mit-license.php
7
- * 8/17/2011
8
- */
9
-
10
-
11
- /* Table of Contents
12
- ==================================================
13
- #Base 960 Grid
14
- #Tablet (Portrait)
15
- #Mobile (Portrait)
16
- #Mobile (Landscape)
17
- #Clearing */
18
-
19
-
20
-
21
- /* #Base 960 Grid
22
- ================================================== */
23
-
24
- .container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
25
- .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
26
- .row { margin-bottom: 20px; }
27
-
28
- /* Nested Column Classes */
29
- .column.alpha, .columns.alpha { margin-left: 0; }
30
- .column.omega, .columns.omega { margin-right: 0; }
31
-
32
- /* Base Grid */
33
- .container .one.column { width: 40px; }
34
- .container .two.columns { width: 100px; }
35
- .container .three.columns { width: 160px; }
36
- .container .four.columns { width: 220px; }
37
- .container .five.columns { width: 280px; }
38
- .container .six.columns { width: 340px; }
39
- .container .seven.columns { width: 400px; }
40
- .container .eight.columns { width: 460px; }
41
- .container .nine.columns { width: 520px; }
42
- .container .ten.columns { width: 580px; }
43
- .container .eleven.columns { width: 640px; }
44
- .container .twelve.columns { width: 700px; }
45
- .container .thirteen.columns { width: 760px; }
46
- .container .fourteen.columns { width: 820px; }
47
- .container .fifteen.columns { width: 880px; }
48
- .container .sixteen.columns { width: 940px; }
49
-
50
- .container .one-third.column { width: 300px; }
51
- .container .two-thirds.column { width: 620px; }
52
-
53
- /* Offsets */
54
- .container .offset-by-one { padding-left: 60px; }
55
- .container .offset-by-two { padding-left: 120px; }
56
- .container .offset-by-three { padding-left: 180px; }
57
- .container .offset-by-four { padding-left: 240px; }
58
- .container .offset-by-five { padding-left: 300px; }
59
- .container .offset-by-six { padding-left: 360px; }
60
- .container .offset-by-seven { padding-left: 420px; }
61
- .container .offset-by-eight { padding-left: 480px; }
62
- .container .offset-by-nine { padding-left: 540px; }
63
- .container .offset-by-ten { padding-left: 600px; }
64
- .container .offset-by-eleven { padding-left: 660px; }
65
- .container .offset-by-twelve { padding-left: 720px; }
66
- .container .offset-by-thirteen { padding-left: 780px; }
67
- .container .offset-by-fourteen { padding-left: 840px; }
68
- .container .offset-by-fifteen { padding-left: 900px; }
69
-
70
-
71
-
72
- /* #Tablet (Portrait)
73
- ================================================== */
74
-
75
- /* Note: Design for a width of 768px */
76
-
77
- @media only screen and (min-width: 768px) and (max-width: 959px) {
78
- .container { width: 768px; }
79
- .container .column,
80
- .container .columns { margin-left: 10px; margin-right: 10px; }
81
- .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
82
- .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
83
-
84
- .container .one.column { width: 28px; }
85
- .container .two.columns { width: 76px; }
86
- .container .three.columns { width: 124px; }
87
- .container .four.columns { width: 172px; }
88
- .container .five.columns { width: 220px; }
89
- .container .six.columns { width: 268px; }
90
- .container .seven.columns { width: 316px; }
91
- .container .eight.columns { width: 364px; }
92
- .container .nine.columns { width: 412px; }
93
- .container .ten.columns { width: 460px; }
94
- .container .eleven.columns { width: 508px; }
95
- .container .twelve.columns { width: 556px; }
96
- .container .thirteen.columns { width: 604px; }
97
- .container .fourteen.columns { width: 652px; }
98
- .container .fifteen.columns { width: 700px; }
99
- .container .sixteen.columns { width: 748px; }
100
-
101
- .container .one-third.column { width: 236px; }
102
- .container .two-thirds.column { width: 492px; }
103
-
104
- /* Offsets */
105
- .container .offset-by-one { padding-left: 48px; }
106
- .container .offset-by-two { padding-left: 96px; }
107
- .container .offset-by-three { padding-left: 144px; }
108
- .container .offset-by-four { padding-left: 192px; }
109
- .container .offset-by-five { padding-left: 240px; }
110
- .container .offset-by-six { padding-left: 288px; }
111
- .container .offset-by-seven { padding-left: 336px; }
112
- .container .offset-by-eight { padding-left: 348px; }
113
- .container .offset-by-nine { padding-left: 432px; }
114
- .container .offset-by-ten { padding-left: 480px; }
115
- .container .offset-by-eleven { padding-left: 528px; }
116
- .container .offset-by-twelve { padding-left: 576px; }
117
- .container .offset-by-thirteen { padding-left: 624px; }
118
- .container .offset-by-fourteen { padding-left: 672px; }
119
- .container .offset-by-fifteen { padding-left: 720px; }
120
- }
121
-
122
-
123
- /* #Mobile (Portrait)
124
- ================================================== */
125
-
126
- /* Note: Design for a width of 320px */
127
-
128
- @media only screen and (max-width: 767px) {
129
- .container { width: 300px; }
130
- .columns, .column { margin: 0; }
131
-
132
- .container .one.column,
133
- .container .two.columns,
134
- .container .three.columns,
135
- .container .four.columns,
136
- .container .five.columns,
137
- .container .six.columns,
138
- .container .seven.columns,
139
- .container .eight.columns,
140
- .container .nine.columns,
141
- .container .ten.columns,
142
- .container .eleven.columns,
143
- .container .twelve.columns,
144
- .container .thirteen.columns,
145
- .container .fourteen.columns,
146
- .container .fifteen.columns,
147
- .container .sixteen.columns,
148
- .container .one-third.column,
149
- .container .two-thirds.column { width: 300px; }
150
-
151
- /* Offsets */
152
- .container .offset-by-one,
153
- .container .offset-by-two,
154
- .container .offset-by-three,
155
- .container .offset-by-four,
156
- .container .offset-by-five,
157
- .container .offset-by-six,
158
- .container .offset-by-seven,
159
- .container .offset-by-eight,
160
- .container .offset-by-nine,
161
- .container .offset-by-ten,
162
- .container .offset-by-eleven,
163
- .container .offset-by-twelve,
164
- .container .offset-by-thirteen,
165
- .container .offset-by-fourteen,
166
- .container .offset-by-fifteen { padding-left: 0; }
167
-
168
- }
169
-
170
-
171
- /* #Mobile (Landscape)
172
- ================================================== */
173
-
174
- /* Note: Design for a width of 480px */
175
-
176
- @media only screen and (min-width: 480px) and (max-width: 767px) {
177
- .container { width: 420px; }
178
- .columns, .column { margin: 0; }
179
-
180
- .container .one.column,
181
- .container .two.columns,
182
- .container .three.columns,
183
- .container .four.columns,
184
- .container .five.columns,
185
- .container .six.columns,
186
- .container .seven.columns,
187
- .container .eight.columns,
188
- .container .nine.columns,
189
- .container .ten.columns,
190
- .container .eleven.columns,
191
- .container .twelve.columns,
192
- .container .thirteen.columns,
193
- .container .fourteen.columns,
194
- .container .fifteen.columns,
195
- .container .sixteen.columns,
196
- .container .one-third.column,
197
- .container .two-thirds.column { width: 420px; }
198
- }
199
-
200
-
201
- /* #Clearing
202
- ================================================== */
203
-
204
- /* Self Clearing Goodness */
205
- .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
206
-
207
- /* Use clearfix class on parent to clear nested columns,
208
- or wrap each row of columns in a <div class="row"> */
209
- .clearfix:before,
210
- .clearfix:after,
211
- .row:before,
212
- .row:after {
213
- content: '\0020';
214
- display: block;
215
- overflow: hidden;
216
- visibility: hidden;
217
- width: 0;
218
- height: 0; }
219
- .row:after,
220
- .clearfix:after {
221
- clear: both; }
222
- .row,
223
- .clearfix {
224
- zoom: 1; }
225
-
226
- /* You can also use a <br class="clear" /> to clear columns */
227
- .clear {
228
- clear: both;
229
- display: block;
230
- overflow: hidden;
231
- visibility: hidden;
232
- width: 0;
233
- height: 0;
234
- }
235
-
236
-
@@ -1,21 +0,0 @@
1
- /*
2
- * Copyright 2011 Twitter, Inc.
3
- * Licensed under the Apache License, Version 2.0 (the "License");
4
- * you may not use this file except in compliance with the License.
5
- * You may obtain a copy of the License at
6
- *
7
- * http://www.apache.org/licenses/LICENSE-2.0
8
- *
9
- * Unless required by applicable law or agreed to in writing, software
10
- * distributed under the License is distributed on an "AS IS" BASIS,
11
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
- * See the License for the specific language governing permissions and
13
- * limitations under the License.
14
- */
15
-
16
- {{{template}}}
17
- {{{compiler}}}
18
-
19
- if (typeof define === 'function' && define.amd) {
20
- define(Hogan);
21
- }
@@ -1,21 +0,0 @@
1
- /*
2
- * Copyright 2011 Twitter, Inc.
3
- * Licensed under the Apache License, Version 2.0 (the "License");
4
- * you may not use this file except in compliance with the License.
5
- * You may obtain a copy of the License at
6
- *
7
- * http://www.apache.org/licenses/LICENSE-2.0
8
- *
9
- * Unless required by applicable law or agreed to in writing, software
10
- * distributed under the License is distributed on an "AS IS" BASIS,
11
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
- * See the License for the specific language governing permissions and
13
- * limitations under the License.
14
- */
15
-
16
- {{{template}}}
17
- {{{compiler}}}
18
-
19
- if (typeof module !== 'undefined' && module.exports) {
20
- module.exports = Hogan;
21
- }
@@ -1,17 +0,0 @@
1
- /*
2
- * Copyright 2011 Twitter, Inc.
3
- * Licensed under the Apache License, Version 2.0 (the "License");
4
- * you may not use this file except in compliance with the License.
5
- * You may obtain a copy of the License at
6
- *
7
- * http://www.apache.org/licenses/LICENSE-2.0
8
- *
9
- * Unless required by applicable law or agreed to in writing, software
10
- * distributed under the License is distributed on an "AS IS" BASIS,
11
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
- * See the License for the specific language governing permissions and
13
- * limitations under the License.
14
- */
15
-
16
- {{{template}}}
17
- {{{compiler}}}
@@ -1,64 +0,0 @@
1
- /*
2
- * Copyright 2011 Twitter, Inc.
3
- * Licensed under the Apache License, Version 2.0 (the "License");
4
- * you may not use this file except in compliance with the License.
5
- * You may obtain a copy of the License at
6
- *
7
- * http://www.apache.org/licenses/LICENSE-2.0
8
- *
9
- * Unless required by applicable law or agreed to in writing, software
10
- * distributed under the License is distributed on an "AS IS" BASIS,
11
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
- * See the License for the specific language governing permissions and
13
- * limitations under the License.
14
- */
15
-
16
- // A wrapper for compatibility with Mustache.js, quirks and all
17
-
18
- {{{template}}}
19
- {{{compiler}}}
20
-
21
- var Mustache = (function (Hogan) {
22
-
23
- // Mustache.js has non-spec partial context behavior
24
- function mustachePartial(name, context, partials, indent) {
25
- var partialScope = this.f(name, context, partials, 0);
26
- var cx = context;
27
- if (partialScope) {
28
- cx = cx.concat(partialScope);
29
- }
30
-
31
- return Hogan.Template.prototype.rp.call(this, name, cx, partials, indent);
32
- }
33
-
34
- var HoganTemplateWrapper = function(renderFunc, text, compiler){
35
- this.rp = mustachePartial;
36
- Hogan.Template.call(this, renderFunc, text, compiler);
37
- };
38
- HoganTemplateWrapper.prototype = Hogan.Template.prototype;
39
-
40
- // Add a wrapper for Hogan's generate method. Mustache and Hogan keep
41
- // separate caches, and Mustache returns wrapped templates.
42
- var wrapper;
43
- var HoganWrapper = function(){
44
- this.cache = {};
45
- this.generate = function(code, text, options) {
46
- return new HoganTemplateWrapper(new Function('c', 'p', 'i', code), text, wrapper);
47
- }
48
- };
49
- HoganWrapper.prototype = Hogan;
50
- wrapper = new HoganWrapper();
51
-
52
- return {
53
- to_html: function(text, data, partials, sendFun) {
54
- var template = wrapper.compile(text);
55
- var result = template.render(data, partials);
56
- if (!sendFun) {
57
- return result;
58
- }
59
-
60
- sendFun(result);
61
- }
62
- }
63
-
64
- })(Hogan);
@@ -1,6 +0,0 @@
1
- {
2
- "name": "bootstrap-doc-builder"
3
- , "version": "0.0.1"
4
- , "description": "build bootstrap docs"
5
- , "dependencies": { "hogan.js": "1.0.5-dev" }
6
- }
@@ -1,1517 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>Bootstrap, from Twitter</title>
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <meta name="description" content="">
8
- <meta name="author" content="">
9
-
10
- <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
11
- <!--[if lt IE 9]>
12
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
13
- <![endif]-->
14
-
15
- <!-- Le styles -->
16
- <link href="assets/css/bootstrap.css" rel="stylesheet">
17
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
18
- <link href="assets/css/docs.css" rel="stylesheet">
19
- <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
20
-
21
- <!-- Le fav and touch icons -->
22
- <link rel="shortcut icon" href="assets/ico/favicon.ico">
23
- <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
24
- <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
25
- <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
26
- </head>
27
-
28
- <body data-spy="scroll" data-target=".subnav" data-offset="50">
29
-
30
-
31
- <!-- Navbar
32
- ================================================== -->
33
- <div class="navbar navbar-fixed-top">
34
- <div class="navbar-inner">
35
- <div class="container">
36
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
37
- <span class="icon-bar"></span>
38
- <span class="icon-bar"></span>
39
- <span class="icon-bar"></span>
40
- </a>
41
- <a class="brand" href="./index.html">Bootstrap</a>
42
- <div class="nav-collapse">
43
- <ul class="nav">
44
- <li class="">
45
- <a href="./index.html">Overview</a>
46
- </li>
47
- <li class="">
48
- <a href="./scaffolding.html">Scaffolding</a>
49
- </li>
50
- <li class="">
51
- <a href="./base-css.html">Base CSS</a>
52
- </li>
53
- <li class="active">
54
- <a href="./components.html">Components</a>
55
- </li>
56
- <li class="">
57
- <a href="./javascript.html">Javascript plugins</a>
58
- </li>
59
- <li class="">
60
- <a href="./less.html">Using LESS</a>
61
- </li>
62
- <li class="divider-vertical"></li>
63
- <li class="">
64
- <a href="./download.html">Customize</a>
65
- </li>
66
- <li class="">
67
- <a href="./examples.html">Examples</a>
68
- </li>
69
- </ul>
70
- </div>
71
- </div>
72
- </div>
73
- </div>
74
-
75
- <div class="container">
76
-
77
- <!-- Masthead
78
- ================================================== -->
79
- <header class="jumbotron subhead" id="overview">
80
- <h1>Components</h1>
81
- <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
82
- <div class="subnav">
83
- <ul class="nav nav-pills">
84
- <li class="dropdown">
85
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Buttons <b class="caret"></b></a>
86
- <ul class="dropdown-menu">
87
- <li><a href="#buttonGroups">Button groups</a></li>
88
- <li><a href="#buttonDropdowns">Button dropdowns</a></li>
89
- </ul>
90
- </li>
91
- <li class="dropdown">
92
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <b class="caret"></b></a>
93
- <ul class="dropdown-menu">
94
- <li><a href="#navs">Nav, tabs, pills</a></li>
95
- <li><a href="#navbar">Navbar</a></li>
96
- <li><a href="#breadcrumbs">Breadcrumbs</a></li>
97
- <li><a href="#pagination">Pagination</a></li>
98
- </ul>
99
- </li>
100
- <li><a href="#labels">Labels</a></li>
101
- <li><a href="#thumbnails">Thumbnails</a></li>
102
- <li><a href="#alerts">Alerts</a></li>
103
- <li><a href="#progress">Progress bars</a></li>
104
- <li><a href="#misc">Miscellaneous</a></li>
105
- </ul>
106
- </div>
107
- </header>
108
-
109
-
110
-
111
- <!-- Button Groups
112
- ================================================== -->
113
- <section id="buttonGroups">
114
- <div class="page-header">
115
- <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
116
- </div>
117
- <div class="row">
118
- <div class="span4">
119
- <h3>Button groups</h3>
120
- <p>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.</p>
121
- <p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
122
- <div class="btn-toolbar" style="margin-top: 18px;">
123
- <div class="btn-group">
124
- <a class="btn" href="#">Left</a>
125
- <a class="btn" href="#">Middle</a>
126
- <a class="btn" href="#">Right</a>
127
- </div>
128
- </div>
129
- <div class="btn-toolbar">
130
- <div class="btn-group">
131
- <a class="btn" href="#">1</a>
132
- <a class="btn" href="#">2</a>
133
- <a class="btn" href="#">3</a>
134
- <a class="btn" href="#">4</a>
135
- </div>
136
- <div class="btn-group">
137
- <a class="btn" href="#">5</a>
138
- <a class="btn" href="#">6</a>
139
- <a class="btn" href="#">7</a>
140
- </div>
141
- <div class="btn-group">
142
- <a class="btn" href="#">8</a>
143
- </div>
144
- </div>
145
- </div>
146
- <div class="span4">
147
- <h3>Example markup</h3>
148
- <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
149
- <pre class="prettyprint linenums">
150
- &lt;div class="btn-group"&gt;
151
- &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
152
- &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
153
- &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
154
- &lt;/div&gt;
155
- </pre>
156
- <p>And with a toolbar for multiple groups:</p>
157
- <pre class="prettyprint linenums">
158
- &lt;div class="btn-toolbar"&gt;
159
- &lt;div class="btn-group"&gt;
160
- ...
161
- &lt;/div&gt;
162
- &lt;/div&gt;
163
- </pre>
164
- </div>
165
- <div class="span4">
166
- <h3>Checkbox and radio flavors</h3>
167
- <p>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.</p>
168
- <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript &raquo;</a></p>
169
- <hr>
170
- <h4 class="muted">Heads up</h4>
171
- <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
172
- </div>
173
- </div>
174
- </section>
175
-
176
-
177
-
178
- <!-- Split button dropdowns
179
- ================================================== -->
180
- <section id="buttonDropdowns">
181
- <div class="page-header">
182
- <h1>Buttons dropdowns <small>Contextual dropdown menus built on button groups</small></h1>
183
- </div>
184
-
185
- <div class="row">
186
- <div class="span4">
187
- <h3>Button dropdowns</h3>
188
- <p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
189
- <div class="btn-toolbar" style="margin-top: 18px;">
190
- <div class="btn-group">
191
- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
192
- <ul class="dropdown-menu">
193
- <li><a href="#">Action</a></li>
194
- <li><a href="#">Another action</a></li>
195
- <li><a href="#">Something else here</a></li>
196
- <li class="divider"></li>
197
- <li><a href="#">Separated link</a></li>
198
- </ul>
199
- </div><!-- /btn-group -->
200
- <div class="btn-group">
201
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
202
- <ul class="dropdown-menu">
203
- <li><a href="#">Action</a></li>
204
- <li><a href="#">Another action</a></li>
205
- <li><a href="#">Something else here</a></li>
206
- <li class="divider"></li>
207
- <li><a href="#">Separated link</a></li>
208
- </ul>
209
- </div><!-- /btn-group -->
210
- <div class="btn-group">
211
- <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">Danger <span class="caret"></span></a>
212
- <ul class="dropdown-menu">
213
- <li><a href="#">Action</a></li>
214
- <li><a href="#">Another action</a></li>
215
- <li><a href="#">Something else here</a></li>
216
- <li class="divider"></li>
217
- <li><a href="#">Separated link</a></li>
218
- </ul>
219
- </div><!-- /btn-group -->
220
- </div>
221
- <div class="btn-toolbar">
222
- <div class="btn-group">
223
- <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">Success <span class="caret"></span></a>
224
- <ul class="dropdown-menu">
225
- <li><a href="#">Action</a></li>
226
- <li><a href="#">Another action</a></li>
227
- <li><a href="#">Something else here</a></li>
228
- <li class="divider"></li>
229
- <li><a href="#">Separated link</a></li>
230
- </ul>
231
- </div><!-- /btn-group -->
232
- <div class="btn-group">
233
- <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">Info <span class="caret"></span></a>
234
- <ul class="dropdown-menu">
235
- <li><a href="#">Action</a></li>
236
- <li><a href="#">Another action</a></li>
237
- <li><a href="#">Something else here</a></li>
238
- <li class="divider"></li>
239
- <li><a href="#">Separated link</a></li>
240
- </ul>
241
- </div><!-- /btn-group -->
242
- </div>
243
- </div>
244
- <div class="span8">
245
- <h3>Example markup</h3>
246
- <p>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.</p>
247
- <pre class="prettyprint linenums">
248
- &lt;div class="btn-group"&gt;
249
- &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
250
- Action
251
- &lt;span class="caret"&gt;&lt;/span&gt;
252
- &lt;/a&gt;
253
- &lt;ul class="dropdown-menu"&gt;
254
- &lt;!-- dropdown menu links --&gt;
255
- &lt;/ul&gt;
256
- &lt;/div&gt;
257
- </pre>
258
- </div>
259
- </div>
260
-
261
- <div class="row">
262
- <div class="span4">
263
- <h3>Split button dropdowns</h3>
264
- <p>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.</p>
265
- <div class="btn-toolbar" style="margin-top: 18px;">
266
- <div class="btn-group">
267
- <a class="btn" href="#">Action</a>
268
- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
269
- <ul class="dropdown-menu">
270
- <li><a href="#">Action</a></li>
271
- <li><a href="#">Another action</a></li>
272
- <li><a href="#">Something else here</a></li>
273
- <li class="divider"></li>
274
- <li><a href="#">Separated link</a></li>
275
- </ul>
276
- </div><!-- /btn-group -->
277
- <div class="btn-group">
278
- <a class="btn btn-primary" href="#">Action</a>
279
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
280
- <ul class="dropdown-menu">
281
- <li><a href="#">Action</a></li>
282
- <li><a href="#">Another action</a></li>
283
- <li><a href="#">Something else here</a></li>
284
- <li class="divider"></li>
285
- <li><a href="#">Separated link</a></li>
286
- </ul>
287
- </div><!-- /btn-group -->
288
- <div class="btn-group">
289
- <a class="btn btn-danger" href="#">Danger</a>
290
- <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
291
- <ul class="dropdown-menu">
292
- <li><a href="#">Action</a></li>
293
- <li><a href="#">Another action</a></li>
294
- <li><a href="#">Something else here</a></li>
295
- <li class="divider"></li>
296
- <li><a href="#">Separated link</a></li>
297
- </ul>
298
- </div><!-- /btn-group -->
299
- </div>
300
- <div class="btn-toolbar">
301
- <div class="btn-group">
302
- <a class="btn btn-success" href="#">Success</a>
303
- <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
304
- <ul class="dropdown-menu">
305
- <li><a href="#">Action</a></li>
306
- <li><a href="#">Another action</a></li>
307
- <li><a href="#">Something else here</a></li>
308
- <li class="divider"></li>
309
- <li><a href="#">Separated link</a></li>
310
- </ul>
311
- </div><!-- /btn-group -->
312
- <div class="btn-group">
313
- <a class="btn btn-info" href="#">Info</a>
314
- <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
315
- <ul class="dropdown-menu">
316
- <li><a href="#">Action</a></li>
317
- <li><a href="#">Another action</a></li>
318
- <li><a href="#">Something else here</a></li>
319
- <li class="divider"></li>
320
- <li><a href="#">Separated link</a></li>
321
- </ul>
322
- </div><!-- /btn-group -->
323
- </div>
324
- </div>
325
- <div class="span8">
326
- <h3>Example markup</h3>
327
- <p>We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.</p>
328
- <pre class="prettyprint linenums">
329
- &lt;div class="btn-group"&gt;
330
- &lt;a class="btn" href="#"&gt;Action&lt;/a&gt;
331
- &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
332
- &lt;span class="caret"&gt;&lt;/span&gt;
333
- &lt;/a&gt;
334
- &lt;ul class="dropdown-menu"&gt;
335
- &lt;!-- dropdown menu links --&gt;
336
- &lt;/ul&gt;
337
- &lt;/div&gt;
338
- </pre>
339
- </div>
340
- </div>
341
- </section>
342
-
343
-
344
-
345
- <!-- Nav, Tabs, & Pills
346
- ================================================== -->
347
- <section id="navs">
348
- <div class="page-header">
349
- <h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1>
350
- </div>
351
-
352
- <h2>Lightweight defaults <small>Same markup, different classes</small></h2>
353
- <div class="row">
354
- <div class="span4">
355
- <h3>Powerful base class</h3>
356
- <p>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.</p>
357
- <h3>Why tabs and pills</h3>
358
- <p>Tabs and pills in Bootstrap are built on a <code>&lt;ul&gt;</code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p>
359
- <p>Both options are great for sub-sections of content or navigating between pages of related content.</p>
360
- </div>
361
- <div class="span4">
362
- <h3>Basic tabs</h3>
363
- <p>Take a regular <code>&lt;ul&gt;</code> of links and add <code>.nav-tabs</code>:</p>
364
- <ul class="nav nav-tabs">
365
- <li class="active"><a href="#">Home</a></li>
366
- <li><a href="#">Profile</a></li>
367
- <li><a href="#">Messages</a></li>
368
- </ul>
369
- <pre class="prettyprint linenums">
370
- &lt;ul class="nav nav-tabs"&gt;
371
- &lt;li class="active"&gt;
372
- &lt;a href="#"&gt;Home&lt;/a&gt;
373
- &lt;/li&gt;
374
- &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
375
- &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
376
- &lt;/ul&gt;
377
- </pre>
378
- </div>
379
- <div class="span4">
380
- <h3>Basic pills</h3>
381
- <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
382
- <ul class="nav nav-pills">
383
- <li class="active"><a href="#">Home</a></li>
384
- <li><a href="#">Profile</a></li>
385
- <li><a href="#">Messages</a></li>
386
- </ul>
387
- <pre class="prettyprint linenums">
388
- &lt;ul class="nav nav-pills"&gt;
389
- &lt;li class="active"&gt;
390
- &lt;a href="#"&gt;Home&lt;/a&gt;
391
- &lt;/li&gt;
392
- &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
393
- &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
394
- &lt;/ul&gt;
395
- </pre>
396
- </div>
397
- </div>
398
-
399
- <h2>Stackable <small>Make tabs or pills vertical</small></h2>
400
- <div class="row">
401
- <div class="span4">
402
- <h3>How to stack 'em</h3>
403
- <p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
404
- </div>
405
- <div class="span4">
406
- <h3>Stacked tabs</h3>
407
- <ul class="nav nav-tabs nav-stacked">
408
- <li class="active"><a href="#">Home</a></li>
409
- <li><a href="#">Profile</a></li>
410
- <li><a href="#">Messages</a></li>
411
- </ul>
412
- <pre class="prettyprint linenums">
413
- &lt;ul class="nav nav-tabs nav-stacked"&gt;
414
- ...
415
- &lt;/ul&gt;
416
- </pre>
417
- </div>
418
- <div class="span4">
419
- <h3>Stacked pills</h3>
420
- <ul class="nav nav-pills nav-stacked">
421
- <li class="active"><a href="#">Home</a></li>
422
- <li><a href="#">Profile</a></li>
423
- <li><a href="#">Messages</a></li>
424
- </ul>
425
- <pre class="prettyprint linenums">
426
- &lt;ul class="nav nav-pills nav-stacked"&gt;
427
- ...
428
- &lt;/ul&gt;
429
- </pre>
430
- </div>
431
- </div>
432
-
433
- <h2>Dropdowns <small>For advanced nav components</small></h2>
434
- <div class="row">
435
- <div class="span4">
436
- <h3>Rich menus made easy</h3>
437
- <p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p>
438
- <p>Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
439
- </div>
440
- <div class="span4">
441
- <h3>Tabs with dropdowns</h3>
442
- <ul class="nav nav-tabs">
443
- <li class="active"><a href="#">Home</a></li>
444
- <li><a href="#">Profile</a></li>
445
- <li class="dropdown">
446
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
447
- <ul class="dropdown-menu">
448
- <li><a href="#">Action</a></li>
449
- <li><a href="#">Another action</a></li>
450
- <li><a href="#">Something else here</a></li>
451
- <li class="divider"></li>
452
- <li><a href="#">Separated link</a></li>
453
- </ul>
454
- </li>
455
- </ul>
456
- <pre class="prettyprint linenums">
457
- &lt;ul class="nav nav-tabs"&gt;
458
- &lt;li class="dropdown"&gt;
459
- &lt;a class="dropdown-toggle"
460
- data-toggle="dropdown"
461
- href="#"&gt;
462
- Dropdown
463
- &lt;b class="caret"&gt;&lt;/b&gt;
464
- &lt;/a&gt;
465
- &lt;ul class="dropdown-menu"&gt;
466
- &lt;!-- links --&gt;
467
- &lt;/ul&gt;
468
- &lt;/li&gt;
469
- &lt;/ul&gt;
470
- </pre>
471
- </div>
472
- <div class="span4">
473
- <h3>Pills with dropdowns</h3>
474
- <ul class="nav nav-pills">
475
- <li class="active"><a href="#">Home</a></li>
476
- <li><a href="#">Profile</a></li>
477
- <li class="dropdown">
478
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
479
- <ul class="dropdown-menu">
480
- <li><a href="#">Action</a></li>
481
- <li><a href="#">Another action</a></li>
482
- <li><a href="#">Something else here</a></li>
483
- <li class="divider"></li>
484
- <li><a href="#">Separated link</a></li>
485
- </ul>
486
- </li>
487
- </ul>
488
- <pre class="prettyprint linenums">
489
- &lt;ul class="nav nav-pills"&gt;
490
- &lt;li class="dropdown"&gt;
491
- &lt;a class="dropdown-toggle"
492
- data-toggle="dropdown"
493
- href="#"&gt;
494
- Dropdown
495
- &lt;b class="caret"&gt;&lt;/b&gt;
496
- &lt;/a&gt;
497
- &lt;ul class="dropdown-menu"&gt;
498
- &lt;!-- links --&gt;
499
- &lt;/ul&gt;
500
- &lt;/li&gt;
501
- &lt;/ul&gt;
502
- </pre>
503
- </div>
504
- </div>
505
-
506
- <h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
507
- <div class="row">
508
- <div class="span4">
509
- <h3>Application-style navigation</h3>
510
- <p>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.</p>
511
- <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
512
- <h4>With icons</h4>
513
- <p>Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.</p>
514
- </div>
515
- <div class="span4">
516
- <h3>Example nav list</h3>
517
- <p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
518
- <div class="well" style="padding: 8px 0;">
519
- <ul class="nav nav-list">
520
- <li class="nav-header">List header</li>
521
- <li class="active"><a href="#">Home</a></li>
522
- <li><a href="#">Library</a></li>
523
- <li><a href="#">Applications</a></li>
524
- <li class="nav-header">Another list header</li>
525
- <li><a href="#">Profile</a></li>
526
- <li><a href="#">Settings</a></li>
527
- <li><a href="#">Help</a></li>
528
- </ul>
529
- </div> <!-- /well -->
530
- <pre class="prettyprint linenums">
531
- &lt;ul class="nav nav-list"&gt;
532
- &lt;li class="nav-header"&gt;
533
- List header
534
- &lt;/li&gt;
535
- &lt;li class="active"&gt;
536
- &lt;a href="#"&gt;Home&lt;/a&gt;
537
- &lt;/li&gt;
538
- &lt;li&gt;
539
- &lt;a href="#"&gt;Library&lt;/a&gt;
540
- &lt;/li&gt;
541
- ...
542
- &lt;/ul&gt;
543
- </pre>
544
- </div>
545
- <div class="span4">
546
- <h3>Example with icons</h3>
547
- <p>Same example, but with <code>&lt;i&gt;</code> tags for icons.</p>
548
- <div class="well" style="padding: 8px 0;">
549
- <ul class="nav nav-list">
550
- <li class="nav-header">List header</li>
551
- <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
552
- <li><a href="#"><i class="icon-book"></i> Library</a></li>
553
- <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
554
- <li class="nav-header">Another list header</li>
555
- <li><a href="#"><i class="icon-user"></i> Profile</a></li>
556
- <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
557
- <li><a href="#"><i class="icon-flag"></i> Help</a></li>
558
- </ul>
559
- </div> <!-- /well -->
560
- <pre class="prettyprint linenums">
561
- &lt;ul class="nav nav-list"&gt;
562
- ...
563
- &lt;li&gt;
564
- &lt;a href="#"&gt;
565
- &lt;i class="icon-book"&gt;&lt;/i&gt;
566
- Library
567
- &lt;/a&gt;
568
- &lt;/li&gt;
569
- ...
570
- &lt;/ul&gt;
571
- </pre>
572
- </div>
573
- </div>
574
-
575
-
576
- <h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
577
- <div class="row">
578
- <div class="span4">
579
- <h3>What's included</h3>
580
- <p>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.</p>
581
- <p>Changing between them is easy and only requires changing very little markup.</p>
582
- </div>
583
- <div class="span4">
584
- <h3>Tabbable example</h3>
585
- <p>To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.</p>
586
- <div class="tabbable" style="margin-bottom: 9px;">
587
- <ul class="nav nav-tabs">
588
- <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
589
- <li><a href="#2" data-toggle="tab">Section 2</a></li>
590
- <li><a href="#3" data-toggle="tab">Section 3</a></li>
591
- </ul>
592
- <div class="tab-content">
593
- <div class="tab-pane active" id="1">
594
- <p>I'm in Section 1.</p>
595
- </div>
596
- <div class="tab-pane" id="2">
597
- <p>Howdy, I'm in Section 2.</p>
598
- </div>
599
- <div class="tab-pane" id="3">
600
- <p>What up girl, this is Section 3.</p>
601
- </div>
602
- </div>
603
- </div> <!-- /tabbable -->
604
- </div>
605
- <div class="span4">
606
- <h3>Custom jQuery plugin</h3>
607
- <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
608
- <p><a class="btn" href="./javascript.html#tabs">Get the javascript &rarr;</a></p>
609
- </div>
610
- </div>
611
-
612
- <h3>Straightforward markup</h3>
613
- <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
614
- <pre class="prettyprint linenums">
615
- &lt;div class="tabbable"&gt;
616
- &lt;ul class="nav nav-tabs"&gt;
617
- &lt;li class="active"&gt;&lt;a href="#1" data-toggle="tab"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
618
- &lt;li&gt;&lt;a href="#2" data-toggle="tab"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
619
- &lt;/ul&gt;
620
- &lt;div class="tab-content"&gt;
621
- &lt;div class="tab-pane active" id="1"&gt;
622
- &lt;p&gt;I'm in Section 1.&lt;/p&gt;
623
- &lt;/div&gt;
624
- &lt;div class="tab-pane" id="2"&gt;
625
- &lt;p&gt;Howdy, I'm in Section 2.&lt;/p&gt;
626
- &lt;/div&gt;
627
- &lt;/div&gt;
628
- &lt;/div&gt;
629
- </pre>
630
-
631
- <h3>Tabbable in any direction</h3>
632
- <div class="row">
633
- <div class="span4">
634
- <h4>Tabs on the bottom</h4>
635
- <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
636
- <div class="tabbable tabs-below">
637
- <div class="tab-content">
638
- <div class="tab-pane active" id="A">
639
- <p>I'm in Section A.</p>
640
- </div>
641
- <div class="tab-pane" id="B">
642
- <p>Howdy, I'm in Section B.</p>
643
- </div>
644
- <div class="tab-pane" id="C">
645
- <p>What up girl, this is Section C.</p>
646
- </div>
647
- </div>
648
- <ul class="nav nav-tabs">
649
- <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
650
- <li><a href="#B" data-toggle="tab">Section 2</a></li>
651
- <li><a href="#C" data-toggle="tab">Section 3</a></li>
652
- </ul>
653
- </div> <!-- /tabbable -->
654
- <pre class="prettyprint linenums" style="margin-top: 11px;">
655
- &lt;div class="tabbable tabs-below"&gt;
656
- &lt;div class="tab-content"&gt;
657
- ...
658
- &lt;/div&gt;
659
- &lt;ul class="nav nav-tabs"&gt;
660
- ...
661
- &lt;/ul&gt;
662
- &lt;/div&gt;
663
- </pre>
664
- </div>
665
- <div class="span4">
666
- <h4>Tabs on the left</h4>
667
- <p>Swap the class to put tabs on the left.</p>
668
- <div class="tabbable tabs-left">
669
- <ul class="nav nav-tabs">
670
- <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
671
- <li><a href="#lB" data-toggle="tab">Section 2</a></li>
672
- <li><a href="#lC" data-toggle="tab">Section 3</a></li>
673
- </ul>
674
- <div class="tab-content">
675
- <div class="tab-pane active" id="lA">
676
- <p>I'm in Section A.</p>
677
- </div>
678
- <div class="tab-pane" id="lB">
679
- <p>Howdy, I'm in Section B.</p>
680
- </div>
681
- <div class="tab-pane" id="lC">
682
- <p>What up girl, this is Section C.</p>
683
- </div>
684
- </div>
685
- </div> <!-- /tabbable -->
686
- <pre class="prettyprint linenums">
687
- &lt;div class="tabbable tabs-left"&gt;
688
- &lt;ul class="nav nav-tabs"&gt;
689
- ...
690
- &lt;/ul&gt;
691
- &lt;div class="tab-content"&gt;
692
- ...
693
- &lt;/div&gt;
694
- &lt;/div&gt;
695
- </pre>
696
- </div>
697
- <div class="span4">
698
- <h4>Tabs on the right</h4>
699
- <p>Swap the class to put tabs on the right.</p>
700
- <div class="tabbable tabs-right">
701
- <ul class="nav nav-tabs">
702
- <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
703
- <li><a href="#rB" data-toggle="tab">Section 2</a></li>
704
- <li><a href="#rC" data-toggle="tab">Section 3</a></li>
705
- </ul>
706
- <div class="tab-content">
707
- <div class="tab-pane active" id="rA">
708
- <p>I'm in Section A.</p>
709
- </div>
710
- <div class="tab-pane" id="rB">
711
- <p>Howdy, I'm in Section B.</p>
712
- </div>
713
- <div class="tab-pane" id="rC">
714
- <p>What up girl, this is Section C.</p>
715
- </div>
716
- </div>
717
- </div> <!-- /tabbable -->
718
- <pre class="prettyprint linenums">
719
- &lt;div class="tabbable tabs-right"&gt;
720
- &lt;ul class="nav nav-tabs"&gt;
721
- ...
722
- &lt;/ul&gt;
723
- &lt;div class="tab-content"&gt;
724
- ...
725
- &lt;/div&gt;
726
- &lt;/div&gt;
727
- </pre>
728
- </div>
729
- </div>
730
-
731
- </section>
732
-
733
-
734
-
735
- <!-- Navbar
736
- ================================================== -->
737
- <section id="navbar">
738
- <div class="page-header">
739
- <h1>Navbar</h1>
740
- </div>
741
- <h2>Static navbar example</h2>
742
- <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
743
- <div class="navbar">
744
- <div class="navbar-inner">
745
- <div class="container" style="width: auto;">
746
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
747
- <span class="icon-bar"></span>
748
- <span class="icon-bar"></span>
749
- <span class="icon-bar"></span>
750
- </a>
751
- <a class="brand" href="#">Project name</a>
752
- <div class="nav-collapse">
753
- <ul class="nav">
754
- <li class="active"><a href="#">Home</a></li>
755
- <li><a href="#">Link</a></li>
756
- <li><a href="#">Link</a></li>
757
- <li><a href="#">Link</a></li>
758
- <li class="dropdown">
759
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
760
- <ul class="dropdown-menu">
761
- <li><a href="#">Action</a></li>
762
- <li><a href="#">Another action</a></li>
763
- <li><a href="#">Something else here</a></li>
764
- <li class="divider"></li>
765
- <li><a href="#">Separated link</a></li>
766
- </ul>
767
- </li>
768
- </ul>
769
- <form class="navbar-search pull-left" action="">
770
- <input type="text" class="search-query span2" placeholder="Search">
771
- </form>
772
- <ul class="nav pull-right">
773
- <li><a href="#">Link</a></li>
774
- <li class="divider-vertical"></li>
775
- <li class="dropdown">
776
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
777
- <ul class="dropdown-menu">
778
- <li><a href="#">Action</a></li>
779
- <li><a href="#">Another action</a></li>
780
- <li><a href="#">Something else here</a></li>
781
- <li class="divider"></li>
782
- <li><a href="#">Separated link</a></li>
783
- </ul>
784
- </li>
785
- </ul>
786
- </div><!-- /.nav-collapse -->
787
- </div>
788
- </div><!-- /navbar-inner -->
789
- </div><!-- /navbar -->
790
-
791
- <div class="row">
792
- <div class="span8">
793
- <h3>Navbar scaffolding</h3>
794
- <p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
795
- <pre class="prettyprint linenums">
796
- &lt;div class="navbar"&gt;
797
- &lt;div class="navbar-inner"&gt;
798
- &lt;div class="container"&gt;
799
- ...
800
- &lt;/div&gt;
801
- &lt;/div&gt;
802
- &lt;/div&gt;
803
- </pre>
804
- <p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
805
- <pre class="prettyprint linenums">
806
- &lt;div class="navbar navbar-fixed-top"&gt;
807
- ...
808
- &lt;/div&gt;
809
- </pre>
810
- <h3>Brand name</h3>
811
- <p>A simple link to show your brand or project name only requires an anchor tag.</p>
812
- <pre class="prettyprint linenums">
813
- &lt;a class="brand" href="#"&gt;
814
- Project name
815
- &lt;/a&gt;
816
- </pre>
817
- <h3>Search form</h3>
818
- <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
819
- <pre class="prettyprint linenums">
820
- &lt;form class="navbar-search pull-left"&gt;
821
- &lt;input type="text" class="search-query" placeholder="Search"&gt;
822
- &lt;/form&gt;
823
- </pre>
824
- <h3>Optional responsive variation</h3>
825
- <p>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>.</p>
826
- <pre class="prettyprint linenums">
827
- &lt;div class="navbar"&gt;
828
- &lt;div class="navbar-inner"&gt;
829
- &lt;div class="container"&gt;
830
-
831
- &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
832
- &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
833
- &lt;span class="icon-bar"&gt;&lt;/span&gt;
834
- &lt;span class="icon-bar"&gt;&lt;/span&gt;
835
- &lt;span class="icon-bar"&gt;&lt;/span&gt;
836
- &lt;/a&gt;
837
-
838
- &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
839
- &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
840
-
841
- &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
842
- &lt;div class="nav-collapse"&gt;
843
- &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
844
- &lt;/div&gt;
845
-
846
- &lt;/div&gt;
847
- &lt;/div&gt;
848
- &lt;/div&gt;
849
- </pre>
850
- <div class="alert alert-info">
851
- <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>.
852
- </div>
853
-
854
- </div><!-- /.span -->
855
- <div class="span4">
856
- <h3>Nav links</h3>
857
- <p>Nav items are simple to add via unordered lists.</p>
858
- <pre class="prettyprint linenums">
859
- &lt;ul class="nav"&gt;
860
- &lt;li class="active"&gt;
861
- &lt;a href="#">Home&lt;/a&gt;
862
- &lt;/li&gt;
863
- &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
864
- &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
865
- &lt;/ul&gt;
866
- </pre>
867
- <h3>Adding dropdowns</h3>
868
- <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdown">our javascript plugin</a>.</p>
869
- <pre class="prettyprint linenums">
870
- &lt;ul class="nav"&gt;
871
- &lt;li class="dropdown"&gt;
872
- &lt;a href="#"
873
- class="dropdown-toggle"
874
- data-toggle="dropdown">
875
- Account
876
- &lt;b class="caret"&gt;&lt;/b&gt;
877
- &lt;/a&gt;
878
- &lt;ul class="dropdown-menu"&gt;
879
- ...
880
- &lt;/ul&gt;
881
- &lt;/li&gt;
882
- &lt;/ul&gt;
883
- </pre>
884
- <p><a class="btn" href="./javascript.html#dropdown">Get the javascript &rarr;</a></p>
885
- </div><!-- /.span -->
886
- </div><!-- /.row -->
887
-
888
- </section>
889
-
890
-
891
-
892
- <!-- Breadcrumbs
893
- ================================================== -->
894
- <section id="breadcrumbs">
895
- <div class="page-header">
896
- <h1>Breadcrumbs <small></small></h1>
897
- </div>
898
-
899
- <div class="row">
900
- <div class="span6">
901
- <h3>Why use them</h3>
902
- <p>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.</p>
903
-
904
- <h3>Examples</h3>
905
- <p>A single example shown as it might be displayed across multiple pages.</p>
906
- <ul class="breadcrumb">
907
- <li class="active">Home</li>
908
- </ul>
909
- <ul class="breadcrumb">
910
- <li><a href="#">Home</a> <span class="divider">/</span></li>
911
- <li class="active">Library</li>
912
- </ul>
913
- <ul class="breadcrumb">
914
- <li><a href="#">Home</a> <span class="divider">/</span></li>
915
- <li><a href="#">Library</a> <span class="divider">/</span></li>
916
- <li class="active">Data</li>
917
- </ul>
918
- </div>
919
- <div class="span6">
920
- <h3>Markup</h3>
921
- <p>HTML is your standard unordered list with links.</p>
922
- <pre class="prettyprint linenums">
923
- &lt;ul class="breadcrumb"&gt;
924
- &lt;li&gt;
925
- &lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
926
- &lt;/li&gt;
927
- &lt;li&gt;
928
- &lt;a href="#"&gt;Library&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
929
- &lt;/li&gt;
930
- &lt;li class="active"&gt;
931
- &lt;a href="#"&gt;Data&lt;/a&gt;
932
- &lt;/li&gt;
933
- &lt;/ul&gt;
934
- </pre>
935
- </div>
936
- </div>
937
-
938
- </section>
939
-
940
-
941
-
942
- <!-- Pagination
943
- ================================================== -->
944
- <section id="pagination">
945
- <div class="page-header">
946
- <h1>Pagination <small>Two options for paging through content</small></h1>
947
- </div>
948
-
949
- <h2>Multicon-page pagination</h2>
950
- <div class="row">
951
- <div class="span4">
952
- <h3>When to use</h3>
953
- <p>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.</p>
954
- <h3>Stateful page links</h3>
955
- <p>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.</p>
956
- <h3>Flexible alignment</h3>
957
- <p>Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
958
- </div>
959
- <div class="span4">
960
- <h3>Examples</h3>
961
- <p>The default pagination component is flexible and works in a number of variations.</p>
962
- <div class="pagination">
963
- <ul>
964
- <li class="disabled"><a href="#">&laquo;</a></li>
965
- <li class="active"><a href="#">1</a></li>
966
- <li><a href="#">2</a></li>
967
- <li><a href="#">3</a></li>
968
- <li><a href="#">4</a></li>
969
- <li><a href="#">&raquo;</a></li>
970
- </ul>
971
- </div>
972
- <div class="pagination">
973
- <ul>
974
- <li><a href="#">&laquo;</a></li>
975
- <li><a href="#">10</a></li>
976
- <li class="active"><a href="#">11</a></li>
977
- <li><a href="#">12</a></li>
978
- <li><a href="#">&raquo;</a></li>
979
- </ul>
980
- </div>
981
- <div class="pagination">
982
- <ul>
983
- <li><a href="#">&larr;</a></li>
984
- <li class="active"><a href="#">10</a></li>
985
- <li class="disabled"><a href="#">...</a></li>
986
- <li><a href="#">20</a></li>
987
- <li><a href="#">&rarr;</a></li>
988
- </ul>
989
- </div>
990
- <div class="pagination pagination-centered">
991
- <ul>
992
- <li class="active"><a href="#">1</a></li>
993
- <li><a href="#">2</a></li>
994
- <li><a href="#">3</a></li>
995
- <li><a href="#">4</a></li>
996
- <li><a href="#">5</a></li>
997
- </ul>
998
- </div>
999
- </div>
1000
- <div class="span4">
1001
- <h3>Markup</h3>
1002
- <p>Wrapped in a <code>&lt;div&gt;</code>, pagination is just a <code>&lt;ul&gt;</code>.</p>
1003
- <pre class="prettyprint linenums">
1004
- &lt;div class="pagination"&gt;
1005
- &lt;ul&gt;
1006
- &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li>
1007
- &lt;li class="active"&gt;
1008
- &lt;a href="#"&gt;1&lt;/a&gt;
1009
- &lt;/li&gt;
1010
- &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
1011
- &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
1012
- &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
1013
- &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li>
1014
- &lt;/ul&gt;
1015
- &lt;/div&gt;
1016
- </pre>
1017
- </div>
1018
- </div><!-- /row -->
1019
-
1020
- <h2>Pager <small>For quick previous and next links</small></h2>
1021
- <div class="row">
1022
- <div class="span4">
1023
- <h3>About pager</h3>
1024
- <p>The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
1025
- </div>
1026
- <div class="span4">
1027
- <h3>Default example</h3>
1028
- <p>By default, the pager centers links.</p>
1029
- <ul class="pager">
1030
- <li><a href="#">Previous</a></li>
1031
- <li><a href="#">Next</a></li>
1032
- </ul>
1033
- <pre class="prettyprint linenums">
1034
- &lt;ul class="pager"&gt;
1035
- &lt;li&gt;
1036
- &lt;a href="#"&gt;Previous&lt;/a&gt;
1037
- &lt;/li&gt;
1038
- &lt;li&gt;
1039
- &lt;a href="#"&gt;Next&lt;/a&gt;
1040
- &lt;/li&gt;
1041
- &lt;/ul&gt;
1042
- </pre>
1043
- </div>
1044
- <div class="span4">
1045
- <h3>Aligned links</h3>
1046
- <p>Alternatively, you can align each link to the sides:</p>
1047
- <ul class="pager">
1048
- <li class="previous"><a href="#">&larr; Older</a></li>
1049
- <li class="next"><a href="#">Newer &rarr;</a></li>
1050
- </ul>
1051
- <pre class="prettyprint linenums">
1052
- &lt;ul class="pager"&gt;
1053
- &lt;li class="previous"&gt;
1054
- &lt;a href="#"&gt;&amp;larr; Older&lt;/a&gt;
1055
- &lt;/li&gt;
1056
- &lt;li class="next"&gt;
1057
- &lt;a href="#"&gt;Newer &amp;rarr;&lt;/a&gt;
1058
- &lt;/li&gt;
1059
- &lt;/ul&gt;
1060
- </pre>
1061
- </div>
1062
- </div><!-- /row -->
1063
- </section>
1064
-
1065
-
1066
-
1067
- <!-- Labels
1068
- ================================================== -->
1069
- <section id="labels">
1070
- <div class="page-header">
1071
- <h1>Inline labels <small>Label and annotate text</small></h1>
1072
- </div>
1073
- <table class="table table-bordered table-striped">
1074
- <thead>
1075
- <tr>
1076
- <th>Labels</th>
1077
- <th>Markup</th>
1078
- </tr>
1079
- </thead>
1080
- <tbody>
1081
- <tr>
1082
- <td>
1083
- <span class="label">Default</span>
1084
- </td>
1085
- <td>
1086
- <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
1087
- </td>
1088
- </tr>
1089
- <tr>
1090
- <td>
1091
- <span class="label label-success">Success</span>
1092
- </td>
1093
- <td>
1094
- <code>&lt;span class="label label-success"&gt;New&lt;/span&gt;</code>
1095
- </td>
1096
- </tr>
1097
- <tr>
1098
- <td>
1099
- <span class="label label-warning">Warning</span>
1100
- </td>
1101
- <td>
1102
- <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
1103
- </td>
1104
- </tr>
1105
- <tr>
1106
- <td>
1107
- <span class="label label-important">Important</span>
1108
- </td>
1109
- <td>
1110
- <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
1111
- </td>
1112
- </tr>
1113
- <tr>
1114
- <td>
1115
- <span class="label label-info">Info</span>
1116
- </td>
1117
- <td>
1118
- <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
1119
- </td>
1120
- </tr>
1121
- </tbody>
1122
- </table>
1123
- </section>
1124
-
1125
-
1126
-
1127
- <!-- Thumbnails
1128
- ================================================== -->
1129
- <section id="thumbnails">
1130
- <div class="page-header">
1131
- <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
1132
- </div>
1133
-
1134
- <div class="row">
1135
- <div class="span6">
1136
- <h2>Default thumbnails</h2>
1137
- <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
1138
- <ul class="thumbnails">
1139
- <li class="span3">
1140
- <a href="#" class="thumbnail">
1141
- <img src="http://placehold.it/260x180" alt="">
1142
- </a>
1143
- </li>
1144
- <li class="span3">
1145
- <a href="#" class="thumbnail">
1146
- <img src="http://placehold.it/260x180" alt="">
1147
- </a>
1148
- </li>
1149
- <li class="span3">
1150
- <a href="#" class="thumbnail">
1151
- <img src="http://placehold.it/260x180" alt="">
1152
- </a>
1153
- </li>
1154
- <li class="span3">
1155
- <a href="#" class="thumbnail">
1156
- <img src="http://placehold.it/260x180" alt="">
1157
- </a>
1158
- </li>
1159
- </ul>
1160
- </div>
1161
- <div class="span6">
1162
- <h2>Highly customizable</h2>
1163
- <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
1164
- <ul class="thumbnails">
1165
- <li class="span3">
1166
- <div class="thumbnail">
1167
- <img src="http://placehold.it/260x180" alt="">
1168
- <div class="caption">
1169
- <h5>Thumbnail label</h5>
1170
- <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>
1171
- <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
1172
- </div>
1173
- </div>
1174
- </li>
1175
- <li class="span3">
1176
- <div class="thumbnail">
1177
- <img src="http://placehold.it/260x180" alt="">
1178
- <div class="caption">
1179
- <h5>Thumbnail label</h5>
1180
- <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>
1181
- <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
1182
- </div>
1183
- </div>
1184
- </li>
1185
- </ul>
1186
- </div>
1187
- </div>
1188
-
1189
- <div class="row">
1190
- <div class="span4">
1191
- <h3>Why use thumbnails</h3>
1192
- <p>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.</p>
1193
- </div>
1194
- <div class="span4">
1195
- <h3>Simple, flexible markup</h3>
1196
- <p>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.</p>
1197
- </div>
1198
- <div class="span4">
1199
- <h3>Uses grid column sizes</h3>
1200
- <p>Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.</p>
1201
- </div>
1202
- </div>
1203
-
1204
- <div class="row">
1205
- <div class="span6">
1206
- <h2>The markup</h2>
1207
- <p>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>:</p>
1208
- <pre class="prettyprint linenums">
1209
- &lt;ul class="thumbnails"&gt;
1210
- &lt;li class="span3"&gt;
1211
- &lt;a href="#" class="thumbnail"&gt;
1212
- &lt;img src="http://placehold.it/260x180" alt=""&gt;
1213
- &lt;/a&gt;
1214
- &lt;/li&gt;
1215
- ...
1216
- &lt;/ul&gt;
1217
- </pre>
1218
- <p>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:</p>
1219
- <pre class="prettyprint linenums">
1220
- &lt;ul class="thumbnails"&gt;
1221
- &lt;li class="span3"&gt;
1222
- &lt;div class="thumbnail"&gt;
1223
- &lt;img src="http://placehold.it/260x180" alt=""&gt;
1224
- &lt;h5&gt;Thumbnail label&lt;/h5&gt;
1225
- &lt;p&gt;Thumbnail caption right here...&lt;/p&gt;
1226
- &lt;/div&gt;
1227
- &lt;/li&gt;
1228
- ...
1229
- &lt;/ul&gt;
1230
- </pre>
1231
- </div>
1232
- <div class="span6">
1233
- <h2>More examples</h2>
1234
- <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p>
1235
- <ul class="thumbnails">
1236
- <li class="span4">
1237
- <a href="#" class="thumbnail">
1238
- <img src="http://placehold.it/360x268" alt="">
1239
- </a>
1240
- </li>
1241
- <li class="span2">
1242
- <a href="#" class="thumbnail">
1243
- <img src="http://placehold.it/160x120" alt="">
1244
- </a>
1245
- </li>
1246
- <li class="span2">
1247
- <a href="#" class="thumbnail">
1248
- <img src="http://placehold.it/160x120" alt="">
1249
- </a>
1250
- </li>
1251
- <li class="span2">
1252
- <a href="#" class="thumbnail">
1253
- <img src="http://placehold.it/160x120" alt="">
1254
- </a>
1255
- </li>
1256
- <li class="span2">
1257
- <a href="#" class="thumbnail">
1258
- <img src="http://placehold.it/160x120" alt="">
1259
- </a>
1260
- </li>
1261
- <li class="span2">
1262
- <a href="#" class="thumbnail">
1263
- <img src="http://placehold.it/160x120" alt="">
1264
- </a>
1265
- </li>
1266
- </ul>
1267
- </div>
1268
- </div>
1269
-
1270
- </section>
1271
-
1272
-
1273
-
1274
- <!-- Alerts & Messages
1275
- ================================================== -->
1276
- <section id="alerts">
1277
- <div class="page-header">
1278
- <h1>Alerts <small>Styles for success, warning, and error messages</small></h1>
1279
- </div>
1280
-
1281
- <h2>Lightweight defaults</h2>
1282
- <div class="row">
1283
- <div class="span4">
1284
- <h3>Rewritten base class</h3>
1285
- <p>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 outter <code>&lt;div&gt;</code>.</p>
1286
- <h3>Single alert message</h3>
1287
- <p>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>.</p>
1288
- <hr>
1289
- <h3>Goes great with javascript</h3>
1290
- <p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p>
1291
- <p><a class="btn js-btn" href="./javascript.html#alerts">Get the plugin &raquo;</a></p>
1292
- </div>
1293
- <div class="span8">
1294
- <h3>Example alerts</h3>
1295
- <p>Wrap your message and an optional close icon in a div with simple class.</p>
1296
- <div class="alert">
1297
- <a class="close">&times;</a>
1298
- <strong>Warning!</strong> Best check yo self, you're not looking too good.
1299
- </div>
1300
- <pre class="prettyprint linenums">
1301
- &lt;div class="alert"&gt;
1302
- &lt;a class="close"&gt;&times;&lt;/a&gt;
1303
- &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you're not looking too good.
1304
- &lt;/div&gt;
1305
- </pre>
1306
- <p>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.</p>
1307
- <div class="alert alert-block">
1308
- <a class="close">&times;</a>
1309
- <h4 class="alert-heading">Warning!</h4>
1310
- <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
1311
- </div>
1312
- <pre class="prettyprint linenums">
1313
- &lt;div class="alert alert-block"&gt;
1314
- &lt;a class="close"&gt;&times;&lt;/a&gt;
1315
- &lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt;
1316
- Best check yo self, you're not...
1317
- &lt;/div&gt;
1318
- </pre>
1319
- </div>
1320
- </div>
1321
-
1322
- <h2>Contextual alternatives <small>Add optional classes to change an alert's connotation</small></h2>
1323
- <div class="row">
1324
- <div class="span4">
1325
- <h3>Error or danger</h3>
1326
- <div class="alert alert-error">
1327
- <a class="close">&times;</a>
1328
- <strong>Oh snap!</strong> Change a few things up and try submitting again.
1329
- </div>
1330
- <pre class="prettyprint linenums">
1331
- &lt;div class="alert alert-error"&gt;
1332
- ...
1333
- &lt;/div&gt;
1334
- </pre>
1335
- </div>
1336
- <div class="span4">
1337
- <h3>Success</h3>
1338
- <div class="alert alert-success">
1339
- <a class="close">&times;</a>
1340
- <strong>Well done!</strong> You successfully read this important alert message.
1341
- </div>
1342
- <pre class="prettyprint linenums">
1343
- &lt;div class="alert alert-success"&gt;
1344
- ...
1345
- &lt;/div&gt;
1346
- </pre>
1347
- </div>
1348
- <div class="span4">
1349
- <h3>Information</h3>
1350
- <div class="alert alert-info">
1351
- <a class="close">&times;</a>
1352
- <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
1353
- </div>
1354
- <pre class="prettyprint linenums">
1355
- &lt;div class="alert alert-info"&gt;
1356
- ...
1357
- &lt;/div&gt;
1358
- </pre>
1359
- </div>
1360
- </div>
1361
-
1362
- </section>
1363
-
1364
-
1365
-
1366
- <!-- Progress bars
1367
- ================================================== -->
1368
- <section id="progress">
1369
- <div class="page-header">
1370
- <h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
1371
- </div>
1372
-
1373
- <h2>Examples and markup</h2>
1374
- <div class="row">
1375
- <div class="span4">
1376
- <h3>Basic</h3>
1377
- <p>Default progress bar with a vertical gradient.</p>
1378
- <div class="progress">
1379
- <div class="bar" style="width: 60%;"></div>
1380
- </div>
1381
- <pre class="prettyprint linenums">
1382
- &lt;div class="progress"&gt;
1383
- &lt;div class="bar"
1384
- style="width: 60%;"&gt;&lt;/div&gt;
1385
- &lt;/div&gt;
1386
- </pre>
1387
- </div>
1388
- <div class="span4">
1389
- <h3>Striped</h3>
1390
- <p>Uses a gradient to create a striped effect.</p>
1391
- <div class="progress progress-info progress-striped">
1392
- <div class="bar" style="width: 20%;"></div>
1393
- </div>
1394
- <pre class="prettyprint linenums">
1395
- &lt;div class="progress progress-info
1396
- progress-striped"&gt;
1397
- &lt;div class="bar"
1398
- style="width: 20%;"&gt;&lt;/div&gt;
1399
- &lt;/div&gt;
1400
- </pre>
1401
- </div>
1402
- <div class="span4">
1403
- <h3>Animated</h3>
1404
- <p>Takes the striped example and animates it.</p>
1405
- <div class="progress progress-danger progress-striped active">
1406
- <div class="bar" style="width: 45%"></div>
1407
- </div>
1408
- <pre class="prettyprint linenums">
1409
- &lt;div class="progress progress-danger
1410
- progress-striped active"&gt;
1411
- &lt;div class="bar"
1412
- style="width: 40%;"&gt;&lt;/div&gt;
1413
- &lt;/div&gt;
1414
- </pre>
1415
- </div>
1416
- </div>
1417
-
1418
- <h2>Options and browser support</h2>
1419
- <div class="row">
1420
- <div class="span4">
1421
- <h3>Additional colors</h3>
1422
- <p>Progress bars utilize some of the same class names as buttons and alerts for similar styling.</p>
1423
- <ul>
1424
- <li><code>.progress-info</code></li>
1425
- <li><code>.progress-success</code></li>
1426
- <li><code>.progress-danger</code></li>
1427
- </ul>
1428
- <p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p>
1429
- </div>
1430
- <div class="span4">
1431
- <h3>Behavior</h3>
1432
- <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
1433
- <p>If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.</p>
1434
- </div>
1435
- <div class="span4">
1436
- <h3>Browser support</h3>
1437
- <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.</p>
1438
- <p>Opera does not support animations at this time.</p>
1439
- </div>
1440
- </div>
1441
-
1442
- </section>
1443
-
1444
-
1445
-
1446
-
1447
-
1448
- <!-- Miscellaneous
1449
- ================================================== -->
1450
- <section id="misc">
1451
- <div class="page-header">
1452
- <h1>Miscellaneous <small>Wells, badges, and close icon</small></h1>
1453
- </div>
1454
- <div class="row">
1455
- <div class="span4">
1456
- <h2>Wells</h2>
1457
- <p>Use the well as a simple effect on an element to give it an inset effect.</p>
1458
- <div class="well">
1459
- Look, I'm in a well!
1460
- </div>
1461
- <pre class="prettyprint linenums">
1462
- &lt;div class="well"&gt;
1463
- ...
1464
- &lt;/div&gt;
1465
- </pre>
1466
- </div><!--/span-->
1467
- <div class="span4" style="display: none;">
1468
- <h2>Badges</h2>
1469
- <p>Use a badge on an element for an unread count or as a simple indicator.</p>
1470
- <pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
1471
- </div><!--/span-->
1472
- <div class="span4">
1473
- <h2>Close icon</h2>
1474
- <p>Use the generic close icon for dismissing content like modals and alerts.</p>
1475
- <p><a class="close" style="float: none;">&times;</a></p>
1476
- <pre class="prettyprint linenums">&lt;a class="close"&gt;&amp;times;&lt;/a&gt;</pre>
1477
- </div><!--/span-->
1478
- </div><!--/row-->
1479
- </section>
1480
-
1481
-
1482
- <!-- Footer
1483
- ================================================== -->
1484
- <footer class="footer">
1485
- <p class="pull-right"><a href="#">Back to top</a></p>
1486
- <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
1487
- <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
1488
- <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
1489
- </footer>
1490
-
1491
- </div><!-- /container -->
1492
-
1493
-
1494
-
1495
- <!-- Le javascript
1496
- ================================================== -->
1497
- <!-- Placed at the end of the document so the pages load faster -->
1498
- <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
1499
- <script src="assets/js/jquery.js"></script>
1500
- <script src="assets/js/google-code-prettify/prettify.js"></script>
1501
- <script src="assets/js/bootstrap-transition.js"></script>
1502
- <script src="assets/js/bootstrap-alert.js"></script>
1503
- <script src="assets/js/bootstrap-modal.js"></script>
1504
- <script src="assets/js/bootstrap-dropdown.js"></script>
1505
- <script src="assets/js/bootstrap-scrollspy.js"></script>
1506
- <script src="assets/js/bootstrap-tab.js"></script>
1507
- <script src="assets/js/bootstrap-tooltip.js"></script>
1508
- <script src="assets/js/bootstrap-popover.js"></script>
1509
- <script src="assets/js/bootstrap-button.js"></script>
1510
- <script src="assets/js/bootstrap-collapse.js"></script>
1511
- <script src="assets/js/bootstrap-carousel.js"></script>
1512
- <script src="assets/js/bootstrap-typeahead.js"></script>
1513
- <script src="assets/js/application.js"></script>
1514
-
1515
-
1516
- </body>
1517
- </html>