Sharkk/Torq
Sharkk/Torq
1
0
Fork 0
Code Issues Pull Requests Releases Activity

test

Browse Source
This commit is contained in:
Sky Johnson 2025-04-11 16:24:13 -05:00
parent 616c57e3c5
commit 13d4d12079
6 changed files with 1782 additions and 1861 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

491
css/tests/css-tests.html
View File

@ -1,39 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Tests · Twitter Bootstrap</title> <title>CSS Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le styles --> <!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap.css" rel="stylesheet">
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="../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 --> <!-- CSS just for the tests page -->
<link href="css-tests.css" rel="stylesheet"> <link href="css-tests.css" rel="stylesheet">
</head>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <body>
<!--[if lt IE 9]> <!-- Navbar ================================================== -->
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<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">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body>
<!-- Navbar
================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
@ -43,30 +27,28 @@
</div> </div>
<!-- Masthead <!-- Masthead ================================================== -->
================================================== --> <header class="jumbotron subhead" id="overview">
<header class="jumbotron subhead" id="overview">
<div class="container"> <div class="container">
<h1>CSS Tests</h1> <h1>CSS Tests</h1>
<p class="lead">One stop shop for quick debugging and edge-case tests of CSS.</p> <p class="lead">One stop shop for quick debugging and edge-case tests of CSS.</p>
</div> </div>
</header> </header>
<div class="bs-docs-canvas"> <div class="bs-docs-canvas">
<div class="container"> <div class="container">
<!-- Typography <!-- Typography ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Typography</h1> <h1>Typography</h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div class="type-test"> <div class="type-test">
<h1>h1. Heading 1</h1> <h1>h1. Heading 1</h1>
@ -75,37 +57,50 @@
<h4>h4. Heading 4</h4> <h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5> <h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6> <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> <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> </div>
<div class="span6"> <div class="span6">
<div class="type-test"> <div class="type-test">
<h1>h1. Heading 1</h1> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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>
</div> </div>
</div>
<!-- Responsive images <!-- Responsive images ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Responsive images</h1> <h1>Responsive images</h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<img data-src="holder.js/600x600" height="200"> <img data-src="holder.js/600x600" height="200">
</div> </div>
@ -115,11 +110,11 @@
<div class="span4"> <div class="span4">
<img data-src="holder.js/600x600"> <img data-src="holder.js/600x600">
</div> </div>
</div> </div>
<br> <br>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<img data-src="holder.js/600x900" style="width: 200px;"> <img data-src="holder.js/600x900" style="width: 200px;">
</div> </div>
@ -129,21 +124,20 @@
<div class="span4"> <div class="span4">
<img data-src="holder.js/600x600"> <img data-src="holder.js/600x600">
</div> </div>
</div> </div>
<br><br> <br><br>
<!-- Fluid grid <!-- Fluid grid ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Fluid grids</h1> <h1>Fluid grids</h1>
</div> </div>
<div class="fluid-grid"> <div class="fluid-grid">
<div class="row"> <div class="row">
<div class="span12">12 <div class="span12">12
<div class="row-fluid"> <div class="row-fluid">
@ -366,18 +360,17 @@
</div> </div>
</div> </div>
</div> </div>
</div> <!-- fluid grids --> </div> <!-- fluid grids -->
<!-- Tables <!-- Tables ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Tables</h1> <h1>Tables</h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<h4>Bordered without thead</h4> <h4>Bordered without thead</h4>
<table class="table table-bordered"> <table class="table table-bordered">
@ -557,11 +550,11 @@
</tbody> </tbody>
</table> </table>
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
<h4>Grid sizing</h4> <h4>Grid sizing</h4>
<div class="row"> <div class="row">
<div class="span12"> <div class="span12">
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
@ -591,10 +584,10 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div><!--/row--> </div><!--/row-->
<h4>Nesting and striping</h4> <h4>Nesting and striping</h4>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Test</th> <th>Test</th>
@ -640,10 +633,10 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4>Fluid grid sizing</h4> <h4>Fluid grid sizing</h4>
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
@ -673,19 +666,18 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div><!--/row--> </div><!--/row-->
<!-- Forms <!-- Forms ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Forms</h1> <h1>Forms</h1>
</div> </div>
<h4>Buttons and button groups</h4> <h4>Buttons and button groups</h4>
<form class="form-inline"> <form class="form-inline">
<button class="btn btn-success">Save</button> <button class="btn btn-success">Save</button>
<button class="btn btn-info">Add new</button> <button class="btn btn-info">Add new</button>
<div class="btn-group"> <div class="btn-group">
@ -699,10 +691,10 @@
<li><a href="#">Sign Out</a></li> <li><a href="#">Sign Out</a></li>
</ul> </ul>
</div> </div>
</form> </form>
<h4>Horizontal form errors</h4> <h4>Horizontal form errors</h4>
<form class="form-horizontal"> <form class="form-horizontal">
<div class="control-group error"> <div class="control-group error">
<label class="control-label" for="inputError">Radio with error</label> <label class="control-label" for="inputError">Radio with error</label>
<div class="controls"> <div class="controls">
@ -712,9 +704,9 @@
<span class="help-inline">Please correct the error</span> <span class="help-inline">Please correct the error</span>
</div> </div>
</div> </div>
</form> </form>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h4>Prepend and append on inputs</h4> <h4>Prepend and append on inputs</h4>
<form> <form>
@ -775,35 +767,39 @@
<button type="button" class="btn">Options</button> <button type="button" class="btn">Options</button>
</div> </div>
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
<h4>Fluid prepended and appended inputs</h4> <h4>Fluid prepended and appended inputs</h4>
<div class="row-fluid"> <div class="row-fluid">
<div class="span6"> <div class="span6">
<form> <form>
<div class="controls"> <div class="controls">
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text"> <span class="add-on">@</span><input class="span2" id="prependedInput" size="16"
type="text">
</div> </div>
</div> </div>
<div class="controls"> <div class="controls">
<div class="input-append"> <div class="input-append">
<input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span> <input class="span2" id="prependedInput" size="16" type="text"><span
class="add-on">@</span>
</div> </div>
</div> </div>
<div class="controls"> <div class="controls">
<div class="input-prepend input-append"> <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> <span class="add-on">$</span><input class="span2" id="prependedInput" size="16"
type="text"><span class="add-on">.00</span>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<h4>Fixed row with inputs</h4> <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> <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="rowInputs">
<div class="row"> <div class="row">
<div class="span12"> <div class="span12">
<input type="text" class="span1" placeholder="span1"> <input type="text" class="span1" placeholder="span1">
@ -864,12 +860,13 @@
<input type="text" class="span12" placeholder="span12"> <input type="text" class="span12" placeholder="span12">
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
</div> </div>
<br> <br>
<h4>Fluid row with inputs</h4> <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> <p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code>
<div id="fluidRowInputs"> column.</p>
<div id="fluidRowInputs">
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<input type="text" class="span1" placeholder="span1"> <input type="text" class="span1" placeholder="span1">
@ -930,13 +927,13 @@
<input type="text" class="span12" placeholder="span12"> <input type="text" class="span12" placeholder="span12">
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
</div> </div>
<br> <br>
<h4>Inline form in fluid row</h4> <h4>Inline form in fluid row</h4>
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<form class="form-inline"> <form class="form-inline">
<input type="text" class="span3" placeholder="Email"> <input type="text" class="span3" placeholder="Email">
@ -947,45 +944,44 @@
<button type="submit" class="btn">Sign in</button> <button type="submit" class="btn">Sign in</button>
</form> </form>
</div> </div>
</div> </div>
<br> <br>
<h4>Fluid textarea at .span12</h4> <h4>Fluid textarea at .span12</h4>
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<textarea class="span12"></textarea> <textarea class="span12"></textarea>
</div> </div>
</div> </div>
<br> <br>
<h4>Selects</h4> <h4>Selects</h4>
<form> <form>
<select class="span4"> <select class="span4">
<option>Option</option> <option>Option</option>
</select> </select>
</form> </form>
<br> <br>
<!-- Dropdowns <!-- Dropdowns ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Dropdowns</h1> <h1>Dropdowns</h1>
</div> </div>
<h4>Dropdown link with hash URL</h4> <h4>Dropdown link with hash URL</h4>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="active"><a href="#">Link</a></li> <li class="active"><a href="#">Link</a></li>
<li><a href="#">Example link</a></li> <li><a href="#">Example link</a></li>
<li class="dropdown"> <li class="dropdown">
@ -1000,10 +996,10 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
<h4>Dropdown link with custom URL and data-target</h4> <h4>Dropdown link with custom URL and data-target</h4>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="active"><a href="#">Link</a></li> <li class="active"><a href="#">Link</a></li>
<li><a href="#">Example link</a></li> <li><a href="#">Example link</a></li>
<li class="dropdown"> <li class="dropdown">
@ -1018,10 +1014,10 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
<h4>Dropdown on a button</h4> <h4>Dropdown on a button</h4>
<div style="position: relative;"> <div style="position: relative;">
<button class="btn" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button> <button class="btn" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
@ -1030,20 +1026,19 @@
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div> </div>
<br> <br>
<!-- Thumbnails <!-- Thumbnails ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Thumbnails</h1> <h1>Thumbnails</h1>
</div> </div>
<h4>Default thumbnails (no grid sizing)</h4> <h4>Default thumbnails (no grid sizing)</h4>
<ul class="thumbnails"> <ul class="thumbnails">
<li class="thumbnail"> <li class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</li> </li>
@ -1056,31 +1051,10 @@
<li class="thumbnail"> <li class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</li> </li>
</ul> </ul>
<!-- NOT CURRENTLY SUPPORTED <h4>Standard grid sizing</h4>
<h4>Offset thumbnails</h4> <ul class="thumbnails">
<ul class="thumbnails">
<li class="span3 offset3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</li>
</ul>
-->
<h4>Standard grid sizing</h4>
<ul class="thumbnails">
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
@ -1096,10 +1070,10 @@
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
</li> </li>
</ul> </ul>
<h4>Fluid thumbnails</h4> <h4>Fluid thumbnails</h4>
<div class="row-fluid"> <div class="row-fluid">
<div class="span8"> <div class="span8">
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span4"> <li class="span4">
@ -1119,18 +1093,17 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- Tabs <!-- Tabs ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Tabs</h1> <h1>Tabs</h1>
</div> </div>
<div class="tabbable tabs-left" style="margin-bottom: 18px;"> <div class="tabbable tabs-left" style="margin-bottom: 18px;">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> <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="#tab2" data-toggle="tab">Section 2</a></li>
@ -1166,50 +1139,54 @@
<p>What up girl, this is Section 3.</p> <p>What up girl, this is Section 3.</p>
</div> </div>
</div> </div>
</div> <!-- /tabbable --> </div> <!-- /tabbable -->
<br> <br>
<!-- Labels <!-- Labels ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Labels</h1> <h1>Labels</h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h4>Inline label</h4> <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> <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><!--/span-->
<div class="span4"> <div class="span4">
<form class="form-horizontal"> <form class="form-horizontal">
<label>Example label</label> <label>Example label</label>
<input type="text" placeholder="Input"> <span class="help-inline"><span class="label">Hey!</span> Read this.</span> <input type="text" placeholder="Input"> <span class="help-inline"><span
class="label">Hey!</span> Read this.</span>
</form> </form>
</div><!--/span--> </div><!--/span-->
<div class="span4"> <div class="span4">
<button class="btn">Action <span class="badge">2</span></button> <button class="btn">Action <span class="badge">2</span></button>
<button class="btn">Action <span class="label">2</span></button> <button class="btn">Action <span class="label">2</span></button>
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
<br> <br>
<!-- Button groups <!-- Button groups ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Buttons</h1> <h1>Buttons</h1>
</div> </div>
<table class="table table-bordered"> <table class="table table-bordered">
<tbody> <tbody>
<tr> <tr>
<td> <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. 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>
<td> <td>
<div class="btn-group"> <div class="btn-group">
@ -1221,148 +1198,150 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4>Mini buttons: text and icon</h4> <h4>Mini buttons: text and icon</h4>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-mini">Button text</button> <button class="btn btn-mini">Button text</button>
<button class="btn btn-mini"><i class="icon-cog"></i></button> <button class="btn btn-mini"><i class="icon-cog"></i></button>
</div> </div>
<br> <br>
<!-- Responsive utility classes <!-- Responsive utility classes ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Responsive utility classes</h1> <h1>Responsive utility classes</h1>
</div> </div>
<h4>Visible on...</h4> <h4>Visible on...</h4>
<ul class="responsive-utilities-test visible-on"> <ul class="responsive-utilities-test visible-on">
<li>Phone<span class="visible-phone">✔ Phone</span></li> <li>Phone<span class="visible-phone">✔ Phone</span></li>
<li>Tablet<span class="visible-tablet">✔ Tablet</span></li> <li>Tablet<span class="visible-tablet">✔ Tablet</span></li>
<li>Desktop<span class="visible-desktop">✔ Desktop</span></li> <li>Desktop<span class="visible-desktop">✔ Desktop</span></li>
</ul> </ul>
<ul class="responsive-utilities-test visible-on"> <ul class="responsive-utilities-test visible-on">
<li>Phone + Tablet<span class="visible-phone visible-tablet">✔ Phone + Tablet</span></li> <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>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> <li>All<span class="visible-phone visible-tablet visible-desktop">✔ All</span></li>
</ul> </ul>
<h4>Hidden on...</h4> <h4>Hidden on...</h4>
<ul class="responsive-utilities-test hidden-on"> <ul class="responsive-utilities-test hidden-on">
<li>Phone<span class="hidden-phone">✔ Phone</span></li> <li>Phone<span class="hidden-phone">✔ Phone</span></li>
<li>Tablet<span class="hidden-tablet">✔ Tablet</span></li> <li>Tablet<span class="hidden-tablet">✔ Tablet</span></li>
<li>Desktop<span class="hidden-desktop">✔ Desktop</span></li> <li>Desktop<span class="hidden-desktop">✔ Desktop</span></li>
</ul> </ul>
<ul class="responsive-utilities-test hidden-on"> <ul class="responsive-utilities-test hidden-on">
<li>Phone + Tablet<span class="hidden-phone hidden-tablet">✔ Phone + Tablet</span></li> <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>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> <li>All<span class="hidden-phone hidden-tablet hidden-desktop">✔ All</span></li>
</ul> </ul>
<!-- Gradients <!-- Gradients ================================================== -->
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Gradients</h1> <h1>Gradients</h1>
</div> </div>
<h4>Horizontal</h4> <h4>Horizontal</h4>
<div class="gradient-horizontal"></div> <div class="gradient-horizontal"></div>
<h4>Vertical</h4> <h4>Vertical</h4>
<div class="gradient-vertical"></div> <div class="gradient-vertical"></div>
<h4>Directional</h4> <h4>Directional</h4>
<div class="gradient-directional"></div> <div class="gradient-directional"></div>
<h4>Three colors</h4> <h4>Three colors</h4>
<div class="gradient-vertical-three"></div> <div class="gradient-vertical-three"></div>
<h4>Radial</h4> <h4>Radial</h4>
<div class="gradient-radial"></div> <div class="gradient-radial"></div>
<h4>Striped</h4> <h4>Striped</h4>
<div class="gradient-striped"></div> <div class="gradient-striped"></div>
<h4>Horizontal three colors</h4> <h4>Horizontal three colors</h4>
<div class="gradient-horizontal-three"></div> <div class="gradient-horizontal-three"></div>
<div class="page-header"> <div class="page-header">
<h1>Alerts</h1> <h1>Alerts</h1>
</div> </div>
<h4>Alert default</h4> <h4>Alert default</h4>
<div class="alert"> <div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Alert!</strong> Best check yourself, you're not looking too good. <strong>Alert!</strong> Best check yourself, you're not looking too good.
</div> </div>
<div class="alert alert-block"> <div class="alert alert-block">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<p><strong>Alert!</strong> Best check yourself, you're not looking too good.</p> <p><strong>Alert!</strong> Best check yourself, you're not looking too good.</p>
</div> </div>
<h4>Success</h4> <h4>Success</h4>
<div class="alert alert-success"> <div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Success!</strong> Best check yourself, you're not looking too good. <strong>Success!</strong> Best check yourself, you're not looking too good.
</div> </div>
<div class="alert alert-block alert-success"> <div class="alert alert-block alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<p><strong>Success!</strong> Best check yourself, you're not looking too good.</p> <p><strong>Success!</strong> Best check yourself, you're not looking too good.</p>
</div> </div>
<h4>Info</h4> <h4>Info</h4>
<div class="alert alert-info"> <div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Info!</strong> Best check yourself, you're not looking too good. <strong>Info!</strong> Best check yourself, you're not looking too good.
</div> </div>
<div class="alert alert-block alert-info"> <div class="alert alert-block alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<p><strong>Info!</strong> Best check yourself, you're not looking too good.</p> <p><strong>Info!</strong> Best check yourself, you're not looking too good.</p>
</div> </div>
<h4>Warning</h4> <h4>Warning</h4>
<div class="alert "> <div class="alert ">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yourself, you're not looking too good. <strong>Warning!</strong> Best check yourself, you're not looking too good.
</div> </div>
<div class="alert alert-block alert-warning"> <div class="alert alert-block alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<p><strong>Warning!</strong> Best check yourself, you're not looking too good.</p> <p><strong>Warning!</strong> Best check yourself, you're not looking too good.</p>
</div> </div>
<h4>Error</h4> <h4>Error</h4>
<div class="alert alert-error"> <div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Error!</strong> Best check yourself, you're not looking too good. <strong>Error!</strong> Best check yourself, you're not looking too good.
</div> </div>
<div class="alert alert-block alert-error"> <div class="alert alert-block alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<p><strong>Error!</strong> Best check yourself, you're not looking too good.</p> <p><strong>Error!</strong> Best check yourself, you're not looking too good.</p>
</div> </div>
</div><!-- /container --> </div><!-- /container -->
<!-- Footer <!-- Footer ================================================== -->
================================================== -->
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<p class="pull-right"><a href="#">Back to top</a></p> <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>Designed and built with all the love in the world <a href="http://twitter.com/twitter"
<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> target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a
<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> 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>
<ul class="footer-links"> <ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li> <li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Submit issues</a></li> <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Submit issues</a></li>
@ -1371,11 +1350,10 @@
</div> </div>
</footer> </footer>
</div> </div>
<!-- Le javascript <!-- Le javascript ================================================== -->
================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="../../docs/assets/js/jquery.js"></script> <script src="../../docs/assets/js/jquery.js"></script>
@ -1393,7 +1371,6 @@
<script src="../../docs/assets/js/bootstrap-carousel.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/bootstrap-typeahead.js"></script>
<script src="../../docs/assets/js/application.js"></script> <script src="../../docs/assets/js/application.js"></script>
</body>
</body>
</html> </html>

45
css/tests/forms-responsive.html
View File

@ -1,38 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Bootstrap, from Twitter</title> <title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le styles --> <!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap.css" rel="stylesheet">
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="../bootstrap-responsive.css" rel="stylesheet">
<style> <style>
body { body {
padding-top: 30px; padding-top: 30px;
padding-bottom: 30px; padding-bottom: 30px;
} }
</style> </style>
</head>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <body>
<!--[if lt IE 9]> <form class="container">
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<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">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body>
<form class="container">
<div class="page-header"> <div class="page-header">
<h1>Fixed grid</h1> <h1>Fixed grid</h1>
@ -40,7 +28,9 @@
<h3>Vertical alignment</h3> <h3>Vertical alignment</h3>
<input type="text" class="span2" placeholder="span2"> <input type="text" class="span2" placeholder="span2">
<select class="span2"><option>span2</option></select> <select class="span2">
<option>span2</option>
</select>
<span class="uneditable-input span2">span1</span> <span class="uneditable-input span2">span1</span>
<h3>Width across elements</h3> <h3>Width across elements</h3>
@ -48,7 +38,9 @@
<input type="text" class="span2" placeholder="span2"> <input type="text" class="span2" placeholder="span2">
</div> </div>
<div> <div>
<select class="span2"><option>span2</option></select> <select class="span2">
<option>span2</option>
</select>
</div> </div>
<div> <div>
<span class="uneditable-input span2">span2</span> <span class="uneditable-input span2">span2</span>
@ -61,11 +53,12 @@
<div class="row-fluid"> <div class="row-fluid">
<input type="text" class="span2" placeholder="span2"> <input type="text" class="span2" placeholder="span2">
<select class="span2"><option>span2</option></select> <select class="span2">
<option>span2</option>
</select>
<span class="uneditable-input span2">span1</span> <span class="uneditable-input span2">span1</span>
</div> </div>
</form> <!-- /container --> </form> <!-- /container -->
</body>
</body>
</html> </html>

