test
This commit is contained in:
parent
616c57e3c5
commit
13d4d12079
|
|
@ -1,39 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<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="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<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">
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- CSS just for the tests page -->
|
||||
<link href="css-tests.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>
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<body>
|
||||
<!-- Navbar ================================================== -->
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
|
|
@ -43,30 +27,28 @@
|
|||
</div>
|
||||
|
||||
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<!-- Masthead ================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>CSS Tests</h1>
|
||||
<p class="lead">One stop shop for quick debugging and edge-case tests of CSS.</p>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="bs-docs-canvas">
|
||||
<div class="bs-docs-canvas">
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
|
||||
<!-- Typography
|
||||
================================================== -->
|
||||
<!-- Typography ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Typography</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<div class="type-test">
|
||||
<h1>h1. Heading 1</h1>
|
||||
|
|
@ -75,37 +57,50 @@
|
|||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<!-- Responsive images
|
||||
================================================== -->
|
||||
<!-- Responsive images ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Responsive images</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<img data-src="holder.js/600x600" height="200">
|
||||
</div>
|
||||
|
|
@ -115,11 +110,11 @@
|
|||
<div class="span4">
|
||||
<img data-src="holder.js/600x600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<img data-src="holder.js/600x900" style="width: 200px;">
|
||||
</div>
|
||||
|
|
@ -129,21 +124,20 @@
|
|||
<div class="span4">
|
||||
<img data-src="holder.js/600x600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<br><br>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Fluid grid
|
||||
================================================== -->
|
||||
<!-- Fluid grid ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Fluid grids</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fluid-grid">
|
||||
<div class="fluid-grid">
|
||||
<div class="row">
|
||||
<div class="span12">12
|
||||
<div class="row-fluid">
|
||||
|
|
@ -366,18 +360,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- fluid grids -->
|
||||
</div> <!-- fluid grids -->
|
||||
|
||||
|
||||
|
||||
<!-- Tables
|
||||
================================================== -->
|
||||
<!-- Tables ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Tables</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<h4>Bordered without thead</h4>
|
||||
<table class="table table-bordered">
|
||||
|
|
@ -557,11 +550,11 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div><!--/row-->
|
||||
|
||||
|
||||
<h4>Grid sizing</h4>
|
||||
<div class="row">
|
||||
<h4>Grid sizing</h4>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
|
|
@ -591,10 +584,10 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div><!--/row-->
|
||||
</div><!--/row-->
|
||||
|
||||
<h4>Nesting and striping</h4>
|
||||
<table class="table table-bordered table-striped">
|
||||
<h4>Nesting and striping</h4>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
|
|
@ -640,10 +633,10 @@
|
|||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<h4>Fluid grid sizing</h4>
|
||||
<div class="row-fluid">
|
||||
<h4>Fluid grid sizing</h4>
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
|
|
@ -673,19 +666,18 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div><!--/row-->
|
||||
</div><!--/row-->
|
||||
|
||||
|
||||
|
||||
<!-- Forms
|
||||
================================================== -->
|
||||
<!-- Forms ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Forms</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Buttons and button groups</h4>
|
||||
<form class="form-inline">
|
||||
<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">
|
||||
|
|
@ -699,10 +691,10 @@
|
|||
<li><a href="#">Sign Out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<h4>Horizontal form errors</h4>
|
||||
<form class="form-horizontal">
|
||||
<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">
|
||||
|
|
@ -712,9 +704,9 @@
|
|||
<span class="help-inline">Please correct the error</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h4>Prepend and append on inputs</h4>
|
||||
<form>
|
||||
|
|
@ -775,35 +767,39 @@
|
|||
<button type="button" class="btn">Options</button>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div><!--/row-->
|
||||
|
||||
<h4>Fluid prepended and appended inputs</h4>
|
||||
<div class="row-fluid">
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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="rowInputs">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span1" placeholder="span1">
|
||||
|
|
@ -864,12 +860,13 @@
|
|||
<input type="text" class="span12" placeholder="span12">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<div class="span12">
|
||||
<input type="text" class="span1" placeholder="span1">
|
||||
|
|
@ -930,13 +927,13 @@
|
|||
<input type="text" class="span12" placeholder="span12">
|
||||
</div><!--/span-->
|
||||
</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">
|
||||
<form class="form-inline">
|
||||
<input type="text" class="span3" placeholder="Email">
|
||||
|
|
@ -947,45 +944,44 @@
|
|||
<button type="submit" class="btn">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<h4>Fluid textarea at .span12</h4>
|
||||
<div class="row-fluid">
|
||||
<h4>Fluid textarea at .span12</h4>
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<textarea class="span12"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<h4>Selects</h4>
|
||||
<form>
|
||||
<h4>Selects</h4>
|
||||
<form>
|
||||
<select class="span4">
|
||||
<option>Option</option>
|
||||
</select>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Dropdowns
|
||||
================================================== -->
|
||||
<!-- Dropdowns ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Dropdowns</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Dropdown link with hash URL</h4>
|
||||
<ul class="nav nav-pills">
|
||||
<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">
|
||||
|
|
@ -1000,10 +996,10 @@
|
|||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<h4>Dropdown link with custom URL and data-target</h4>
|
||||
<ul class="nav nav-pills">
|
||||
<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">
|
||||
|
|
@ -1018,10 +1014,10 @@
|
|||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<h4>Dropdown on a button</h4>
|
||||
<div style="position: relative;">
|
||||
<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>
|
||||
|
|
@ -1030,20 +1026,19 @@
|
|||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<!-- Thumbnails
|
||||
================================================== -->
|
||||
<!-- Thumbnails ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Thumbnails</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Default thumbnails (no grid sizing)</h4>
|
||||
<ul class="thumbnails">
|
||||
<h4>Default thumbnails (no grid sizing)</h4>
|
||||
<ul class="thumbnails">
|
||||
<li class="thumbnail">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
</li>
|
||||
|
|
@ -1056,31 +1051,10 @@
|
|||
<li class="thumbnail">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<!-- NOT CURRENTLY SUPPORTED
|
||||
<h4>Offset thumbnails</h4>
|
||||
<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">
|
||||
<h4>Standard grid sizing</h4>
|
||||
<ul class="thumbnails">
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
|
|
@ -1096,10 +1070,10 @@
|
|||
<img data-src="holder.js/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<h4>Fluid thumbnails</h4>
|
||||
<div class="row-fluid">
|
||||
<h4>Fluid thumbnails</h4>
|
||||
<div class="row-fluid">
|
||||
<div class="span8">
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
|
|
@ -1119,18 +1093,17 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Tabs
|
||||
================================================== -->
|
||||
<!-- Tabs ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<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">
|
||||
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</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>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /tabbable -->
|
||||
</div> <!-- /tabbable -->
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<!-- Labels
|
||||
================================================== -->
|
||||
<!-- Labels ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Labels</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<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>
|
||||
<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>
|
||||
<input type="text" placeholder="Input"> <span class="help-inline"><span
|
||||
class="label">Hey!</span> Read this.</span>
|
||||
</form>
|
||||
</div><!--/span-->
|
||||
<div class="span4">
|
||||
<button class="btn">Action <span class="badge">2</span></button>
|
||||
<button class="btn">Action <span class="label">2</span></button>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div><!--/row-->
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<!-- Button groups
|
||||
================================================== -->
|
||||
<!-- Button groups ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Buttons</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<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.
|
||||
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">
|
||||
|
|
@ -1221,148 +1198,150 @@
|
|||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<h4>Mini buttons: text and icon</h4>
|
||||
<div class="btn-group">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
<!-- Responsive utility classes
|
||||
================================================== -->
|
||||
<!-- Responsive utility classes ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Responsive utility classes</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Visible on...</h4>
|
||||
<ul class="responsive-utilities-test visible-on">
|
||||
<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">
|
||||
</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>
|
||||
</ul>
|
||||
|
||||
<h4>Hidden on...</h4>
|
||||
<ul class="responsive-utilities-test hidden-on">
|
||||
<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">
|
||||
</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>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<!-- Gradients
|
||||
================================================== -->
|
||||
<!-- Gradients ================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Gradients</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Horizontal</h4>
|
||||
<div class="gradient-horizontal"></div>
|
||||
<h4>Horizontal</h4>
|
||||
<div class="gradient-horizontal"></div>
|
||||
|
||||
<h4>Vertical</h4>
|
||||
<div class="gradient-vertical"></div>
|
||||
<h4>Vertical</h4>
|
||||
<div class="gradient-vertical"></div>
|
||||
|
||||
<h4>Directional</h4>
|
||||
<div class="gradient-directional"></div>
|
||||
<h4>Directional</h4>
|
||||
<div class="gradient-directional"></div>
|
||||
|
||||
<h4>Three colors</h4>
|
||||
<div class="gradient-vertical-three"></div>
|
||||
<h4>Three colors</h4>
|
||||
<div class="gradient-vertical-three"></div>
|
||||
|
||||
<h4>Radial</h4>
|
||||
<div class="gradient-radial"></div>
|
||||
<h4>Radial</h4>
|
||||
<div class="gradient-radial"></div>
|
||||
|
||||
<h4>Striped</h4>
|
||||
<div class="gradient-striped"></div>
|
||||
<h4>Striped</h4>
|
||||
<div class="gradient-striped"></div>
|
||||
|
||||
<h4>Horizontal three colors</h4>
|
||||
<div class="gradient-horizontal-three"></div>
|
||||
<h4>Horizontal three colors</h4>
|
||||
<div class="gradient-horizontal-three"></div>
|
||||
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header">
|
||||
<h1>Alerts</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Alert default</h4>
|
||||
<div class="alert">
|
||||
<h4>Alert default</h4>
|
||||
<div class="alert">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Alert!</strong> Best check yourself, you're not looking too good.
|
||||
</div>
|
||||
<div class="alert alert-block">
|
||||
</div>
|
||||
<div class="alert alert-block">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<p><strong>Alert!</strong> Best check yourself, you're not looking too good.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Success</h4>
|
||||
<div class="alert alert-success">
|
||||
<h4>Success</h4>
|
||||
<div class="alert alert-success">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Success!</strong> Best check yourself, you're not looking too good.
|
||||
</div>
|
||||
<div class="alert alert-block alert-success">
|
||||
</div>
|
||||
<div class="alert alert-block alert-success">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<p><strong>Success!</strong> Best check yourself, you're not looking too good.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Info</h4>
|
||||
<div class="alert alert-info">
|
||||
<h4>Info</h4>
|
||||
<div class="alert alert-info">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Info!</strong> Best check yourself, you're not looking too good.
|
||||
</div>
|
||||
<div class="alert alert-block alert-info">
|
||||
</div>
|
||||
<div class="alert alert-block alert-info">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<p><strong>Info!</strong> Best check yourself, you're not looking too good.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Warning</h4>
|
||||
<div class="alert ">
|
||||
<h4>Warning</h4>
|
||||
<div class="alert ">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Warning!</strong> Best check yourself, you're not looking too good.
|
||||
</div>
|
||||
<div class="alert alert-block alert-warning">
|
||||
</div>
|
||||
<div class="alert alert-block alert-warning">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<p><strong>Warning!</strong> Best check yourself, you're not looking too good.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Error</h4>
|
||||
<div class="alert alert-error">
|
||||
<h4>Error</h4>
|
||||
<div class="alert alert-error">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Error!</strong> Best check yourself, you're not looking too good.
|
||||
</div>
|
||||
<div class="alert alert-block alert-error">
|
||||
</div>
|
||||
<div class="alert alert-block alert-error">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<p><strong>Error!</strong> Best check yourself, you're not looking too good.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div><!-- /container -->
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<!-- Footer ================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<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>
|
||||
<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>
|
||||
<ul class="footer-links">
|
||||
<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>
|
||||
|
|
@ -1371,11 +1350,10 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- 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>
|
||||
<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-typeahead.js"></script>
|
||||
<script src="../../docs/assets/js/application.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<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="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
|
||||
<form class="container">
|
||||
<body>
|
||||
<form class="container">
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Fixed grid</h1>
|
||||
|
|
@ -40,7 +28,9 @@
|
|||
|
||||
<h3>Vertical alignment</h3>
|
||||
<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>
|
||||
|
||||
<h3>Width across elements</h3>
|
||||
|
|
@ -48,7 +38,9 @@
|
|||
<input type="text" class="span2" placeholder="span2">
|
||||
</div>
|
||||
<div>
|
||||
<select class="span2"><option>span2</option></select>
|
||||
<select class="span2">
|
||||
<option>span2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<span class="uneditable-input span2">span2</span>
|
||||
|
|
@ -61,11 +53,12 @@
|
|||
|
||||
<div class="row-fluid">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</form> <!-- /container -->
|
||||
|
||||
</body>
|
||||
</form> <!-- /container -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<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="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
</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="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">
|
||||
|
||||
<body>
|
||||
<form class="container">
|
||||
<div class="page-header">
|
||||
<h1>Form controls</h1>
|
||||
</div>
|
||||
|
|
@ -173,7 +160,6 @@
|
|||
</div><!-- /span4 -->
|
||||
</div><!-- /row -->
|
||||
|
||||
</form> <!-- /container -->
|
||||
|
||||
</body>
|
||||
</form> <!-- /container -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -8,32 +9,19 @@
|
|||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</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>
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<body>
|
||||
<!-- Fixed navbar -->
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<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="#contact">Contact</a></li>
|
||||
<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">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
|
|
@ -68,37 +57,36 @@
|
|||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<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>
|
||||
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- 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/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>
|
||||
|
||||
</body>
|
||||
<!-- Le javascript ================================================== -->
|
||||
<!-- 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/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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<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="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.hero-unit {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</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>
|
||||
|
||||
<!-- Static navbar -->
|
||||
<div class="navbar navbar-static-top">
|
||||
<body>
|
||||
<!-- Static navbar -->
|
||||
<div class="navbar navbar-static-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<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="#contact">Contact</a></li>
|
||||
<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">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
|
|
@ -70,38 +60,37 @@
|
|||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<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>
|
||||
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- 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/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>
|
||||
|
||||
</body>
|
||||
<!-- Le javascript ================================================== -->
|
||||
<!-- 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/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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<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="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 0;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- 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">
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Static navbar -->
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
|
|
@ -53,7 +41,8 @@
|
|||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<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">
|
||||
<li><a href="#">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 -->
|
||||
<div class="hero-unit">
|
||||
<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>
|
||||
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- 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/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>
|
||||
|
||||
</body>
|
||||
<!-- Le javascript ================================================== -->
|
||||
<!-- 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/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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user