We have included a makefile with convenience methods for working with the Bootstrap library.
We have included a makefile with convenience methods for working with the Bootstrap library.
+**build** - `make`
+**build** - `make`
This will run the less compiler on the bootstrap lib and regenerate the docs dir.
Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. Requires lessc and uglify-js. <ahref="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs »</a>
The lessc compiler is required for this command to run.
+**watch** - `make watch`
+**watch** - `make watch`
This is a convenience method for watching your less files and automatically building them whenever you save.
This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
<pclass="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
<p><spanclass="label label-info">Heads up!</span> Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
</div>
</div>
<divclass="span8">
<divclass="span8">
<h3>Example markup</h3>
<h3>Example markup</h3>
...
@@ -771,7 +774,9 @@
...
@@ -771,7 +774,9 @@
<li><ahref="#">Another action</a></li>
<li><ahref="#">Another action</a></li>
<li><ahref="#">Something else here</a></li>
<li><ahref="#">Something else here</a></li>
<liclass="divider"></li>
<liclass="divider"></li>
<liclass="nav-header">Nav header</li>
<li><ahref="#">Separated link</a></li>
<li><ahref="#">Separated link</a></li>
<li><ahref="#">One more separated link</a></li>
</ul>
</ul>
</li>
</li>
</ul>
</ul>
...
@@ -810,12 +815,14 @@
...
@@ -810,12 +815,14 @@
</div>
</div>
</div>
</div>
</pre>
</pre>
<p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
<h3>Fixed navbar</h3>
<p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-fixed-top">
...
...
</div>
</div>
</pre>
</pre>
<p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div>
<h2>Hero unit</h2>
<divclass="row">
<divclass="span4">
<p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
<h3>Markup</h3>
<p>Wrap your content in a <code>div</code> like so:</p>
<preclass="prettyprint linenums">
<div class="hero-unit">
<h1>Heading</h1>
<p>Tagline</p>
<p>
<a class="btn btn-primary btn-large">
Learn more
</a>
</p>
</div>
</pre>
</div>
<divclass="span8">
<divclass="hero-unit">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p>A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
<h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
</div>
<h2>Fluid columns</h2>
<divclass="row-fluid show-grid">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span4">4</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span8">8</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span6">6</div>
<divclass="span6">6</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span12">12</div>
</div>
<divclass="row">
<divclass="span4">
<h3>Percents, not pixels</h3>
<p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
</div>
<divclass="span4">
<h3>Fluid rows</h3>
<p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
</div>
<divclass="span4">
<h3>Markup</h3>
<preclass="prettyprint linenums">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</pre>
</div>
</div><!-- /row -->
<h2>Fluid nesting</h2>
<divclass="row">
<divclass="span6">
<p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
<p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p>
<divclass="minicon-layout">
<divclass="mini-layout">
<divclass="minicon-layout-body"></div>
<divclass="mini-layout-body"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<body>
<body>
...
@@ -295,9 +385,9 @@
...
@@ -295,9 +385,9 @@
<divclass="span6">
<divclass="span6">
<h2>Fluid layout</h2>
<h2>Fluid layout</h2>
<p><code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<p><code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<pclass="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p>
<li><ahref="#">{{_i}}One more separated link{{/i}}</a></li>
</ul>
</ul>
</li>
</li>
</ul>
</ul>
...
@@ -734,12 +739,14 @@
...
@@ -734,12 +739,14 @@
</div>
</div>
</div>
</div>
</pre>
</pre>
<p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.{{/i}}</p>
<h3>{{_i}}Fixed navbar{{/i}}</h3>
<p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-fixed-top">
...
...
</div>
</div>
</pre>
</pre>
<p>{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<h3>{{_i}}Brand name{{/i}}</h3>
<h3>{{_i}}Brand name{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<h1>{{_i}}Typographic components{{/i}}<small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
</div>
<h2>{{_i}}Hero unit{{/i}}</h2>
<divclass="row">
<divclass="span4">
<p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
<preclass="prettyprint linenums">
<div class="hero-unit">
<h1>{{_i}}Heading{{/i}}</h1>
<p>{{_i}}Tagline{{/i}}</p>
<p>
<a class="btn btn-primary btn-large">
{{_i}}Learn more{{/i}}
</a>
</p>
</div>
</pre>
</div>
<divclass="span8">
<divclass="hero-unit">
<h1>{{_i}}Hello, world!{{/i}}</h1>
<p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
<p>{{_i}}A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
<pclass="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<pclass="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
</div>
<h2>{{_i}}Fluid columns{{/i}}</h2>
<divclass="row-fluid show-grid">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span4">4</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span8">8</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span6">6</div>
<divclass="span6">6</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span12">12</div>
</div>
<divclass="row">
<divclass="span4">
<h3>{{_i}}Percents, not pixels{{/i}}</h3>
<p>{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Fluid rows{{/i}}</h3>
<p>{{_i}}Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Markup{{/i}}</h3>
<preclass="prettyprint linenums">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</pre>
</div>
</div><!-- /row -->
<h2>{{_i}}Fluid nesting{{/i}}</h2>
<divclass="row">
<divclass="span6">
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}</p>
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}</p>
<p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.{{/i}}</p>
<p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.{{/i}}</p>
<divclass="minicon-layout">
<divclass="mini-layout">
<divclass="minicon-layout-body"></div>
<divclass="mini-layout-body"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<body>
<body>
...
@@ -219,9 +309,9 @@
...
@@ -219,9 +309,9 @@
<divclass="span6">
<divclass="span6">
<h2>{{_i}}Fluid layout{{/i}}</h2>
<h2>{{_i}}Fluid layout{{/i}}</h2>
<p>{{_i}}<code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
<p>{{_i}}<code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