34
css/tests/forms.html
View File

@ -1,39 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Bootstrap, from Twitter</title> <title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le styles --> <!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap.css" rel="stylesheet">
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="../bootstrap-responsive.css" rel="stylesheet">
<style> <style>
body { body {
padding-top: 30px; padding-top: 30px;
padding-bottom: 30px; padding-bottom: 30px;
} }
</style> </style>
</head>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <body>
<!--[if lt IE 9]> <form class="container">
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<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">
</head>
<body>
<form class="container">
<div class="page-header"> <div class="page-header">
<h1>Form controls</h1> <h1>Form controls</h1>
</div> </div>
@ -173,7 +160,6 @@
</div><!-- /span4 --> </div><!-- /span4 -->
</div><!-- /row --> </div><!-- /row -->
</form> <!-- /container --> </form> <!-- /container -->
</body>
</body>
</html> </html>

74
css/tests/navbar-fixed-top.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Bootstrap, from Twitter</title> <title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -8,32 +9,19 @@
<meta name="author" content=""> <meta name="author" content="">
<!-- Le styles --> <!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap.css" rel="stylesheet">
<style> <style>
body { body {
padding-top: 60px; padding-top: 60px;
padding-bottom: 30px; padding-bottom: 30px;
} }
</style> </style>
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="../bootstrap-responsive.css" rel="stylesheet">
</head>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <body>
<!--[if lt IE 9]> <!-- Fixed navbar -->
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <div class="navbar navbar-fixed-top">
<![endif]-->
<!-- Le fav and touch icons -->
<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">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@ -48,7 +36,8 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -68,37 +57,36 @@
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<!-- Main hero unit for a primary marketing message or call to action --> <!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit"> <div class="hero-unit">
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar
work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs &raquo;</a> <a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Le javascript <!-- Le javascript ================================================== -->
================================================== --> <!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster --> <script src="../../docs/assets/js/jquery.js"></script>
<script src="../../docs/assets/js/jquery.js"></script> <script src="../../docs/assets/js/bootstrap-transition.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-alert.js"></script> <script src="../../docs/assets/js/bootstrap-modal.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-dropdown.js"></script> <script src="../../docs/assets/js/bootstrap-scrollspy.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-tab.js"></script> <script src="../../docs/assets/js/bootstrap-tooltip.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-popover.js"></script> <script src="../../docs/assets/js/bootstrap-button.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-collapse.js"></script> <script src="../../docs/assets/js/bootstrap-carousel.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/bootstrap-typeahead.js"></script> </body>
</body>
</html> </html>

