Skip to content

B
bootstrap
Commit a33d45f3 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge branch '3.0.0-wip' into bs3-flatten

parents c11f41ba 24f7df15
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 447 additions and 1369 deletions
README.md
View file @ a33d45f3
......@@ -63,7 +63,7 @@ $ npm install recess connect uglify-js jshint -g
```
+ **build** - `make`
Runs the recess compiler to rebuild the `/less` files and compiles the docs pages. Requires recess and uglify-js. <a href="http://twitter.github.com/bootstrap/extend.html#compiling">Read more in our docs &raquo;</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.
......
docs/assets/css/bootstrap.css
View file @ a33d45f3
This diff is collapsed.
docs/components.html
View file @ a33d45f3
......@@ -1189,29 +1189,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="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<ul class="pagination">
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;ul class="pagination"&gt;
&lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
......@@ -1223,43 +1219,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="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="pagination"&gt;
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</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">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;ul class="pagination"&gt;
&lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</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="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
......@@ -1269,19 +1259,8 @@
<li><a href="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination">
<ul>
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination pagination-small">
<ul>
<div>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
......@@ -1291,8 +1270,8 @@
<li><a href="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination pagination-mini">
<ul>
<div>
<ul class="pagination pagination-small">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
......@@ -1302,53 +1281,8 @@
<li><a href="#">&raquo;</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination pagination-large"&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination"&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination pagination-small"&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination pagination-mini"&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</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="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination pagination-centered"&gt;
...
&lt;/div&gt;
</pre>
<div class="bs-docs-example">
<div class="pagination pagination-right">
<ul>
<div>
<ul class="pagination pagination-mini">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
......@@ -1360,9 +1294,18 @@
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination pagination-right"&gt;
&lt;ul class="pagination pagination-large"&gt;
...
&lt;/div&gt;
&lt;/ul&gt;
&lt;ul class="pagination"&gt;
...
&lt;/ul&gt;
&lt;ul class="pagination pagination-small"&gt;
...
&lt;/ul&gt;
&lt;ul class="pagination pagination-mini"&gt;
...
&lt;/ul&gt;
</pre>
......@@ -1478,7 +1421,7 @@
</tr>
<tr>
<td>
Important
Danger
</td>
<td>
<span class="badge badge-danger">6</span>
......@@ -1487,28 +1430,6 @@
<code>&lt;span class="badge badge-danger"&gt;6&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Info
</td>
<td>
<span class="badge badge-info">8</span>
</td>
<td>
<code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Inverse
</td>
<td>
<span class="badge badge-inverse">10</span>
</td>
<td>
<code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
......@@ -2138,7 +2059,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>
......
docs/css.html
View file @ a33d45f3
This diff is collapsed.
docs/extend.html deleted 100644 → 0
View file @ c11f41ba
This diff is collapsed.
docs/index.html
View file @ a33d45f3
......@@ -80,9 +80,6 @@
<li>
<a href="./getting-started.html#examples" >Examples</a>
</li>
<li>
<a href="./extend.html" >Extend</a>
</li>
<li>Version 3.0.0</li>
</ul>
</div>
......
docs/templates/pages/components.mustache
View file @ a33d45f3
......@@ -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="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<ul class="pagination">
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;ul class="pagination"&gt;
&lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</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="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;ul class="pagination"&gt;
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</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">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;ul class="pagination"&gt;
&lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</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="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
......@@ -1201,19 +1191,8 @@
<li><a href="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination">
<ul>
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination pagination-small">
<ul>
<div>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
......@@ -1223,8 +1202,8 @@
<li><a href="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination pagination-mini">
<ul>
<div>
<ul class="pagination pagination-small">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
......@@ -1234,53 +1213,8 @@
<li><a href="#">&raquo;</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination pagination-large"&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination"&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination pagination-small"&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination pagination-mini"&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</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="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination pagination-centered"&gt;
...
&lt;/div&gt;
</pre>
<div class="bs-docs-example">
<div class="pagination pagination-right">
<ul>
<div>
<ul class="pagination pagination-mini">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
......@@ -1292,9 +1226,18 @@
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination pagination-right"&gt;
&lt;ul class="pagination pagination-large"&gt;
...
&lt;/div&gt;
&lt;/ul&gt;
&lt;ul class="pagination"&gt;
...
&lt;/ul&gt;
&lt;ul class="pagination pagination-small"&gt;
...
&lt;/ul&gt;
&lt;ul class="pagination pagination-mini"&gt;
...
&lt;/ul&gt;
</pre>
......@@ -1410,7 +1353,7 @@
</tr>
<tr>
<td>
Important
Danger
</td>
<td>
<span class="badge badge-danger">6</span>
......@@ -1419,28 +1362,6 @@
<code>&lt;span class="badge badge-danger"&gt;6&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Info
</td>
<td>
<span class="badge badge-info">8</span>
</td>
<td>
<code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Inverse
</td>
<td>
<span class="badge badge-inverse">10</span>
</td>
<td>
<code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</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>
......
docs/templates/pages/css.mustache
View file @ a33d45f3
This diff is collapsed.
docs/templates/pages/extend.mustache deleted 100644 → 0
View file @ c11f41ba
<!-- 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>&lt;head&gt;</code>.</p>
<pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</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">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
&lt;!-- Bootstrap --&gt;
&lt;link href="public/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Hello, world!&lt;/h1&gt;
&lt;!-- Bootstrap --&gt;
&lt;script src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</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">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
&lt;!-- Bootstrap --&gt;
&lt;link href="public/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;!-- Project --&gt;
&lt;link href="public/css/application.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Hello, world!&lt;/h1&gt;
&lt;!-- Bootstrap --&gt;
&lt;script src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;!-- Project --&gt;
&lt;script src="public/js/application.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</section>
</div>{{! /span9 }}
</div>{{! row}}
</div>{{! /.container }}
docs/templates/pages/index.mustache
View file @ a33d45f3
......@@ -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>
......
less/badges.less
View file @ a33d45f3
......@@ -44,12 +44,6 @@ a.badge {
// Success (green)
&-success { background-color: @state-success-text; }
&-success[href] { background-color: darken(@state-success-text, 10%); }
// Info (turquoise)
&-info { background-color: @state-info-text; }
&-info[href] { background-color: darken(@state-info-text, 10%); }
// Inverse (black)
&-inverse { background-color: @grayDark; }
&-inverse[href] { background-color: darken(@grayDark, 10%); }
}
// Quick fix for labels/badges in buttons
......
less/forms.less
View file @ a33d45f3
......@@ -292,10 +292,6 @@ textarea[class*="span"],
margin-right: 0;
}
.controls-row {
#grid > .input(@grid-column-width, @grid-gutter-width, @grid-row-width);
}
// Ensure input-prepend/append never wraps
.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
......@@ -310,21 +306,6 @@ textarea[class*="span"],
.uneditable-input[class*="span"] {
height: @input-height;
}
// Control row for multiple inputs per line
.controls-row {
.clearfix(); // Clear the float from controls
}
// Float to collapse white-space for proper grid alignment
.controls-row [class*="span"] {
float: left;
}
// Explicity set top padding on all checkboxes/radios, not just first-child
.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
padding-top: 5px;
}
......@@ -362,21 +343,17 @@ input[type="checkbox"] {
// --------------------------
// Warning
.control-group.warning {
.has-warning {
.formFieldState(@state-warning-text, @state-warning-text, @state-warning-background);
}
// Error
.control-group.error {
.has-error {
.formFieldState(@state-error-text, @state-error-text, @state-error-background);
}
// Success
.control-group.success {
.has-success {
.formFieldState(@state-success-text, @state-success-text, @state-success-background);
}
// Success
.control-group.info {
.formFieldState(@state-info-text, @state-info-text, @state-info-background);
}
// HTML5 invalid states
// Shares styles with the .control-group.error above
......@@ -429,7 +406,6 @@ select:focus:invalid {
// Input groups
// --------------------------------------------------
......@@ -538,3 +514,39 @@ select:focus:invalid {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
// Horizontal forms
// --------------------------------------------------
.form-horizontal {
// Increase spacing between groups
.control-group {
position: relative;
margin-bottom: @line-height-base;
.clearfix();
input,
select,
textarea,
.uneditable-input {
margin-bottom: 0;
}
}
// Float the labels left
.control-group > .control-label {
float: left;
width: @component-offset-horizontal - 20;
padding-top: 6px;
text-align: right;
}
// Move over all input controls and content over
.control-group > .controls {
margin-left: @component-offset-horizontal;
}
}
less/glyphicons.less
View file @ a33d45f3
......@@ -21,11 +21,11 @@
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphiconshalflings-regular.eot');
src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphiconshalflings-regular.woff') format('woff'),
url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'),
url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot');
src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
font-style: normal;
font-weight: normal;
}
......
less/mixins.less
View file @ a33d45f3
......@@ -122,33 +122,14 @@
// FORMS
// --------------------------------------------------
// Block level inputs
.input-block-level() {
display: block;
width: 100%;
}
// Mixin for form field states
.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
// Set the text color
.control-label,
.help-block,
.help-inline {
// Color the label text
.control-label {
color: @text-color;
}
// Style inputs accordingly
.checkbox,
.radio,
input,
select,
textarea {
color: @text-color;
}
input,
select,
textarea {
// Set the border and box shadow on specific inputs to match
.input-with-feedback {
padding-right: 32px; // to account for the feedback icon
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
......@@ -157,13 +138,6 @@
.box-shadow(@shadow);
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on,
.input-append .add-on {
color: @text-color;
background-color: @background-color;
border-color: @text-color;
}
}
......
less/navs.less
View file @ a33d45f3
......@@ -243,9 +243,6 @@
.tabbable {
.clearfix();
}
.tab-content {
overflow: auto; // prevent content from running below tabs
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
......
less/pagination.less
View file @ a33d45f3
//
// Pagination (multiple pages)
// --------------------------------------------------
// Space out pagination from surrounding content
.pagination {
margin: @line-height-base 0;
}
.pagination ul {
// Allow for text-based alignment
display: inline-block;
// Reset default ul styles
margin-left: 0;
margin-bottom: 0;
// Visuals
margin: @line-height-base 0;
border-radius: @border-radius-base;
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
.pagination ul > li {
.pagination > li {
display: inline; // Remove list-style and block-level defaults
}
.pagination ul > li > a,
.pagination ul > li > span {
.pagination > li > a,
.pagination > li > span {
float: left; // Collapse white-space
padding: 4px 12px;
line-height: @line-height-base;
......@@ -30,61 +20,50 @@
border: 1px solid @pagination-border;
border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span {
.pagination > li > a:hover,
.pagination > .active > a,
.pagination > .active > span {
background-color: @pagination-background-active;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
.pagination > .active > a,
.pagination > .active > span {
color: @grayLight;
cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover {
.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover {
color: @grayLight;
background-color: transparent;
cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
.pagination > li:first-child > a,
.pagination > li:first-child > span {
border-left-width: 1px;
.border-left-radius(@border-radius-base);
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
.pagination > li:last-child > a,
.pagination > li:last-child > span {
.border-right-radius(@border-radius-base);
}
// Alignment
// --------------------------------------------------
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
// Sizing
// --------------------------------------------------
// Large
.pagination-large {
ul > li > a,
ul > li > span {
> li > a,
> li > span {
padding: @padding-large;
font-size: @font-size-large;
}
ul > li:first-child > a,
ul > li:first-child > span {
> li:first-child > a,
> li:first-child > span {
.border-left-radius(@border-radius-large);
}
ul > li:last-child > a,
ul > li:last-child > span {
> li:last-child > a,
> li:last-child > span {
.border-right-radius(@border-radius-large);
}
}
......@@ -92,28 +71,28 @@
// Small and mini
.pagination-mini,
.pagination-small {
ul > li:first-child > a,
ul > li:first-child > span {
> li:first-child > a,
> li:first-child > span {
.border-left-radius(@border-radius-small);
}
ul > li:last-child > a,
ul > li:last-child > span {
> li:last-child > a,
> li:last-child > span {
.border-right-radius(@border-radius-small);
}
}
// Small
.pagination-small {
ul > li > a,
ul > li > span {
> li > a,
> li > span {
padding: @padding-small;
font-size: @font-size-small;
}
}
// Mini
.pagination-mini {
ul > li > a,
ul > li > span {
> li > a,
> li > span {
padding: @padding-mini;
font-size: @font-size-mini;
}
......
less/responsive-767px-max.less
View file @ a33d45f3
......@@ -57,7 +57,7 @@
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
.input-block-level();
width: 100%;
}
// But don't let it screw up prepend/append inputs
.input-prepend input,
......@@ -67,9 +67,6 @@
display: inline-block; // redeclare so they don't wrap to new lines
width: auto;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 0;
}
// Modals
.modal {
......
less/type.less
View file @ a33d45f3
......@@ -37,12 +37,13 @@ a.text-warning:hover { color: darken(@state-warning-text, 10%); }
.text-error { color: @state-error-text; }
a.text-error:hover { color: darken(@state-error-text, 10%); }
.text-info { color: @state-info-text; }
a.text-info:hover { color: darken(@state-info-text, 10%); }
.text-success { color: @state-success-text; }
a.text-success:hover { color: darken(@state-success-text, 10%); }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
// Headings
// -------------------------
......
less/utilities.less
View file @ a33d45f3
......@@ -40,11 +40,3 @@
.affix {
position: fixed;
}
// Forms
// -------------------------
.control-block-level {
.input-block-level();
}
less/variables.less
View file @ a33d45f3
......@@ -78,17 +78,17 @@
@btn-background: #fff;
@btn-background-highlight: #eaeaea;
@btn-background-primary: @link-color;
@btn-background-primary-highlight: darken(@link-color, 10%);
@btn-background-primary: @link-color;
@btn-background-primary-highlight: darken(@link-color, 10%);
@btn-background-success: #62c462;
@btn-background-success-highlight: #51a351;
@btn-background-success: #62c462;
@btn-background-success-highlight: #51a351;
@btn-background-warning: lighten(#f89406, 15%);
@btn-background-warning-highlight: #f89406;
@btn-background-warning: lighten(#f89406, 15%);
@btn-background-warning-highlight: #f89406;
@btn-background-danger: #ee5f5b;
@btn-background-danger-highlight: #bd362f;
@btn-background-danger: #ee5f5b;
@btn-background-danger-highlight: #bd362f;
// Forms
......@@ -113,12 +113,12 @@
@dropdown-background: #fff;
@dropdown-border: rgba(0,0,0,.2);
@dropdown-divider-top: #e5e5e5;
@dropdown-divider-bottom: #fff;
@dropdown-divider-top: #e5e5e5;
@dropdown-divider-bottom: #fff;
@dropdown-link-color: @grayDark;
@dropdown-link-color-hover: #fff;
@dropdown-link-color-active: #fff;
@dropdown-link-color: @grayDark;
@dropdown-link-color-hover: #fff;
@dropdown-link-color-active: #fff;
@dropdown-link-background-active: @link-color;
@dropdown-link-background-hover: @dropdown-link-background-active;
......@@ -142,6 +142,11 @@
@zindex-modal: 1050;
// Glyphicons font path
// -------------------------
@glyphicons-font-path: "../fonts";
// Navbar
// -------------------------
......@@ -186,8 +191,7 @@
// -------------------------
@pagination-background: #fff;
@pagination-background-active: #f5f5f5;
@pagination-background-active: #f5f5f5;
@pagination-border: #ddd;
......@@ -221,32 +225,32 @@
// Tooltips and popovers
// -------------------------
@tooltip-color: #fff;
@tooltip-background: rgba(0,0,0,.9);
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-background;
@tooltip-color: #fff;
@tooltip-background: rgba(0,0,0,.9);
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-background;
@popover-background: #fff;
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@popover-title-background: darken(@popover-background, 3%);
@popover-background: #fff;
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@popover-title-background: darken(@popover-background, 3%);
// Special enhancement for popovers
@popover-arrow-outer-width: @popover-arrow-width + 1;
@popover-arrow-outer-color: rgba(0,0,0,.25);
@popover-arrow-outer-width: @popover-arrow-width + 1;
@popover-arrow-outer-color: rgba(0,0,0,.25);
// Miscellaneous
// -------------------------
// Hr border color
@hr-border: @grayLighter;
@hr-border: @grayLighter;
// Horizontal forms & lists
@component-offset-horizontal: 180px;
@component-offset-horizontal: 180px;
// Wells
@well-background: #f5f5f5;
@well-background: #f5f5f5;
......@@ -254,17 +258,17 @@
// --------------------------------------------------
// Default 940px grid
@grid-columns: 12;
@grid-columns: 12;
@grid-column-width: 60px;
@grid-gutter-width: 20px;
@grid-row-width: (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1));
// 1200px min
@grid-column-width-1200: 70px;
@grid-gutter-width-1200: 30px;
@grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1));
@grid-column-width-1200: 70px;
@grid-gutter-width-1200: 30px;
@grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1));
// 768px-979px
@grid-column-width-768: 42px;
@grid-gutter-width-768: 20px;
@grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));
@grid-column-width-768: 42px;
@grid-gutter-width-768: 20px;
@grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment