2012-03-23 12:08:41 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2012-03-29 08:41:40 +08:00
< title > CSS Tests · Twitter Bootstrap< / title >
2012-03-23 12:08:41 +08:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
<!-- Le styles -->
2012-03-29 08:41:40 +08:00
< link href = "../../docs/assets/css/bootstrap.css" rel = "stylesheet" >
< link href = "../../docs/assets/css/bootstrap-responsive.css" rel = "stylesheet" >
< link href = "../../docs/assets/css/docs.css" rel = "stylesheet" >
< link href = "../../docs/assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
<!-- CSS just for the tests page -->
< link href = "css-tests.css" rel = "stylesheet" >
2012-03-23 12:08:41 +08:00
<!-- Le HTML5 shim, for IE6 - 8 support of HTML5 elements -->
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
<!-- Le fav and touch icons -->
2012-03-29 08:41:40 +08:00
< link rel = "shortcut icon" href = "../../docs/assets/ico/favicon.ico" >
< link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "../../docs/assets/ico/apple-touch-icon-144-precomposed.png" >
< link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "../../docs/assets/ico/apple-touch-icon-114-precomposed.png" >
< link rel = "apple-touch-icon-precomposed" sizes = "72x72" href = "../../docs/assets/ico/apple-touch-icon-72-precomposed.png" >
< link rel = "apple-touch-icon-precomposed" href = "../../docs/assets/ico/apple-touch-icon-57-precomposed.png" >
2012-03-23 12:08:41 +08:00
< / head >
2012-03-29 08:41:40 +08:00
< body >
2012-03-23 12:08:41 +08:00
<!-- Navbar
================================================== -->
2012-07-31 03:15:08 +08:00
< div class = "navbar navbar-inverse navbar-fixed-top" >
2012-03-23 12:08:41 +08:00
< div class = "navbar-inner" >
< div class = "container" >
2012-03-29 08:52:03 +08:00
< a class = "brand" href = "../../docs/index.html" > Bootstrap< / a >
2012-03-23 12:08:41 +08:00
< / div >
< / div >
< / div >
2012-03-24 00:47:57 +08:00
2012-03-23 12:08:41 +08:00
<!-- Masthead
================================================== -->
< header class = "jumbotron subhead" id = "overview" >
2012-07-20 12:06:42 +08:00
< div class = "container" >
< h1 > CSS Tests< / h1 >
< p class = "lead" > One stop shop for quick debugging and edge-case tests of CSS.< / p >
< / div >
2012-03-23 12:08:41 +08:00
< / header >
2012-03-24 00:47:57 +08:00
2012-07-31 03:15:08 +08:00
< div class = "bs-docs-canvas" >
< div class = "container" >
2012-07-20 12:06:42 +08:00
2012-03-24 00:47:57 +08:00
2012-04-24 17:11:59 +08:00
2012-07-06 06:11:54 +08:00
<!-- Typography
================================================== -->
< div class = "page-header" >
< h1 > Typography< / h1 >
< / div >
< div class = "row" >
< div class = "span6" >
< div class = "type-test" >
< h1 > h1. Heading 1< / h1 >
< h2 > h2. Heading 2< / h2 >
< h3 > h3. Heading 3< / h3 >
< h4 > h4. Heading 4< / h4 >
< h5 > h5. Heading 5< / h5 >
< h6 > h6. Heading 6< / h6 >
< 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 >
< / div >
< / div >
< div class = "span6" >
< div class = "type-test" >
< h1 > h1. Heading 1< / h1 >
< 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 >
< h2 > h2. Heading 2< / h2 >
< 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 >
< h3 > h3. Heading 3< / h3 >
< 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 >
< h4 > h4. Heading 4< / h4 >
< 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 >
< h5 > h5. Heading 5< / h5 >
< 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 >
< h6 > h6. Heading 6< / h6 >
< 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 >
< / div >
< / div >
< / div >
2012-09-04 08:35:35 +08:00
<!-- Responsive images
================================================== -->
< div class = "page-header" >
< h1 > Responsive images< / h1 >
< / div >
< div class = "row" >
< div class = "span4" >
< img src = "http://placehold.it/600x600" height = "200" >
< / div >
< div class = "span4" >
< img src = "http://placehold.it/600x600" >
< / div >
< div class = "span4" >
< img src = "http://placehold.it/600x600" >
< / div >
< / div >
< br >
< div class = "row" >
< div class = "span4" >
< img src = "http://placehold.it/600x900" style = "width: 200px;" >
< / div >
< div class = "span4" >
< img src = "http://placehold.it/200x300" >
< / div >
< div class = "span4" >
< img src = "http://placehold.it/600x600" >
< / div >
< / div >
< br > < br >
2012-04-24 17:11:59 +08:00
<!-- Fluid grid
================================================== -->
< div class = "page-header" >
< h1 > Fluid grids< / h1 >
< / div >
< div class = "fluid-grid" >
< div class = "row" >
< div class = "span12" > 12
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span11" > 11
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< div class = "span1" > 1
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span10" > 10
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< div class = "span2" > 2
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span9" > 9
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< div class = "span3" > 3
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span8" > 8
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< div class = "span4" > 4
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span7" > 7
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< div class = "span5" > 5
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span6" > 6
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< div class = "span6" > 6
< div class = "row-fluid" >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< / div >
< / div >
< / div >
< / div > <!-- fluid grids -->
2012-03-24 00:47:57 +08:00
<!-- Tables
================================================== -->
2012-03-23 16:28:04 +08:00
< div class = "page-header" >
< h1 > Tables< / h1 >
< / div >
< div class = "row" >
< div class = "span6" >
< h4 > Bordered without thead< / h4 >
< table class = "table table-bordered" >
< tbody >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< / tbody >
< / table >
< h4 > Bordered without thead, with caption< / h4 >
< table class = "table table-bordered" >
< caption > Table caption< / caption >
< tbody >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< / tbody >
< / table >
< h4 > Bordered without thead, with colgroup< / h4 >
< table class = "table table-bordered" >
< colgroup >
< col class = "col1" >
< col class = "col2" >
< col class = "col3" >
< / colgroup >
< tbody >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< / tbody >
2012-07-20 12:25:24 +08:00
< tfoot >
< tr >
< td > 3< / td >
< td > 6< / td >
< td > 9< / td >
< / tr >
< / tfoot >
2012-03-23 16:28:04 +08:00
< / table >
< h4 > Bordered with thead, with colgroup< / h4 >
< table class = "table table-bordered" >
< colgroup >
< col class = "col1" >
< col class = "col2" >
< col class = "col3" >
< / colgroup >
< thead >
< tr >
2012-07-20 12:25:24 +08:00
< th > A< / th >
< th > B< / th >
< th > C< / th >
2012-03-23 16:28:04 +08:00
< / tr >
< / thead >
< tbody >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< / tbody >
2012-07-20 12:25:24 +08:00
< tfoot >
< tr >
< td > 3< / td >
< td > 6< / td >
< td > 9< / td >
< / tr >
< / tfoot >
2012-03-23 16:28:04 +08:00
< / table >
< / div > <!-- /span -->
< div class = "span6" >
< h4 > Bordered with thead and caption< / h4 >
< table class = "table table-bordered" >
< caption > Table caption< / caption >
< thead >
< tr >
< th > 1< / th >
< th > 2< / th >
< th > 3< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td > 2< / td >
< td > 3< / td >
< / tr >
< / tbody >
2012-07-20 12:25:24 +08:00
< tfoot >
< tr >
< td > 3< / td >
< td > 6< / td >
< td > 9< / td >
< / tr >
< / tfoot >
2012-03-23 16:28:04 +08:00
< / table >
< h4 > Bordered with rowspan and colspan< / h4 >
< table class = "table table-bordered" >
< thead >
< tr >
< th > 1< / th >
< th > 2< / th >
< th > 3< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td colspan = "2" > 1 and 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td rowspan = "2" > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td rowspan = "2" > 1< / td >
< td > 3< / td >
< / tr >
< tr >
< td colspan = "2" > 2 and 3< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /span -->
< / div > <!-- /row -->
2012-03-23 12:08:41 +08:00
2012-06-26 05:37:35 +08:00
< h4 > Grid sizing< / h4 >
< div class = "row" >
< div class = "span12" >
< table class = "table table-bordered" >
< thead >
< tr >
< th class = "span3" > 1< / th >
< th class = "span4" > 2< / th >
< th > 3< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td colspan = "2" > 1 and 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td rowspan = "2" > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td rowspan = "2" > 1< / td >
< td > 3< / td >
< / tr >
< tr >
< td colspan = "2" > 2 and 3< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div > <!-- /row -->
< h4 > Fluid grid sizing< / h4 >
< div class = "row-fluid" >
< div class = "span12" >
< table class = "table table-bordered" >
< thead >
< tr >
< th class = "span3" > 1< / th >
< th class = "span4" > 2< / th >
< th > 3< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td colspan = "2" > 1 and 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td > 1< / td >
< td rowspan = "2" > 2< / td >
< td > 3< / td >
< / tr >
< tr >
< td rowspan = "2" > 1< / td >
< td > 3< / td >
< / tr >
< tr >
< td colspan = "2" > 2 and 3< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div > <!-- /row -->
2012-03-24 00:47:57 +08:00
<!-- Forms
================================================== -->
< div class = "page-header" >
< h1 > Forms< / h1 >
< / div >
2012-08-28 03:05:15 +08:00
< h4 > Buttons and button groups< / h4 >
< form class = "form-inline" >
< button class = "btn btn-success" > Save< / button >
< button class = "btn btn-info" > Add new< / button >
< div class = "btn-group" >
< a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
< i class = "icon-user" > < / i > User
< span class = "caret" > < / span >
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "#" > Profile< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "#" > Sign Out< / a > < / li >
< / ul >
< / div >
< / form >
2012-08-22 05:22:26 +08:00
< h4 > Horizontal form errors< / h4 >
< form class = "form-horizontal" >
< div class = "control-group error" >
< label class = "control-label" for = "inputError" > Radio with error< / label >
< div class = "controls" >
< label class = "radio" >
< input type = "radio" id = "inputError" > Oh hai
< / label >
< span class = "help-inline" > Please correct the error< / span >
< / div >
< / div >
< / form >
2012-03-24 00:47:57 +08:00
< div class = "row" >
< div class = "span4" >
< h4 > Prepend and append on inputs< / h4 >
< form >
< div class = "controls" >
< div class = "input-prepend" >
2012-06-20 04:21:35 +08:00
< span class = "add-on" > @< / span >
< input class = "span2" id = "prependedInput" size = "16" type = "text" >
2012-03-24 00:47:57 +08:00
< / div >
< / div >
< div class = "controls" >
< div class = "input-append" >
2012-06-20 04:21:35 +08:00
< input class = "span2" id = "prependedInput" size = "16" type = "text" >
< span class = "add-on" > @< / span >
2012-03-24 00:47:57 +08:00
< / div >
< / div >
< div class = "controls" >
< div class = "input-prepend input-append" >
2012-06-20 04:21:35 +08:00
< span class = "add-on" > $< / span >
< input class = "span2" id = "prependedInput" size = "16" type = "text" >
< span class = "add-on" > .00< / span >
2012-03-24 00:47:57 +08:00
< / div >
< / div >
< / form >
< / div > <!-- /span -->
2012-08-22 04:42:00 +08:00
< div class = "span4" >
2012-03-24 00:47:57 +08:00
< h4 > Prepend and append with uneditable< / h4 >
< form >
< div class = "input-prepend" >
2012-06-20 04:21:35 +08:00
< span class = "add-on" > $< / span >
< span class = "span2 uneditable-input" > Some value here< / span >
2012-03-24 00:47:57 +08:00
< / div >
< div class = "input-append" >
2012-06-20 04:21:35 +08:00
< span class = "span2 uneditable-input" > Some value here< / span >
< span class = "add-on" > .00< / span >
< / div >
< div class = "input-prepend input-append" >
< span class = "add-on" > $< / span >
< span class = "span2 uneditable-input" > Some value here< / span >
< span class = "add-on" > .00< / span >
2012-03-24 00:47:57 +08:00
< / div >
< / form >
< / div > <!-- /span -->
2012-08-22 04:42:00 +08:00
< div class = "span4" >
< h4 > Prepend with type="submit"< / h4 >
< form class = "form-search" >
< div class = "input-append" >
< input type = "text" class = "span2 search-query" value = "" name = "q" >
< input type = "submit" value = "Search" class = "btn" >
< / div >
< / form >
< div class = "input-append" >
< input type = "text" class = "span2" value = "" name = "" >
< input type = "submit" value = "Button" class = "btn" >
< / div >
< div class = "input-append" >
< input type = "text" size = "16" id = "appendedInputButtons" class = "span2" >
< input type = "submit" value = "Search" class = "btn" >
< button type = "button" class = "btn" > Options< / button >
< / div >
< / div > <!-- /span -->
2012-03-24 00:47:57 +08:00
< / div > <!-- /row -->
2012-05-01 06:06:26 +08:00
2012-05-29 08:32:24 +08:00
< h4 > Fluid prepended and appended inputs< / h4 >
< div class = "row-fluid" >
< div class = "span6" >
< form >
< div class = "controls" >
< div class = "input-prepend" >
< span class = "add-on" > @< / span > < input class = "span2" id = "prependedInput" size = "16" type = "text" >
< / div >
< / div >
< div class = "controls" >
< div class = "input-append" >
< input class = "span2" id = "prependedInput" size = "16" type = "text" > < span class = "add-on" > @< / span >
< / div >
< / div >
< div class = "controls" >
< div class = "input-prepend input-append" >
< span class = "add-on" > $< / span > < input class = "span2" id = "prependedInput" size = "16" type = "text" > < span class = "add-on" > .00< / span >
< / div >
< / div >
< / form >
< / div >
< / div >
2012-05-01 06:06:26 +08:00
< h4 > Fixed row with inputs< / h4 >
< p > Inputs should not extend past the light red background, set on their parent, a < code > .span*< / code > column.< / p >
< div class = "rowInputs" >
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span1" placeholder = "span1" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span2" placeholder = "span2" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span3" placeholder = "span3" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span4" placeholder = "span4" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span5" placeholder = "span5" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span6" placeholder = "span6" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span7" placeholder = "span7" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span8" placeholder = "span8" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span9" placeholder = "span9" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span10" placeholder = "span10" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span11" placeholder = "span11" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span12" placeholder = "span12" >
2012-05-01 06:06:26 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< / div >
< br >
2012-03-24 00:47:57 +08:00
2012-03-26 08:11:50 +08:00
< h4 > Fluid row with inputs< / h4 >
< p > Inputs should not extend past the light red background, set on their parent, a < code > .span*< / code > column.< / p >
< div id = "fluidRowInputs" >
< div class = "row-fluid" >
2012-03-31 15:53:38 +08:00
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span1" placeholder = "span1" >
2012-03-31 15:53:38 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row-fluid" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span2" placeholder = "span2" >
2012-03-31 15:53:38 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row-fluid" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span3" placeholder = "span3" >
2012-03-31 15:53:38 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row-fluid" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span4" placeholder = "span4" >
2012-03-26 08:11:50 +08:00
< / div > <!-- /span -->
2012-03-31 15:53:38 +08:00
< / div > <!-- /row -->
< div class = "row-fluid" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span5" placeholder = "span5" >
2012-03-31 15:53:38 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row-fluid" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span6" placeholder = "span6" >
2012-03-31 15:53:38 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row-fluid" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span7" placeholder = "span7" >
2012-03-31 15:53:38 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row-fluid" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span8" placeholder = "span8" >
2012-03-26 08:11:50 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
2012-03-31 15:53:38 +08:00
< div class = "row-fluid" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span9" placeholder = "span9" >
2012-03-31 15:53:38 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row-fluid" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span10" placeholder = "span10" >
2012-03-31 15:53:38 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row-fluid" >
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span11" placeholder = "span11" >
2012-03-31 15:53:38 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "row-fluid" >
2012-03-26 08:11:50 +08:00
< div class = "span12" >
2012-05-29 08:32:24 +08:00
< input type = "text" class = "span12" placeholder = "span12" >
2012-03-26 08:11:50 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
< / div >
2012-07-31 06:38:36 +08:00
< br >
< h4 > Inline form in fluid row< / h4 >
< div class = "row-fluid" >
< div class = "span12" >
< form class = "form-inline" >
< input type = "text" class = "span3" placeholder = "Email" >
< input type = "password" class = "span3" placeholder = "Password" >
< label class = "checkbox" >
< input type = "checkbox" > Remember me
< / label >
< button type = "submit" class = "btn" > Sign in< / button >
< / form >
< / div >
< / div >
2012-04-01 03:31:56 +08:00
< br >
2012-03-26 08:11:50 +08:00
2012-04-01 15:59:34 +08:00
2012-08-02 11:58:33 +08:00
< h4 > Fluid textarea at .span12< / h4 >
< div class = "row-fluid" >
< div class = "span12" >
< textarea class = "span12" > < / textarea >
< / div >
< / div >
< br >
< h4 > Selects< / h4 >
< form >
< select class = "span4" >
< option > Option< / option >
< / select >
< / form >
< br >
2012-04-01 03:31:56 +08:00
<!-- Dropdowns
================================================== -->
< div class = "page-header" >
< h1 > Dropdowns< / h1 >
< / div >
< h4 > Dropdown link with hash URL< / h4 >
< ul class = "nav nav-pills" >
< li class = "active" > < a href = "#" > Link< / a > < / li >
< li > < a href = "#" > Example link< / a > < / li >
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" >
Dropdown < span class = "caret" > < / span >
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "#" > Action< / a > < / li >
< li > < a href = "#" > Another action< / a > < / li >
< li > < a href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "#" > Separated link< / a > < / li >
< / ul >
< / li >
< / ul >
2012-03-26 08:11:50 +08:00
2012-04-01 03:31:56 +08:00
< h4 > Dropdown link with custom URL and data-target< / h4 >
< ul class = "nav nav-pills" >
< li class = "active" > < a href = "#" > Link< / a > < / li >
< li > < a href = "#" > Example link< / a > < / li >
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >
Dropdown < span class = "caret" > < / span >
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "#" > Action< / a > < / li >
< li > < a href = "#" > Another action< / a > < / li >
< li > < a href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "#" > Separated link< / a > < / li >
< / ul >
< / li >
< / ul >
2012-04-16 07:48:17 +08:00
< h4 > Dropdown on a button< / h4 >
< div style = "position: relative;" >
< button class = "btn" type = "button" data-toggle = "dropdown" > Dropdown < span class = "caret" > < / span > < / button >
< ul class = "dropdown-menu" >
< li > < a href = "#" > Action< / a > < / li >
< li > < a href = "#" > Another action< / a > < / li >
< li > < a href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "#" > Separated link< / a > < / li >
< / ul >
< / div >
2012-04-01 15:59:34 +08:00
< br >
<!-- Thumbnails
================================================== -->
< div class = "page-header" >
< h1 > Thumbnails< / h1 >
< / div >
2012-04-24 21:52:57 +08:00
< h4 > Default thumbnails (no grid sizing)< / h4 >
< ul class = "thumbnails" >
< li class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / li >
< li class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / li >
< li class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / li >
< li class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / li >
< / ul >
<!-- NOT CURRENTLY SUPPORTED
2012-04-01 15:59:34 +08:00
< h4 > Offset thumbnails< / h4 >
< ul class = "thumbnails" >
< li class = "span3 offset3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< / ul >
2012-04-24 21:52:57 +08:00
-->
2012-04-01 15:59:34 +08:00
2012-04-24 21:53:48 +08:00
< h4 > Standard grid sizing< / h4 >
2012-04-01 15:59:34 +08:00
< ul class = "thumbnails" >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< li class = "span3 offset3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< / ul >
2012-04-01 16:05:00 +08:00
< h4 > Fluid thumbnails< / h4 >
< div class = "row-fluid" >
< div class = "span8" >
< ul class = "thumbnails" >
< li class = "span4" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< li class = "span4" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< li class = "span4" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< / ul >
< / div >
< / div >
2012-03-26 08:11:50 +08:00
2012-04-16 07:48:17 +08:00
2012-04-15 09:47:27 +08:00
<!-- Tabs
================================================== -->
2012-04-19 00:47:30 +08:00
< div class = "page-header" >
< h1 > Tabs< / h1 >
< / div >
2012-04-15 09:47:27 +08:00
< div class = "tabbable tabs-left" style = "margin-bottom: 18px;" >
< ul class = "nav nav-tabs" >
< li class = "active" > < a href = "#tab1" data-toggle = "tab" > Section 1< / a > < / li >
< li > < a href = "#tab2" data-toggle = "tab" > Section 2< / a > < / li >
< li > < a href = "#tab3" data-toggle = "tab" > Section 3< / a > < / li >
< / ul >
< div class = "tab-content" style = "padding-bottom: 9px; border-bottom: 1px solid #ddd;" >
< div class = "tab-pane active" id = "tab1" >
< p > I'm in Section 1.< / p >
< div class = "tabbable" style = "background: #f5f5f5; padding: 20px;" >
< ul class = "nav nav-tabs" >
< li class = "active" > < a href = "#tab1-1" data-toggle = "tab" > 1.1< / a > < / li >
< li > < a href = "#tab1-2" data-toggle = "tab" > 1.2< / a > < / li >
< li > < a href = "#tab1-3" data-toggle = "tab" > 1.3< / a > < / li >
< / ul >
< div class = "tab-content" style = "padding-bottom: 9px; border-bottom: 1px solid #ddd;" >
< div class = "tab-pane active" id = "tab1-1" >
< p > I'm in Section 1.1.< / p >
< / div >
< div class = "tab-pane" id = "tab1-2" >
< p > I'm in Section 1.2.< / p >
< / div >
< div class = "tab-pane" id = "tab1-3" >
< p > I'm in Section 1.3.< / p >
< / div >
< / div >
< / div >
< / div >
< div class = "tab-pane" id = "tab2" >
< p > Howdy, I'm in Section 2.< / p >
< / div >
< div class = "tab-pane" id = "tab3" >
< p > What up girl, this is Section 3.< / p >
< / div >
< / div >
< / div > <!-- /tabbable -->
2012-08-02 13:52:53 +08:00
< br >
2012-04-15 09:47:27 +08:00
2012-04-19 00:47:30 +08:00
<!-- Labels
================================================== -->
< div class = "page-header" >
< h1 > Labels< / h1 >
< / div >
< div class = "row" >
< div class = "span4" >
< h4 > Inline label< / h4 >
< 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 >
< / div > <!-- /span -->
< div class = "span4" >
< form class = "form-horizontal" >
< label > Example label< / label >
< input type = "text" placeholder = "Input" > < span class = "help-inline" > < span class = "label" > Hey!< / span > Read this.< / span >
< / form >
< / div > <!-- /span -->
< div class = "span4" >
2012-07-31 04:25:27 +08:00
< button class = "btn" > Action < span class = "badge" > 2< / span > < / button >
< button class = "btn" > Action < span class = "label" > 2< / span > < / button >
2012-04-19 00:47:30 +08:00
< / div > <!-- /span -->
< / div > <!-- /row -->
2012-08-02 13:52:53 +08:00
< br >
2012-04-19 00:47:30 +08:00
2012-03-24 00:47:57 +08:00
2012-06-26 06:46:46 +08:00
<!-- Button groups
================================================== -->
< div class = "page-header" >
2012-08-02 13:52:53 +08:00
< h1 > Buttons< / h1 >
2012-06-26 06:46:46 +08:00
< / div >
< table class = "table table-bordered" >
< tbody >
< tr >
< td >
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.
< / td >
< td >
< div class = "btn-group" >
< button class = "btn" > 1< / button >
< button class = "btn" > 2< / button >
< button class = "btn" > 3< / button >
< button class = "btn" > 4< / button >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
2012-08-02 13:52:53 +08:00
< h4 > Mini buttons: text and icon< / h4 >
< div class = "btn-group" >
< button class = "btn btn-mini" > Button text< / button >
< button class = "btn btn-mini" > < i class = "icon-cog" > < / i > < / button >
< / div >
< br >
2012-06-26 06:46:46 +08:00
2012-07-10 14:12:16 +08:00
<!-- Responsive utility classes
================================================== -->
< div class = "page-header" >
< h1 > Responsive utility classes< / h1 >
< / div >
< h4 > Visible on...< / h4 >
< ul class = "responsive-utilities-test visible-on" >
< li > Phone< span class = "visible-phone" > ✔ Phone< / span > < / li >
< li > Tablet< span class = "visible-tablet" > ✔ Tablet< / span > < / li >
< li > Desktop< span class = "visible-desktop" > ✔ Desktop< / span > < / li >
< / ul >
< ul class = "responsive-utilities-test visible-on" >
< li > Phone + Tablet< span class = "visible-phone visible-tablet" > ✔ Phone + Tablet< / span > < / li >
< li > Tablet + Desktop< span class = "visible-tablet visible-desktop" > ✔ Tablet + Desktop< / span > < / li >
< li > All< span class = "visible-phone visible-tablet visible-desktop" > ✔ All< / span > < / li >
< / ul >
< h4 > Hidden on...< / h4 >
< ul class = "responsive-utilities-test hidden-on" >
< li > Phone< span class = "hidden-phone" > ✔ Phone< / span > < / li >
< li > Tablet< span class = "hidden-tablet" > ✔ Tablet< / span > < / li >
< li > Desktop< span class = "hidden-desktop" > ✔ Desktop< / span > < / li >
< / ul >
< ul class = "responsive-utilities-test hidden-on" >
< li > Phone + Tablet< span class = "hidden-phone hidden-tablet" > ✔ Phone + Tablet< / span > < / li >
< li > Tablet + Desktop< span class = "hidden-tablet hidden-desktop" > ✔ Tablet + Desktop< / span > < / li >
< li > All< span class = "hidden-phone hidden-tablet hidden-desktop" > ✔ All< / span > < / li >
< / ul >
2012-06-26 06:46:46 +08:00
2012-03-24 00:47:57 +08:00
2012-08-28 12:18:55 +08:00
<!-- Gradients
================================================== -->
< div class = "page-header" >
< h1 > Gradients< / h1 >
< / div >
< h4 > Horizontal< / h4 >
< div class = "gradient-horizontal" > < / div >
< h4 > Vertical< / h4 >
< div class = "gradient-vertical" > < / div >
< h4 > Directional< / h4 >
< div class = "gradient-directional" > < / div >
< h4 > Three colors< / h4 >
< div class = "gradient-vertical-three" > < / div >
< h4 > Radial< / h4 >
< div class = "gradient-radial" > < / div >
< h4 > Striped< / h4 >
< div class = "gradient-striped" > < / div >
2012-03-24 00:47:57 +08:00
2012-07-13 08:02:55 +08:00
< / div > <!-- /container -->
2012-04-16 07:48:17 +08:00
2012-03-23 12:08:41 +08:00
2012-07-13 08:02:55 +08:00
<!-- Footer
================================================== -->
< footer class = "footer" >
< div class = "container" >
2012-07-20 12:06:42 +08:00
< p class = "pull-right" > < a href = "#" > Back to top< / a > < / p >
< 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 >
< 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 >
< 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 >
2012-07-13 08:02:55 +08:00
< ul class = "footer-links" >
2012-07-20 12:06:42 +08:00
< li > < a href = "http://blog.getbootstrap.com" > Read the blog< / a > < / li >
< li > < a href = "https://github.com/twitter/bootstrap/issues?state=open" > Submit issues< / a > < / li >
< li > < a href = "https://github.com/twitter/bootstrap/wiki" > Roadmap and changelog< / a > < / li >
2012-07-13 08:02:55 +08:00
< / ul >
< / div >
< / footer >
2012-03-23 12:08:41 +08:00
2012-07-31 03:15:08 +08:00
< / div >
2012-03-23 12:08:41 +08:00
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
< script type = "text/javascript" src = "http://platform.twitter.com/widgets.js" > < / script >
2012-03-29 11:03:57 +08:00
< script src = "../../docs/assets/js/jquery.js" > < / script >
< script src = "../../docs/assets/js/google-code-prettify/prettify.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-transition.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-alert.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-modal.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-dropdown.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-scrollspy.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-tab.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-tooltip.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-popover.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-button.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-collapse.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-carousel.js" > < / script >
< script src = "../../docs/assets/js/bootstrap-typeahead.js" > < / script >
< script src = "../../docs/assets/js/application.js" > < / script >
2012-03-23 12:08:41 +08:00
< / body >
< / html >
