mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

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

Browse Source
This commit is contained in:
Jacob Thornton
2012-01-29 13:16:02 -08:00
parent 49d565a6da 9fa8bde44d
commit 910e78d26a
37 changed files with 1341 additions and 976 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/templates/pages/base-css.mustache
Vendored
+30 -33
View File
@@ -880,22 +880,20 @@
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>{{_i}}What's included{{/i}}</h3>
<p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
<ul>
<li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
<li>{{_i}}checkbox{{/i}}</li>
<li>{{_i}}radio{{/i}}</li>
<li>{{_i}}select{{/i}}</li>
<li>{{_i}}multiple select{{/i}}</li>
<li>{{_i}}file input{{/i}}</li>
<li>{{_i}}textarea{{/i}}</li>
</ul>
<hr>
<h3>{{_i}}New defaults with v2.0{{/i}}</h3>
<p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
</div>
<h3>{{_i}}What's included{{/i}}</h3>
<p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
<ul>
<li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
<li>{{_i}}checkbox{{/i}}</li>
<li>{{_i}}radio{{/i}}</li>
<li>{{_i}}select{{/i}}</li>
<li>{{_i}}multiple select{{/i}}</li>
<li>{{_i}}file input{{/i}}</li>
<li>{{_i}}textarea{{/i}}</li>
</ul>
<hr>
<h3>{{_i}}New defaults with v2.0{{/i}}</h3>
<p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
</div>
</div>
@@ -975,19 +973,17 @@
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>{{_i}}Redesigned browser states{{/i}}</h3>
<p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.{{/i}}</p>
<hr>
<h3>{{_i}}Form validation{{/i}}</h3>
<p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.{{/i}}</p>
<h3>{{_i}}Redesigned browser states{{/i}}</h3>
<p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.{{/i}}</p>
<hr>
<h3>{{_i}}Form validation{{/i}}</h3>
<p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;fieldset
class="control-group error"&gt;
…
&lt;/fieldset&gt;
</pre>
</div>
</div>
</div>
@@ -1080,14 +1076,15 @@
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
<p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
<hr>
<h3>{{_i}}Checkboxes and radios{{/i}}</h3>
<p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
<p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
</div>
<h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
<p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
<hr>
<h3>{{_i}}Checkboxes and radios{{/i}}</h3>
<p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
<p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
<hr>
<h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
<p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
</div>
</div><!-- /row -->
</section>
@@ -1338,7 +1335,7 @@
</div>
</div>
<div class="alert alert-info">
{{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code> and on hover in the docs we show a light red background color show the icon's size.{{/i}}
{{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
</div>
<br>
@@ -1425,7 +1422,7 @@
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon envelope"></i></span>
<input class="span32" id="iconInput" size="16" type="text">
<input class="span2" id="iconInput" type="text">
</div>
</div>
</div>
docs/templates/pages/components.mustache
Vendored
+111 -78
View File
@@ -395,7 +395,7 @@
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="nav-header">{{_i}}List header{{/i}}</li>
<li class="active"><a href="#"><i class="icon home"></i> {{_i}}Home{{/i}}</a></li>
<li class="active"><a href="#"><i class="icon white home"></i> {{_i}}Home{{/i}}</a></li>
<li><a href="#"><i class="icon book"></i> {{_i}}Library{{/i}}</a></li>
<li><a href="#"><i class="icon pencil"></i> {{_i}}Applications{{/i}}</a></li>
<li class="nav-header">{{_i}}Another list header{{/i}}</li>
@@ -587,43 +587,50 @@
</div>
<h2>{{_i}}Static navbar example{{/i}}</h2>
<p>{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}</p>
<div class="navbar navbar-static">
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
<ul class="nav">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="vertical-divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="vertical-divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
@@ -633,7 +640,7 @@
<h3>{{_i}}Navbar scaffolding{{/i}}</h3>
<p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-static"&gt;
&lt;div class="navbar"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container"&gt;
...
@@ -641,7 +648,7 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>{{_i}}To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</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>
<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>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
@@ -661,7 +668,37 @@
&lt;input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"&gt;
&lt;/form&gt;
</pre>
</div>
<h3>{{_i}}Optional responsive variation{{/i}}</h3>
<p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="navbar"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container"&gt;
&lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
&lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
&lt;span class="i-bar"&gt;&lt;/span&gt;
&lt;span class="i-bar"&gt;&lt;/span&gt;
&lt;span class="i-bar"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
&lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
&lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
&lt;div class="nav-collapse"&gt;
&lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<div class="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>.
</div>
</div><!-- /.span -->
<div class="span4">
<h3>{{_i}}Nav links{{/i}}</h3>
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
@@ -691,9 +728,9 @@
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
</div>
</div>
<p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
@@ -898,34 +935,34 @@
</tr>
<tr>
<td>
<span class="label success">{{_i}}New{{/i}}</span>
<span class="label label-success">{{_i}}New{{/i}}</span>
</td>
<td>
<code>&lt;span class="label success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
<code>&lt;span class="label label-success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label warning">{{_i}}Warning{{/i}}</span>
<span class="label label-warning">{{_i}}Warning{{/i}}</span>
</td>
<td>
<code>&lt;span class="label warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
<code>&lt;span class="label label-warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label important">{{_i}}Important{{/i}}</span>
<span class="label label-important">{{_i}}Important{{/i}}</span>
</td>
<td>
<code>&lt;span class="label important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
<code>&lt;span class="label label-important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label info">{{_i}}Info{{/i}}</span>
<span class="label label-info">{{_i}}Info{{/i}}</span>
</td>
<td>
<code>&lt;span class="label info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
<code>&lt;span class="label label-info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
</td>
</tr>
</tbody>
@@ -948,22 +985,22 @@
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
@@ -974,7 +1011,7 @@
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -984,7 +1021,7 @@
</li>
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -1019,7 +1056,7 @@
&lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt;
&lt;a href="#" class="thumbnail"&gt;
&lt;img src="http://placehold.it/210x150" alt=""&gt;
&lt;img src="http://placehold.it/260x180" alt=""&gt;
&lt;/a&gt;
&lt;/li&gt;
...
@@ -1030,7 +1067,7 @@
&lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="http://placehold.it/210x150" alt=""&gt;
&lt;img src="http://placehold.it/260x180" alt=""&gt;
&lt;h5&gt;{{_i}}Thumbnail label{{/i}}&lt;/h5&gt;
&lt;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt;
&lt;/div&gt;
@@ -1045,32 +1082,32 @@
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/290x226" alt="">
<img src="http://placehold.it/360x268" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
</ul>
@@ -1198,12 +1235,12 @@
<div class="span4">
<h3>{{_i}}Striped{{/i}}</h3>
<p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
<div class="progress info striped">
<div class="progress progress-info progress-striped">
<div class="bar" style="width: 20%;"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="progress info
striped"&gt;
&lt;div class="progress progress-info
progress-striped"&gt;
&lt;div class="bar"
style="width: 20%;"&gt;&lt;/div&gt;
&lt;/div&gt;
@@ -1212,12 +1249,12 @@
<div class="span4">
<h3>{{_i}}Animated{{/i}}</h3>
<p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
<div class="progress danger active striped">
<div class="progress progress-danger progress-striped active">
<div class="bar" style="width: 45%"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="progress danger
striped active"&gt;
&lt;div class="progress progress-danger
progress-striped active"&gt;
&lt;div class="bar"
style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt;
@@ -1229,18 +1266,18 @@
<div class="row">
<div class="span4">
<h3>{{_i}}Additional colors{{/i}}</h3>
<p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p>
<p>{{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}</p>
<ul>
<li><code>.info</code></li>
<li><code>.success</code></li>
<li><code>.danger</code></li>
<li><code>.progress-info</code></li>
<li><code>.progress-success</code></li>
<li><code>.progress-danger</code></li>
</ul>
<p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Behavior{{/i}}</h3>
<p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
<p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
<p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Browser support{{/i}}</h3>
@@ -1287,7 +1324,3 @@
</div><!--/span-->
</div><!--/row-->
</section>
docs/templates/pages/download.mustache
Vendored
+1 -5
View File
@@ -63,12 +63,8 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
<!--
<h3>{{_i}}Responsive{{/i}}</h3>
<label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 480px{{/i}}</label>
<label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 768px{{/i}}</label>
<label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 1210px{{/i}}</label>
-->
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> {{_i}}Responsive layouts{{/i}}</label>
</div><!-- /span -->
</div><!-- /row -->
</section>
docs/templates/pages/examples.mustache
Vendored
+44 -14
View File
@@ -10,17 +10,47 @@
</header>
<!-- EXAMPLES
================================================== -->
<section id="examples">
<div class="page-header">
<h1>{{_i}}Examples from 1.x{{/i}}</h1>
</div>
<p><a href="../examples/container-app.html">Container app</a></p>
<p><a href="../examples/fluid.html">Fluid layout</a></p>
<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
<p><a href="../examples/hero.html">Hero marketing site</a></p>
</section>
<ul class="thumbnails bootstrap-examples">
<li class="span4">
<a href="../examples/hero.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Basic marketing site</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/fluid.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fluid layout</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/fluid-reverse.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fluid layout reversed</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/container-app.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Container application</h3>
<p></p>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fullscreen</h3>
<p></p>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Simple layout</h3>
<p></p>
</li>
</ul>
docs/templates/pages/index.mustache
Vendored
-12
View File
@@ -10,18 +10,6 @@
<a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
<a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap{{/i}}</a>
</p>
<div class="benefits">
<h4>{{_i}}Feature highlights{{/i}}</h4>
<ul>
<li><span>&#10004;</span> {{_i}}Built on LESS{{/i}}</li>
<li><span>&#10004;</span> {{_i}}Complete style guide docs{{/i}}</li>
<li><span>&#10004;</span> {{_i}}Fully responsive design{{/i}}</li>
<li><span>&#10004;</span> {{_i}}Small footprint (10kb gzipped){{/i}}</li>
<li><span>&#10004;</span> {{_i}}Support for IE7 and up{{/i}}</li>
<li><span>&#10004;</span> {{_i}}Custom jQuery plugins{{/i}}</li>
<li><span>&#10004;</span> {{_i}}Dozens of components{{/i}}</li>
</ul>
</div>
</div>
<ul class="quick-links">
docs/templates/pages/less.mustache
Vendored
+110 -132
View File
@@ -62,129 +62,33 @@
================================================== -->
<section id="variables">
<div class="page-header">
<h1>{{_i}}Bootstrap variables <small></small>{{/i}}</h1>
<h1>{{_i}}Bootstrap variables <small>LESS variables, their values, and usage guidelines</small>{{/i}}</h1>
</div>
<h3>{{_i}}Hyperlinks{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span2">{{_i}}Variable{{/i}}</th>
<th>{{_i}}Value{{/i}}</th>
<th>{{_i}}Usage{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@linkColor</code></td>
<td>#08c</td>
<td>{{_i}}Default link text color{{/i}}</td>
</tr>
<tr>
<td><code>@linkColorHover</code></td>
<td><code>darken(@linkColor, 15%)</code></td>
<td>{{_i}}Default link text hover color{{/i}}</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="span6">
<h3>{{_i}}Grayscale colors{{/i}}</h3>
<h3>{{_i}}Hyperlinks{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span2">{{_i}}Variable{{/i}}</th>
<th>{{_i}}Value{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@black</code></td>
<td>#000</td>
<td class="span2"><code>@linkColor</code></td>
<td>#08c</td>
<td>{{_i}}Default link text color{{/i}}</td>
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
</tr>
<tr>
<td><code>@grayDarker</code></td>
<td>#222</td>
</tr>
<tr>
<td><code>@grayDark</code></td>
<td>#333</td>
</tr>
<tr>
<td><code>@gray</code></td>
<td>#555</td>
</tr>
<tr>
<td><code>@grayLight</code></td>
<td>#999</td>
</tr>
<tr>
<td><code>@grayLighter</code></td>
<td>#eee</td>
</tr>
<tr>
<td><code>@white</code></td>
<td>#fff</td>
<td><code>@linkColorHover</code></td>
<td><code>darken(@linkColor, 15%)</code></td>
<td>{{_i}}Default link text hover color{{/i}}</td>
<td><span class="swatch" style="background-color: #005580;"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<h3>{{_i}}Accent colors{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span2">{{_i}}Variable{{/i}}</th>
<th>{{_i}}Value{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@blue</code></td>
<td>#049cdb</td>
</tr>
<tr>
<td><code>@green</code></td>
<td>#46a546</td>
</tr>
<tr>
<td><code>@red</code></td>
<td>#9d261d</td>
</tr>
<tr>
<td><code>@yellow</code></td>
<td>#ffc40d</td>
</tr>
<tr>
<td><code>@orange</code></td>
<td>#f89406</td>
</tr>
<tr>
<td><code>@pink</code></td>
<td>#c3325f</td>
</tr>
<tr>
<td><code>@purple</code></td>
<td>#7a43b6</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span6">
<h3>{{_i}}Grid system{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span2">{{_i}}Variable{{/i}}</th>
<th>{{_i}}Value{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@gridColumns</code></td>
<td class="span2"><code>@gridColumns</code></td>
<td>12</td>
</tr>
<tr>
@@ -201,19 +105,11 @@
</tr>
</tbody>
</table>
</div>
<div class="span6">
<h3>{{_i}}Typography{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span2">{{_i}}Variable{{/i}}</th>
<th>{{_i}}Value{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@baseFontSize</code></td>
<td class="span2"><code>@baseFontSize</code></td>
<td>13px</td>
</tr>
<tr>
@@ -228,6 +124,88 @@
</tbody>
</table>
</div>
<div class="span6">
<h3>{{_i}}Grayscale colors{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@black</code></td>
<td>#000</td>
<td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
</tr>
<tr>
<td><code>@grayDarker</code></td>
<td>#222</td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@grayDark</code></td>
<td>#333</td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@gray</code></td>
<td>#555</td>
<td><span class="swatch" style="background-color: #555;"></span></td>
</tr>
<tr>
<td><code>@grayLight</code></td>
<td>#999</td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@grayLighter</code></td>
<td>#eee</td>
<td><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td><code>@white</code></td>
<td>#fff</td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
</tbody>
</table>
<h3>{{_i}}Accent colors{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@blue</code></td>
<td>#049cdb</td>
<td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
</tr>
<tr>
<td><code>@green</code></td>
<td>#46a546</td>
<td><span class="swatch" style="background-color: #46a546;"></span></td>
</tr>
<tr>
<td><code>@red</code></td>
<td>#9d261d</td>
<td><span class="swatch" style="background-color: #9d261d;"></span></td>
</tr>
<tr>
<td><code>@yellow</code></td>
<td>#ffc40d</td>
<td><span class="swatch" style="background-color: #ffc40d;"></span></td>
</tr>
<tr>
<td><code>@orange</code></td>
<td>#f89406</td>
<td><span class="swatch" style="background-color: #f89406;"></span></td>
</tr>
<tr>
<td><code>@pink</code></td>
<td>#c3325f</td>
<td><span class="swatch" style="background-color: #c3325f;"></span></td>
</tr>
<tr>
<td><code>@purple</code></td>
<td>#7a43b6</td>
<td><span class="swatch" style="background-color: #7a43b6;"></span></td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /row -->
<h3>{{_i}}Components{{/i}}</h3>
@@ -239,6 +217,7 @@
<tr>
<td class="span3"><code>@primaryButtonBackground</code></td>
<td><code>@linkColor</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
</tr>
</tbody>
</table>
@@ -248,6 +227,7 @@
<tr>
<td class="span3"><code>@placeholderText</code></td>
<td><code>@grayLight</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
</tr>
</tbody>
</table>
@@ -257,26 +237,32 @@
<tr>
<td class="span3"><code>@navbarHeight</code></td>
<td>40px</td>
<td class="swatch-col"></td>
</tr>
<tr>
<td><code>@navbarBackground</code></td>
<td><code>@grayDarker</code></td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@navbarBackgroundHighlight</code></td>
<td><code>@grayDark</code></td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@navbarText</code></td>
<td><code>@grayLight</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColor</code></td>
<td><code>@grayLight</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@navbarLinkColorHover</code></td>
<td><code>@white</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
</tbody>
</table>
@@ -288,50 +274,42 @@
<tr>
<td class="span3"><code>@warningText</code></td>
<td>#f3edd2</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
</tr>
<tr>
<td><code>@warningBackground</code></td>
<td>#c09853</td>
</tr>
<tr>
<td><code>@warningBorder</code></td>
<td>#f3edd2</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td>
</tr>
<tr>
<td><code>@errorText</code></td>
<td>#b94a48</td>
<td><span class="swatch" style="background-color: #b94a48;"></span></td>
</tr>
<tr>
<td><code>@errorBackground</code></td>
<td>#f2dede</td>
</tr>
<tr>
<td><code>@errorBorder</code></td>
<td>#e9c7c7</td>
<td><span class="swatch" style="background-color: #f2dede;"></span></td>
</tr>
<tr>
<td><code>@successText</code></td>
<td>#468847</td>
<td><span class="swatch" style="background-color: #468847;"></span></td>
</tr>
<tr>
<td><code>@successBackground</code></td>
<td>#dff0d8</td>
</tr>
<tr>
<td><code>@successBorder</code></td>
<td>#cfe8c4</td>
<td><span class="swatch" style="background-color: #dff0d8;"></span></td>
</tr>
<tr>
<td><code>@infoText</code></td>
<td>#3a87ad</td>
<td><span class="swatch" style="background-color: #3a87ad;"></span></td>
</tr>
<tr>
<td><code>@infoBackground</code></td>
<td>#d9edf7</td>
</tr>
<tr>
<td><code>@infoBorder</code></td>
<td>#bfe1f2</td>
<td><span class="swatch" style="background-color: #d9edf7;"></span></td>
</tr>
</tbody>
</table>
docs/templates/pages/scaffolding.mustache
Vendored
+1 -2
View File
@@ -52,7 +52,6 @@
<div class="row show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
@@ -318,7 +317,7 @@
@media (min-width: 768px) and (max-width: 940px) { ... }
// {{_i}}Large desktop{{/i}}
@media (min-width: 1210px) { .. }
@media (min-width: 1200px) { .. }
</pre>
</div>
</div>
docs/templates/pages/upgrading.mustache
Vendored
+9
View File
@@ -114,6 +114,15 @@
<li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
<li>{{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}</li>
</ul>
<h3>{{_i}}Navbar (formerly topbar){{/i}}</h3>
<ul>
<li>{{_i}}Base class changed from <code>.topbar</code> to <code>.navbar</code>{{/i}}</li>
<li>{{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed){{/i}}</li>
<li>{{_i}}Added vertical dividers to top-level nav{{/i}}</li>
<li>{{_i}}Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.{{/i}}</li>
<li>{{_i}}Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.{{/i}}</li>
<li>{{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <a href="./components.html#navbar">See navbar docs</a> for how to utilize.{{/i}}</li>
</ul>
<h3>{{_i}}Dropdown menus{{/i}}</h3>
<ul>
<li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>