]> jfr.im git - z_archive/KronOS.git/blame - public/less/tests/css-tests.html
projects / z_archive / KronOS.git / blame
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (incremental) | history | HEAD
Fixing filestructure again
[z_archive/KronOS.git] / public / less / tests / css-tests.html
CommitLineData
59c06b17
CS		 1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>CSS Tests · Twitter Bootstrap</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta name="description" content="">
8 <meta name="author" content="">
9
10 <!-- Le styles -->
11 <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
12 <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
13 <link href="../../docs/assets/css/docs.css" rel="stylesheet">
14 <link href="../../docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
15
16 <!-- CSS just for the tests page -->
17 <link href="css-tests.css" rel="stylesheet">
18
19 <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
20 <!--[if lt IE 9]>
21 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
22 <![endif]-->
23
24 <!-- Le fav and touch icons -->
25 <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
26 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
27 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
28 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
29 <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
30 </head>
31
32 <body>
33
34
35 <!-- Navbar
36 ================================================== -->
37 <div class="navbar navbar-inverse navbar-fixed-top">
38 <div class="navbar-inner">
39 <div class="container">
40 <a class="brand" href="../../docs/index.html">Bootstrap</a>
41 </div>
42 </div>
43 </div>
44
45
46<!-- Masthead
47================================================== -->
48<header class="jumbotron subhead" id="overview">
49 <div class="container">
50 <h1>CSS Tests</h1>
51 <p class="lead">One stop shop for quick debugging and edge-case tests of CSS.</p>
52 </div>
53</header>
54
55
56<div class="bs-docs-canvas">
57
58 <div class="container">
59
60
61
62<!-- Typography
63================================================== -->
64
65<div class="page-header">
66 <h1>Typography</h1>
67</div>
68
69<div class="row">
70 <div class="span6">
71 <div class="type-test">
72 <h1>h1. Heading 1</h1>
73 <h2>h2. Heading 2</h2>
74 <h3>h3. Heading 3</h3>
75 <h4>h4. Heading 4</h4>
76 <h5>h5. Heading 5</h5>
77 <h6>h6. Heading 6</h6>
78 <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
79 </div>
80 </div>
81 <div class="span6">
82 <div class="type-test">
83 <h1>h1. Heading 1</h1>
84 <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
85 <h2>h2. Heading 2</h2>
86 <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
87 <h3>h3. Heading 3</h3>
88 <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
89 <h4>h4. Heading 4</h4>
90 <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
91 <h5>h5. Heading 5</h5>
92 <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
93 <h6>h6. Heading 6</h6>
94 <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
95 </div>
96 </div>
97</div>
98
99
100
101<!-- Responsive images
102================================================== -->
103
104<div class="page-header">
105 <h1>Responsive images</h1>
106</div>
107
108<div class="row">
109 <div class="span4">
110 <img src="http://placehold.it/600x600" height="200">
111 </div>
112 <div class="span4">
113 <img src="http://placehold.it/600x600">
114 </div>
115 <div class="span4">
116 <img src="http://placehold.it/600x600">
117 </div>
118</div>
119
120<br>
121
122<div class="row">
123 <div class="span4">
124 <img src="http://placehold.it/600x900" style="width: 200px;">
125 </div>
126 <div class="span4">
127 <img src="http://placehold.it/200x300">
128 </div>
129 <div class="span4">
130 <img src="http://placehold.it/600x600">
131 </div>
132</div>
133
134<br><br>
135
136
137
138
139<!-- Fluid grid
140================================================== -->
141
142<div class="page-header">
143 <h1>Fluid grids</h1>
144</div>
145
146<div class="fluid-grid">
147 <div class="row">
148 <div class="span12">12
149 <div class="row-fluid">
150 <div class="span1">1</div>
151 <div class="span1">1</div>
152 <div class="span1">1</div>
153 <div class="span1">1</div>
154 <div class="span1">1</div>
155 <div class="span1">1</div>
156 <div class="span1">1</div>
157 <div class="span1">1</div>
158 <div class="span1">1</div>
159 <div class="span1">1</div>
160 <div class="span1">1</div>
161 <div class="span1">1</div>
162 </div>
163 </div>
164 </div>
165 <div class="row">
166 <div class="span11">11
167 <div class="row-fluid">
168 <div class="span1">1</div>
169 <div class="span1">1</div>
170 <div class="span1">1</div>
171 <div class="span1">1</div>
172 <div class="span1">1</div>
173 <div class="span1">1</div>
174 <div class="span1">1</div>
175 <div class="span1">1</div>
176 <div class="span1">1</div>
177 <div class="span1">1</div>
178 <div class="span1">1</div>
179 <div class="span1">1</div>
180 </div>
181 </div>
182 <div class="span1">1
183 <div class="row-fluid">
184 <div class="span1">1</div>
185 <div class="span1">1</div>
186 <div class="span1">1</div>
187 <div class="span1">1</div>
188 <div class="span1">1</div>
189 <div class="span1">1</div>
190 <div class="span1">1</div>
191 <div class="span1">1</div>
192 <div class="span1">1</div>
193 <div class="span1">1</div>
194 <div class="span1">1</div>
195 <div class="span1">1</div>
196 </div>
197 </div>
198 </div>
199 <div class="row">
200 <div class="span10">10
201 <div class="row-fluid">
202 <div class="span1">1</div>
203 <div class="span1">1</div>
204 <div class="span1">1</div>
205 <div class="span1">1</div>
206 <div class="span1">1</div>
207 <div class="span1">1</div>
208 <div class="span1">1</div>
209 <div class="span1">1</div>
210 <div class="span1">1</div>
211 <div class="span1">1</div>
212 <div class="span1">1</div>
213 <div class="span1">1</div>
214 </div>
215 </div>
216 <div class="span2">2
217 <div class="row-fluid">
218 <div class="span1">1</div>
219 <div class="span1">1</div>
220 <div class="span1">1</div>
221 <div class="span1">1</div>
222 <div class="span1">1</div>
223 <div class="span1">1</div>
224 <div class="span1">1</div>
225 <div class="span1">1</div>
226 <div class="span1">1</div>
227 <div class="span1">1</div>
228 <div class="span1">1</div>
229 <div class="span1">1</div>
230 </div>
231 </div>
232 </div>
233 <div class="row">
234 <div class="span9">9
235 <div class="row-fluid">
236 <div class="span1">1</div>
237 <div class="span1">1</div>
238 <div class="span1">1</div>
239 <div class="span1">1</div>
240 <div class="span1">1</div>
241 <div class="span1">1</div>
242 <div class="span1">1</div>
243 <div class="span1">1</div>
244 <div class="span1">1</div>
245 <div class="span1">1</div>
246 <div class="span1">1</div>
247 <div class="span1">1</div>
248 </div>
249 </div>
250 <div class="span3">3
251 <div class="row-fluid">
252 <div class="span1">1</div>
253 <div class="span1">1</div>
254 <div class="span1">1</div>
255 <div class="span1">1</div>
256 <div class="span1">1</div>
257 <div class="span1">1</div>
258 <div class="span1">1</div>
259 <div class="span1">1</div>
260 <div class="span1">1</div>
261 <div class="span1">1</div>
262 <div class="span1">1</div>
263 <div class="span1">1</div>
264 </div>
265 </div>
266 </div>
267 <div class="row">
268 <div class="span8">8
269 <div class="row-fluid">
270 <div class="span1">1</div>
271 <div class="span1">1</div>
272 <div class="span1">1</div>
273 <div class="span1">1</div>
274 <div class="span1">1</div>
275 <div class="span1">1</div>
276 <div class="span1">1</div>
277 <div class="span1">1</div>
278 <div class="span1">1</div>
279 <div class="span1">1</div>
280 <div class="span1">1</div>
281 <div class="span1">1</div>
282 </div>
283 </div>
284 <div class="span4">4
285 <div class="row-fluid">
286 <div class="span1">1</div>
287 <div class="span1">1</div>
288 <div class="span1">1</div>
289 <div class="span1">1</div>
290 <div class="span1">1</div>
291 <div class="span1">1</div>
292 <div class="span1">1</div>
293 <div class="span1">1</div>
294 <div class="span1">1</div>
295 <div class="span1">1</div>
296 <div class="span1">1</div>
297 <div class="span1">1</div>
298 </div>
299 </div>
300 </div>
301 <div class="row">
302 <div class="span7">7
303 <div class="row-fluid">
304 <div class="span1">1</div>
305 <div class="span1">1</div>
306 <div class="span1">1</div>
307 <div class="span1">1</div>
308 <div class="span1">1</div>
309 <div class="span1">1</div>
310 <div class="span1">1</div>
311 <div class="span1">1</div>
312 <div class="span1">1</div>
313 <div class="span1">1</div>
314 <div class="span1">1</div>
315 <div class="span1">1</div>
316 </div>
317 </div>
318 <div class="span5">5
319 <div class="row-fluid">
320 <div class="span1">1</div>
321 <div class="span1">1</div>
322 <div class="span1">1</div>
323 <div class="span1">1</div>
324 <div class="span1">1</div>
325 <div class="span1">1</div>
326 <div class="span1">1</div>
327 <div class="span1">1</div>
328 <div class="span1">1</div>
329 <div class="span1">1</div>
330 <div class="span1">1</div>
331 <div class="span1">1</div>
332 </div>
333 </div>
334 </div>
335 <div class="row">
336 <div class="span6">6
337 <div class="row-fluid">
338 <div class="span1">1</div>
339 <div class="span1">1</div>
340 <div class="span1">1</div>
341 <div class="span1">1</div>
342 <div class="span1">1</div>
343 <div class="span1">1</div>
344 <div class="span1">1</div>
345 <div class="span1">1</div>
346 <div class="span1">1</div>
347 <div class="span1">1</div>
348 <div class="span1">1</div>
349 <div class="span1">1</div>
350 </div>
351 </div>
352 <div class="span6">6
353 <div class="row-fluid">
354 <div class="span1">1</div>
355 <div class="span1">1</div>
356 <div class="span1">1</div>
357 <div class="span1">1</div>
358 <div class="span1">1</div>
359 <div class="span1">1</div>
360 <div class="span1">1</div>
361 <div class="span1">1</div>
362 <div class="span1">1</div>
363 <div class="span1">1</div>
364 <div class="span1">1</div>
365 <div class="span1">1</div>
366 </div>
367 </div>
368 </div>
369</div> <!-- fluid grids -->
370
371
372
373<!-- Tables
374================================================== -->
375
376<div class="page-header">
377 <h1>Tables</h1>
378</div>
379
380<div class="row">
381 <div class="span6">
382 <h4>Bordered without thead</h4>
383 <table class="table table-bordered">
384 <tbody>
385 <tr>
386 <td>1</td>
387 <td>2</td>
388 <td>3</td>
389 </tr>
390 <tr>
391 <td>1</td>
392 <td>2</td>
393 <td>3</td>
394 </tr>
395 <tr>
396 <td>1</td>
397 <td>2</td>
398 <td>3</td>
399 </tr>
400 </tbody>
401 </table>
402 <h4>Bordered without thead, with caption</h4>
403 <table class="table table-bordered">
404 <caption>Table caption</caption>
405 <tbody>
406 <tr>
407 <td>1</td>
408 <td>2</td>
409 <td>3</td>
410 </tr>
411 <tr>
412 <td>1</td>
413 <td>2</td>
414 <td>3</td>
415 </tr>
416 <tr>
417 <td>1</td>
418 <td>2</td>
419 <td>3</td>
420 </tr>
421 </tbody>
422 </table>
423 <h4>Bordered without thead, with colgroup</h4>
424 <table class="table table-bordered">
425 <colgroup>
426 <col class="col1">
427 <col class="col2">
428 <col class="col3">
429 </colgroup>
430 <tbody>
431 <tr>
432 <td>1</td>
433 <td>2</td>
434 <td>3</td>
435 </tr>
436 <tr>
437 <td>1</td>
438 <td>2</td>
439 <td>3</td>
440 </tr>
441 <tr>
442 <td>1</td>
443 <td>2</td>
444 <td>3</td>
445 </tr>
446 </tbody>
447 <tfoot>
448 <tr>
449 <td>3</td>
450 <td>6</td>
451 <td>9</td>
452 </tr>
453 </tfoot>
454 </table>
455 <h4>Bordered with thead, with colgroup</h4>
456 <table class="table table-bordered">
457 <colgroup>
458 <col class="col1">
459 <col class="col2">
460 <col class="col3">
461 </colgroup>
462 <thead>
463 <tr>
464 <th>A</th>
465 <th>B</th>
466 <th>C</th>
467 </tr>
468 </thead>
469 <tbody>
470 <tr>
471 <td>1</td>
472 <td>2</td>
473 <td>3</td>
474 </tr>
475 <tr>
476 <td>1</td>
477 <td>2</td>
478 <td>3</td>
479 </tr>
480 <tr>
481 <td>1</td>
482 <td>2</td>
483 <td>3</td>
484 </tr>
485 </tbody>
486 <tfoot>
487 <tr>
488 <td>3</td>
489 <td>6</td>
490 <td>9</td>
491 </tr>
492 </tfoot>
493 </table>
494 </div><!--/span-->
495 <div class="span6">
496 <h4>Bordered with thead and caption</h4>
497 <table class="table table-bordered">
498 <caption>Table caption</caption>
499 <thead>
500 <tr>
501 <th>1</th>
502 <th>2</th>
503 <th>3</th>
504 </tr>
505 </thead>
506 <tbody>
507 <tr>
508 <td>1</td>
509 <td>2</td>
510 <td>3</td>
511 </tr>
512 <tr>
513 <td>1</td>
514 <td>2</td>
515 <td>3</td>
516 </tr>
517 <tr>
518 <td>1</td>
519 <td>2</td>
520 <td>3</td>
521 </tr>
522 </tbody>
523 <tfoot>
524 <tr>
525 <td>3</td>
526 <td>6</td>
527 <td>9</td>
528 </tr>
529 </tfoot>
530 </table>
531 <h4>Bordered with rowspan and colspan</h4>
532 <table class="table table-bordered">
533 <thead>
534 <tr>
535 <th>1</th>
536 <th>2</th>
537 <th>3</th>
538 </tr>
539 </thead>
540 <tbody>
541 <tr>
542 <td colspan="2">1 and 2</td>
543 <td>3</td>
544 </tr>
545 <tr>
546 <td>1</td>
547 <td rowspan="2">2</td>
548 <td>3</td>
549 </tr>
550 <tr>
551 <td rowspan="2">1</td>
552 <td>3</td>
553 </tr>
554 <tr>
555 <td colspan="2">2 and 3</td>
556 </tr>
557 </tbody>
558 </table>
559 </div><!--/span-->
560</div><!--/row-->
561
562
563<h4>Grid sizing</h4>
564<div class="row">
565 <div class="span12">
566 <table class="table table-bordered">
567 <thead>
568 <tr>
569 <th class="span3">1</th>
570 <th class="span4">2</th>
571 <th>3</th>
572 </tr>
573 </thead>
574 <tbody>
575 <tr>
576 <td colspan="2">1 and 2</td>
577 <td>3</td>
578 </tr>
579 <tr>
580 <td>1</td>
581 <td rowspan="2">2</td>
582 <td>3</td>
583 </tr>
584 <tr>
585 <td rowspan="2">1</td>
586 <td>3</td>
587 </tr>
588 <tr>
589 <td colspan="2">2 and 3</td>
590 </tr>
591 </tbody>
592 </table>
593 </div>
594</div><!--/row-->
595
596<h4>Fluid grid sizing</h4>
597<div class="row-fluid">
598 <div class="span12">
599 <table class="table table-bordered">
600 <thead>
601 <tr>
602 <th class="span3">1</th>
603 <th class="span4">2</th>
604 <th>3</th>
605 </tr>
606 </thead>
607 <tbody>
608 <tr>
609 <td colspan="2">1 and 2</td>
610 <td>3</td>
611 </tr>
612 <tr>
613 <td>1</td>
614 <td rowspan="2">2</td>
615 <td>3</td>
616 </tr>
617 <tr>
618 <td rowspan="2">1</td>
619 <td>3</td>
620 </tr>
621 <tr>
622 <td colspan="2">2 and 3</td>
623 </tr>
624 </tbody>
625 </table>
626 </div>
627</div><!--/row-->
628
629
630
631<!-- Forms
632================================================== -->
633
634<div class="page-header">
635 <h1>Forms</h1>
636</div>
637
638<h4>Buttons and button groups</h4>
639<form class="form-inline">
640 <button class="btn btn-success">Save</button>
641 <button class="btn btn-info">Add new</button>
642 <div class="btn-group">
643 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
644 <i class="icon-user"></i> User
645 <span class="caret"></span>
646 </a>
647 <ul class="dropdown-menu">
648 <li><a href="#">Profile</a></li>
649 <li class="divider"></li>
650 <li><a href="#">Sign Out</a></li>
651 </ul>
652 </div>
653</form>
654
655<h4>Horizontal form errors</h4>
656<form class="form-horizontal">
657 <div class="control-group error">
658 <label class="control-label" for="inputError">Radio with error</label>
659 <div class="controls">
660 <label class="radio">
661 <input type="radio" id="inputError"> Oh hai
662 </label>
663 <span class="help-inline">Please correct the error</span>
664 </div>
665 </div>
666</form>
667
668<div class="row">
669 <div class="span4">
670 <h4>Prepend and append on inputs</h4>
671 <form>
672 <div class="controls">
673 <div class="input-prepend">
674 <span class="add-on">@</span>
675 <input class="span2" id="prependedInput" size="16" type="text">
676 </div>
677 </div>
678 <div class="controls">
679 <div class="input-append">
680 <input class="span2" id="prependedInput" size="16" type="text">
681 <span class="add-on">@</span>
682 </div>
683 </div>
684 <div class="controls">
685 <div class="input-prepend input-append">
686 <span class="add-on">$</span>
687 <input class="span2" id="prependedInput" size="16" type="text">
688 <span class="add-on">.00</span>
689 </div>
690 </div>
691 </form>
692 </div><!--/span-->
693 <div class="span4">
694 <h4>Prepend and append with uneditable</h4>
695 <form>
696 <div class="input-prepend">
697 <span class="add-on">$</span>
698 <span class="span2 uneditable-input">Some value here</span>
699 </div>
700 <div class="input-append">
701 <span class="span2 uneditable-input">Some value here</span>
702 <span class="add-on">.00</span>
703 </div>
704 <div class="input-prepend input-append">
705 <span class="add-on">$</span>
706 <span class="span2 uneditable-input">Some value here</span>
707 <span class="add-on">.00</span>
708 </div>
709 </form>
710 </div><!--/span-->
711 <div class="span4">
712 <h4>Prepend with type="submit"</h4>
713 <form class="form-search">
714 <div class="input-append">
715 <input type="text" class="span2 search-query" value="" name="q">
716 <input type="submit" value="Search" class="btn">
717 </div>
718 </form>
719 <div class="input-append">
720 <input type="text" class="span2" value="" name="">
721 <input type="submit" value="Button" class="btn">
722 </div>
723 <div class="input-append">
724 <input type="text" size="16" id="appendedInputButtons" class="span2">
725 <input type="submit" value="Search" class="btn">
726 <button type="button" class="btn">Options</button>
727 </div>
728 </div><!--/span-->
729</div><!--/row-->
730
731<h4>Fluid prepended and appended inputs</h4>
732<div class="row-fluid">
733 <div class="span6">
734 <form>
735 <div class="controls">
736 <div class="input-prepend">
737 <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
738 </div>
739 </div>
740 <div class="controls">
741 <div class="input-append">
742 <input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span>
743 </div>
744 </div>
745 <div class="controls">
746 <div class="input-prepend input-append">
747 <span class="add-on">$</span><input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">.00</span>
748 </div>
749 </div>
750 </form>
751 </div>
752</div>
753
754<h4>Fixed row with inputs</h4>
755<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
756
757<div class="rowInputs">
758 <div class="row">
759 <div class="span12">
760 <input type="text" class="span1" placeholder="span1">
761 </div><!--/span-->
762 </div><!--/row-->
763 <div class="row">
764 <div class="span12">
765 <input type="text" class="span2" placeholder="span2">
766 </div><!--/span-->
767 </div><!--/row-->
768 <div class="row">
769 <div class="span12">
770 <input type="text" class="span3" placeholder="span3">
771 </div><!--/span-->
772 </div><!--/row-->
773 <div class="row">
774 <div class="span12">
775 <input type="text" class="span4" placeholder="span4">
776 </div><!--/span-->
777 </div><!--/row-->
778 <div class="row">
779 <div class="span12">
780 <input type="text" class="span5" placeholder="span5">
781 </div><!--/span-->
782 </div><!--/row-->
783 <div class="row">
784 <div class="span12">
785 <input type="text" class="span6" placeholder="span6">
786 </div><!--/span-->
787 </div><!--/row-->
788 <div class="row">
789 <div class="span12">
790 <input type="text" class="span7" placeholder="span7">
791 </div><!--/span-->
792 </div><!--/row-->
793 <div class="row">
794 <div class="span12">
795 <input type="text" class="span8" placeholder="span8">
796 </div><!--/span-->
797 </div><!--/row-->
798 <div class="row">
799 <div class="span12">
800 <input type="text" class="span9" placeholder="span9">
801 </div><!--/span-->
802 </div><!--/row-->
803 <div class="row">
804 <div class="span12">
805 <input type="text" class="span10" placeholder="span10">
806 </div><!--/span-->
807 </div><!--/row-->
808 <div class="row">
809 <div class="span12">
810 <input type="text" class="span11" placeholder="span11">
811 </div><!--/span-->
812 </div><!--/row-->
813 <div class="row">
814 <div class="span12">
815 <input type="text" class="span12" placeholder="span12">
816 </div><!--/span-->
817 </div><!--/row-->
818</div>
819<br>
820
821<h4>Fluid row with inputs</h4>
822<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
823<div id="fluidRowInputs">
824 <div class="row-fluid">
825 <div class="span12">
826 <input type="text" class="span1" placeholder="span1">
827 </div><!--/span-->
828 </div><!--/row-->
829 <div class="row-fluid">
830 <div class="span12">
831 <input type="text" class="span2" placeholder="span2">
832 </div><!--/span-->
833 </div><!--/row-->
834 <div class="row-fluid">
835 <div class="span12">
836 <input type="text" class="span3" placeholder="span3">
837 </div><!--/span-->
838 </div><!--/row-->
839 <div class="row-fluid">
840 <div class="span12">
841 <input type="text" class="span4" placeholder="span4">
842 </div><!--/span-->
843 </div><!--/row-->
844 <div class="row-fluid">
845 <div class="span12">
846 <input type="text" class="span5" placeholder="span5">
847 </div><!--/span-->
848 </div><!--/row-->
849 <div class="row-fluid">
850 <div class="span12">
851 <input type="text" class="span6" placeholder="span6">
852 </div><!--/span-->
853 </div><!--/row-->
854 <div class="row-fluid">
855 <div class="span12">
856 <input type="text" class="span7" placeholder="span7">
857 </div><!--/span-->
858 </div><!--/row-->
859 <div class="row-fluid">
860 <div class="span12">
861 <input type="text" class="span8" placeholder="span8">
862 </div><!--/span-->
863 </div><!--/row-->
864 <div class="row-fluid">
865 <div class="span12">
866 <input type="text" class="span9" placeholder="span9">
867 </div><!--/span-->
868 </div><!--/row-->
869 <div class="row-fluid">
870 <div class="span12">
871 <input type="text" class="span10" placeholder="span10">
872 </div><!--/span-->
873 </div><!--/row-->
874 <div class="row-fluid">
875 <div class="span12">
876 <input type="text" class="span11" placeholder="span11">
877 </div><!--/span-->
878 </div><!--/row-->
879 <div class="row-fluid">
880 <div class="span12">
881 <input type="text" class="span12" placeholder="span12">
882 </div><!--/span-->
883 </div><!--/row-->
884</div>
885
886<br>
887
888<h4>Inline form in fluid row</h4>
889
890<div class="row-fluid">
891 <div class="span12">
892 <form class="form-inline">
893 <input type="text" class="span3" placeholder="Email">
894 <input type="password" class="span3" placeholder="Password">
895 <label class="checkbox">
896 <input type="checkbox"> Remember me
897 </label>
898 <button type="submit" class="btn">Sign in</button>
899 </form>
900 </div>
901</div>
902
903
904<br>
905
906
907<h4>Fluid textarea at .span12</h4>
908<div class="row-fluid">
909 <div class="span12">
910 <textarea class="span12"></textarea>
911 </div>
912</div>
913
914
915<br>
916
917
918<h4>Selects</h4>
919<form>
920 <select class="span4">
921 <option>Option</option>
922 </select>
923</form>
924
925
926<br>
927
928
929
930
931<!-- Dropdowns
932================================================== -->
933
934<div class="page-header">
935 <h1>Dropdowns</h1>
936</div>
937
938<h4>Dropdown link with hash URL</h4>
939<ul class="nav nav-pills">
940 <li class="active"><a href="#">Link</a></li>
941 <li><a href="#">Example link</a></li>
942 <li class="dropdown">
943 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
944 Dropdown <span class="caret"></span>
945 </a>
946 <ul class="dropdown-menu">
947 <li><a href="#">Action</a></li>
948 <li><a href="#">Another action</a></li>
949 <li><a href="#">Something else here</a></li>
950 <li class="divider"></li>
951 <li><a href="#">Separated link</a></li>
952 </ul>
953 </li>
954</ul>
955
956<h4>Dropdown link with custom URL and data-target</h4>
957<ul class="nav nav-pills">
958 <li class="active"><a href="#">Link</a></li>
959 <li><a href="#">Example link</a></li>
960 <li class="dropdown">
961 <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
962 Dropdown <span class="caret"></span>
963 </a>
964 <ul class="dropdown-menu">
965 <li><a href="#">Action</a></li>
966 <li><a href="#">Another action</a></li>
967 <li><a href="#">Something else here</a></li>
968 <li class="divider"></li>
969 <li><a href="#">Separated link</a></li>
970 </ul>
971 </li>
972</ul>
973
974<h4>Dropdown on a button</h4>
975<div style="position: relative;">
976 <button class="btn" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
977 <ul class="dropdown-menu">
978 <li><a href="#">Action</a></li>
979 <li><a href="#">Another action</a></li>
980 <li><a href="#">Something else here</a></li>
981 <li class="divider"></li>
982 <li><a href="#">Separated link</a></li>
983 </ul>
984</div>
985
986<br>
987
988
989<!-- Thumbnails
990================================================== -->
991
992<div class="page-header">
993 <h1>Thumbnails</h1>
994</div>
995
996<h4>Default thumbnails (no grid sizing)</h4>
997<ul class="thumbnails">
998 <li class="thumbnail">
999 <img src="http://placehold.it/260x180" alt="">
1000 </li>
1001 <li class="thumbnail">
1002 <img src="http://placehold.it/260x180" alt="">
1003 </li>
1004 <li class="thumbnail">
1005 <img src="http://placehold.it/260x180" alt="">
1006 </li>
1007 <li class="thumbnail">
1008 <img src="http://placehold.it/260x180" alt="">
1009 </li>
1010</ul>
1011
1012<!-- NOT CURRENTLY SUPPORTED
1013<h4>Offset thumbnails</h4>
1014<ul class="thumbnails">
1015 <li class="span3 offset3">
1016 <a href="#" class="thumbnail">
1017 <img src="http://placehold.it/260x180" alt="">
1018 </a>
1019 </li>
1020 <li class="span3">
1021 <a href="#" class="thumbnail">
1022 <img src="http://placehold.it/260x180" alt="">
1023 </a>
1024 </li>
1025 <li class="span3">
1026 <a href="#" class="thumbnail">
1027 <img src="http://placehold.it/260x180" alt="">
1028 </a>
1029 </li>
1030</ul>
1031-->
1032
1033<h4>Standard grid sizing</h4>
1034<ul class="thumbnails">
1035 <li class="span3">
1036 <a href="#" class="thumbnail">
1037 <img src="http://placehold.it/260x180" alt="">
1038 </a>
1039 </li>
1040 <li class="span3 offset3">
1041 <a href="#" class="thumbnail">
1042 <img src="http://placehold.it/260x180" alt="">
1043 </a>
1044 </li>
1045 <li class="span3">
1046 <a href="#" class="thumbnail">
1047 <img src="http://placehold.it/260x180" alt="">
1048 </a>
1049 </li>
1050</ul>
1051
1052<h4>Fluid thumbnails</h4>
1053<div class="row-fluid">
1054 <div class="span8">
1055 <ul class="thumbnails">
1056 <li class="span4">
1057 <a href="#" class="thumbnail">
1058 <img src="http://placehold.it/260x180" alt="">
1059 </a>
1060 </li>
1061 <li class="span4">
1062 <a href="#" class="thumbnail">
1063 <img src="http://placehold.it/260x180" alt="">
1064 </a>
1065 </li>
1066 <li class="span4">
1067 <a href="#" class="thumbnail">
1068 <img src="http://placehold.it/260x180" alt="">
1069 </a>
1070 </li>
1071 </ul>
1072 </div>
1073</div>
1074
1075
1076
1077<!-- Tabs
1078================================================== -->
1079
1080<div class="page-header">
1081 <h1>Tabs</h1>
1082</div>
1083
1084<div class="tabbable tabs-left" style="margin-bottom: 18px;">
1085 <ul class="nav nav-tabs">
1086 <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
1087 <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
1088 <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
1089 </ul>
1090 <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
1091 <div class="tab-pane active" id="tab1">
1092 <p>I'm in Section 1.</p>
1093
1094 <div class="tabbable" style="background: #f5f5f5; padding: 20px;">
1095 <ul class="nav nav-tabs">
1096 <li class="active"><a href="#tab1-1" data-toggle="tab">1.1</a></li>
1097 <li><a href="#tab1-2" data-toggle="tab">1.2</a></li>
1098 <li><a href="#tab1-3" data-toggle="tab">1.3</a></li>
1099 </ul>
1100 <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
1101 <div class="tab-pane active" id="tab1-1">
1102 <p>I'm in Section 1.1.</p>
1103 </div>
1104 <div class="tab-pane" id="tab1-2">
1105 <p>I'm in Section 1.2.</p>
1106 </div>
1107 <div class="tab-pane" id="tab1-3">
1108 <p>I'm in Section 1.3.</p>
1109 </div>
1110 </div>
1111 </div>
1112 </div>
1113 <div class="tab-pane" id="tab2">
1114 <p>Howdy, I'm in Section 2.</p>
1115 </div>
1116 <div class="tab-pane" id="tab3">
1117 <p>What up girl, this is Section 3.</p>
1118 </div>
1119 </div>
1120</div> <!-- /tabbable -->
1121
1122<br>
1123
1124
1125<!-- Labels
1126================================================== -->
1127
1128<div class="page-header">
1129 <h1>Labels</h1>
1130</div>
1131
1132<div class="row">
1133 <div class="span4">
1134 <h4>Inline label</h4>
1135 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam <span class="label label-warning">Label name</span> eget risus varius blandit sit amet non magna. Fusce <code>.class-name</code> dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
1136 </div><!--/span-->
1137 <div class="span4">
1138 <form class="form-horizontal">
1139 <label>Example label</label>
1140 <input type="text" placeholder="Input"> <span class="help-inline"><span class="label">Hey!</span> Read this.</span>
1141 </form>
1142 </div><!--/span-->
1143 <div class="span4">
1144 <button class="btn">Action <span class="badge">2</span></button>
1145 <button class="btn">Action <span class="label">2</span></button>
1146 </div><!--/span-->
1147</div><!--/row-->
1148
1149<br>
1150
1151
1152<!-- Button groups
1153================================================== -->
1154
1155<div class="page-header">
1156 <h1>Buttons</h1>
1157</div>
1158
1159<table class="table table-bordered">
1160 <tbody>
1161 <tr>
1162 <td>
1163 Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
1164 </td>
1165 <td>
1166 <div class="btn-group">
1167 <button class="btn">1</button>
1168 <button class="btn">2</button>
1169 <button class="btn">3</button>
1170 <button class="btn">4</button>
1171 </div>
1172 </td>
1173 </tr>
1174 </tbody>
1175</table>
1176
1177<h4>Mini buttons: text and icon</h4>
1178<div class="btn-group">
1179 <button class="btn btn-mini">Button text</button>
1180 <button class="btn btn-mini"><i class="icon-cog"></i></button>
1181</div>
1182
1183<br>
1184
1185
1186
1187<!-- Responsive utility classes
1188================================================== -->
1189
1190<div class="page-header">
1191 <h1>Responsive utility classes</h1>
1192</div>
1193
1194<h4>Visible on...</h4>
1195<ul class="responsive-utilities-test visible-on">
1196 <li>Phone<span class="visible-phone">✔ Phone</span></li>
1197 <li>Tablet<span class="visible-tablet">✔ Tablet</span></li>
1198 <li>Desktop<span class="visible-desktop">✔ Desktop</span></li>
1199</ul>
1200<ul class="responsive-utilities-test visible-on">
1201 <li>Phone + Tablet<span class="visible-phone visible-tablet">✔ Phone + Tablet</span></li>
1202 <li>Tablet + Desktop<span class="visible-tablet visible-desktop">✔ Tablet + Desktop</span></li>
1203 <li>All<span class="visible-phone visible-tablet visible-desktop">✔ All</span></li>
1204</ul>
1205
1206<h4>Hidden on...</h4>
1207<ul class="responsive-utilities-test hidden-on">
1208 <li>Phone<span class="hidden-phone">✔ Phone</span></li>
1209 <li>Tablet<span class="hidden-tablet">✔ Tablet</span></li>
1210 <li>Desktop<span class="hidden-desktop">✔ Desktop</span></li>
1211</ul>
1212<ul class="responsive-utilities-test hidden-on">
1213 <li>Phone + Tablet<span class="hidden-phone hidden-tablet">✔ Phone + Tablet</span></li>
1214 <li>Tablet + Desktop<span class="hidden-tablet hidden-desktop">✔ Tablet + Desktop</span></li>
1215 <li>All<span class="hidden-phone hidden-tablet hidden-desktop">✔ All</span></li>
1216</ul>
1217
1218
1219
1220<!-- Gradients
1221================================================== -->
1222
1223<div class="page-header">
1224 <h1>Gradients</h1>
1225</div>
1226
1227<h4>Horizontal</h4>
1228<div class="gradient-horizontal"></div>
1229
1230<h4>Vertical</h4>
1231<div class="gradient-vertical"></div>
1232
1233<h4>Directional</h4>
1234<div class="gradient-directional"></div>
1235
1236<h4>Three colors</h4>
1237<div class="gradient-vertical-three"></div>
1238
1239<h4>Radial</h4>
1240<div class="gradient-radial"></div>
1241
1242<h4>Striped</h4>
1243<div class="gradient-striped"></div>
1244
1245
1246
1247
1248
1249
1250
1251 </div><!-- /container -->
1252
1253
1254
1255 <!-- Footer
1256 ================================================== -->
1257 <footer class="footer">
1258 <div class="container">
1259 <p class="pull-right"><a href="#">Back to top</a></p>
1260 <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>
1261 <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>
1262 <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>
1263 <ul class="footer-links">
1264 <li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
1265 <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
1266 <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
1267 </ul>
1268 </div>
1269 </footer>
1270
1271</div>
1272
1273
1274 <!-- Le javascript
1275 ================================================== -->
1276 <!-- Placed at the end of the document so the pages load faster -->
1277 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
1278 <script src="../../docs/assets/js/jquery.js"></script>
1279 <script src="../../docs/assets/js/google-code-prettify/prettify.js"></script>
1280 <script src="../../docs/assets/js/bootstrap-transition.js"></script>
1281 <script src="../../docs/assets/js/bootstrap-alert.js"></script>
1282 <script src="../../docs/assets/js/bootstrap-modal.js"></script>
1283 <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
1284 <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
1285 <script src="../../docs/assets/js/bootstrap-tab.js"></script>
1286 <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
1287 <script src="../../docs/assets/js/bootstrap-popover.js"></script>
1288 <script src="../../docs/assets/js/bootstrap-button.js"></script>
1289 <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
1290 <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
1291 <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
1292 <script src="../../docs/assets/js/application.js"></script>
1293
1294
1295 </body>
1296</html>
Unnamed repository; edit this file 'description' to name the repository.