mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00
Code Issues Releases Wiki Activity

Merge branch '2.0.1-wip' of https://github.com/twitter/bootstrap into 2.0.1-wip

Browse Source 
Conflicts:
	docs/assets/bootstrap.zip
This commit is contained in:
Jacob Thornton
2012-02-13 18:42:57 -08:00
parent 6e77c9d123 64ea59234f
commit a8c478e051
28 changed files with 589 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

52
docs/assets/css/bootstrap-responsive.css vendored
View File

@@ -205,40 +205,40 @@
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
.row-fluid > .span1 {
width: 5.801104972%;
}
.row-fluid .span2 {
.row-fluid > .span2 {
width: 14.364640883%;
}
.row-fluid .span3 {
.row-fluid > .span3 {
width: 22.928176794%;
}
.row-fluid .span4 {
.row-fluid > .span4 {
width: 31.491712705%;
}
.row-fluid .span5 {
.row-fluid > .span5 {
width: 40.055248616%;
}
.row-fluid .span6 {
.row-fluid > .span6 {
width: 48.618784527%;
}
.row-fluid .span7 {
.row-fluid > .span7 {
width: 57.182320438000005%;
}
.row-fluid .span8 {
.row-fluid > .span8 {
width: 65.74585634900001%;
}
.row-fluid .span9 {
.row-fluid > .span9 {
width: 74.30939226%;
}
.row-fluid .span10 {
.row-fluid > .span10 {
width: 82.87292817100001%;
}
.row-fluid .span11 {
.row-fluid > .span11 {
width: 91.436464082%;
}
.row-fluid .span12 {
.row-fluid > .span12 {
width: 99.999999993%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
@@ -314,6 +314,10 @@
.navbar .nav > .divider-vertical {
display: none;
}
.navbar .nav .nav-header {
color: #999999;
text-shadow: none;
}
.navbar .nav > li > a, .navbar .dropdown-menu a {
padding: 6px 15px;
font-weight: bold;
@@ -486,40 +490,40 @@
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
.row-fluid > .span1 {
width: 5.982905983%;
}
.row-fluid .span2 {
.row-fluid > .span2 {
width: 14.529914530000001%;
}
.row-fluid .span3 {
.row-fluid > .span3 {
width: 23.076923077%;
}
.row-fluid .span4 {
.row-fluid > .span4 {
width: 31.623931624%;
}
.row-fluid .span5 {
.row-fluid > .span5 {
width: 40.170940171000005%;
}
.row-fluid .span6 {
.row-fluid > .span6 {
width: 48.717948718%;
}
.row-fluid .span7 {
.row-fluid > .span7 {
width: 57.264957265%;
}
.row-fluid .span8 {
.row-fluid > .span8 {
width: 65.81196581200001%;
}
.row-fluid .span9 {
.row-fluid > .span9 {
width: 74.358974359%;
}
.row-fluid .span10 {
.row-fluid > .span10 {
width: 82.905982906%;
}
.row-fluid .span11 {
.row-fluid > .span11 {
width: 91.45299145300001%;
}
.row-fluid .span12 {
.row-fluid > .span12 {
width: 100%;
}
input.span1, textarea.span1, .uneditable-input.span1 {

133
docs/assets/css/bootstrap.css vendored
View File

@@ -212,40 +212,40 @@ a:hover {
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
.row-fluid > .span1 {
width: 6.382978723%;
}
.row-fluid .span2 {
.row-fluid > .span2 {
width: 14.89361702%;
}
.row-fluid .span3 {
.row-fluid > .span3 {
width: 23.404255317%;
}
.row-fluid .span4 {
.row-fluid > .span4 {
width: 31.914893614%;
}
.row-fluid .span5 {
.row-fluid > .span5 {
width: 40.425531911%;
}
.row-fluid .span6 {
.row-fluid > .span6 {
width: 48.93617020799999%;
}
.row-fluid .span7 {
.row-fluid > .span7 {
width: 57.446808505%;
}
.row-fluid .span8 {
.row-fluid > .span8 {
width: 65.95744680199999%;
}
.row-fluid .span9 {
.row-fluid > .span9 {
width: 74.468085099%;
}
.row-fluid .span10 {
.row-fluid > .span10 {
width: 82.97872339599999%;
}
.row-fluid .span11 {
.row-fluid > .span11 {
width: 91.489361693%;
}
.row-fluid .span12 {
.row-fluid > .span12 {
width: 99.99999998999999%;
}
.container {
@@ -530,11 +530,16 @@ input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 18px;
}
input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
label {
display: block;
margin-bottom: 5px;
@@ -832,6 +837,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
color: #999999;
}
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 0;
color: #999999;
@@ -913,6 +919,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
border-radius: 3px 0 0 3px;
}
.input-append .uneditable-input {
border-left-color: #eee;
border-right-color: #ccc;
}
.input-append .add-on {
@@ -1693,15 +1700,18 @@ table .span12 {
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
background-color: #fafafa;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-repeat: no-repeat;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
@@ -1711,8 +1721,19 @@ table .span12 {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
*margin-left: .3em;
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
background-color: #e6e6e6;
}
.btn:active, .btn.active {
background-color: #cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
@@ -1779,7 +1800,9 @@ table .span12 {
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover {
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
}
@@ -1787,7 +1810,8 @@ table .span12 {
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active {
.btn-info.active,
.btn-dark.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-primary {
@@ -1910,6 +1934,30 @@ table .span12 {
.btn-info:active, .btn-info.active {
background-color: #24748c \9;
}
.btn-inverse {
background-color: #393939;
background-image: -moz-linear-gradient(top, #454545, #262626);
background-image: -ms-linear-gradient(top, #454545, #262626);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626));
background-image: -webkit-linear-gradient(top, #454545, #262626);
background-image: -o-linear-gradient(top, #454545, #262626);
background-image: linear-gradient(top, #454545, #262626);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
border-color: #262626 #262626 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
background-color: #262626;
}
.btn-inverse:active, .btn-inverse.active {
background-color: #0c0c0c \9;
}
button.btn, input[type="submit"].btn {
*padding-top: 2px;
*padding-bottom: 2px;
@@ -2042,7 +2090,8 @@ button.btn.small, input[type="submit"].btn.small {
.btn-primary .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret {
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
@@ -2115,27 +2164,31 @@ button.btn.small, input[type="submit"].btn.small {
text-decoration: none;
background-color: #eeeeee;
}
.nav .nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 18px;
color: #999999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.nav li + .nav-header {
margin-top: 9px;
}
.nav-list {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
}
.nav-list > li > a, .nav-list .nav-header {
display: block;
padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list .nav-header {
font-size: 11px;
font-weight: bold;
line-height: 18px;
color: #999999;
text-transform: uppercase;
}
.nav-list > li + .nav-header {
margin-top: 9px;
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list .active > a, .nav-list .active > a:hover {
color: #ffffff;
@@ -2483,6 +2536,13 @@ button.btn.small, input[type="submit"].btn.small {
.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
margin-top: 3px;
}
.navbar-form .input-append, .navbar-form .input-prepend {
margin-top: 6px;
white-space: nowrap;
}
.navbar-form .input-append input, .navbar-form .input-prepend input {
margin-top: 0;
}
.navbar-search {
position: relative;
float: left;
@@ -2841,6 +2901,9 @@ button.btn.small, input[type="submit"].btn.small {
.modal-body {
padding: 15px;
}
.modal-body .modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;

3
docs/assets/css/docs.css
View File

@@ -181,7 +181,7 @@ hr.soften {
top: 40px;
left: 0;
right: 0;
z-index: 1030;
z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
border-color: #d5d5d5;
border-width: 0 0 1px; /* drop the border on the fixed edges */
-webkit-border-radius: 0;
@@ -190,6 +190,7 @@ hr.soften {
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
}
.subnav-fixed .nav {
width: 938px;

18
docs/base-css.html
View File

@@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
@@ -1121,7 +1121,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<fieldset>
<legend>Extending form controls</legend>
<div class="control-group">
<label class="control-label">Form sizes</label>
<label class="control-label">Form grid sizes</label>
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
@@ -1150,6 +1150,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
</div>
</div>
<div class="control-group">
<label class="control-label">Alternate sizes</label>
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls">
@@ -1285,6 +1294,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td><a class="btn btn-danger" href="#">Danger</a></td>
<td><code>.btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td><a class="btn btn-inverse" href="#">Inverse</a></td>
<td><code>.btn-inverse</code></td>
<td>Alternate dark gray button, not tied to a semantic action or use</td>
</tr>
</tbody>
</table>

62
docs/components.html
View File

@@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
@@ -98,6 +98,7 @@
</ul>
</li>
<li><a href="#labels">Labels</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
@@ -247,7 +248,9 @@
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /btn-toolbar -->
<hr>
<p><span class="label label-info">Heads up!</span> Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
</div>
<div class="span8">
<h3>Example markup</h3>
@@ -771,7 +774,9 @@
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
@@ -810,12 +815,14 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
<h3>Fixed navbar</h3>
<p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
&lt;/div&gt;
</pre>
<p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<pre class="prettyprint linenums">
@@ -1135,6 +1142,55 @@
<!-- Typographic components
================================================== -->
<section id="typography">
<div class="page-header">
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div>
<h2>Hero unit</h2>
<div class="row">
<div class="span4">
<p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
<h3>Markup</h3>
<p>Wrap your content in a <code>div</code> like so:</p>
<pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Tagline&lt;/p&gt;
&lt;p&gt;
&lt;a class="btn btn-primary btn-large"&gt;
Learn more
&lt;/a&gt;
&lt;/p&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</div>
</div><!-- /row -->
<h2>Page header</h2>
<div class="row">
<div class="span4">
<p>A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
</div>
<div class="span8">
<pre class="prettyprint linenums">
&lt;div class="page-haeder"&gt;
&lt;h1&gt;Example page header&lt;/h1&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
</section>
<!-- Thumbnails
================================================== -->
<section id="thumbnails">

2
docs/download.html
View File

@@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

2
docs/examples.html
View File

@@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

2
docs/index.html
View File

@@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

4
docs/javascript.html
View File

@@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
@@ -930,7 +930,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</p>
</div>
<hr>
<h2>Using bootstrap-alerts.js</h2>
<h2>Using bootstrap-alert.js</h2>
<p>Enable dismissal of an alert via javascript:</p>
<pre class="prettyprint linenums">$(".alert").alert()</pre>
<h3>Markup</h3>

2
docs/less.html
View File

@@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

118
docs/scaffolding.html
View File

@@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
@@ -81,7 +81,9 @@
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#grid-system">Grid system</a></li>
<li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid gird system</a></li>
<li><a href="#gridCustomization">Customizing</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#responsive">Responsive design</a></li>
</ul>
@@ -92,12 +94,11 @@
<!-- Grid system
================================================== -->
<section id="grid-system">
<section id="gridSystem">
<div class="page-header">
<h1>Grid system <small>12 columns with a responsive twist</small></h1>
<h1>Default grid system <small>12 columns with a responsive twist</small></h1>
</div>
<h2>Default grid</h2>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
@@ -188,7 +189,87 @@
</div>
</div>
</div>
<h3>Fluid example</h3>
</div><!-- /span6 -->
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span12"&gt;
Level 1 of column
&lt;div class="row"&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
</div>
<h2>Fluid columns</h2>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row-fluid show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<h3>Percents, not pixels</h3>
<p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
</div>
<div class="span4">
<h3>Fluid rows</h3>
<p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
</div>
<div class="span4">
<h3>Markup</h3>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
<h2>Fluid nesting</h2>
<div class="row">
<div class="span6">
<p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
<div class="row-fluid show-grid">
<div class="span12">
@@ -206,10 +287,10 @@
</div>
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
Level 1 of column
&lt;div class="row"&gt;
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;/div&gt;
@@ -219,7 +300,16 @@
</div>
</div>
<h2>Grid customization</h2>
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>Grid customization</h1>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
@@ -281,8 +371,8 @@
<div class="span6">
<h2>Fixed layout</h2>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
<div class="minicon-layout">
<div class="minicon-layout-body"></div>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;body&gt;
@@ -295,9 +385,9 @@
<div class="span6">
<h2>Fluid layout</h2>
<p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<div class="minicon-layout fluid">
<div class="minicon-layout-sidebar"></div>
<div class="minicon-layout-body"></div>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt;

2
docs/templates/layout.mustache vendored
View File

@@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

16
docs/templates/pages/base-css.mustache vendored
View File

@@ -1045,7 +1045,7 @@
<fieldset>
<legend>{{_i}}Extending form controls{{/i}}</legend>
<div class="control-group">
<label class="control-label">{{_i}}Form sizes{{/i}}</label>
<label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
@@ -1074,6 +1074,15 @@
<p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
</div>
</div>
<div class="control-group">
<label class="control-label">{{_i}}Alternate sizes{{/i}}</label>
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<p class="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
<div class="controls">
@@ -1209,6 +1218,11 @@
<td><a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a></td>
<td><code>.btn-danger</code></td>
<td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
</tr>
<tr>
<td><a class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</a></td>
<td><code>.btn-inverse</code></td>
<td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
</tr>
</tbody>
</table>

60
docs/templates/pages/components.mustache vendored
View File

@@ -22,6 +22,7 @@
</ul>
</li>
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
<li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
@@ -171,7 +172,9 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /btn-toolbar -->
<hr>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
</div>
<div class="span8">
<h3>{{_i}}Example markup{{/i}}</h3>
@@ -695,7 +698,9 @@
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
</ul>
</li>
</ul>
@@ -734,12 +739,14 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.{{/i}}</p>
<h3>{{_i}}Fixed navbar{{/i}}</h3>
<p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
&lt;/div&gt;
</pre>
<p>{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<h3>{{_i}}Brand name{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<pre class="prettyprint linenums">
@@ -1059,6 +1066,55 @@
<!-- Typographic components
================================================== -->
<section id="typography">
<div class="page-header">
<h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
</div>
<h2>{{_i}}Hero unit{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt;
&lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
&lt;p&gt;{{_i}}Tagline{{/i}}&lt;/p&gt;
&lt;p&gt;
&lt;a class="btn btn-primary btn-large"&gt;
{{_i}}Learn more{{/i}}
&lt;/a&gt;
&lt;/p&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<div class="hero-unit">
<h1>{{_i}}Hello, world!{{/i}}</h1>
<p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
<p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
</div>
</div>
</div><!-- /row -->
<h2>{{_i}}Page header{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
</div>
<div class="span8">
<pre class="prettyprint linenums">
&lt;div class="page-haeder"&gt;
&lt;h1&gt;{{_i}}Example page header{{/i}}&lt;/h1&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
</section>
<!-- Thumbnails
================================================== -->
<section id="thumbnails">

2
docs/templates/pages/javascript.mustache vendored
View File

@@ -854,7 +854,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</p>
</div>
<hr>
<h2>{{_i}}Using bootstrap-alerts.js{{/i}}</h2>
<h2>{{_i}}Using bootstrap-alert.js{{/i}}</h2>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$(".alert").alert()</pre>
<h3>{{_i}}Markup{{/i}}</h3>

116
docs/templates/pages/scaffolding.mustache vendored
View File

@@ -5,7 +5,9 @@
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#grid-system">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#fluidGridSystem">{{_i}}Fluid gird system{{/i}}</a></li>
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ul>
@@ -16,12 +18,11 @@
<!-- Grid system
================================================== -->
<section id="grid-system">
<section id="gridSystem">
<div class="page-header">
<h1>{{_i}}Grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
<h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
</div>
<h2>{{_i}}Default grid{{/i}}</h2>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
@@ -112,7 +113,87 @@
</div>
</div>
</div>
<h3>{{_i}}Fluid example{{/i}}</h3>
</div><!-- /span6 -->
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span12"&gt;
{{_i}}Level 1 of column{{/i}}
&lt;div class="row"&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
</div>
<h2>{{_i}}Fluid columns{{/i}}</h2>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row-fluid show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Percents, not pixels{{/i}}</h3>
<p>{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Fluid rows{{/i}}</h3>
<p>{{_i}}Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Markup{{/i}}</h3>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
<h2>{{_i}}Fluid nesting{{/i}}</h2>
<div class="row">
<div class="span6">
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}</p>
<div class="row-fluid show-grid">
<div class="span12">
@@ -130,10 +211,10 @@
</div>
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
{{_i}}Level 1 of column{{/i}}
&lt;div class="row"&gt;
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;/div&gt;
@@ -143,7 +224,16 @@
</div>
</div>
<h2>{{_i}}Grid customization{{/i}}</h2>
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>{{_i}}Grid customization{{/i}}</h1>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
@@ -205,8 +295,8 @@
<div class="span6">
<h2>{{_i}}Fixed layout{{/i}}</h2>
<p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.{{/i}}</p>
<div class="minicon-layout">
<div class="minicon-layout-body"></div>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;body&gt;
@@ -219,9 +309,9 @@
<div class="span6">
<h2>{{_i}}Fluid layout{{/i}}</h2>
<p>{{_i}}<code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
<div class="minicon-layout fluid">
<div class="minicon-layout-sidebar"></div>
<div class="minicon-layout-body"></div>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt;

2
docs/upgrading.html
View File

@@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->