~ubuntu-branches/ubuntu/saucy/fonts-font-awesome/saucy-proposed
» Revision
1
: docs/assets/less/twbs-222/tests/css-tests.html
« back to all changes in this revision
Viewing changes to docs/assets/less/twbs-222/tests/css-tests.html
- browse files at revision 1
- compare with another revision
- download diff
- download tarball
- view history from revision 1
- Committer: Package Import Robot
- Author(s): Mike Gabriel
- Date: 2013-04-08 00:34:25 UTC
- Revision ID: package-import@ubuntu.com-20130408003425-hsmm3w17jtim9el6
Tags: upstream-3.0.2
Import upstream version 3.0.2
- files added:
- css
- docs
- docs/assets
- docs/assets/css
- docs/assets/font
- docs/assets/ico
- docs/assets/img
- docs/assets/js
- docs/assets/js/index
- docs/assets/less
- docs/assets/less/twbs-222
- docs/assets/less/twbs-222/tests
- font
- less
- sass
added
removed
docs/assets/less/twbs-222/tests/css-tests.html
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="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
26
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
27
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
28
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
29
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.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 data-src="holder.js/600x600" height="200">
111
</div>
112
<div class="span4">
113
<img data-src="holder.js/600x600">
114
</div>
115
<div class="span4">
116
<img data-src="holder.js/600x600">
117
</div>
118
</div>
119
120
<br>
121
122
<div class="row">
123
<div class="span4">
124
<img data-src="holder.js/600x900" style="width: 200px;">
125
</div>
126
<div class="span4">
127
<img data-src="holder.js/200x300">
128
</div>
129
<div class="span4">
130
<img data-src="holder.js/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>Nesting and striping</h4>
597
<table class="table table-bordered table-striped">
598
<thead>
599
<tr>
600
<th>Test</th>
601
</tr>
602
</thead>
603
<tbody>
604
<tr>
605
<td>
606
<table class="table table-bordered table-striped">
607
<thead>
608
<tr>
609
<th>Test</th>
610
<th>Test</th>
611
</tr>
612
</thead>
613
<tbody>
614
<tr>
615
<td>
616
test
617
</td>
618
<td>
619
test
620
</td>
621
</tr>
622
<tr>
623
<td>
624
test
625
</td>
626
<td>
627
test
628
</td>
629
</tr>
630
<tr>
631
<td>
632
test
633
</td>
634
<td>
635
test
636
</td>
637
</tr>
638
</tbody>
639
</table>
640
</td>
641
</tr>
642
</tbody>
643
</table>
644
645
<h4>Fluid grid sizing</h4>
646
<div class="row-fluid">
647
<div class="span12">
648
<table class="table table-bordered">
649
<thead>
650
<tr>
651
<th class="span3">1</th>
652
<th class="span4">2</th>
653
<th>3</th>
654
</tr>
655
</thead>
656
<tbody>
657
<tr>
658
<td colspan="2">1 and 2</td>
659
<td>3</td>
660
</tr>
661
<tr>
662
<td>1</td>
663
<td rowspan="2">2</td>
664
<td>3</td>
665
</tr>
666
<tr>
667
<td rowspan="2">1</td>
668
<td>3</td>
669
</tr>
670
<tr>
671
<td colspan="2">2 and 3</td>
672
</tr>
673
</tbody>
674
</table>
675
</div>
676
</div><!--/row-->
677
678
679
680
<!-- Forms
681
================================================== -->
682
683
<div class="page-header">
684
<h1>Forms</h1>
685
</div>
686
687
<h4>Buttons and button groups</h4>
688
<form class="form-inline">
689
<button class="btn btn-success">Save</button>
690
<button class="btn btn-info">Add new</button>
691
<div class="btn-group">
692
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
693
<i class="icon-user"></i> User
694
<span class="caret"></span>
695
</a>
696
<ul class="dropdown-menu">
697
<li><a href="#">Profile</a></li>
698
<li class="divider"></li>
699
<li><a href="#">Sign Out</a></li>
700
</ul>
701
</div>
702
</form>
703
704
<h4>Horizontal form errors</h4>
705
<form class="form-horizontal">
706
<div class="control-group error">
707
<label class="control-label" for="inputError">Radio with error</label>
708
<div class="controls">
709
<label class="radio">
710
<input type="radio" id="inputError"> Oh hai
711
</label>
712
<span class="help-inline">Please correct the error</span>
713
</div>
714
</div>
715
</form>
716
717
<div class="row">
718
<div class="span4">
719
<h4>Prepend and append on inputs</h4>
720
<form>
721
<div class="controls">
722
<div class="input-prepend">
723
<span class="add-on">@</span>
724
<input class="span2" id="prependedInput" size="16" type="text">
725
</div>
726
</div>
727
<div class="controls">
728
<div class="input-append">
729
<input class="span2" id="prependedInput" size="16" type="text">
730
<span class="add-on">@</span>
731
</div>
732
</div>
733
<div class="controls">
734
<div class="input-prepend input-append">
735
<span class="add-on">$</span>
736
<input class="span2" id="prependedInput" size="16" type="text">
737
<span class="add-on">.00</span>
738
</div>
739
</div>
740
</form>
741
</div><!--/span-->
742
<div class="span4">
743
<h4>Prepend and append with uneditable</h4>
744
<form>
745
<div class="input-prepend">
746
<span class="add-on">$</span>
747
<span class="span2 uneditable-input">Some value here</span>
748
</div>
749
<div class="input-append">
750
<span class="span2 uneditable-input">Some value here</span>
751
<span class="add-on">.00</span>
752
</div>
753
<div class="input-prepend input-append">
754
<span class="add-on">$</span>
755
<span class="span2 uneditable-input">Some value here</span>
756
<span class="add-on">.00</span>
757
</div>
758
</form>
759
</div><!--/span-->
760
<div class="span4">
761
<h4>Prepend with type="submit"</h4>
762
<form class="form-search">
763
<div class="input-append">
764
<input type="text" class="span2 search-query" value="" name="q">
765
<input type="submit" value="Search" class="btn">
766
</div>
767
</form>
768
<div class="input-append">
769
<input type="text" class="span2" value="" name="">
770
<input type="submit" value="Button" class="btn">
771
</div>
772
<div class="input-append">
773
<input type="text" size="16" id="appendedInputButtons" class="span2">
774
<input type="submit" value="Search" class="btn">
775
<button type="button" class="btn">Options</button>
776
</div>
777
</div><!--/span-->
778
</div><!--/row-->
779
780
<h4>Fluid prepended and appended inputs</h4>
781
<div class="row-fluid">
782
<div class="span6">
783
<form>
784
<div class="controls">
785
<div class="input-prepend">
786
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
787
</div>
788
</div>
789
<div class="controls">
790
<div class="input-append">
791
<input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span>
792
</div>
793
</div>
794
<div class="controls">
795
<div class="input-prepend input-append">
796
<span class="add-on">$</span><input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">.00</span>
797
</div>
798
</div>
799
</form>
800
</div>
801
</div>
802
803
<h4>Fixed row with inputs</h4>
804
<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
805
806
<div class="rowInputs">
807
<div class="row">
808
<div class="span12">
809
<input type="text" class="span1" placeholder="span1">
810
</div><!--/span-->
811
</div><!--/row-->
812
<div class="row">
813
<div class="span12">
814
<input type="text" class="span2" placeholder="span2">
815
</div><!--/span-->
816
</div><!--/row-->
817
<div class="row">
818
<div class="span12">
819
<input type="text" class="span3" placeholder="span3">
820
</div><!--/span-->
821
</div><!--/row-->
822
<div class="row">
823
<div class="span12">
824
<input type="text" class="span4" placeholder="span4">
825
</div><!--/span-->
826
</div><!--/row-->
827
<div class="row">
828
<div class="span12">
829
<input type="text" class="span5" placeholder="span5">
830
</div><!--/span-->
831
</div><!--/row-->
832
<div class="row">
833
<div class="span12">
834
<input type="text" class="span6" placeholder="span6">
835
</div><!--/span-->
836
</div><!--/row-->
837
<div class="row">
838
<div class="span12">
839
<input type="text" class="span7" placeholder="span7">
840
</div><!--/span-->
841
</div><!--/row-->
842
<div class="row">
843
<div class="span12">
844
<input type="text" class="span8" placeholder="span8">
845
</div><!--/span-->
846
</div><!--/row-->
847
<div class="row">
848
<div class="span12">
849
<input type="text" class="span9" placeholder="span9">
850
</div><!--/span-->
851
</div><!--/row-->
852
<div class="row">
853
<div class="span12">
854
<input type="text" class="span10" placeholder="span10">
855
</div><!--/span-->
856
</div><!--/row-->
857
<div class="row">
858
<div class="span12">
859
<input type="text" class="span11" placeholder="span11">
860
</div><!--/span-->
861
</div><!--/row-->
862
<div class="row">
863
<div class="span12">
864
<input type="text" class="span12" placeholder="span12">
865
</div><!--/span-->
866
</div><!--/row-->
867
</div>
868
<br>
869
870
<h4>Fluid row with inputs</h4>
871
<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
872
<div id="fluidRowInputs">
873
<div class="row-fluid">
874
<div class="span12">
875
<input type="text" class="span1" placeholder="span1">
876
</div><!--/span-->
877
</div><!--/row-->
878
<div class="row-fluid">
879
<div class="span12">
880
<input type="text" class="span2" placeholder="span2">
881
</div><!--/span-->
882
</div><!--/row-->
883
<div class="row-fluid">
884
<div class="span12">
885
<input type="text" class="span3" placeholder="span3">
886
</div><!--/span-->
887
</div><!--/row-->
888
<div class="row-fluid">
889
<div class="span12">
890
<input type="text" class="span4" placeholder="span4">
891
</div><!--/span-->
892
</div><!--/row-->
893
<div class="row-fluid">
894
<div class="span12">
895
<input type="text" class="span5" placeholder="span5">
896
</div><!--/span-->
897
</div><!--/row-->
898
<div class="row-fluid">
899
<div class="span12">
900
<input type="text" class="span6" placeholder="span6">
901
</div><!--/span-->
902
</div><!--/row-->
903
<div class="row-fluid">
904
<div class="span12">
905
<input type="text" class="span7" placeholder="span7">
906
</div><!--/span-->
907
</div><!--/row-->
908
<div class="row-fluid">
909
<div class="span12">
910
<input type="text" class="span8" placeholder="span8">
911
</div><!--/span-->
912
</div><!--/row-->
913
<div class="row-fluid">
914
<div class="span12">
915
<input type="text" class="span9" placeholder="span9">
916
</div><!--/span-->
917
</div><!--/row-->
918
<div class="row-fluid">
919
<div class="span12">
920
<input type="text" class="span10" placeholder="span10">
921
</div><!--/span-->
922
</div><!--/row-->
923
<div class="row-fluid">
924
<div class="span12">
925
<input type="text" class="span11" placeholder="span11">
926
</div><!--/span-->
927
</div><!--/row-->
928
<div class="row-fluid">
929
<div class="span12">
930
<input type="text" class="span12" placeholder="span12">
931
</div><!--/span-->
932
</div><!--/row-->
933
</div>
934
935
<br>
936
937
<h4>Inline form in fluid row</h4>
938
939
<div class="row-fluid">
940
<div class="span12">
941
<form class="form-inline">
942
<input type="text" class="span3" placeholder="Email">
943
<input type="password" class="span3" placeholder="Password">
944
<label class="checkbox">
945
<input type="checkbox"> Remember me
946
</label>
947
<button type="submit" class="btn">Sign in</button>
948
</form>
949
</div>
950
</div>
951
952
953
<br>
954
955
956
<h4>Fluid textarea at .span12</h4>
957
<div class="row-fluid">
958
<div class="span12">
959
<textarea class="span12"></textarea>
960
</div>
961
</div>
962
963
964
<br>
965
966
967
<h4>Selects</h4>
968
<form>
969
<select class="span4">
970
<option>Option</option>
971
</select>
972
</form>
973
974
975
<br>
976
977
978
979
980
<!-- Dropdowns
981
================================================== -->
982
983
<div class="page-header">
984
<h1>Dropdowns</h1>
985
</div>
986
987
<h4>Dropdown link with hash URL</h4>
988
<ul class="nav nav-pills">
989
<li class="active"><a href="#">Link</a></li>
990
<li><a href="#">Example link</a></li>
991
<li class="dropdown">
992
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
993
Dropdown <span class="caret"></span>
994
</a>
995
<ul class="dropdown-menu">
996
<li><a href="#">Action</a></li>
997
<li><a href="#">Another action</a></li>
998
<li><a href="#">Something else here</a></li>
999
<li class="divider"></li>
1000
<li><a href="#">Separated link</a></li>
1001
</ul>
1002
</li>
1003
</ul>
1004
1005
<h4>Dropdown link with custom URL and data-target</h4>
1006
<ul class="nav nav-pills">
1007
<li class="active"><a href="#">Link</a></li>
1008
<li><a href="#">Example link</a></li>
1009
<li class="dropdown">
1010
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
1011
Dropdown <span class="caret"></span>
1012
</a>
1013
<ul class="dropdown-menu">
1014
<li><a href="#">Action</a></li>
1015
<li><a href="#">Another action</a></li>
1016
<li><a href="#">Something else here</a></li>
1017
<li class="divider"></li>
1018
<li><a href="#">Separated link</a></li>
1019
</ul>
1020
</li>
1021
</ul>
1022
1023
<h4>Dropdown on a button</h4>
1024
<div style="position: relative;">
1025
<button class="btn" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
1026
<ul class="dropdown-menu">
1027
<li><a href="#">Action</a></li>
1028
<li><a href="#">Another action</a></li>
1029
<li><a href="#">Something else here</a></li>
1030
<li class="divider"></li>
1031
<li><a href="#">Separated link</a></li>
1032
</ul>
1033
</div>
1034
1035
<br>
1036
1037
1038
<!-- Thumbnails
1039
================================================== -->
1040
1041
<div class="page-header">
1042
<h1>Thumbnails</h1>
1043
</div>
1044
1045
<h4>Default thumbnails (no grid sizing)</h4>
1046
<ul class="thumbnails">
1047
<li class="thumbnail">
1048
<img data-src="holder.js/260x180" alt="">
1049
</li>
1050
<li class="thumbnail">
1051
<img data-src="holder.js/260x180" alt="">
1052
</li>
1053
<li class="thumbnail">
1054
<img data-src="holder.js/260x180" alt="">
1055
</li>
1056
<li class="thumbnail">
1057
<img data-src="holder.js/260x180" alt="">
1058
</li>
1059
</ul>
1060
1061
<!-- NOT CURRENTLY SUPPORTED
1062
<h4>Offset thumbnails</h4>
1063
<ul class="thumbnails">
1064
<li class="span3 offset3">
1065
<a href="#" class="thumbnail">
1066
<img data-src="holder.js/260x180" alt="">
1067
</a>
1068
</li>
1069
<li class="span3">
1070
<a href="#" class="thumbnail">
1071
<img data-src="holder.js/260x180" alt="">
1072
</a>
1073
</li>
1074
<li class="span3">
1075
<a href="#" class="thumbnail">
1076
<img data-src="holder.js/260x180" alt="">
1077
</a>
1078
</li>
1079
</ul>
1080
-->
1081
1082
<h4>Standard grid sizing</h4>
1083
<ul class="thumbnails">
1084
<li class="span3">
1085
<a href="#" class="thumbnail">
1086
<img data-src="holder.js/260x180" alt="">
1087
</a>
1088
</li>
1089
<li class="span3 offset3">
1090
<a href="#" class="thumbnail">
1091
<img data-src="holder.js/260x180" alt="">
1092
</a>
1093
</li>
1094
<li class="span3">
1095
<a href="#" class="thumbnail">
1096
<img data-src="holder.js/260x180" alt="">
1097
</a>
1098
</li>
1099
</ul>
1100
1101
<h4>Fluid thumbnails</h4>
1102
<div class="row-fluid">
1103
<div class="span8">
1104
<ul class="thumbnails">
1105
<li class="span4">
1106
<a href="#" class="thumbnail">
1107
<img data-src="holder.js/260x180" alt="">
1108
</a>
1109
</li>
1110
<li class="span4">
1111
<a href="#" class="thumbnail">
1112
<img data-src="holder.js/260x180" alt="">
1113
</a>
1114
</li>
1115
<li class="span4">
1116
<a href="#" class="thumbnail">
1117
<img data-src="holder.js/260x180" alt="">
1118
</a>
1119
</li>
1120
</ul>
1121
</div>
1122
</div>
1123
1124
1125
1126
<!-- Tabs
1127
================================================== -->
1128
1129
<div class="page-header">
1130
<h1>Tabs</h1>
1131
</div>
1132
1133
<div class="tabbable tabs-left" style="margin-bottom: 18px;">
1134
<ul class="nav nav-tabs">
1135
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
1136
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
1137
<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
1138
</ul>
1139
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
1140
<div class="tab-pane active" id="tab1">
1141
<p>I'm in Section 1.</p>
1142
1143
<div class="tabbable" style="background: #f5f5f5; padding: 20px;">
1144
<ul class="nav nav-tabs">
1145
<li class="active"><a href="#tab1-1" data-toggle="tab">1.1</a></li>
1146
<li><a href="#tab1-2" data-toggle="tab">1.2</a></li>
1147
<li><a href="#tab1-3" data-toggle="tab">1.3</a></li>
1148
</ul>
1149
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
1150
<div class="tab-pane active" id="tab1-1">
1151
<p>I'm in Section 1.1.</p>
1152
</div>
1153
<div class="tab-pane" id="tab1-2">
1154
<p>I'm in Section 1.2.</p>
1155
</div>
1156
<div class="tab-pane" id="tab1-3">
1157
<p>I'm in Section 1.3.</p>
1158
</div>
1159
</div>
1160
</div>
1161
</div>
1162
<div class="tab-pane" id="tab2">
1163
<p>Howdy, I'm in Section 2.</p>
1164
</div>
1165
<div class="tab-pane" id="tab3">
1166
<p>What up girl, this is Section 3.</p>
1167
</div>
1168
</div>
1169
</div> <!-- /tabbable -->
1170
1171
<br>
1172
1173
1174
<!-- Labels
1175
================================================== -->
1176
1177
<div class="page-header">
1178
<h1>Labels</h1>
1179
</div>
1180
1181
<div class="row">
1182
<div class="span4">
1183
<h4>Inline label</h4>
1184
<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>
1185
</div><!--/span-->
1186
<div class="span4">
1187
<form class="form-horizontal">
1188
<label>Example label</label>
1189
<input type="text" placeholder="Input"> <span class="help-inline"><span class="label">Hey!</span> Read this.</span>
1190
</form>
1191
</div><!--/span-->
1192
<div class="span4">
1193
<button class="btn">Action <span class="badge">2</span></button>
1194
<button class="btn">Action <span class="label">2</span></button>
1195
</div><!--/span-->
1196
</div><!--/row-->
1197
1198
<br>
1199
1200
1201
<!-- Button groups
1202
================================================== -->
1203
1204
<div class="page-header">
1205
<h1>Buttons</h1>
1206
</div>
1207
1208
<table class="table table-bordered">
1209
<tbody>
1210
<tr>
1211
<td>
1212
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.
1213
</td>
1214
<td>
1215
<div class="btn-group">
1216
<button class="btn">1</button>
1217
<button class="btn">2</button>
1218
<button class="btn">3</button>
1219
<button class="btn">4</button>
1220
</div>
1221
</td>
1222
</tr>
1223
</tbody>
1224
</table>
1225
1226
<h4>Mini buttons: text and icon</h4>
1227
<div class="btn-group">
1228
<button class="btn btn-mini">Button text</button>
1229
<button class="btn btn-mini"><i class="icon-cog"></i></button>
1230
</div>
1231
1232
<br>
1233
1234
1235
1236
<!-- Responsive utility classes
1237
================================================== -->
1238
1239
<div class="page-header">
1240
<h1>Responsive utility classes</h1>
1241
</div>
1242
1243
<h4>Visible on...</h4>
1244
<ul class="responsive-utilities-test visible-on">
1245
<li>Phone<span class="visible-phone">✔ Phone</span></li>
1246
<li>Tablet<span class="visible-tablet">✔ Tablet</span></li>
1247
<li>Desktop<span class="visible-desktop">✔ Desktop</span></li>
1248
</ul>
1249
<ul class="responsive-utilities-test visible-on">
1250
<li>Phone + Tablet<span class="visible-phone visible-tablet">✔ Phone + Tablet</span></li>
1251
<li>Tablet + Desktop<span class="visible-tablet visible-desktop">✔ Tablet + Desktop</span></li>
1252
<li>All<span class="visible-phone visible-tablet visible-desktop">✔ All</span></li>
1253
</ul>
1254
1255
<h4>Hidden on...</h4>
1256
<ul class="responsive-utilities-test hidden-on">
1257
<li>Phone<span class="hidden-phone">✔ Phone</span></li>
1258
<li>Tablet<span class="hidden-tablet">✔ Tablet</span></li>
1259
<li>Desktop<span class="hidden-desktop">✔ Desktop</span></li>
1260
</ul>
1261
<ul class="responsive-utilities-test hidden-on">
1262
<li>Phone + Tablet<span class="hidden-phone hidden-tablet">✔ Phone + Tablet</span></li>
1263
<li>Tablet + Desktop<span class="hidden-tablet hidden-desktop">✔ Tablet + Desktop</span></li>
1264
<li>All<span class="hidden-phone hidden-tablet hidden-desktop">✔ All</span></li>
1265
</ul>
1266
1267
1268
1269
<!-- Gradients
1270
================================================== -->
1271
1272
<div class="page-header">
1273
<h1>Gradients</h1>
1274
</div>
1275
1276
<h4>Horizontal</h4>
1277
<div class="gradient-horizontal"></div>
1278
1279
<h4>Vertical</h4>
1280
<div class="gradient-vertical"></div>
1281
1282
<h4>Directional</h4>
1283
<div class="gradient-directional"></div>
1284
1285
<h4>Three colors</h4>
1286
<div class="gradient-vertical-three"></div>
1287
1288
<h4>Radial</h4>
1289
<div class="gradient-radial"></div>
1290
1291
<h4>Striped</h4>
1292
<div class="gradient-striped"></div>
1293
1294
1295
1296
1297
1298
1299
1300
</div><!-- /container -->
1301
1302
1303
1304
<!-- Footer
1305
================================================== -->
1306
<footer class="footer">
1307
<div class="container">
1308
<p class="pull-right"><a href="#">Back to top</a></p>
1309
<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>
1310
<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>
1311
<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>
1312
<ul class="footer-links">
1313
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
1314
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
1315
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
1316
</ul>
1317
</div>
1318
</footer>
1319
1320
</div>
1321
1322
1323
<!-- Le javascript
1324
================================================== -->
1325
<!-- Placed at the end of the document so the pages load faster -->
1326
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
1327
<script src="../../docs/assets/js/jquery.js"></script>
1328
<script src="../../docs/assets/js/google-code-prettify/prettify.js"></script>
1329
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
1330
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
1331
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
1332
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
1333
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
1334
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
1335
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
1336
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
1337
<script src="../../docs/assets/js/bootstrap-button.js"></script>
1338
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
1339
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
1340
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
1341
<script src="../../docs/assets/js/application.js"></script>
1342
1343
1344
</body>
1345
</html>
Loggerhead is a web-based interface for Breezy
Version: 2.0.1