77
css/tests/navbar-static-top.html
View File

@ -1,41 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Bootstrap, from Twitter</title> <title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le styles --> <!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap.css" rel="stylesheet">
<style> <style>
body { body {
padding-bottom: 30px; padding-bottom: 30px;
} }
.hero-unit { .hero-unit {
margin-top: 20px; margin-top: 20px;
} }
</style> </style>
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="../bootstrap-responsive.css" rel="stylesheet">
</head>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <body>
<!--[if lt IE 9]> <!-- Static navbar -->
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <div class="navbar navbar-static-top">
<![endif]-->
<!-- Le fav and touch icons -->
<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">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-static-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@ -50,7 +39,8 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -70,38 +60,37 @@
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<!-- Main hero unit for a primary marketing message or call to action --> <!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit"> <div class="hero-unit">
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar
work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs &raquo;</a> <a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Le javascript <!-- Le javascript ================================================== -->
================================================== --> <!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster --> <script src="../../docs/assets/js/jquery.js"></script>
<script src="../../docs/assets/js/jquery.js"></script> <script src="../../docs/assets/js/bootstrap-transition.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-alert.js"></script> <script src="../../docs/assets/js/bootstrap-modal.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-dropdown.js"></script> <script src="../../docs/assets/js/bootstrap-scrollspy.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-tab.js"></script> <script src="../../docs/assets/js/bootstrap-tooltip.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-popover.js"></script> <script src="../../docs/assets/js/bootstrap-button.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-collapse.js"></script> <script src="../../docs/assets/js/bootstrap-carousel.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/bootstrap-typeahead.js"></script> </body>
</body>
</html> </html>

