mirror of
https://github.com/jasny/bootstrap.git
synced 2026-02-07 12:35:02 -05:00
Merge branch '2.1.2-wip' into box-sizing-exercise
Conflicts: docs/assets/css/bootstrap-responsive.css docs/assets/css/bootstrap.css docs/base-css.html docs/templates/pages/base-css.mustache less/forms.less less/mixins.less
This commit is contained in:
Mark Otto
2
docs/templates/layout.mustache
vendored
2
docs/templates/layout.mustache
vendored
@@ -70,7 +70,7 @@
|
||||
<a href="./components.html">{{_i}}Components{{/i}}</a>
|
||||
</li>
|
||||
<li class="{{javascript}}">
|
||||
<a href="./javascript.html">{{_i}}Javascript{{/i}}</a>
|
||||
<a href="./javascript.html">{{_i}}JavaScript{{/i}}</a>
|
||||
</li>
|
||||
<li class="{{customize}}">
|
||||
<a href="./customize.html">{{_i}}Customize{{/i}}</a>
|
||||
|
||||
148
docs/templates/pages/base-css.mustache
vendored
148
docs/templates/pages/base-css.mustache
vendored
@@ -1068,21 +1068,21 @@
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||
<input id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-append">
|
||||
<input id="appendedInput" size="16" type="text">
|
||||
<input id="appendedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||
<input id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input id="appendedInput" size="16" type="text">
|
||||
<input id="appendedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</pre>
|
||||
@@ -1092,14 +1092,14 @@
|
||||
<form class="bs-docs-example form-inline">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span>
|
||||
<input id="appendedPrependedInput" size="16" type="text">
|
||||
<input id="appendedPrependedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span>
|
||||
<input id="appendedPrependedInput" size="16" type="text">
|
||||
<input id="appendedPrependedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</pre>
|
||||
@@ -1108,27 +1108,141 @@
|
||||
<p>{{_i}}Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButton" size="16" type="text">
|
||||
<input id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
<br>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
</pre>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" size="16" type="text">
|
||||
<input id="appendedInputButtons" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButton" size="16" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" size="16" type="text">
|
||||
<input id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>{{_i}}Button dropdowns{{/i}}</h4>
|
||||
<p>{{_i}}{{/i}}</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
|
||||
<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>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-append -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" type="text">
|
||||
<input class="span2" id="appendedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
{{_i}}Action{{/i}}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
|
||||
<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>
|
||||
</div><!-- /btn-group -->
|
||||
<input class="span2" id="prependedDropdownButton" type="text">
|
||||
</div><!-- /input-prepend -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
{{_i}}Action{{/i}}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input class="span2" id="prependedDropdownButton" type="text">
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
|
||||
<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>
|
||||
</div><!-- /btn-group -->
|
||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
|
||||
<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>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-prepend input-append -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
{{_i}}Action{{/i}}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
{{_i}}Action{{/i}}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>{{_i}}Search form{{/i}}</h4>
|
||||
@@ -1346,9 +1460,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group info">
|
||||
<label class="control-label" for="inputError">{{_i}}Input with info{{/i}}</label>
|
||||
<label class="control-label" for="inputInfo">{{_i}}Input with info{{/i}}</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<input type="text" id="inputInfo">
|
||||
<span class="help-inline">{{_i}}Username is taken{{/i}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
238
docs/templates/pages/components.mustache
vendored
238
docs/templates/pages/components.mustache
vendored
@@ -27,6 +27,7 @@
|
||||
<li><a href="#thumbnails"><i class="icon-chevron-right"></i> {{_i}}Thumbnails{{/i}}</a></li>
|
||||
<li><a href="#alerts"><i class="icon-chevron-right"></i> {{_i}}Alerts{{/i}}</a></li>
|
||||
<li><a href="#progress"><i class="icon-chevron-right"></i> {{_i}}Progress bars{{/i}}</a></li>
|
||||
<li><a href="#media"><i class="icon-chevron-right"></i> {{_i}}Media object{{/i}}</a></li>
|
||||
<li><a href="#misc"><i class="icon-chevron-right"></i> {{_i}}Misc{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -42,7 +43,7 @@
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Example{{/i}}</h2>
|
||||
<p>{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown javascript plugin</a>.{{/i}}</p>
|
||||
<p>{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
@@ -224,7 +225,7 @@
|
||||
|
||||
|
||||
<h4>{{_i}}Checkbox and radio flavors{{/i}}</h4>
|
||||
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
|
||||
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.{{/i}}</p>
|
||||
|
||||
<h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
|
||||
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
|
||||
@@ -365,9 +366,9 @@
|
||||
</div><!-- /btn-toolbar -->
|
||||
</div>{{! /example }}
|
||||
|
||||
<h3>{{_i}}Requires javascript{{/i}}</h3>
|
||||
<h3>{{_i}}Requires JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
|
||||
<p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
|
||||
<p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.{{/i}}</p>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
@@ -616,7 +617,7 @@
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Disabled state{{/i}}</h3>
|
||||
<p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.{{/i}}</p>
|
||||
<p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom JavaScript is implemented to prevent those clicks.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-pills">
|
||||
<li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
|
||||
@@ -675,7 +676,7 @@
|
||||
|
||||
|
||||
<h2>{{_i}}Dropdowns{{/i}}</h2>
|
||||
<p>{{_i}}Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
|
||||
<p>{{_i}}Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
|
||||
<div class="bs-docs-example">
|
||||
@@ -840,7 +841,7 @@
|
||||
<p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
|
||||
|
||||
<h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
|
||||
<p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
|
||||
<p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the JavaScript docs page</a>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Tabbable in any direction{{/i}}</h3>
|
||||
|
||||
@@ -1086,7 +1087,7 @@
|
||||
<p>{{_i}}Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Using dropdowns{{/i}}</h3>
|
||||
<p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
|
||||
<p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
<li class="dropdown">
|
||||
@@ -1100,7 +1101,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>{{_i}}Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
|
||||
<p>{{_i}}Visit the <a href="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Text{{/i}}</h3>
|
||||
<p>{{_i}}Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.{{/i}}</p>
|
||||
@@ -1194,7 +1195,7 @@
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||
<div class="nav-collapse">
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||
@@ -1250,7 +1251,7 @@
|
||||
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
|
||||
|
||||
<!-- {{_i}}Everything you want hidden at 940px or less, place within here{{/i}} -->
|
||||
<div class="nav-collapse">
|
||||
<div class="nav-collapse collapse">
|
||||
<!-- .nav, .navbar-search, .navbar-form, etc -->
|
||||
</div>
|
||||
|
||||
@@ -1278,7 +1279,7 @@
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||
<div class="nav-collapse subnav-collapse">
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||
@@ -1437,6 +1438,77 @@
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Sizes{{/i}}</h3>
|
||||
<p>{{_i}}Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-small">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-small">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Alignment{{/i}}</h3>
|
||||
@@ -1874,6 +1946,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Alerts
|
||||
================================================== -->
|
||||
<section id="alerts">
|
||||
@@ -1902,7 +1975,7 @@
|
||||
<p>{{_i}}Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
|
||||
<pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">×</button></pre>
|
||||
|
||||
<h3>{{_i}}Dismiss alerts via javascript{{/i}}</h3>
|
||||
<h3>{{_i}}Dismiss alerts via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.{{/i}}</p>
|
||||
|
||||
|
||||
@@ -1976,6 +2049,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Progress bars
|
||||
================================================== -->
|
||||
<section id="progress">
|
||||
@@ -2122,6 +2196,144 @@
|
||||
|
||||
|
||||
|
||||
<!-- Media object
|
||||
================================================== -->
|
||||
<section id="media">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Media object{{/i}}</h1>
|
||||
</div>
|
||||
<p class="lead">{{_i}}Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}Default example{{/i}}</h2>
|
||||
<p>{{_i}}The default media allow to float a media object (images, video, audio) to the left or right of a content block.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>{{! /.bs-docs-example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
...
|
||||
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Media list{{/i}}</h2>
|
||||
<p>{{_i}}With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<a class="pull-right" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
...
|
||||
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Miscellaneous
|
||||
================================================== -->
|
||||
|
||||
3
docs/templates/pages/customize.mustache
vendored
3
docs/templates/pages/customize.mustache
vendored
@@ -3,7 +3,7 @@
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>{{_i}}Customize and download{{/i}}</h1>
|
||||
<p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.{{/i}}</p>
|
||||
<p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.{{/i}}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
</div><!-- /span -->
|
||||
<div class="span3">
|
||||
<h3>{{_i}}Miscellaneous{{/i}}</h3>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> {{_i}}Media object{{/i}}</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> {{_i}}Wells{{/i}}</label>
|
||||
<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>
|
||||
|
||||
26
docs/templates/pages/extend.mustache
vendored
26
docs/templates/pages/extend.mustache
vendored
@@ -76,7 +76,7 @@
|
||||
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
|
||||
<p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Javascript{{/i}}</h3>
|
||||
<h3>{{_i}}JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}<a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.{{/i}}</p>
|
||||
<pre class="prettyprint">
|
||||
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
|
||||
@@ -109,18 +109,18 @@
|
||||
|
||||
<h3>{{_i}}Setup file structure{{/i}}</h3>
|
||||
<p>{{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}</p>
|
||||
<pre class="prettyprint">
|
||||
app/
|
||||
├── layouts/
|
||||
└── templates/
|
||||
public/
|
||||
├── css/
|
||||
│ ├── bootstrap.min.css
|
||||
├── js/
|
||||
│ ├── bootstrap.min.js
|
||||
└── img/
|
||||
├── glyphicons-halflings.png
|
||||
└── glyphicons-halflings-white.png
|
||||
<pre>
|
||||
<span class="icon-folder-open"></span> app/
|
||||
<span class="icon-folder-open"></span> layouts/
|
||||
<span class="icon-folder-open"></span> templates/
|
||||
<span class="icon-folder-open"></span> public/
|
||||
<span class="icon-folder-open"></span> css/
|
||||
<span class="icon-file"></span> bootstrap.min.css
|
||||
<span class="icon-folder-open"></span> js/
|
||||
<span class="icon-file"></span> bootstrap.min.js
|
||||
<span class="icon-folder-open"></span> img/
|
||||
<span class="icon-file"></span> glyphicons-halflings.png
|
||||
<span class="icon-file"></span> glyphicons-halflings-white.png
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Utilize starter template{{/i}}</h3>
|
||||
|
||||
40
docs/templates/pages/getting-started.mustache
vendored
40
docs/templates/pages/getting-started.mustache
vendored
@@ -67,10 +67,9 @@
|
||||
├── js/
|
||||
│ ├── bootstrap.js
|
||||
│ ├── bootstrap.min.js
|
||||
├── img/
|
||||
│ ├── glyphicons-halflings.png
|
||||
│ ├── glyphicons-halflings-white.png
|
||||
└── README.md
|
||||
└── img/
|
||||
├── glyphicons-halflings.png
|
||||
└── glyphicons-halflings-white.png
|
||||
</pre>
|
||||
<p>{{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.{{/i}}</p>
|
||||
<p>{{_i}}Please note that all JavaScript plugins require jQuery to be included.{{/i}}</p>
|
||||
@@ -93,11 +92,11 @@
|
||||
<p>{{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <a href="http://glyphicons.com">Glyphicons</a>, a great little icon set.{{/i}}</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/components.html">{{_i}}Components{{/i}}</a></h4>
|
||||
<p>{{_i}}Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.{{/i}}</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}Javascript plugins{{/i}}</a></h4>
|
||||
<p>{{_i}}Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}JavaScript plugins{{/i}}</a></h4>
|
||||
<p>{{_i}}Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}List of components{{/i}}</h2>
|
||||
<p>{{_i}}Together, the <strong>Components</strong> and <strong>Javascript plugins</strong> sections provide the following interface elements:{{/i}}</p>
|
||||
<p>{{_i}}Together, the <strong>Components</strong> and <strong>JavaScript plugins</strong> sections provide the following interface elements:{{/i}}</p>
|
||||
<ul>
|
||||
<li>{{_i}}Button groups{{/i}}</li>
|
||||
<li>{{_i}}Button dropdowns{{/i}}</li>
|
||||
@@ -149,7 +148,7 @@
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
@@ -190,8 +189,31 @@
|
||||
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Starter template{{/i}}</h4>
|
||||
<p>{{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}</p>
|
||||
<p>{{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}</p>
|
||||
</li>
|
||||
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/marketing-narrow.html">
|
||||
<img src="assets/img/examples/bootstrap-example-marketing-narrow.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Narrow marketing{{/i}}</h4>
|
||||
<p>{{_i}}Slim, lightweight marketing template for small projects or teams.{{/i}}</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/signin.html">
|
||||
<img src="assets/img/examples/bootstrap-example-signin.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Sign in{{/i}}</h4>
|
||||
<p>{{_i}}Barebones sign in form with custom, larger form controls and a flexible layout.{{/i}}</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/carousel.html">
|
||||
<img src="assets/img/examples/bootstrap-example-carousel.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Carousel jumbotron{{/i}}</h4>
|
||||
<p>{{_i}}A more interactive riff on the basic marketing site featuring a prominent carousel.{{/i}}</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
16
docs/templates/pages/index.mustache
vendored
16
docs/templates/pages/index.mustache
vendored
@@ -1,12 +1,12 @@
|
||||
<div class="jumbotron masthead">
|
||||
<div class="container">
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
|
||||
<h1>{{_i}}Bootstrap{{/i}}</h1>
|
||||
<p>{{_i}}Sleek, intuitive, and powerful front-end framework for faster and easier web development.{{/i}}</p>
|
||||
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.2']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
|
||||
<ul class="masthead-links">
|
||||
<li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li>
|
||||
<li><a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a></li>
|
||||
<li>Version 2.1.2</li>
|
||||
<li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>{{_i}}GitHub project{{/i}}</a></li>
|
||||
<li><a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>{{_i}}Extend{{/i}}</a></li>
|
||||
<li>{{_i}}Version 2.1.2{{/i}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -51,7 +51,7 @@
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-bootstrap-features.png">
|
||||
<h2>{{_i}}Packed with features.{{/i}}</h2>
|
||||
<p>{{_i}}A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
|
||||
<p>{{_i}}A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,8 +72,8 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
|
||||
<a class="thumbnail" href="http://www.gathercontent.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/gathercontent.png" alt="Gather Content">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
|
||||
18
docs/templates/pages/javascript.mustache
vendored
18
docs/templates/pages/javascript.mustache
vendored
@@ -49,7 +49,7 @@
|
||||
<p>{{_i}}That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:{{/i}}
|
||||
<pre class="prettyprint linenums">$('body').off('.data-api')</pre>
|
||||
|
||||
<p>{{_i}}Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:{{/i}}</p>
|
||||
<p>{{_i}}Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('body').off('.alert.data-api')</pre>
|
||||
|
||||
<h3>{{_i}}Programmatic API{{/i}}</h3>
|
||||
@@ -61,10 +61,10 @@ $("#myModal").modal() // initialized with defaults
|
||||
$("#myModal").modal({ keyboard: false }) // initialized with no keyboard
|
||||
$("#myModal").modal('show') // initializes and invokes show immediately</p>
|
||||
</pre>
|
||||
<p>{{_i}}Each plugin also exposes it's raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.{{/i}}</p>
|
||||
<p>{{_i}}Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Events{{/i}}</h3>
|
||||
<p>{{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and it's past participle form (ex. <code>shown</code>) is trigger on the completion of an action.{{/i}}</p>
|
||||
<p>{{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.{{/i}}</p>
|
||||
<p>{{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').on('show', function (e) {
|
||||
@@ -183,7 +183,7 @@ $('#myModal').on('show', function (e) {
|
||||
<a href="#myModal" role="button" class="btn" data-toggle="modal">{{_i}}Launch demo modal{{/i}}</a>
|
||||
|
||||
<-- Modal -->
|
||||
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Modal header</h3>
|
||||
@@ -855,6 +855,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a>
|
||||
</div>
|
||||
|
||||
<h4>{{_i}}Four directions{{/i}}</h4>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
</ul>
|
||||
</div>{{! /example }}
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user