mirror of
https://github.com/jasny/bootstrap.git
synced 2026-04-24 03:00:49 -04:00
Merge branch '3.0.0-wip' into bs3-flatten
This commit is contained in:
Mark Otto
209
docs/templates/pages/components.mustache
vendored
209
docs/templates/pages/components.mustache
vendored
@@ -1121,29 +1121,25 @@
|
||||
<h2>Standard pagination</h2>
|
||||
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
|
||||
<div class="bs-docs-example">
|
||||
<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>
|
||||
<ul class="pagination">
|
||||
<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>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li><a href="#">Prev</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="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">Prev</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="#">Next</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
|
||||
@@ -1155,43 +1151,37 @@
|
||||
<h3>Disabled and active states</h3>
|
||||
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-centered">
|
||||
<ul>
|
||||
<li class="disabled"><a href="#">«</a></li>
|
||||
<li class="active"><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>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><a href="#">«</a></li>
|
||||
<li class="active"><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>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="disabled"><a href="#">Prev</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><a href="#">Prev</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
<p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="disabled"><span>Prev</span></li>
|
||||
<li class="active"><span>1</span></li>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><span>Prev</span></li>
|
||||
<li class="active"><span>1</span></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
<div>
|
||||
<ul class="pagination pagination-large">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
@@ -1201,19 +1191,8 @@
|
||||
<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>
|
||||
<div>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
@@ -1223,8 +1202,19 @@
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
<div>
|
||||
<ul class="pagination pagination-small">
|
||||
<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>
|
||||
<ul class="pagination pagination-mini">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
@@ -1236,65 +1226,18 @@
|
||||
</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>Alignment</h3>
|
||||
<p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-centered">
|
||||
<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-centered">
|
||||
<ul class="pagination pagination-large">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-right">
|
||||
<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-right">
|
||||
</ul>
|
||||
<ul class="pagination">
|
||||
...
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="pagination pagination-small">
|
||||
...
|
||||
</ul>
|
||||
<ul class="pagination pagination-mini">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
|
||||
@@ -1410,7 +1353,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Important
|
||||
Danger
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">6</span>
|
||||
@@ -1419,28 +1362,6 @@
|
||||
<code><span class="badge badge-danger">6</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Info
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-info">8</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-info">8</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Inverse
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-inverse">10</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-inverse">10</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -2070,7 +1991,7 @@ class="muted"
|
||||
</pre>
|
||||
|
||||
<h4>.clearfix</h4>
|
||||
<p>Clear the <code>float</code> on any element.</p>
|
||||
<p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
class="clearfix"
|
||||
</pre>
|
||||
|
||||
130
docs/templates/pages/css.mustache
vendored
130
docs/templates/pages/css.mustache
vendored
@@ -242,20 +242,31 @@
|
||||
|
||||
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
|
||||
<h3>Alignment classes</h3>
|
||||
<p>Easily realign text to components with text alignment classes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</pre>
|
||||
|
||||
<h3>Emphasis classes</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
</pre>
|
||||
|
||||
@@ -1408,17 +1419,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<h3 id="forms-extending-sizes">Control sizing</h3>
|
||||
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
|
||||
|
||||
<h4>Block level inputs</h4>
|
||||
<p>Make any <code><input></code> or <code><textarea></code> element behave like a block level element.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls">
|
||||
<input class="input-block-level" type="text" placeholder=".input-block-level">
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<input class="input-block-level" type="text" placeholder=".input-block-level">
|
||||
</pre>
|
||||
|
||||
<h4>Relative sizing</h4>
|
||||
<p>Create larger or smaller form controls that match button sizes.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
@@ -1478,38 +1478,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
...
|
||||
</select>
|
||||
</pre>
|
||||
|
||||
<p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
|
||||
<p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls controls-row">
|
||||
<input class="span5" type="text" placeholder=".span5">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="controls">
|
||||
<input class="span5" type="text" placeholder=".span5">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
</div>
|
||||
...
|
||||
</pre>
|
||||
|
||||
<h3>Uneditable inputs</h3>
|
||||
@@ -1562,7 +1556,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<h2>Form control states</h2>
|
||||
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
|
||||
|
||||
<h3>Input focus</h3>
|
||||
<h3 id="forms-input-focus">Input focus</h3>
|
||||
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
|
||||
@@ -1571,8 +1565,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
|
||||
</pre>
|
||||
|
||||
<h3>Invalid inputs</h3>
|
||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p>
|
||||
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
|
||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="span3" type="email" placeholder="test@example.com" required>
|
||||
</form>
|
||||
@@ -1580,7 +1574,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<input class="span3" type="email" required>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled inputs</h3>
|
||||
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
|
||||
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
|
||||
@@ -1589,7 +1583,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled fieldsets</h3>
|
||||
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
|
||||
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<fieldset disabled>
|
||||
@@ -1626,59 +1620,51 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Validation states</h3>
|
||||
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
|
||||
<h3 id="forms-validation">Validation states</h3>
|
||||
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
|
||||
<ul>
|
||||
<li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
|
||||
<li>Add .input-with-feedback to the field(s) in question</li>
|
||||
</ul>
|
||||
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p>
|
||||
|
||||
<form class="bs-docs-example form-horizontal">
|
||||
<div class="control-group warning">
|
||||
<div class="control-group has-warning">
|
||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputWarning">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group error">
|
||||
<div class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
<input type="text" class="input-with-feedback" id="inputError">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group info">
|
||||
<label class="control-label" for="inputInfo">Input with info</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputInfo">
|
||||
<span class="help-inline">Username is taken</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group success">
|
||||
<div class="control-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputSuccess">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
<input type="text" class="input-with-feedback" id="inputSuccess">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="control-group warning">
|
||||
<div class="control-group has-warning">
|
||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputWarning">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group error">
|
||||
<div class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
<input type="text" class="input-with-feedback" id="inputError">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group success">
|
||||
<div class="control-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputSuccess">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
<input type="text" class="input-with-feedback id="inputSuccess"">
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
169
docs/templates/pages/extend.mustache
vendored
169
docs/templates/pages/extend.mustache
vendored
@@ -1,169 +0,0 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Extending Bootstrap</h1>
|
||||
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
|
||||
<div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#built-with-less"><i class="glyphicon-chevron-right"></i> Built with LESS</a></li>
|
||||
<li><a href="#compiling"><i class="glyphicon-chevron-right"></i> Compiling Bootstrap</a></li>
|
||||
<li><a href="#static-assets"><i class="glyphicon-chevron-right"></i> Use as static assets</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span9">
|
||||
|
||||
|
||||
|
||||
<!-- BUILT WITH LESS
|
||||
================================================== -->
|
||||
<section id="built-with-less">
|
||||
<div class="page-header">
|
||||
<h1>Built with LESS</h1>
|
||||
</div>
|
||||
|
||||
<img style="float: right; height: 36px; margin: 10px 20px 20px" src="assets/img/less-logo-large.png" alt="LESS CSS">
|
||||
<p class="lead">Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
|
||||
|
||||
<h3>Why LESS?</h3>
|
||||
<p>One of Bootstrap's creators wrote a quick <a href="http://www.wordsbyf.at/2012/03/08/why-less/">blog post about this</a>, summarized here:</p>
|
||||
<ul>
|
||||
<li>Bootstrap compiles faster ~6x faster with Less compared to Sass</li>
|
||||
<li>Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.</li>
|
||||
<li>Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.</li>
|
||||
</ul>
|
||||
|
||||
<h3>What's included?</h3>
|
||||
<p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
|
||||
|
||||
<h3>Learn more</h3>
|
||||
<p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- COMPILING LESS AND BOOTSTRAP
|
||||
================================================== -->
|
||||
<section id="compiling">
|
||||
<div class="page-header">
|
||||
<h1>Compiling Bootstrap with Less</h1>
|
||||
</div>
|
||||
|
||||
<p class="lead">Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.</p>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
|
||||
</div>
|
||||
|
||||
<h2>Tools for compiling</h2>
|
||||
|
||||
<h3>Node with makefile</h3>
|
||||
<p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
|
||||
<pre>$ npm install -g less jshint recess uglify-js</pre>
|
||||
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
|
||||
<p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
|
||||
|
||||
<h3>Command line</h3>
|
||||
<p>Install the LESS command line tool via Node and run the following command:</p>
|
||||
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
|
||||
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
|
||||
|
||||
<h3>JavaScript</h3>
|
||||
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p>
|
||||
<pre class="prettyprint">
|
||||
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
|
||||
<script src="/path/to/less.js"></script>
|
||||
</pre>
|
||||
<p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
|
||||
|
||||
<h3>Unofficial Mac app</h3>
|
||||
<p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
|
||||
|
||||
<h3>More apps</h3>
|
||||
<h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
|
||||
<p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
|
||||
<h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
|
||||
<p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
|
||||
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
|
||||
<p>Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Static assets
|
||||
================================================== -->
|
||||
<section id="static-assets">
|
||||
<div class="page-header">
|
||||
<h1>Use as static assets</h1>
|
||||
</div>
|
||||
<p class="lead"><a href="./getting-started.html">Quickly start</a> any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.</p>
|
||||
|
||||
<h3>Setup file structure</h3>
|
||||
<p>Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:</p>
|
||||
<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>Utilize starter template</h3>
|
||||
<p>Copy the following base HTML to get started.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="public/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<!-- Bootstrap -->
|
||||
<script src="public/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
|
||||
<h3>Layer on custom code</h3>
|
||||
<p>Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="public/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Project -->
|
||||
<link href="public/css/application.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<!-- Bootstrap -->
|
||||
<script src="public/js/bootstrap.min.js"></script>
|
||||
<!-- Project -->
|
||||
<script src="public/js/application.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
</div>{{! /span9 }}
|
||||
</div>{{! row}}
|
||||
|
||||
</div>{{! /.container }}
|
||||
3
docs/templates/pages/index.mustache
vendored
3
docs/templates/pages/index.mustache
vendored
@@ -12,9 +12,6 @@
|
||||
<li>
|
||||
<a href="./getting-started.html#examples" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);"{{/production}}>Examples</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a>
|
||||
</li>
|
||||
<li>Version 3.0.0</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user