72
css/tests/navbar.html
View File

@ -1,42 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Bootstrap, from Twitter</title> <title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le styles --> <!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap.css" rel="stylesheet">
<style> <style>
body { body {
padding-top: 0; padding-top: 0;
padding-bottom: 30px; padding-bottom: 30px;
} }
.navbar { .navbar {
margin-top: 20px; margin-top: 20px;
} }
</style> </style>
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="../bootstrap-responsive.css" rel="stylesheet">
</head>
<!-- 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 -->
<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">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body>
<div class="container">
<body>
<div class="container">
<!-- Static navbar --> <!-- Static navbar -->
<div class="navbar"> <div class="navbar">
<div class="navbar-inner"> <div class="navbar-inner">
@ -53,7 +41,8 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -78,30 +67,29 @@
<!-- Main hero unit for a primary marketing message or call to action --> <!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit"> <div class="hero-unit">
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar
work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs &raquo;</a> <a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Le javascript <!-- Le javascript ================================================== -->
================================================== --> <!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster --> <script src="../../docs/assets/js/jquery.js"></script>
<script src="../../docs/assets/js/jquery.js"></script> <script src="../../docs/assets/js/bootstrap-transition.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-alert.js"></script> <script src="../../docs/assets/js/bootstrap-modal.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-dropdown.js"></script> <script src="../../docs/assets/js/bootstrap-scrollspy.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-tab.js"></script> <script src="../../docs/assets/js/bootstrap-tooltip.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-popover.js"></script> <script src="../../docs/assets/js/bootstrap-button.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-collapse.js"></script> <script src="../../docs/assets/js/bootstrap-carousel.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/bootstrap-typeahead.js"></script> </body>
</body>
</html> </html>