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=
"">
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">
16 <!-- CSS just for the tests page -->
17 <link href=
"css-tests.css" rel=
"stylesheet">
19 <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
21 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
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">
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>
47 ================================================== -->
48 <header class=
"jumbotron subhead" id=
"overview">
49 <div class=
"container">
51 <p class=
"lead">One stop shop for quick debugging and edge-case tests of CSS.
</p>
56 <div class=
"bs-docs-canvas">
58 <div class=
"container">
63 ================================================== -->
65 <div class=
"page-header">
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>
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>
101 <!-- Responsive images
102 ================================================== -->
104 <div class=
"page-header">
105 <h1>Responsive images
</h1>
110 <img src=
"http://placehold.it/600x600" height=
"200">
113 <img src=
"http://placehold.it/600x600">
116 <img src=
"http://placehold.it/600x600">
124 <img src=
"http://placehold.it/600x900" style=
"width: 200px;">
127 <img src=
"http://placehold.it/200x300">
130 <img src=
"http://placehold.it/600x600">
140 ================================================== -->
142 <div class=
"page-header">
146 <div class=
"fluid-grid">
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
369 </div> <!-- fluid grids -->
374 ================================================== -->
376 <div class=
"page-header">
382 <h4>Bordered without thead
</h4>
383 <table class=
"table table-bordered">
402 <h4>Bordered without thead, with caption
</h4>
403 <table class=
"table table-bordered">
404 <caption>Table caption
</caption>
423 <h4>Bordered without thead, with colgroup
</h4>
424 <table class=
"table table-bordered">
455 <h4>Bordered with thead, with colgroup
</h4>
456 <table class=
"table table-bordered">
496 <h4>Bordered with thead and caption
</h4>
497 <table class=
"table table-bordered">
498 <caption>Table caption
</caption>
531 <h4>Bordered with rowspan and colspan
</h4>
532 <table class=
"table table-bordered">
542 <td colspan=
"2">1 and
2</td>
547 <td rowspan=
"2">2</td>
551 <td rowspan=
"2">1</td>
555 <td colspan=
"2">2 and
3</td>
566 <table class=
"table table-bordered">
569 <th class=
"span3">1</th>
570 <th class=
"span4">2</th>
576 <td colspan=
"2">1 and
2</td>
581 <td rowspan=
"2">2</td>
585 <td rowspan=
"2">1</td>
589 <td colspan=
"2">2 and
3</td>
596 <h4>Fluid grid sizing
</h4>
597 <div class=
"row-fluid">
599 <table class=
"table table-bordered">
602 <th class=
"span3">1</th>
603 <th class=
"span4">2</th>
609 <td colspan=
"2">1 and
2</td>
614 <td rowspan=
"2">2</td>
618 <td rowspan=
"2">1</td>
622 <td colspan=
"2">2 and
3</td>
632 ================================================== -->
634 <div class=
"page-header">
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>
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>
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
663 <span class=
"help-inline">Please correct the error
</span>
670 <h4>Prepend and append on inputs
</h4>
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">
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>
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>
694 <h4>Prepend and append with uneditable
</h4>
696 <div class=
"input-prepend">
697 <span class=
"add-on">$
</span>
698 <span class=
"span2 uneditable-input">Some value here
</span>
700 <div class=
"input-append">
701 <span class=
"span2 uneditable-input">Some value here
</span>
702 <span class=
"add-on">.00</span>
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>
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">
719 <div class=
"input-append">
720 <input type=
"text" class=
"span2" value=
"" name=
"">
721 <input type=
"submit" value=
"Button" class=
"btn">
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>
731 <h4>Fluid prepended and appended inputs
</h4>
732 <div class=
"row-fluid">
735 <div class=
"controls">
736 <div class=
"input-prepend">
737 <span class=
"add-on">@
</span><input class=
"span2" id=
"prependedInput" size=
"16" type=
"text">
740 <div class=
"controls">
741 <div class=
"input-append">
742 <input class=
"span2" id=
"prependedInput" size=
"16" type=
"text"><span class=
"add-on">@
</span>
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>
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>
757 <div class=
"rowInputs">
760 <input type=
"text" class=
"span1" placeholder=
"span1">
765 <input type=
"text" class=
"span2" placeholder=
"span2">
770 <input type=
"text" class=
"span3" placeholder=
"span3">
775 <input type=
"text" class=
"span4" placeholder=
"span4">
780 <input type=
"text" class=
"span5" placeholder=
"span5">
785 <input type=
"text" class=
"span6" placeholder=
"span6">
790 <input type=
"text" class=
"span7" placeholder=
"span7">
795 <input type=
"text" class=
"span8" placeholder=
"span8">
800 <input type=
"text" class=
"span9" placeholder=
"span9">
805 <input type=
"text" class=
"span10" placeholder=
"span10">
810 <input type=
"text" class=
"span11" placeholder=
"span11">
815 <input type=
"text" class=
"span12" placeholder=
"span12">
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">
826 <input type=
"text" class=
"span1" placeholder=
"span1">
829 <div class=
"row-fluid">
831 <input type=
"text" class=
"span2" placeholder=
"span2">
834 <div class=
"row-fluid">
836 <input type=
"text" class=
"span3" placeholder=
"span3">
839 <div class=
"row-fluid">
841 <input type=
"text" class=
"span4" placeholder=
"span4">
844 <div class=
"row-fluid">
846 <input type=
"text" class=
"span5" placeholder=
"span5">
849 <div class=
"row-fluid">
851 <input type=
"text" class=
"span6" placeholder=
"span6">
854 <div class=
"row-fluid">
856 <input type=
"text" class=
"span7" placeholder=
"span7">
859 <div class=
"row-fluid">
861 <input type=
"text" class=
"span8" placeholder=
"span8">
864 <div class=
"row-fluid">
866 <input type=
"text" class=
"span9" placeholder=
"span9">
869 <div class=
"row-fluid">
871 <input type=
"text" class=
"span10" placeholder=
"span10">
874 <div class=
"row-fluid">
876 <input type=
"text" class=
"span11" placeholder=
"span11">
879 <div class=
"row-fluid">
881 <input type=
"text" class=
"span12" placeholder=
"span12">
888 <h4>Inline form in fluid row
</h4>
890 <div class=
"row-fluid">
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
898 <button type=
"submit" class=
"btn">Sign in
</button>
907 <h4>Fluid textarea at .span12
</h4>
908 <div class=
"row-fluid">
910 <textarea class=
"span12"></textarea>
920 <select class=
"span4">
921 <option>Option
</option>
932 ================================================== -->
934 <div class=
"page-header">
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>
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>
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>
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>
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>
990 ================================================== -->
992 <div class=
"page-header">
996 <h4>Default thumbnails (no grid sizing)
</h4>
997 <ul class=
"thumbnails">
998 <li class=
"thumbnail">
999 <img src=
"http://placehold.it/260x180" alt=
"">
1001 <li class=
"thumbnail">
1002 <img src=
"http://placehold.it/260x180" alt=
"">
1004 <li class=
"thumbnail">
1005 <img src=
"http://placehold.it/260x180" alt=
"">
1007 <li class=
"thumbnail">
1008 <img src=
"http://placehold.it/260x180" alt=
"">
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="">
1021 <a href="#" class="thumbnail">
1022 <img src="http://placehold.it/260x180" alt="">
1026 <a href="#" class="thumbnail">
1027 <img src="http://placehold.it/260x180" alt="">
1033 <h4>Standard grid sizing
</h4>
1034 <ul class=
"thumbnails">
1036 <a href=
"#" class=
"thumbnail">
1037 <img src=
"http://placehold.it/260x180" alt=
"">
1040 <li class=
"span3 offset3">
1041 <a href=
"#" class=
"thumbnail">
1042 <img src=
"http://placehold.it/260x180" alt=
"">
1046 <a href=
"#" class=
"thumbnail">
1047 <img src=
"http://placehold.it/260x180" alt=
"">
1052 <h4>Fluid thumbnails
</h4>
1053 <div class=
"row-fluid">
1055 <ul class=
"thumbnails">
1057 <a href=
"#" class=
"thumbnail">
1058 <img src=
"http://placehold.it/260x180" alt=
"">
1062 <a href=
"#" class=
"thumbnail">
1063 <img src=
"http://placehold.it/260x180" alt=
"">
1067 <a href=
"#" class=
"thumbnail">
1068 <img src=
"http://placehold.it/260x180" alt=
"">
1078 ================================================== -->
1080 <div class=
"page-header">
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>
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>
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>
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>
1104 <div class=
"tab-pane" id=
"tab1-2">
1105 <p>I'm in Section
1.2.
</p>
1107 <div class=
"tab-pane" id=
"tab1-3">
1108 <p>I'm in Section
1.3.
</p>
1113 <div class=
"tab-pane" id=
"tab2">
1114 <p>Howdy, I'm in Section
2.
</p>
1116 <div class=
"tab-pane" id=
"tab3">
1117 <p>What up girl, this is Section
3.
</p>
1120 </div> <!-- /tabbable -->
1126 ================================================== -->
1128 <div class=
"page-header">
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>
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>
1144 <button class=
"btn">Action
<span class=
"badge">2</span></button>
1145 <button class=
"btn">Action
<span class=
"label">2</span></button>
1153 ================================================== -->
1155 <div class=
"page-header">
1159 <table class=
"table table-bordered">
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.
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>
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>
1187 <!-- Responsive utility classes
1188 ================================================== -->
1190 <div class=
"page-header">
1191 <h1>Responsive utility classes
</h1>
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>
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>
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>
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>
1221 ================================================== -->
1223 <div class=
"page-header">
1228 <div class=
"gradient-horizontal"></div>
1231 <div class=
"gradient-vertical"></div>
1233 <h4>Directional
</h4>
1234 <div class=
"gradient-directional"></div>
1236 <h4>Three colors
</h4>
1237 <div class=
"gradient-vertical-three"></div>
1240 <div class=
"gradient-radial"></div>
1243 <div class=
"gradient-striped"></div>
1251 </div><!-- /container -->
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>
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>