Runs the recess compiler to rebuild the `/less` files and compiles the docs pages. Requires recess and uglify-js.<ahref="http://twitter.github.com/bootstrap/extend.html#compiling">Read more in our docs »</a>
Runs the recess compiler to rebuild the `/less` files and compiles the docs pages. Requires recess and uglify-js.
+**test** - `make test`
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/)(used for ci). Depends on having phantomjs installed.
<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>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<divclass="bs-docs-example">
<divclass="pagination pagination-large">
<ul>
<div>
<ulclass="pagination pagination-large">
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
...
...
@@ -1269,19 +1259,8 @@
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination">
<ul>
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination pagination-small">
<ul>
<div>
<ulclass="pagination">
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
...
...
@@ -1291,8 +1270,8 @@
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination pagination-mini">
<ul>
<div>
<ulclass="pagination pagination-small">
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
...
...
@@ -1302,53 +1281,8 @@
<li><ahref="#">»</a></li>
</ul>
</div>
</div>
<preclass="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>
<p>Clear the <code>float</code> on any element.</p>
<p>Clear the <code>float</code> on any element. Utilizes <ahref="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
<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>
@@ -1538,38 +1538,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>
@@ -1622,7 +1616,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>
<h3id="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>
<formclass="bs-docs-example form-inline">
<inputclass="input-xlarge focused"id="focusedInput"type="text"value="This is focused...">
...
...
@@ -1631,8 +1625,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>
<h3id="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>
<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>
<formclass="bs-docs-example form-inline">
<fieldsetdisabled>
...
...
@@ -1686,59 +1680,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>
<h3id="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>
<formclass="bs-docs-example form-horizontal">
<divclass="control-group warning">
<divclass="control-group has-warning">
<labelclass="control-label"for="inputWarning">Input with warning</label>
<divclass="controls">
<inputtype="text"id="inputWarning">
<spanclass="help-inline">Something may have gone wrong</span>
<imgstyle="float: right; height: 36px; margin: 10px 20px 20px"src="assets/img/less-logo-large.png"alt="LESS CSS">
<pclass="lead">Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <ahref="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 <ahref="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 <ahref="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
<pclass="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>
<divclass="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 <ahref="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>
<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><ahref="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>
<p>Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the <ahref="https://github.com/Paratron/SimpLESS"target="_blank">source code is on GitHub</a>.</p>
<pclass="lead"><ahref="./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>
<ahref="https://twitter.com/share"class="twitter-share-button"data-url="http://twitter.github.com/bootstrap/"data-count="horizontal"data-via="twbootstrap"data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
<p>Designed and built with all the love in the world by <ahref="http://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="http://twitter.com/fat"target="_blank">@fat</a>.</p>
<p>Code licensed under <ahref="http://www.apache.org/licenses/LICENSE-2.0"target="_blank">Apache License v2.0</a>, documentation under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><ahref="http://glyphicons.com">Glyphicons Free</a> licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<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>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<divclass="bs-docs-example">
<divclass="pagination pagination-large">
<ul>
<div>
<ulclass="pagination pagination-large">
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
...
...
@@ -1201,19 +1191,8 @@
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination">
<ul>
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination pagination-small">
<ul>
<div>
<ulclass="pagination">
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
...
...
@@ -1223,8 +1202,8 @@
<li><ahref="#">»</a></li>
</ul>
</div>
<divclass="pagination pagination-mini">
<ul>
<div>
<ulclass="pagination pagination-small">
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
...
...
@@ -1234,53 +1213,8 @@
<li><ahref="#">»</a></li>
</ul>
</div>
</div>
<preclass="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>
<p>Clear the <code>float</code> on any element.</p>
<p>Clear the <code>float</code> on any element. Utilizes <ahref="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
<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>
@@ -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>
@@ -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>
<h3id="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>
<formclass="bs-docs-example form-inline">
<inputclass="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>
<h3id="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>
<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>
<formclass="bs-docs-example form-inline">
<fieldsetdisabled>
...
...
@@ -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>
<h3id="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>
<formclass="bs-docs-example form-horizontal">
<divclass="control-group warning">
<divclass="control-group has-warning">
<labelclass="control-label"for="inputWarning">Input with warning</label>
<divclass="controls">
<inputtype="text"id="inputWarning">
<spanclass="help-inline">Something may have gone wrong</span>
<imgstyle="float: right; height: 36px; margin: 10px 20px 20px"src="assets/img/less-logo-large.png"alt="LESS CSS">
<pclass="lead">Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <ahref="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 <ahref="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 <ahref="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
<pclass="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>
<divclass="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 <ahref="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>
<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><ahref="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>
<p>Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the <ahref="https://github.com/Paratron/SimpLESS"target="_blank">source code is on GitHub</a>.</p>
<pclass="lead"><ahref="./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>
