From ebd2215e494e77a0da3283c1006a5ac164b8e862 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Nov 2012 16:31:24 -0800 Subject: remove deleted css files, run make --- docs/css.html | 2506 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 2506 insertions(+) create mode 100644 docs/css.html (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html new file mode 100644 index 000000000..e9d42fb38 --- /dev/null +++ b/docs/css.html @@ -0,0 +1,2506 @@ + + + + + Css · Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + Bootstrap +
+ +
+
+
+ + +
+
+

CSS

+

Fundamental HTML elements styled and enhanced with extensible classes.

+
+
+ + +
+ + +
+
+ +
+
+ + + + +
+
+

Global settings

+
+ +

Requires HTML5 doctype

+

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

+
+<!DOCTYPE html>
+<html lang="en">
+  ...
+</html>
+
+ +

Typography and links

+

Bootstrap sets basic global display, typography, and link styles. Specifically, we:

+
    +
  • Remove margin on the body
    • +
  • Set background-color: white; on the body
    • +
  • Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base
    • +
  • Set the global link color via @link-color and apply link underlines only on :hover
    • +
+

These styles can be found within scaffolding.less.

+ +

Reset via Normalize

+

With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

+ +
+ + + + +
+
+

Default grid system

+
+ +

Live grid example

+

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

+
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
6
+
6
+
+
+
12
+
+
+ +

Basic grid HTML

+

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

+
+<div class="row">
+  <div class="span4">...</div>
+  <div class="span8">...</div>
+</div>
+
+

Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

+ +

Offsetting columns

+

Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

+
+
+
4
+
4 offset 4
+
+
+
3 offset 3
+
3 offset 3
+
+
+
6 offset 6
+
+
+
+<div class="row">
+  <div class="span4">...</div>
+  <div class="span4 offset4">...</div>
+</div>
+
+ + +

Nesting columns

+

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

+
+
+ Level 1 column +
+
+ Level 2 +
+
+ Level 2 +
+
+
+
+
+<div class="row">
+  <div class="span9">
+    Level 1 column
+    <div class="row">
+      <div class="span6">Level 2</div>
+      <div class="span3">Level 2</div>
+    </div>
+  </div>
+</div>
+
+
+ + + + + +
+
+

Typography

+
+ +

Headings

+

All HTML headings, <h1> through <h6> are available.

+
+

h1. Heading 1

+

h2. Heading 2

+

h3. Heading 3

+

h4. Heading 4

+
h5. Heading 5
+
h6. Heading 6
+
+ +

Body copy

+

Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).

+
+

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

+

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+
+ 
<p>...</p>
+ +

Lead body copy

+

Make a paragraph stand out by adding .lead.

+
+

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

+
+ 
<p class="lead">...</p>
+ +

Built with Less

+

The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

+ + +
+ + +

Emphasis

+

Make use of HTML's default emphasis tags with lightweight styles.

+ +

<small>

+

For de-emphasizing inline or blocks of text, use the small tag.

+
+

This line of text is meant to be treated as fine print.

+
+
+<p>
+  <small>This line of text is meant to be treated as fine print.</small>
+</p>
+
+ +

Bold

+

For emphasizing a snippet of text with a heavier font-weight.

+
+

The following snippet of text is rendered as bold text.

+
+ 
<strong>rendered as bold text</strong>
+ +

Italics

+

For emphasizing a snippet of text with italics.

+
+

The following snippet of text is rendered as italicized text.

+
+ 
<em>rendered as italicized text</em>
+ +

Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

+ +

Emphasis classes

+

Convey meaning through color with a handful of emphasis utility classes.

+
+

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

+

Etiam porta sem malesuada magna mollis euismod.

+

Donec ullamcorper nulla non metus auctor fringilla.

+

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+
+
+<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>
+
+ + +
+ + +

Abbreviations

+

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

+ +

<abbr>

+

For expanded text on long hover of an abbreviation, include the title attribute.

+
+

An abbreviation of the word attribute is attr.

+
+ 
<abbr title="attribute">attr</abbr>
+ +

<abbr class="initialism">

+

Add .initialism to an abbreviation for a slightly smaller font-size.

+
+

HTML is the best thing since sliced bread.

+
+ 
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
+ + +
+ + +

Addresses

+

Present contact information for the nearest ancestor or the entire body of work.

+ +

<address>

+

Preserve formatting by ending all lines with <br>.

+
+
+ Twitter, Inc.
+ 795 Folsom Ave, Suite 600
+ San Francisco, CA 94107
+ P: (123) 456-7890 +
+
+ Full Name
+ first.last@example.com +
+
+
+<address>
+  <strong>Twitter, Inc.</strong><br>
+  795 Folsom Ave, Suite 600<br>
+  San Francisco, CA 94107<br>
+  <abbr title="Phone">P:</abbr> (123) 456-7890
+</address>
+
+<address>
+  <strong>Full Name</strong><br>
+  <a href="mailto:#">first.last@example.com</a>
+</address>
+
+ + +
+ + +

Blockquotes

+

For quoting blocks of content from another source within your document.

+ +

Default blockquote

+

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+
+
+<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+</blockquote>
+
+ +

Blockquote options

+

Style and content changes for simple variations on a standard blockquote.

+ +

Naming a source

+

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+ Someone famous in Source Title +
+
+
+<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
+</blockquote>
+
+ +

Alternate displays

+

Use .pull-right for a floated, right-aligned blockquote.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+ Someone famous in Source Title +
+
+
+<blockquote class="pull-right">
+  ...
+</blockquote>
+
+ + +
+ + + +

Lists

+ +

Unordered

+

A list of items in which the order does not explicitly matter.

+
+
    +
  • Lorem ipsum dolor sit amet
    • +
  • Consectetur adipiscing elit
    • +
  • Integer molestie lorem at massa
    • +
  • Facilisis in pretium nisl aliquet
    • +
  • Nulla volutpat aliquam velit +
      +
    • Phasellus iaculis neque
      • +
    • Purus sodales ultricies
      • +
    • Vestibulum laoreet porttitor sem
      • +
    • Ac tristique libero volutpat at
      • +
    +
    • +
  • Faucibus porta lacus fringilla vel
    • +
  • Aenean sit amet erat nunc
    • +
  • Eget porttitor lorem
    • +
+
+
+<ul>
+  <li>...</li>
+</ul>
+
+ +

Ordered

+

A list of items in which the order does explicitly matter.

+
+
    +
  1. Lorem ipsum dolor sit amet
    2. +
  2. Consectetur adipiscing elit
    3. +
  3. Integer molestie lorem at massa
    4. +
  4. Facilisis in pretium nisl aliquet
    5. +
  5. Nulla volutpat aliquam velit
    6. +
  6. Faucibus porta lacus fringilla vel
    7. +
  7. Aenean sit amet erat nunc
    8. +
  8. Eget porttitor lorem
    9. +
+
+
+<ol>
+  <li>...</li>
+</ol>
+
+ +

Unstyled

+

Remove the default list-style and left padding on list items (immediate children only).

+
+
    +
  • Lorem ipsum dolor sit amet
    • +
  • Consectetur adipiscing elit
    • +
  • Integer molestie lorem at massa
    • +
  • Facilisis in pretium nisl aliquet
    • +
  • Nulla volutpat aliquam velit +
      +
    • Phasellus iaculis neque
      • +
    • Purus sodales ultricies
      • +
    • Vestibulum laoreet porttitor sem
      • +
    • Ac tristique libero volutpat at
      • +
    +
    • +
  • Faucibus porta lacus fringilla vel
    • +
  • Aenean sit amet erat nunc
    • +
  • Eget porttitor lorem
    • +
+
+
+<ul class="list-unstyled">
+  <li>...</li>
+</ul>
+
+ +

Inline

+

Place all list items on a single line with inline-block and some light padding.

+
+
    +
  • Lorem ipsum
    • +
  • Phasellus iaculis
    • +
  • Nulla volutpat
    • +
+
+
+<ul class="list-inline">
+  <li>...</li>
+</ul>
+
+ +

Description

+

A list of terms with their associated descriptions.

+
+
+
Description lists
+
A description list is perfect for defining terms.
+
Euismod
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+
Donec id elit non mi porta gravida at eget metus.
+
Malesuada porta
+
Etiam porta sem malesuada magna mollis euismod.
+
+
+
+<dl>
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+
+ +

Horizontal description

+

Make terms and descriptions in <dl> line up side-by-side.

+
+
+
Description lists
+
A description list is perfect for defining terms.
+
Euismod
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+
Donec id elit non mi porta gravida at eget metus.
+
Malesuada porta
+
Etiam porta sem malesuada magna mollis euismod.
+
Felis euismod semper eget lacinia
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
+
+
+<dl class="dl-horizontal">
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+
+

+ Heads up! + Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout. +

+
+ + + + +
+
+

Code

+
+ +

Inline

+

Wrap inline snippets of code with <code>.

+
+ For example, <section> should be wrapped as inline. +
+
+For example, <code><section></code> should be wrapped as inline.
+
+ +

Basic block

+

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

+
+ 
<p>Sample text here...</p>
+
+
+<pre>
+  &lt;p&gt;Sample text here...&lt;/p&gt;
+</pre>
+
+

Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

+

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

+
+ + + + +
+
+

Tables

+
+ +

Default styles

+

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+<table class="table">
+  …
+</table>
+
+ + +
+ + +

Optional classes

+

Add any of the following classes to the .table base class.

+ +

.table-striped

+

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE8).

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+<table class="table table-striped">
+  …
+</table>
+
+ +

.table-bordered

+

Add borders and rounded corners to the table.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
+
+
+<table class="table table-bordered">
+  …
+</table>
+
+ +

.table-hover

+

Enable a hover state on table rows within a <tbody>.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+
+
+<table class="table table-hover">
+  …
+</table>
+
+ +

.table-condensed

+

Makes tables more compact by cutting cell padding in half.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+
+
+<table class="table table-condensed">
+  …
+</table>
+
+ + +
+ + +

Optional row classes

+

Use contextual classes to color table rows.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassDescription
+ .success + Indicates a successful or positive action.
+ .error + Indicates a dangerous or potentially negative action.
+ .warning + Indicates a warning that might need attention.
+ .info + Used as an alternative to the default styles.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#ProductPayment TakenStatus
1TB - Monthly01/04/2012Approved
2TB - Monthly02/04/2012Declined
3TB - Monthly03/04/2012Pending
4TB - Monthly04/04/2012Call in to confirm
+
+
+...
+  <tr class="success">
+    <td>1</td>
+    <td>TB - Monthly</td>
+    <td>01/04/2012</td>
+    <td>Approved</td>
+  </tr>
+...
+
+ + +
+ + +

Supported table markup

+

List of supported table HTML elements and how they should be used.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TagDescription
+ <table> + + Wrapping element for displaying data in a tabular format +
+ <thead> + + Container element for table header rows (<tr>) to label table columns +
+ <tbody> + + Container element for table rows (<tr>) in the body of the table +
+ <tr> + + Container element for a set of table cells (<td> or <th>) that appears on a single row +
+ <td> + + Default table cell +
+ <th> + + Special table cell for column (or row, depending on scope and placement) labels
+ Must be used within a <thead> +
+ <caption> + + Description or summary of what the table holds, especially useful for screen readers +
+
+<table>
+  <caption>...</caption>
+  <thead>
+    <tr>
+      <th>...</th>
+      <th>...</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>...</td>
+      <td>...</td>
+    </tr>
+  </tbody>
+</table>
+
+ +
+ + + + +
+
+

Forms

+
+ +

Default styles

+

Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.

+
+
+ Legend + + +

Example block-level help text here.

+
+ +
+ +
+
+
+<form>
+  <fieldset>
+    <legend>Legend</legend>
+    <label>Label name</label>
+    <input type="text" placeholder="Type something…">
+    <span class="help-block">Example block-level help text here.</span>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Check me out
+      </label>
+    </div>
+    <button type="submit" class="btn">Submit</button>
+  </fieldset>
+</form>
+
+ + +
+ + +

Optional layouts

+

Included with Bootstrap are three optional form layouts for common use cases.

+ +

Search form

+

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

+
+ + +
+
+<form class="form-search">
+  <input type="text" class="span3 search-query">
+  <button type="submit" class="btn">Search</button>
+</form>
+
+ +

Inline form

+

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

+
+ + +
+ +
+ +
+
+<form class="form-inline">
+  <input type="text" class="span3" placeholder="Email">
+  <input type="password" class="span3" placeholder="Password">
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Remember me
+      </label>
+    </div>
+  <button type="submit" class="btn">Sign in</button>
+</form>
+
+ +

Horizontal form

+

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

+
    +
  • Add .form-horizontal to the form
    • +
  • Wrap labels and controls in .control-group
    • +
  • Add .control-label to the label
    • +
  • Wrap any associated controls in .controls for proper alignment
    • +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+ + +
+
+
+
+<form class="form-horizontal">
+  <div class="control-group">
+    <label class="control-label" for="inputEmail">Email</label>
+    <div class="controls">
+      <input type="text" id="inputEmail" placeholder="Email">
+    </div>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="inputPassword">Password</label>
+    <div class="controls">
+      <input type="password" id="inputPassword" placeholder="Password">
+    </div>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox"> Remember me
+      </label>
+      <button type="submit" class="btn">Sign in</button>
+    </div>
+  </div>
+</form>
+
+ + +
+ + +

Supported form controls

+

Examples of standard form controls supported in an example form layout.

+ +

Inputs

+

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

+

Requires the use of a specified type at all times.

+
+ +
+
+<input type="text" placeholder="Text input">
+
+ +

Textarea

+

Form control which supports multiple lines of text. Change rows attribute as necessary.

+
+ +
+
+<textarea rows="3"></textarea>
+
+ +

Checkboxes and radios

+

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

+

Default (stacked)

+
+ +
+ + +
+
+<label class="checkbox">
+  <input type="checkbox" value="">
+  Option one is this and that—be sure to include why it's great
+</label>
+
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+  Option one is this and that—be sure to include why it's great
+</label>
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+  Option two can be something else and selecting it will deselect option one
+</label>
+
+ +

Inline checkboxes

+

Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

+
+ + + +
+
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+</label>
+
+ +

Selects

+

Use the default option or specify a multiple="multiple" to show multiple options at once.

+
+ +
+ +
+
+<select>
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+<select multiple="multiple">
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+ + +
+ + +

Extending form controls

+

Adding on top of existing browser controls, Bootstrap includes other useful form components.

+ +

Prepended and appended inputs

+

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

+ +

Default options

+

Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

+
+
+ @ + +
+
+
+ + .00 +
+
+
+<div class="input-prepend">
+  <span class="add-on">@</span>
+  <input id="prependedInput" type="text" placeholder="Username">
+</div>
+<div class="input-append">
+  <input id="appendedInput" type="text">
+  <span class="add-on">.00</span>
+</div>
+
+ +

Combined

+

Use both classes and two instances of .add-on to prepend and append an input.

+
+
+ $ + + .00 +
+
+
+<div class="input-prepend input-append">
+  <span class="add-on">$</span>
+  <input id="appendedPrependedInput" type="text">
+  <span class="add-on">.00</span>
+</div>
+
+ +

Buttons instead of text

+

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

+
+
+ + +
+
+
+<div class="input-append">
+  <input class="span3" id="appendedInputButton" type="text">
+  <button class="btn" type="button">Go!</button>
+</div>
+
+
+
+ + + +
+
+
+<div class="input-append">
+  <input class="span3" id="appendedInputButton" type="text">
+  <button class="btn" type="button">Search</button>
+  <button class="btn" type="button">Options</button>
+</div>
+
+ +

Button dropdowns

+

+
+
+ +
+ + +
+
+
+
+<div class="input-append">
+  <input id="appendedInputButtons" type="text">
+  <input class="span3" id="appendedDropdownButton" type="text">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      Action
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+</div>
+
+ +
+
+
+ + +
+ +
+
+
+<div class="input-prepend">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      Action
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+  <input class="span2" id="prependedDropdownButton" type="text">
+</div>
+
+ +
+
+
+ + +
+ +
+ + +
+
+
+
+<div class="input-prepend input-append">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      Action
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+  <input class="span2" id="appendedPrependedDropdownButton" type="text">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      Action
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+</div>
+
+ +

Segmented dropdown groups

+
+
+
+ + + +
+ +
+
+ +
+ + + +
+
+
+
+<form>
+  <div class="input-prepend">
+    <div class="btn-group">...</div>
+    <input type="text" class="span3">
+  </div>
+  <div class="input-append">
+    <input type="text" class="span3">
+    <div class="btn-group">...</div>
+  </div>
+</form>
+
+ +

Search form

+
+
+ + +
+
+ + +
+
+
+<form class="form-search">
+  <div class="input-append">
+    <input type="text" class="search-query span3">
+    <button type="submit" class="btn">Search</button>
+  </div>
+  <div class="input-prepend">
+    <button type="submit" class="btn">Search</button>
+    <input type="text" class="search-query span3">
+  </div>
+</form>
+
+ +

Control sizing

+

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

+ +

Block level inputs

+

Make any <input> or <textarea> element behave like a block level element.

+
+
+ +
+
+
+<input class="input-block-level" type="text" placeholder=".input-block-level">
+
+ +

Relative sizing

+

Create larger or smaller form controls that match button sizes.

+
+
+ + + +
+
+
+<input class="input-large" type="text" placeholder=".input-large">
+<input class="input-small" type="text" placeholder=".input-small">
+<input class="input-mini" type="text" placeholder=".input-mini">
+
+ +

Column sizing

+

Use .span1 to .span12 for setting widths on inputs that match Bootstrap's grid system.

+
+
+ + + + + + +
+
+
+<input class="span1" type="text" placeholder=".span1">
+<input class="span2" type="text" placeholder=".span2">
+<input class="span3" type="text" placeholder=".span3">
+<select class="span1">
+  ...
+</select>
+<select class="span2">
+  ...
+</select>
+<select class="span3">
+  ...
+</select>
+
+ +

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+<div class="controls">
+  <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>
+...
+
+ +

Uneditable inputs

+

Present data in a form that's not editable without using actual form markup.

+
+ Some value here +
+
+<span class="input-xlarge uneditable-input">Some value here</span>
+
+ +

Form actions

+

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

+
+
+ + +
+
+
+<div class="form-actions">
+  <button type="submit" class="btn btn-primary">Save changes</button>
+  <button type="button" class="btn">Cancel</button>
+</div>
+
+ +

Help text

+

Inline and block level support for help text that appears around form controls.

+

Inline help

+
+ Inline help text +
+
+<input type="text"><span class="help-inline">Inline help text</span>
+
+ +

Block help

+
+ + A longer block of help text that breaks onto a new line and may extend beyond one line. +
+
+<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+
+ + +
+ + +

Form control states

+

Provide feedback to users or visitors with basic feedback states on form controls and labels.

+ +

Input focus

+

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

+
+ +
+
+<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+
+ +

Invalid inputs

+

Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

+
+ +
+
+<input class="span3" type="email" required>
+
+ +

Disabled inputs

+

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

+
+ +
+
+<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+
+ +

Validation states

+

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

+ +
+
+ +
+ + Something may have gone wrong +
+
+
+ +
+ + Please correct the error +
+
+
+ +
+ + Username is taken +
+
+
+ +
+ + Woohoo! +
+
+
+
+<div class="control-group 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>
+  </div>
+</div>
+<div class="control-group 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>
+  </div>
+</div>
+<div class="control-group 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>
+  </div>
+</div>
+
+ +
+ + + + +
+
+

Buttons

+
+ +

Default buttons

+

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Buttonclass=""Description
btnStandard gray button with gradient
btn btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons
btn btn-infoUsed as an alternative to the default styles
btn btn-successIndicates a successful or positive action
btn btn-warningIndicates caution should be taken with this action
btn btn-dangerIndicates a dangerous or potentially negative action
btn btn-inverseAlternate dark gray button, not tied to a semantic action or use
btn btn-linkDeemphasize a button by making it look like a link while maintaining button behavior
+ +

Cross browser compatibility

+

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

+ + +

Button sizes

+

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

+
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
+
+<p>
+  <button class="btn btn-large btn-primary" type="button">Large button</button>
+  <button class="btn btn-large" type="button">Large button</button>
+</p>
+<p>
+  <button class="btn btn-primary" type="button">Default button</button>
+  <button class="btn" type="button">Default button</button>
+</p>
+<p>
+  <button class="btn btn-small btn-primary" type="button">Small button</button>
+  <button class="btn btn-small" type="button">Small button</button>
+</p>
+<p>
+  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
+  <button class="btn btn-mini" type="button">Mini button</button>
+</p>
+
+

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

+
+
+ + +
+
+
+<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
+<button class="btn btn-large btn-block" type="button">Block level button</button>
+
+ + +

Disabled state

+

Make buttons look unclickable by fading them back 50%.

+ +

Anchor element

+

Add the .disabled class to <a> buttons.

+

+ Primary link + Link +

+
+<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+<a href="#" class="btn btn-large disabled">Link</a>
+
+

+ Heads up! + We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here. +

+ +

Button element

+

Add the disabled attribute to <button> buttons.

+

+ + +

+
+<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button type="button" class="btn btn-large" disabled>Button</button>
+
+ + +

One class, multiple tags

+

Use the .btn class on an <a>, <button>, or <input> element.

+
+ Link + + + +
+
+<a class="btn" href="">Link</a>
+<button class="btn" type="submit">Button</button>
+<input class="btn" type="button" value="Input">
+<input class="btn" type="submit" value="Submit">
+
+

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

+ +
+ + + + +
+
+

Images

+
+ +

Add classes to an <img> element to easily style images in any project.

+
+ + + +
+
+<img src="..." class="img-rounded">
+<img src="..." class="img-circle">
+<img src="..." class="img-polaroid">
+
+

Heads up! .img-rounded and .img-circle do not work in IE8 due to lack of border-radius support.

+ + +
+ + + + +
+
+

Icons font by Glyphicons

+
+ +

Included glyphs

+

Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.

+ +
    +
  • glyphicon-glass
    • +
  • glyphicon-music
    • +
  • glyphicon-search
    • +
  • glyphicon-envelope
    • +
  • glyphicon-heart
    • +
  • glyphicon-star
    • +
  • glyphicon-star-empty
    • +
  • glyphicon-user
    • +
  • glyphicon-film
    • +
  • glyphicon-th-large
    • +
  • glyphicon-th
    • +
  • glyphicon-th-list
    • +
  • glyphicon-ok
    • +
  • glyphicon-remove
    • +
  • glyphicon-zoom-in
    • +
  • glyphicon-zoom-out
    • +
  • glyphicon-off
    • +
  • glyphicon-signal
    • +
  • glyphicon-cog
    • +
  • glyphicon-trash
    • +
  • glyphicon-home
    • +
  • glyphicon-file
    • +
  • glyphicon-time
    • +
  • glyphicon-road
    • +
  • glyphicon-download-alt
    • +
  • glyphicon-download
    • +
  • glyphicon-upload
    • +
  • glyphicon-inbox
    • + +
  • glyphicon-play-circle
    • +
  • glyphicon-repeat
    • +
  • glyphicon-refresh
    • +
  • glyphicon-list-alt
    • +
  • glyphicon-lock
    • +
  • glyphicon-flag
    • +
  • glyphicon-headphones
    • +
  • glyphicon-volume-off
    • +
  • glyphicon-volume-down
    • +
  • glyphicon-volume-up
    • +
  • glyphicon-qrcode
    • +
  • glyphicon-barcode
    • +
  • glyphicon-tag
    • +
  • glyphicon-tags
    • +
  • glyphicon-book
    • +
  • glyphicon-bookmark
    • +
  • glyphicon-print
    • +
  • glyphicon-camera
    • +
  • glyphicon-font
    • +
  • glyphicon-bold
    • +
  • glyphicon-italic
    • +
  • glyphicon-text-height
    • +
  • glyphicon-text-width
    • +
  • glyphicon-align-left
    • +
  • glyphicon-align-center
    • +
  • glyphicon-align-right
    • +
  • glyphicon-align-justify
    • +
  • glyphicon-list
    • + +
  • glyphicon-indent-left
    • +
  • glyphicon-indent-right
    • +
  • glyphicon-facetime-video
    • +
  • glyphicon-picture
    • +
  • glyphicon-pencil
    • +
  • glyphicon-map-marker
    • +
  • glyphicon-adjust
    • +
  • glyphicon-tint
    • +
  • glyphicon-edit
    • +
  • glyphicon-share
    • +
  • glyphicon-check
    • +
  • glyphicon-move
    • +
  • glyphicon-step-backward
    • +
  • glyphicon-fast-backward
    • +
  • glyphicon-backward
    • +
  • glyphicon-play
    • +
  • glyphicon-pause
    • +
  • glyphicon-stop
    • +
  • glyphicon-forward
    • +
  • glyphicon-fast-forward
    • +
  • glyphicon-step-forward
    • +
  • glyphicon-eject
    • +
  • glyphicon-chevron-left
    • +
  • glyphicon-chevron-right
    • +
  • glyphicon-plus-sign
    • +
  • glyphicon-minus-sign
    • +
  • glyphicon-remove-sign
    • +
  • glyphicon-ok-sign
    • + +
  • glyphicon-question-sign
    • +
  • glyphicon-info-sign
    • +
  • glyphicon-screenshot
    • +
  • glyphicon-remove-circle
    • +
  • glyphicon-ok-circle
    • +
  • glyphicon-ban-circle
    • +
  • glyphicon-arrow-left
    • +
  • glyphicon-arrow-right
    • +
  • glyphicon-arrow-up
    • +
  • glyphicon-arrow-down
    • +
  • glyphicon-share-alt
    • +
  • glyphicon-resize-full
    • +
  • glyphicon-resize-small
    • +
  • glyphicon-plus
    • +
  • glyphicon-minus
    • +
  • glyphicon-asterisk
    • +
  • glyphicon-exclamation-sign
    • +
  • glyphicon-gift
    • +
  • glyphicon-leaf
    • +
  • glyphicon-fire
    • +
  • glyphicon-eye-open
    • +
  • glyphicon-eye-close
    • +
  • glyphicon-warning-sign
    • +
  • glyphicon-plane
    • +
  • glyphicon-calendar
    • +
  • glyphicon-random
    • +
  • glyphicon-comment
    • +
  • glyphicon-magnet
    • + +
  • glyphicon-chevron-up
    • +
  • glyphicon-chevron-down
    • +
  • glyphicon-retweet
    • +
  • glyphicon-shopping-cart
    • +
  • glyphicon-folder-close
    • +
  • glyphicon-folder-open
    • +
  • glyphicon-resize-vertical
    • +
  • glyphicon-resize-horizontal
    • +
  • glyphicon-hdd
    • +
  • glyphicon-bullhorn
    • +
  • glyphicon-bell
    • +
  • glyphicon-certificate
    • +
  • glyphicon-thumbs-up
    • +
  • glyphicon-thumbs-down
    • +
  • glyphicon-hand-right
    • +
  • glyphicon-hand-left
    • +
  • glyphicon-hand-up
    • +
  • glyphicon-hand-down
    • +
  • glyphicon-circle-arrow-right
    • +
  • glyphicon-circle-arrow-left
    • +
  • glyphicon-circle-arrow-up
    • +
  • glyphicon-circle-arrow-down
    • +
  • glyphicon-globe
    • +
  • glyphicon-wrench
    • +
  • glyphicon-tasks
    • +
  • glyphicon-filter
    • +
  • glyphicon-briefcase
    • +
  • glyphicon-fullscreen
    • + +
  • glyphicon-dashboard
    • +
  • glyphicon-paperclip
    • +
  • glyphicon-heart-empty
    • +
  • glyphicon-link
    • +
  • glyphicon-phone
    • +
  • glyphicon-pushpin
    • +
  • glyphicon-euro
    • +
  • glyphicon-usd
    • +
  • glyphicon-gbp
    • +
  • glyphicon-sort
    • +
  • glyphicon-sort-by-alphabet
    • +
  • glyphicon-sort-by-alphabet-alt
    • +
  • glyphicon-sort-by-order
    • +
  • glyphicon-sort-by-order-alt
    • +
  • glyphicon-sort-by-attributes
    • +
  • glyphicon-sort-by-attributes-alt
    • +
  • glyphicon-unchecked
    • +
  • glyphicon-expand
    • +
  • glyphicon-collapse
    • +
  • glyphicon-collapse-top
    • + +
+ +

Glyphicons attribution

+

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

+ + +
+ + +

How to use

+

Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:

+
+<i class="glyphicon-search"></i>
+
+

Want to change the icon color? Just change the color of the parent element.

+

+ Heads up! + When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing. +

+ + +
+ + +

Icon examples

+

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

+ +

Buttons

+ +
Button group in a button toolbar
+
+
+
+ + + + +
+
+
+
+<div class="btn-toolbar">
+  <div class="btn-group">
+
+    <a class="btn" href="#"><i class="glyphicon-align-left"></i></a>
+    <a class="btn" href="#"><i class="glyphicon-align-center"></i></a>
+    <a class="btn" href="#"><i class="glyphicon-align-right"></i></a>
+    <a class="btn" href="#"><i class="glyphicon-align-justify"></i></a>
+  </div>
+</div>
+
+ +
Dropdown in a button group
+
+
+ User + + +
+
+
+<div class="btn-group">
+  <a class="btn btn-primary" href="#"><i class="glyphicon-user icon-white"></i> User</a>
+  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+  <ul class="dropdown-menu">
+    <li><a href="#"><i class="glyphicon-pencil"></i> Edit</a></li>
+    <li><a href="#"><i class="glyphicon-trash"></i> Delete</a></li>
+    <li><a href="#"><i class="glyphicon-ban-circle"></i> Ban</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><i class="i"></i> Make admin</a></li>
+  </ul>
+</div>
+
+ +
Large button
+
+ Star +
+
+<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
+
+ +
Small button
+
+ +
+
+<a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a>
+
+ + +

Navigation

+
+
+ +
+
+
+<ul class="nav nav-list">
+  <li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> Home</a></li>
+  <li><a href="#"><i class="glyphicon-book"></i> Library</a></li>
+  <li><a href="#"><i class="glyphicon-pencil"></i> Applications</a></li>
+  <li><a href="#"><i class="i"></i> Misc</a></li>
+</ul>
+
+ +

Form fields

+
+
+ +
+
+ +
+
+
+
+
+<div class="control-group">
+  <label class="control-label" for="inputIcon">Email address</label>
+  <div class="controls">
+    <div class="input-prepend">
+      <span class="add-on"><i class="glyphicon-envelope"></i></span>
+      <input class="span2" id="inputIcon" type="text">
+    </div>
+  </div>
+</div>
+
+ +
+ + + + +
+
+

Responsive design

+
+ +

Enabling responsive features

+

Responsive CSS requires the following meta tag in the <head> of your pages.

+
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ +

About responsive Bootstrap

+ Responsive devices +

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

+
    +
  • Modify the width of column in our grid
    • +
  • Stack elements instead of float wherever necessary
    • +
  • Resize headings and text to be more appropriate for devices
    • +
+

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

+ +

Supported devices

+

Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LabelLayout widthColumn widthGutter width
Large display1200px and up70px30px
Default980px and up60px20px
Portrait tablets768px and above42px20px
Phones to tablets767px and belowFluid columns, no fixed widths
Phones480px and belowFluid columns, no fixed widths
+
+/* Large desktop */
+@media (min-width: 1200px) { ... }
+
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) and (max-width: 979px) { ... }
+
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) { ... }
+
+/* Landscape phones and down */
+@media (max-width: 480px) { ... }
+
+ + +

Responsive utility classes

+

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
.visible-phoneVisible
.visible-tabletVisible
.visible-desktopVisible
.hidden-phoneVisibleVisible
.hidden-tabletVisibleVisible
.hidden-desktopVisibleVisible
+ +

When to use

+

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

+ +

Responsive utilities test case

+

Resize your browser or load on different devices to test the above classes.

+

Visible on...

+

Green checkmarks indicate that class is visible in your current viewport.

+
    +
  • Phone✔ Phone
    • +
  • Tablet✔ Tablet
    • +
  • Desktop✔ Desktop
    • +
+

Hidden on...

+

Here, green checkmarks indicate that class is hidden in your current viewport.

+
    +
  • Phone✔ Phone
    • +
  • Tablet✔ Tablet
    • +
  • Desktop✔ Desktop
    • +
+ +
+ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3 From 6961b284b6680c95dfe1610d7306dab3d4a72052 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Nov 2012 16:42:48 -0800 Subject: remove responsive image from css docs page --- docs/css.html | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index e9d42fb38..b630123c5 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2308,16 +2308,6 @@ For example, <code><section></code> should be wrapped as inlin <meta name="viewport" content="width=device-width, initial-scale=1.0"> -

About responsive Bootstrap

- Responsive devices -

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

- -

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

-

Supported devices

Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

@@ -2376,7 +2366,7 @@ For example, <code><section></code> should be wrapped as inlin

Responsive utility classes

-

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

+

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).

-- cgit v1.2.3 From 51b4de8eec1cb3351b5a6e711a54acae5424935c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Nov 2012 16:43:31 -0800 Subject: docs content changed --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index b630123c5..99e9e8ce4 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2308,7 +2308,7 @@ For example, <code><section></code> should be wrapped as inlin <meta name="viewport" content="width=device-width, initial-scale=1.0"> -

Supported devices

+

Supported devices

Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

-- cgit v1.2.3 From 094710565693af887ca85324bd5251846bd1708a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Nov 2012 17:43:20 -0800 Subject: section title change --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 99e9e8ce4..c5d99e6de 100644 --- a/docs/css.html +++ b/docs/css.html @@ -133,7 +133,7 @@ ================================================== -->
-

Default grid system

+

Grid system

Live grid example

-- cgit v1.2.3 From dd11d0a3fa4ba061f6dcb8db81f144d81101e052 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 1 Dec 2012 13:47:07 -0800 Subject: move around social buttons --- docs/css.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index c5d99e6de..792263605 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2451,6 +2451,25 @@ For example, <code><section></code> should be wrapped as inlin ================================================== -->
+ +
+ +
+ +

Designed and built with all the love in the world by @mdo and @fat.

Code licensed under Apache License v2.0, documentation under CC BY 3.0.

Glyphicons Free licensed under CC BY 3.0.

-- cgit v1.2.3 From b3019d7aab877cccf03fda3e6894c0fdaa7330f3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Dec 2012 20:30:21 -0800 Subject: add gallery page, fill with a few screenshots to start --- docs/css.html | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 792263605..92606a9cb 100644 --- a/docs/css.html +++ b/docs/css.html @@ -58,6 +58,9 @@
  • Customize
    • +
  • + Gallery +
    • -- cgit v1.2.3 From 4c82dd3645ec60277b07a161c779f57dda10037c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Dec 2012 21:46:14 -0800 Subject: Refactor input groups * Deprecate .input-append and .input-prepend * Use new, single base class for component, .input-group * Deprecate .addon for .input-group-addon * For compatibility with all buttons, require .input-group-btn to wrap buttons and button dropdowns * Still need to reimplement with segmented button dropdowns, but that's dependent on a refactor of those first --- docs/css.html | 254 +++++++++++++++++++++++++++------------------------------- 1 file changed, 118 insertions(+), 136 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 728dac389..e6506c432 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1119,13 +1119,15 @@ For example, <code><section></code> should be wrapped as inlin
    +
    + +
    -
    @@ -1146,9 +1148,11 @@ For example, <code><section></code> should be wrapped as inlin </div> <div class="control-group"> <div class="controls"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> <button type="submit" class="btn">Sign in</button> </div> </div> @@ -1284,85 +1288,116 @@ For example, <code><section></code> should be wrapped as inlin

    Extending form controls

    Adding on top of existing browser controls, Bootstrap includes other useful form components.

    -

    Prepended and appended inputs

    -

    Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

    - -

    Default options

    -

    Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

    +

    Input groups

    +

    Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with a .add-on to prepend or append elements to an <input>.

    +

    Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

    -
    - @ - +
    + @ +

    -
    - - .00 +
    + + .00 +
    +
    +
    + $ + + .00 
    -<div class="input-prepend">
-  <span class="add-on">@</span>
-  <input id="prependedInput" type="text" placeholder="Username">
+<div class="input-group span9">
+  <span class="input-group-addon">@</span>
+  <input type="text" placeholder="Username">
 </div>
-<div class="input-append">
-  <input id="appendedInput" type="text">
-  <span class="add-on">.00</span>
+
+<div class="input-group span6">
+  <input type="text">
+  <span class="input-group-addon">.00</span>
 </div>
-
    -

    Combined

    -

    Use both classes and two instances of .add-on to prepend and append an input.

    -
    -
    - $ - - .00 -
    - -
    -<div class="input-prepend input-append">
-  <span class="add-on">$</span>
-  <input id="appendedPrependedInput" type="text">
-  <span class="add-on">.00</span>
+<div class="input-group span3">
+  <span class="input-group-addon">$</span>
+  <input type="text">
+  <span class="input-group-addon">.00</span>
 </div>

    Buttons instead of text

    -

    Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

    +

    Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

    -
    - - +
    + + + + +
    +
    +
    + + + + 
    -<div class="input-append">
-  <input class="span3" id="appendedInputButton" type="text">
-  <button class="btn" type="button">Go!</button>
+<div class="input-group span7">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Go!</button>
+  </span>
+  <input type="text">
+</div>
+
+<div class="input-group span7">
+  <input type="text">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Go!</button>
+  </span>
 </div>
    -
    - - - +
    + + + + + +
    +
    +
    + + + + + 
    -<div class="input-append">
-  <input class="span3" id="appendedInputButton" type="text">
-  <button class="btn" type="button">Search</button>
-  <button class="btn" type="button">Options</button>
+<div class="input-group span7">
+  <input type="text">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Search</button>
+    <button class="btn" type="button">Options</button>
+  </span>
+</div>
+
+<div class="input-group span7">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Search</button>
+    <button class="btn" type="button">Options</button>
+  </span>
+  <input type="text">
 </div>

    Button dropdowns

    -
    - -
    +
    +
    • Action
      • @@ -1372,27 +1407,12 @@ For example, <code><section></code> should be wrapped as inlin
    • Separated link
    -
    - -
    -<div class="input-append">
-  <input id="appendedInputButtons" type="text">
-  <input class="span3" id="appendedDropdownButton" type="text">
-  <div class="btn-group">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-      Action
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </div>
-</div>
-
    - -
    -
    -
    + +
    +
    +
    + +
    • Action
      • @@ -1402,12 +1422,11 @@ For example, <code><section></code> should be wrapped as inlin
    • Separated link
    - -
    + 
    -<div class="input-prepend">
-  <div class="btn-group">
+<div class="input-group span7">
+  <div class="input-group-btn btn-group">
     <button class="btn dropdown-toggle" data-toggle="dropdown">
       Action
       <span class="caret"></span>
@@ -1416,48 +1435,12 @@ For example, <code><section></code> should be wrapped as inlin
       ...
     </ul>
   </div>
-  <input class="span2" id="prependedDropdownButton" type="text">
+  <input type="text">
 </div>
-
    -
    -
    -
    - - -
    - -
    - - -
    -
    - -
    -<div class="input-prepend input-append">
-  <div class="btn-group">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-      Action
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </div>
-  <input class="span2" id="appendedPrependedDropdownButton" type="text">
-  <div class="btn-group">
+<div class="input-group span7">
+  <input type="text">
+  <div class="input-group-btn btn-group">
     <button class="btn dropdown-toggle" data-toggle="dropdown">
       Action
       <span class="caret"></span>
@@ -1471,8 +1454,8 @@ For example, <code><section></code> should be wrapped as inlin
 
           
    Segmented dropdown groups
    
           
    
-            
    
-              
    
+            
    
+              
    
                 
                 
    
               
             
    
-            
    
-              
-              
    
+
+            
    
+              
+              
    
                 
                 
    
           
 
    -<form>
-  <div class="input-prepend">
-    <div class="btn-group">...</div>
-    <input type="text" class="span3">
-  </div>
-  <div class="input-append">
-    <input type="text" class="span3">
-    <div class="btn-group">...</div>
-  </div>
-</form>
+<div class="input-prepend">
+  <div class="btn-group">...</div>
+  <input type="text" class="span3">
+</div>
+<div class="input-append">
+  <input type="text" class="span3">
+  <div class="btn-group">...</div>
+</div>
 
    
 
           
    Search form
    
-- 
cgit v1.2.3


From 6e9bbe6232217fb86e10d0f7623863cf1a1aa135 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 9 Dec 2012 22:08:11 -0800
Subject: Nested columns docs tweaks

---
 docs/css.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 728dac389..d7852ed2c 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -207,13 +207,13 @@
           
    To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.
    
           
    
             
    
-              Level 1 column
+              Level 1: 9 columns
               
    
                 
    
-                  Level 2
+                  Level 2: 6 columns
                 
    
                 
    
-                  Level 2
+                  Level 2: 6 columns
                 
    
               
    
             
    
@@ -221,10 +221,10 @@
 
     <div class="row">
   <div class="span9">
-    Level 1 column
+    Level 1: 9 columns
     <div class="row">
-      <div class="span6">Level 2</div>
-      <div class="span3">Level 2</div>
+      <div class="span6">Level 2: 6 columns</div>
+      <div class="span3">Level 2: 6 columns</div>
     </div>
   </div>
 </div>
-- 
cgit v1.2.3


From 4245e8ebb5c98ca1a89b7b56578d4fe52ee81802 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 9 Dec 2012 22:13:40 -0800
Subject: Fix checkbox and radios example

---
 docs/css.html | 60 +++++++++++++++++++++++++++++++++++------------------------
 1 file changed, 36 insertions(+), 24 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index d7852ed2c..87c8d4f85 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1185,34 +1185,46 @@ For example, <code><section></code> should be wrapped as inlin
           
    Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
    
           
    Default (stacked)
    
           
    
-            
+            
    
+              
+            
    
             
    
-            
-            
+            
    
+              
+            
    
+            
    
+              
+            
    
           
 
    -<label class="checkbox">
-  <input type="checkbox" value="">
-  Option one is this and that—be sure to include why it's great
-</label>
+<div class="checkbox">
+  <label>
+    <input type="checkbox" value="">
+    Option one is this and that—be sure to include why it's great
+  </label>
+</div>
 
-<label class="radio">
-  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-  Option one is this and that—be sure to include why it's great
-</label>
-<label class="radio">
-  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-  Option two can be something else and selecting it will deselect option one
-</label>
+<div class="radio">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+    Option one is this and that—be sure to include why it's great
+  </label>
+</div>
+<div class="radio">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+    Option two can be something else and selecting it will deselect option one
+  </label>
+</div>
 
    
 
           
    Inline checkboxes
    
-- 
cgit v1.2.3


From 48759eee941729a2e21a89215123b2e05c0b8549 Mon Sep 17 00:00:00 2001
From: Chris Rebert 
Date: Mon, 10 Dec 2012 01:33:02 -0800
Subject: document fieldset[disabled] styling added in #6199; per @mdo

---
 docs/css.html | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 728dac389..f2f54a3fc 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1725,6 +1725,43 @@ For example, <code><section></code> should be wrapped as inlin
 <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
 
    
 
+          
    Disabled fieldsets
    
+          
    Add the disabled attribute on a fieldset to disable all the controls within the fieldset at once.
    
+          
    
+            
    
+              
+              
+              
    
+                
+              
    
+              
+            
    
+          
+
    +<form class="form-inline">
+  <fieldset disabled>
+    <input type="text" class="span4" placeholder="These controls are all disabled just">
+    <select class="span4">
+      <option>by being under a disabled fieldset</option>
+    </select>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Can't check this
+      </label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>
+
    
+          
    
+            Heads up!
+            <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.
+          
    
+
           
    Validation states
    
           
    Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.
    
 
-- 
cgit v1.2.3


From 8c8a14ab59553984d6bb2b1d080e9f3917d6e981 Mon Sep 17 00:00:00 2001
From: Chris Rebert 
Date: Mon, 10 Dec 2012 01:46:16 -0800
Subject: document caveat regarding fieldset legend and #6199

---
 docs/css.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index f2f54a3fc..7f67fa294 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1759,7 +1759,8 @@ For example, <code><section></code> should be wrapped as inlin

    Heads up! - <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. + Contrary to the HTML5 spec, form controls within a fieldset's legend will also be disabled.
    + Also, <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.

    Validation states

    -- cgit v1.2.3 From 19a94d08d659d39e718efca95812cac2db178b15 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 19:33:14 -0800 Subject: Remove support for multiple buttons in input groups because fuck that shit. --- docs/css.html | 36 ++---------------------------------- 1 file changed, 2 insertions(+), 34 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index e6506c432..01410e0c4 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1357,40 +1357,6 @@ For example, <code><section></code> should be wrapped as inlin <button class="btn" type="button">Go!</button> </span> </div> - -
    -
    - - - - - -
    -
    -
    - - - - - -
    - -
    -<div class="input-group span7">
-  <input type="text">
-  <span class="input-group-btn">
-    <button class="btn" type="button">Search</button>
-    <button class="btn" type="button">Options</button>
-  </span>
-</div>
-
-<div class="input-group span7">
-  <span class="input-group-btn">
-    <button class="btn" type="button">Search</button>
-    <button class="btn" type="button">Options</button>
-  </span>
-  <input type="text">
-</div>

    Button dropdowns

    @@ -1471,6 +1437,8 @@ For example, <code><section></code> should be wrapped as inlin
    +
    +
    -- cgit v1.2.3 From 85971ff3e80ce90573ed243055b1b0ba7685e15e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 21:12:37 -0800 Subject: Drop .form-search support --- docs/css.html | 39 +-------------------------------------- 1 file changed, 1 insertion(+), 38 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 9b23a836c..d9262dc57 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1060,20 +1060,7 @@ For example, <code><section></code> should be wrapped as inlin

    Optional layouts

    -

    Included with Bootstrap are three optional form layouts for common use cases.

    - -

    Search form

    -

    Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

    -
    - - - -
    -<form class="form-search">
-  <input type="text" class="span3 search-query">
-  <button type="submit" class="btn">Search</button>
-</form>
-
    +

    Included with Bootstrap are optional form layouts for common use cases.

    Inline form

    Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

    @@ -1477,30 +1464,6 @@ For example, <code><section></code> should be wrapped as inlin <input type="text" class="span3"> <div class="btn-group">...</div> </div> - - -

    Search form

    -
    -
    - - -
    -
    - - -
    - -
    -<form class="form-search">
-  <div class="input-append">
-    <input type="text" class="search-query span3">
-    <button type="submit" class="btn">Search</button>
-  </div>
-  <div class="input-prepend">
-    <button type="submit" class="btn">Search</button>
-    <input type="text" class="search-query span3">
-  </div>
-</form>

    Control sizing

    -- cgit v1.2.3 From 2011a0d50f717c95b706e10ac5e9e0f964c972a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 21:29:57 -0800 Subject: Drop labels from the docs --- docs/css.html | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index d9262dc57..51fa3ee09 100644 --- a/docs/css.html +++ b/docs/css.html @@ -303,7 +303,7 @@ 
    <em>rendered as italicized text</em>
    -

    Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

    +

    Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

    Emphasis classes

    Convey meaning through color with a handful of emphasis utility classes.

    @@ -567,8 +567,8 @@ <dd>...</dd> </dl> +
    Auto-truncating

    - Heads up! Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.

    @@ -601,7 +601,6 @@ For example, <code><section></code> should be wrapped as inlin &lt;p&gt;Sample text here...&lt;/p&gt; </pre> -

    Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

    You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

    @@ -1841,7 +1840,6 @@ For example, <code><section></code> should be wrapped as inlin <a href="#" class="btn btn-large disabled">Link</a>

    - Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

    @@ -1884,7 +1882,7 @@ For example, <code><section></code> should be wrapped as inlin

    Images

    -

    Add classes to an <img> element to easily style images in any project.

    +

    Add classes to an <img> element to easily style images in any project. Rounded corners are not available in IE8.

    @@ -1895,8 +1893,6 @@ For example, <code><section></code> should be wrapped as inlin <img src="..." class="img-circle"> <img src="..." class="img-polaroid"> -

    Heads up! .img-rounded and .img-circle do not work in IE8 due to lack of border-radius support.

    - @@ -2094,10 +2090,7 @@ For example, <code><section></code> should be wrapped as inlin <i class="glyphicon-search"></i>

    Want to change the icon color? Just change the color of the parent element.

    -

    - Heads up! - When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing. -

    +

    When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.

    -- cgit v1.2.3 From 65edc9cd6e453a7bf30ccbd6a57b3ea340e21907 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 21:42:36 -0800 Subject: Change .jumbotron usage in docs layout to .bs-docs-jumbotron --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 51fa3ee09..20900ec9c 100644 --- a/docs/css.html +++ b/docs/css.html @@ -68,7 +68,7 @@ -
    +

    CSS

    Fundamental HTML elements styled and enhanced with extensible classes.

    -- cgit v1.2.3 From c38b7206eb049f57c7b1db570817739bdda0be6f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 22:25:56 -0800 Subject: overhaul buttons --- docs/css.html | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 20900ec9c..dd279a6b4 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1729,8 +1729,8 @@ For example, <code><section></code> should be wrapped as inlin
    - - + + @@ -1738,11 +1738,6 @@ For example, <code><section></code> should be wrapped as inlin - - - - - @@ -1758,11 +1753,6 @@ For example, <code><section></code> should be wrapped as inlin - - - - - -- cgit v1.2.3 From afef81c0d79fc0c8bc313f7f46f4f92f7e3a9988 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 22:30:08 -0800 Subject: remove commented out buttons css, update docs --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index dd279a6b4..fdf1fe595 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1730,7 +1730,7 @@ For example, <code><section></code> should be wrapped as inlin - + -- cgit v1.2.3 From 14844db862a61c92be982921e14a526484f3b8a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 23:37:33 -0800 Subject: Holy shit, buttons, button states, and input states updated --- docs/css.html | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 3ad55d080..ddf4e08a7 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1650,13 +1650,17 @@ For example, <code><section></code> should be wrapped as inlin

    Disabled fieldsets

    -

    Add the disabled attribute on a fieldset to disable all the controls within the fieldset at once.

    +

    Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

    - - +
    + +
    +
    + + 
    -For example, <code><section></code> should be wrapped as inline.
+For example, <code>&lt;section&gt;</code> should be wrapped as inline.

    Basic block

    -- cgit v1.2.3 From 7c04d573d0a08a365f3350c9d52d7cc870f702be Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 20 Dec 2012 21:44:45 -0800 Subject: update docs regarding normalize and clearfix --- docs/css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 25a8134fa..a3133026d 100644 --- a/docs/css.html +++ b/docs/css.html @@ -125,8 +125,8 @@

    These styles can be found within scaffolding.less.

    -

    Reset via Normalize

    -

    With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

    +

    Normalize reset

    +

    For improved cross-browser rendering, we use Normalize, a project by Nicolas Gallagher and Jonathan Neal.

    -- cgit v1.2.3 From 070109abc1624808873e6e172ff97d27eb05c406 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:09:36 -0600 Subject: Remove .controls-row; instead, folks should use .row and .span* for all their grid input sizing needs when multiple inputs per line are required --- docs/css.html | 34 +--------------------------------- 1 file changed, 1 insertion(+), 33 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index a3133026d..db7cb17e2 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1538,39 +1538,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped ... </select> - -

    For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

    - -
    - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    - -
    -<div class="controls">
-  <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>
-...
-
    +

    If you need multiple inputs on the same line, wrap them in the standard grid markup (with `.row` and `.span*` classes). Each input should have it's own column and will expand to fill the available width automatically.

    Uneditable inputs

    Present data in a form that's not editable without using actual form markup.

    -- cgit v1.2.3 From 12b738bf302699a51721d030465e07f76de72bf9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:13:44 -0600 Subject: Add grid column example to form input sizing --- docs/css.html | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index db7cb17e2..b23119f8d 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1538,7 +1538,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped ... </select> -

    If you need multiple inputs on the same line, wrap them in the standard grid markup (with `.row` and `.span*` classes). Each input should have it's own column and will expand to fill the available width automatically.

    +

    If you need multiple inputs on the same line, wrap them in the standard grid markup (with .row and .span* classes). Each input should have it's own column and will expand to fill the available width automatically.

    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +<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>
+

    Uneditable inputs

    Present data in a form that's not editable without using actual form markup.

    -- cgit v1.2.3 From 2ef4fde09fae0dd3e054a77b61b0738fe538b58d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:19:48 -0600 Subject: Drop .input-block-level modifier as inputs are already width: 100%; --- docs/css.html | 11 ----------- 1 file changed, 11 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index b23119f8d..bf659d5c5 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1468,17 +1468,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped

    Control sizing

    Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

    -

    Block level inputs

    -

    Make any <input> or <textarea> element behave like a block level element.

    -
    -
    - -
    - -
    -<input class="input-block-level" type="text" placeholder=".input-block-level">
-
    -

    Relative sizing

    Create larger or smaller form controls that match button sizes.

    -- cgit v1.2.3 From d0baa99aed07b6643d649350f3988b3d8a07a4ac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:59:58 -0600 Subject: Remove .text-info and .info form validation states --- docs/css.html | 9 --------- 1 file changed, 9 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index bf659d5c5..33dc6966d 100644 --- a/docs/css.html +++ b/docs/css.html @@ -311,14 +311,12 @@

    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

    Etiam porta sem malesuada magna mollis euismod.

    Donec ullamcorper nulla non metus auctor fringilla.

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

     <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>
    @@ -1687,13 +1685,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped Please correct the error -
    - -
    - - Username is taken -
    -
    -- cgit v1.2.3 From dc5c6d6be8e46e36aa8a2e1d35f6ed8c8e3cd8cb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 15:57:52 -0600 Subject: Simplify form validation states while enabling them to be applied to one field at a time. --- docs/css.html | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 33dc6966d..31e745378 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1671,48 +1671,42 @@ For example, <code>&lt;section&gt;</code> should be wrapped

    Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

    -
    +
    - - Something may have gone wrong +
    -
    +
    - - Please correct the error +
    -
    +
    - - Woohoo! + 
    -<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>
    -- cgit v1.2.3 From 5a2dc0b897968838cf09e0ff990b3a411623ed68 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Dec 2012 14:47:55 -0600 Subject: Improve documentation for new form validation styles --- docs/css.html | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 31e745378..53cd678d0 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1603,7 +1603,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped

    Form control states

    Provide feedback to users or visitors with basic feedback states on form controls and labels.

    -

    Input focus

    +

    Input focus

    We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

    @@ -1612,7 +1612,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."> -

    Invalid inputs

    +

    Invalid inputs

    Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

    @@ -1621,7 +1621,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input class="span3" type="email" required> -

    Disabled inputs

    +

    Disabled inputs

    Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

    @@ -1630,7 +1630,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> -

    Disabled fieldsets

    +

    Disabled fieldsets

    Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

    @@ -1667,8 +1667,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped </form> -

    Validation states

    -

    Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

    +

    Validation states

    +

    Bootstrap includes validation styles for error, warning, info, and success messages. To use:

    +
      +
    • Add .has-warning, .has-error, or .has-success to the parent element
      • +
    • Add .input-with-feedback to the field(s) in question
      • +
    +

    Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.

    -- cgit v1.2.3 From 206205a6b2a214fbdc76cfb5e9c63706bb11e0ea Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 5 Jan 2013 17:36:20 -0800 Subject: update docs to reflect #5786 --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 53cd678d0..2dfa3ff3b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1613,7 +1613,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped

    Invalid inputs

    -

    Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

    +

    Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

    -- cgit v1.2.3 From 91dd77939b4183fa86973056778ad87950674410 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 9 Jan 2013 18:56:08 -0800 Subject: Add text alignment utility classes --- docs/css.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 53cd678d0..64527c34f 100644 --- a/docs/css.html +++ b/docs/css.html @@ -305,6 +305,19 @@

    Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

    +

    Alignment classes

    +

    Easily realign text to components with text alignment classes.

    +
    +

    Left aligned text.

    +

    Center aligned text.

    +

    Right aligned text.

    +
    +
    +<p class="text-left">Left aligned text.</p>
+<p class="text-center">Center aligned text.</p>
+<p class="text-right">Right aligned text.</p>
+
    +

    Emphasis classes

    Convey meaning through color with a handful of emphasis utility classes.

    -- cgit v1.2.3 From 267690eb1bd0192338b07c6d4ed2f5b25d2fc143 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 15 Jan 2013 14:30:00 -0800 Subject: docs changes, more type improvements, add grid system basics back --- docs/css.html | 203 +++++++++++++++++++++++++++++----------------------------- 1 file changed, 101 insertions(+), 102 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 65c876b2b..5054df37b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -84,9 +84,9 @@
    • Global styles
      • -
    • Grid system
    • Typography
    • Code
      • +
    • Grid system
    • Tables
    • Forms
    • Buttons
      • @@ -132,107 +132,6 @@ - -
      -
      -

      Grid system

      -
      - -

      Live grid example

      -

      The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

      -
      -
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      -
      -
      4
      -
      4
      -
      4
      -
      -
      -
      6
      -
      6
      -
      -
      -
      12
      -
      -
      - -

      Basic grid HTML

      -

      For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

      -
      -<div class="row">
-  <div class="span4">...</div>
-  <div class="span8">...</div>
-</div>
-
      -

      Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

      - -

      Offsetting columns

      -

      Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

      -
      -
      -
      4
      -
      4 offset 4
      -
      -
      -
      3 offset 3
      -
      3 offset 3
      -
      -
      -
      6 offset 6
      -
      -
      -
      -<div class="row">
-  <div class="span4">...</div>
-  <div class="span4 offset4">...</div>
-</div>
-
      - - -

      Nesting columns

      -

      To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

      -
      -
      - Level 1: 9 columns -
      -
      - Level 2: 6 columns -
      -
      - Level 2: 6 columns -
      -
      -
      -
      -
      -<div class="row">
-  <div class="span9">
-    Level 1: 9 columns
-    <div class="row">
-      <div class="span6">Level 2: 6 columns</div>
-      <div class="span3">Level 2: 6 columns</div>
-    </div>
-  </div>
-</div>
-
      -
      - - - @@ -586,6 +485,106 @@ + +
      +
      +

      Grid system

      +
      + +

      Live grid example

      +

      The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

      +
      +
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      +
      +
      4
      +
      4
      +
      4
      +
      +
      +
      6
      +
      6
      +
      +
      + +

      Basic grid HTML

      +

      For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

      +
      +<div class="row">
+  <div class="span4">...</div>
+  <div class="span8">...</div>
+</div>
+
      +

      Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

      + +

      Offsetting columns

      +

      Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

      +
      +
      +
      4
      +
      4 offset 4
      +
      +
      +
      3 offset 3
      +
      3 offset 3
      +
      +
      +
      6 offset 6
      +
      +
      +
      +<div class="row">
+  <div class="span4">...</div>
+  <div class="span4 offset4">...</div>
+</div>
+
      + + +

      Nesting columns

      +

      To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

      +
      +
      + Level 1: 9 columns +
      +
      + Level 2: 6 columns +
      +
      + Level 2: 6 columns +
      +
      +
      +
      +
      +<div class="row">
+  <div class="span9">
+    Level 1: 9 columns
+    <div class="row">
+      <div class="span6">Level 2: 6 columns</div>
+      <div class="span3">Level 2: 6 columns</div>
+    </div>
+  </div>
+</div>
+
      +
      + + + + +
      -- cgit v1.2.3 From 992e0d922ae5c15bf9df2d65cbc6293cf203734f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 16 Jan 2013 12:20:34 -0800 Subject: Re-add and update form styles: * Restore forms.less file * Overhaul .radio.inline .checkbox.inline to be .radio-inline or .checkbox-inline * Update docs to reflect changes --- docs/css.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 5054df37b..756cec1ea 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1228,26 +1228,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped

      Inline checkboxes

      -

      Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

      +

      Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.

      -
    -- cgit v1.2.3 From 687d4a3eebf15fe9235ece784a541c1fad5852b0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Jan 2013 00:42:31 -0800 Subject: Move grid/container styles to grid.less; update docs; add offsetting back --- docs/css.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index ac6d98141..fe0ab5466 100644 --- a/docs/css.html +++ b/docs/css.html @@ -83,7 +83,7 @@
      -
    • Global styles
      • +
    • Global settings
    • Typography
    • Code
    • Grid system
      • @@ -105,6 +105,7 @@

      Global settings

      +

      Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.

      Requires HTML5 doctype

      Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

      @@ -115,6 +116,12 @@ </html> +

      Mobile first

      +

      With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

      +

      To enable proper mobile styles, add the viewport meta tag to your <head>:

      + 
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      +

      This meta tag improves rendering of sites on mobile devices and ensures proper touch-based zooming.

      +

      Typography and links

      Bootstrap sets basic global display, typography, and link styles. Specifically, we:

        @@ -554,7 +561,7 @@

        Nesting columns

        -

        To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

        +

        To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to 12.

        Level 1: 9 columns -- cgit v1.2.3 From 267d3e7ed7f50cc5625145ad714a5e1099612e87 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Jan 2013 00:50:19 -0800 Subject: streamline css docs --- docs/css.html | 65 ++++++++++------------------------------------------------- 1 file changed, 11 insertions(+), 54 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index fe0ab5466..e4499e571 100644 --- a/docs/css.html +++ b/docs/css.html @@ -178,9 +178,6 @@

        The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

        -
        - -

        Emphasis

        Make use of HTML's default emphasis tags with lightweight styles.

        @@ -240,9 +237,6 @@ -
        - -

        Abbreviations

        Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

        @@ -261,9 +255,6 @@ 
        <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
        -
        - -

        Addresses

        Present contact information for the nearest ancestor or the entire body of work.

        @@ -296,9 +287,6 @@ -
        - -

        Blockquotes

        For quoting blocks of content from another source within your document.

        @@ -348,9 +336,6 @@ -
        - -

        Lists

        @@ -671,9 +656,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
        - -

        Optional classes

        Add any of the following classes to the .table base class.

        @@ -840,9 +822,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
        - -

        Optional row classes

        Use contextual classes to color table rows.

    btnbtn btn-default Standard gray button with gradient
    btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
    btn btn-infoUsed as an alternative to the default styles
    btn btn-successbtn btn-danger Indicates a dangerous or potentially negative action
    btn btn-inverseAlternate dark gray button, not tied to a semantic action or use
    btn btn-link
    btn btn-defaultbtn Standard gray button with gradient
    @@ -933,9 +912,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    - -

    Supported table markup

    List of supported table HTML elements and how they should be used.

    @@ -1072,9 +1048,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    - -

    Optional layouts

    Included with Bootstrap are optional form layouts for common use cases.

    @@ -1163,9 +1136,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    - -

    Supported form controls

    Examples of standard form controls supported in an example form layout.

    @@ -1297,9 +1267,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    - -

    Extending form controls

    Adding on top of existing browser controls, Bootstrap includes other useful form components.

    @@ -1616,9 +1583,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    - -

    Form control states

    Provide feedback to users or visitors with basic feedback states on form controls and labels.

    @@ -2100,9 +2064,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped

    Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

    -
    - -

    How to use

    Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:

    @@ -2112,9 +2073,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped
           
    When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
    
 
 
-          
    
-
-
           
    Icon examples
    
           
    Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
    
 
@@ -2190,14 +2148,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
 
           
    Navigation
    
           
    
-            
    
-              
-            
    
+            
           
    
 
     <ul class="nav nav-list">
@@ -2213,8 +2169,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped
             
    
               
               
    
-                
    
-                  
+                
    
+                  
+                  
                 
    
               
    
             
    
@@ -2223,8 +2180,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped
 <div class="control-group">
   <label class="control-label" for="inputIcon">Email address</label>
   <div class="controls">
-    <div class="input-prepend">
-      <span class="add-on"><i class="glyphicon-envelope"></i></span>
+    <div class="input-group">
+      <span class="input-group-addon"><i class="glyphicon-envelope"></i></span>
       <input class="span2" id="inputIcon" type="text">
     </div>
   </div>
-- 
cgit v1.2.3


From 7e46b6f6364d754cb87fca35e0897cf2fad09206 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 17 Jan 2013 00:58:34 -0800
Subject: Update nav and add bounds for tablet container

---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index e4499e571..e91ef3d68 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -47,7 +47,7 @@
               Get started
             
             
  • 
-              Core CSS
+              CSS
             
    • 
             
  • 
               Components
-- 
cgit v1.2.3


From 5c76518f7d4eb5e71ce3e196a1bc98496d3cc80c Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 17 Jan 2013 14:00:03 -0800
Subject: Add respond.js to main docs pages, but only for IE8 and down

---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index e91ef3d68..98d9c6fee 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -15,6 +15,7 @@
     
     
 
     
@@ -2407,6 +2408,5 @@ For example, <code>&lt;section&gt;</code> should be wrapped
     
 
 
-
   
 
-- 
cgit v1.2.3


From f6226c9b91c38afc7d5050a3cfd7217edef7fc16 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 17 Jan 2013 14:49:52 -0800
Subject: Update Getting Started page to include mention of Respond

---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 98d9c6fee..97d25136d 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -12,7 +12,7 @@
     
     
 
-    
+    
     
     
 
     
@@ -567,7 +567,7 @@
     Level 1: 9 columns
     <div class="row">
       <div class="span6">Level 2: 6 columns</div>
-      <div class="span3">Level 2: 6 columns</div>
+      <div class="span6">Level 2: 6 columns</div>
     </div>
   </div>
 </div>
-- 
cgit v1.2.3


From 5663833bfc3ea815ee9fa82a53e1bd3e3f14f585 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 17 Jan 2013 19:51:22 -0800
Subject: Restore .btn-info

---
 docs/css.html | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 84e85c371..427048aa0 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1737,6 +1737,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped
    • + + + + + -- cgit v1.2.3 From ca74b9882b1c2029bfd0d091fd372007b9dc7420 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Jan 2013 20:16:04 -0800 Subject: Change .img-polaroid to .img-thumbnail * Same code, but different classes was confusing * Now .img-thumbnail just extends .thumbnail --- docs/css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 427048aa0..09cd0a0dd 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1875,12 +1875,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
    - + 
     <img src="..." class="img-rounded">
 <img src="..." class="img-circle">
-<img src="..." class="img-polaroid">
+<img src="..." class="img-thumbnail">
    -- cgit v1.2.3 From fd89531f6ae7c2ec9fdaf32f2a8ced34875571e6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Jan 2013 20:26:17 -0800 Subject: Update commenting and structure of layout.mustache --- docs/css.html | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 2cbd32eed..60e9ddcf0 100644 --- a/docs/css.html +++ b/docs/css.html @@ -7,18 +7,20 @@ - + + + - + - + @@ -2388,10 +2390,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped - - @@ -2407,6 +2408,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped + -- cgit v1.2.3 From 1b128b34310898382e1af54abbf6be3ec6e55361 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Jan 2013 20:28:05 -0800 Subject: comment tweaks and updating starter template --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 60e9ddcf0..70db89e51 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2390,7 +2390,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped - -- cgit v1.2.3 From 5e5670a1b4c81bcfeaac67d6b25ca9649839097f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 31 Jan 2013 18:00:11 -0800 Subject: Remove gallery link from navbar; add to homepage examples section instead --- docs/css.html | 3 --- 1 file changed, 3 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 70db89e51..b14c25ec2 100644 --- a/docs/css.html +++ b/docs/css.html @@ -61,9 +61,6 @@
  • Customize
    • -
  • - Gallery -
    • -- cgit v1.2.3 From 6993fadf7ec217608653ec5c0d4434ad8d8b2eb7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 2 Feb 2013 17:31:26 -0800 Subject: Simplify input and input group sizing * Remove .input-mini because who really needs inputs that small * Remove unnecessary border-radius resets from large and small input groups --- docs/css.html | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index b14c25ec2..0c1322a4e 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1308,6 +1308,40 @@ For example, <code>&lt;section&gt;</code> should be wrapped </div> +

    Optional sizes

    +

    Add the relative form sizing classes to the `.input-group-addon`.

    +
    +
    + @ + +
    +
    +
    + @ + +
    +
    +
    + @ + +
    + +
    +<div class="input-group span9">
+  <span class="input-group-addon input-large">@</span>
+  <input type="text" class="input-large" placeholder="Username">
+</div>
+<div class="input-group span9">
+  <span class="input-group-addon">@</span>
+  <input type="text" placeholder="Username">
+</div>
+<div class="input-group span9">
+  <span class="input-group-addon input-small">@</span>
+  <input type="text" class="input-small" placeholder="Username">
+</div>
+
    + +

    Buttons instead of text

    Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

    @@ -1457,14 +1491,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped
    + - 
     <input class="input-large" type="text" placeholder=".input-large">
+<input type="text" placeholder="Default input">
 <input class="input-small" type="text" placeholder=".input-small">
-<input class="input-mini" type="text" placeholder=".input-mini">

    Column sizing

    -- cgit v1.2.3 From 3d74c670d329e2a21902cb8202ad044ee4ec5eed Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 2 Feb 2013 18:30:52 -0800 Subject: Rearrange forms content --- docs/css.html | 237 +++++++++++++++++++++++++++++----------------------------- 1 file changed, 119 insertions(+), 118 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 0c1322a4e..051290dc9 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1267,6 +1267,125 @@ For example, <code>&lt;section&gt;</code> should be wrapped + +

    Form control states

    +

    Provide feedback to users or visitors with basic feedback states on form controls and labels.

    + +

    Input focus

    +

    We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

    +
    + + +
    +<input id="focusedInput" type="text" value="This is focused...">
+
    + +

    Invalid inputs

    +

    Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

    +
    + + +
    +<input class="span3" type="email" required>
+
    + +

    Disabled inputs

    +

    Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

    +
    + + +
    +<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+
    + +

    Disabled fieldsets

    +

    Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

    +
    +
    +
    + +
    +
    + +
    +
    + +
    + +
    + +
    +<form class="form-inline">
+  <fieldset disabled>
+    <input type="text" class="span4" placeholder="Disabled input">
+    <select class="span4">
+      <option>Disabled select</option>
+    </select>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Can't check this
+      </label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>
+
    + +

    Validation states

    +

    Bootstrap includes validation styles for error, warning, info, and success messages. To use:

    +
      +
    • Add .has-warning, .has-error, or .has-success to the parent element
      • +
    • Add .input-with-feedback to the field(s) in question
      • +
    +

    Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.

    + +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    + +
    +<div class="control-group has-warning">
+  <label class="control-label" for="inputWarning">Input with warning</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback" id="inputWarning">
+  </div>
+</div>
+<div class="control-group has-error">
+  <label class="control-label" for="inputError">Input with error</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback" id="inputError">
+  </div>
+</div>
+<div class="control-group has-success">
+  <label class="control-label" for="inputSuccess">Input with success</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback id="inputSuccess"">
+  </div>
+</div>
+
    + + +

    Extending form controls

    Adding on top of existing browser controls, Bootstrap includes other useful form components.

    @@ -1341,7 +1460,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped </div> -

    Buttons instead of text

    Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

    @@ -1616,123 +1734,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> - -

    Form control states

    -

    Provide feedback to users or visitors with basic feedback states on form controls and labels.

    - -

    Input focus

    -

    We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

    - - - -
    -<input id="focusedInput" type="text" value="This is focused...">
-
    - -

    Invalid inputs

    -

    Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

    -
    - - -
    -<input class="span3" type="email" required>
-
    - -

    Disabled inputs

    -

    Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

    -
    - - -
    -<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-
    - -

    Disabled fieldsets

    -

    Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

    -
    -
    -
    - -
    -
    - -
    -
    - -
    - -
    - -
    -<form class="form-inline">
-  <fieldset disabled>
-    <input type="text" class="span4" placeholder="Disabled input">
-    <select class="span4">
-      <option>Disabled select</option>
-    </select>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox"> Can't check this
-      </label>
-    </div>
-    <button type="submit" class="btn btn-primary">Submit</button>
-  </fieldset>
-</form>
-
    - -

    Validation states

    -

    Bootstrap includes validation styles for error, warning, info, and success messages. To use:

    -
      -
    • Add .has-warning, .has-error, or .has-success to the parent element
      • -
    • Add .input-with-feedback to the field(s) in question
      • -
    -

    Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.

    - -
    -
    - -
    - -
    -
    -
    - -
    - -
    -
    -
    - -
    - -
    -
    - -
    -<div class="control-group has-warning">
-  <label class="control-label" for="inputWarning">Input with warning</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputWarning">
-  </div>
-</div>
-<div class="control-group has-error">
-  <label class="control-label" for="inputError">Input with error</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputError">
-  </div>
-</div>
-<div class="control-group has-success">
-  <label class="control-label" for="inputSuccess">Input with success</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback id="inputSuccess"">
-  </div>
-</div>
-
    - -- cgit v1.2.3 From 1f6a988190d61128279250a444b9f028c35088c1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Feb 2013 11:11:25 -0800 Subject: Fixes #6794: incorrect docs mention of th element --- docs/css.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 051290dc9..12dd53edb 100644 --- a/docs/css.html +++ b/docs/css.html @@ -971,8 +971,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped <th>     -- cgit v1.2.3 From 6d21d8600739fe16e8993a11f82a4727065ca78a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Feb 2013 22:29:01 -0800 Subject: port docs fix from 2.3.0-wip to new css page --- docs/css.html | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 12dd53edb..56e1aa8d3 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1281,6 +1281,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped

    Invalid inputs

    Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

    +

    This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.

    -- cgit v1.2.3 From ab1dc25ffc7ed617ed32670b93fbd663e9d6bf1e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 8 Feb 2013 00:13:44 -0800 Subject: clean up responsive docs and global css styles --- docs/css.html | 75 ++++------------------------------------------------------- 1 file changed, 5 insertions(+), 70 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index dac1149bc..ead396cac 100644 --- a/docs/css.html +++ b/docs/css.html @@ -92,7 +92,7 @@
  • Buttons
  • Images
  • Glyphicons
    • -
  • Responsive design
    • +
  • Responsive utilities
    • @@ -118,9 +118,8 @@

    Mobile first

    With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

    -

    To enable proper mobile styles, add the viewport meta tag to your <head>:

    +

    To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    -

    This meta tag improves rendering of sites on mobile devices and ensures proper touch-based zooming.

    Typography and links

    Bootstrap sets basic global display, typography, and link styles. Specifically, we:

    @@ -2234,76 +2233,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    +
    -

    Responsive design

    +

    Responsive utilities

    +

    For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.

    -

    Enabling responsive features

    -

    Responsive CSS requires the following meta tag in the <head> of your pages.

    -
    -<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
    - -

    Supported devices

    -

    Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

    -
    btn btn-success Indicates a successful or positive action
    btn btn-infoContextual button for informational alert messages
    btn btn-warning - Special table cell for column (or row, depending on scope and placement) labels
    - Must be used within a <thead> + Special table cell for column (or row, depending on scope and placement) labels
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    LabelLayout widthColumn widthGutter width
    Large display1200px and up70px30px
    Default980px and up60px20px
    Portrait tablets768px and above42px20px
    Phones to tablets767px and belowFluid columns, no fixed widths
    Phones480px and belowFluid columns, no fixed widths
    -
    -/* Large desktop */
-@media (min-width: 1200px) { ... }
-
-/* Portrait tablet to landscape and desktop */
-@media (min-width: 768px) and (max-width: 979px) { ... }
-
-/* Landscape phone to portrait tablet */
-@media (max-width: 767px) { ... }
-
-/* Landscape phones and down */
-@media (max-width: 480px) { ... }
-
    - - -

    Responsive utility classes

    -

    For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).

    -- cgit v1.2.3 From 876a412c9007936cd69edd05013d6144eacc474d Mon Sep 17 00:00:00 2001 From: Gerald Monaco Date: Fri, 8 Feb 2013 19:52:50 -0500 Subject: Fix the Star glyphicon in the CSS docs --- docs/css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index ead396cac..f795602d8 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2170,10 +2170,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped
    Large button
    - Star + Star 
    -<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
+<a class="btn btn-large" href="#"><i class="glyphicon-star"></i> Star</a>
    Small button
    -- cgit v1.2.3 From e44f8cc560839cfd29f5b0e92ec66038705fbc74 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 14 Feb 2013 23:55:04 -0800 Subject: Fixes #6941: add alt attribute to images --- docs/css.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index f795602d8..12ca882db 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1906,14 +1906,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped

    Add classes to an <img> element to easily style images in any project. Rounded corners are not available in IE8.

    - - - + + + 
    -<img src="..." class="img-rounded">
-<img src="..." class="img-circle">
-<img src="..." class="img-thumbnail">
+<img src="..." class="img-rounded" alt="">
+<img src="..." class="img-circle" alt="">
+<img src="..." class="img-thumbnail" alt="">
    -- cgit v1.2.3 From 866c8d60e966683af221af722df3f2f97ed2b16b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 15 Feb 2013 12:22:26 -0800 Subject: restore jekyll-based css.html to docs --- docs/css.html | 1356 +++++++++++++++++++++++++++------------------------------ 1 file changed, 632 insertions(+), 724 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 12ca882db..b05cfbc1b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1,70 +1,7 @@ - - - - - Css · Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    - - Bootstrap -
    - -
    -
    -
    +--- +layout: default +title: CSS +--- @@ -109,17 +46,21 @@

    Requires HTML5 doctype

    Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

    -
    -<!DOCTYPE html>
-<html lang="en">
+
+{% highlight html linenos %}
+
+
   ...
-</html>
-
    + +{% endhighlight %}

    Mobile first

    With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

    To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

    - 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    + +{% highlight html linenos %} + +{% endhighlight %}

    Typography and links

    Bootstrap sets basic global display, typography, and link styles. Specifically, we:

    @@ -146,6 +87,7 @@

    Typography

    +

    Headings

    All HTML headings, <h1> through <h6> are available.

    @@ -157,6 +99,7 @@
    h6. Heading 6
    +

    Body copy

    Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).

    @@ -164,19 +107,26 @@

    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

    - 
    <p>...</p>
    +{% highlight html linenos %} +

    ...

    +{% endhighlight %} +

    Lead body copy

    Make a paragraph stand out by adding .lead.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

    - 
    <p class="lead">...</p>
    +{% highlight html linenos %} +

    ...

    +{% endhighlight %} +

    Built with Less

    The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

    +

    Emphasis

    Make use of HTML's default emphasis tags with lightweight styles.

    @@ -185,25 +135,28 @@

    This line of text is meant to be treated as fine print.

    -
    -<p>
-  <small>This line of text is meant to be treated as fine print.</small>
-</p>
-
    +{% highlight html linenos %} +This line of text is meant to be treated as fine print. +{% endhighlight %} +

    Bold

    For emphasizing a snippet of text with a heavier font-weight.

    The following snippet of text is rendered as bold text.

    - 
    <strong>rendered as bold text</strong>
    +{% highlight html linenos %} +rendered as bold text +{% endhighlight %}

    Italics

    For emphasizing a snippet of text with italics.

    The following snippet of text is rendered as italicized text.

    - 
    <em>rendered as italicized text</em>
    +{% highlight html linenos %} +rendered as italicized text +{% endhighlight %}

    Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

    @@ -214,11 +167,11 @@

    Center aligned text.

    Right aligned text.

    -
    -<p class="text-left">Left aligned text.</p>
-<p class="text-center">Center aligned text.</p>
-<p class="text-right">Right aligned text.</p>
-
    +{% highlight html linenos %} +

    Left aligned text.

    +

    Center aligned text.

    +

    Right aligned text.

    +{% endhighlight %}

    Emphasis classes

    Convey meaning through color with a handful of emphasis utility classes.

    @@ -228,14 +181,16 @@

    Donec ullamcorper nulla non metus auctor fringilla.

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

    -
    -<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-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-
    +{% highlight html linenos %} +

    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

    +

    Etiam porta sem malesuada magna mollis euismod.

    +

    Donec ullamcorper nulla non metus auctor fringilla.

    +

    Donec ullamcorper nulla non metus auctor fringilla.

    +

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

    +{% endhighlight %} +

    Abbreviations

    Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

    @@ -244,16 +199,21 @@

    An abbreviation of the word attribute is attr.

    - 
    <abbr title="attribute">attr</abbr>
    +{% highlight html linenos %} +attr +{% endhighlight %}

    <abbr class="initialism">

    Add .initialism to an abbreviation for a slightly smaller font-size.

    HTML is the best thing since sliced bread.

    - 
    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
    +{% highlight html linenos %} +HTML +{% endhighlight %} +

    Addresses

    Present contact information for the nearest ancestor or the entire body of work.

    @@ -271,21 +231,22 @@ first.last@example.com -
    -<address>
-  <strong>Twitter, Inc.</strong><br>
-  795 Folsom Ave, Suite 600<br>
-  San Francisco, CA 94107<br>
-  <abbr title="Phone">P:</abbr> (123) 456-7890
-</address>
-
-<address>
-  <strong>Full Name</strong><br>
-  <a href="mailto:#">first.last@example.com</a>
-</address>
-
    - - +{% highlight html linenos %} +
    + Twitter, Inc.
    + 795 Folsom Ave, Suite 600
    + San Francisco, CA 94107
    + P: (123) 456-7890 +
    + +
    + Full Name
    + first.last@example.com +
    +{% endhighlight %} + + +

    Blockquotes

    For quoting blocks of content from another source within your document.

    @@ -296,11 +257,11 @@

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    -
    -<blockquote>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-</blockquote>
-
    +{% highlight html linenos %} +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    +
    +{% endhighlight %}

    Blockquote options

    Style and content changes for simple variations on a standard blockquote.

    @@ -313,12 +274,12 @@ Someone famous in Source Title -
    -<blockquote>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
-</blockquote>
-
    +{% highlight html linenos %} +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    + Someone famous Source Title +
    +{% endhighlight %}

    Alternate displays

    Use .pull-right for a floated, right-aligned blockquote.

    @@ -328,11 +289,11 @@ Someone famous in Source Title -
    -<blockquote class="pull-right">
+{% highlight html linenos %}
+
    
   ...
-</blockquote>
-
    + +{% endhighlight %} @@ -359,11 +320,11 @@
  • Eget porttitor lorem
    • -
    -<ul>
-  <li>...</li>
-</ul>
-
    +{% highlight html linenos %} +
      +
    • ...
      • +
    +{% endhighlight %}

    Ordered

    A list of items in which the order does explicitly matter.

    @@ -379,11 +340,11 @@
  • Eget porttitor lorem
    • -
    -<ol>
-  <li>...</li>
-</ol>
-
    +{% highlight html linenos %} +
      +
    1. ...
      2. +
    +{% endhighlight %}

    Unstyled

    Remove the default list-style and left padding on list items (immediate children only).

    @@ -406,11 +367,11 @@
  • Eget porttitor lorem
    • -
    -<ul class="list-unstyled">
-  <li>...</li>
-</ul>
-
    +{% highlight html linenos %} +
      +
    • ...
      • +
    +{% endhighlight %}

    Inline

    Place all list items on a single line with inline-block and some light padding.

    @@ -421,11 +382,11 @@
  • Nulla volutpat
    • -
    -<ul class="list-inline">
-  <li>...</li>
-</ul>
-
    +{% highlight html linenos %} +
      +
    • ...
      • +
    +{% endhighlight %}

    Description

    A list of terms with their associated descriptions.

    @@ -440,12 +401,12 @@
    Etiam porta sem malesuada magna mollis euismod.
    -
    -<dl>
-  <dt>...</dt>
-  <dd>...</dd>
-</dl>
-
    +{% highlight html linenos %} +
    +
    ...
    +
    ...
    +
    +{% endhighlight %}

    Horizontal description

    Make terms and descriptions in <dl> line up side-by-side.

    @@ -462,12 +423,13 @@
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    -
    -<dl class="dl-horizontal">
-  <dt>...</dt>
-  <dd>...</dd>
-</dl>
-
    +{% highlight html linenos %} +
    +
    ...
    +
    ...
    +
    +{% endhighlight %} +
    Auto-truncating

    Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout. @@ -513,12 +475,13 @@

    Basic grid HTML

    For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

    -
    -<div class="row">
-  <div class="span4">...</div>
-  <div class="span8">...</div>
-</div>
-
    +{% highlight html linenos %} +
    +
    8
    +
    4
    +
    +{% endhighlight %} +

    Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

    Offsetting columns

    @@ -536,12 +499,12 @@
    6 offset 6
    -
    -<div class="row">
-  <div class="span4">...</div>
-  <div class="span4 offset4">...</div>
-</div>
-
    +{% highlight html linenos %} +
    +
    ...
    +
    ...
    +
    +{% endhighlight %}

    Nesting columns

    @@ -559,17 +522,22 @@ -
    -<div class="row">
-  <div class="span9">
+{% highlight html linenos %}
+
    
+  
    
     Level 1: 9 columns
-    <div class="row">
-      <div class="span6">Level 2: 6 columns</div>
-      <div class="span6">Level 2: 6 columns</div>
-    </div>
-  </div>
-</div>
-
    +
    +
    + Level 2: 6 columns +
    +
    + Level 2: 6 columns +
    +
    + + +{% endhighlight %} + @@ -588,20 +556,19 @@
    For example, <section> should be wrapped as inline.
    -
    -For example, <code>&lt;section&gt;</code> should be wrapped as inline.
-
    +{% highlight html linenos %} +For example, <section> should be wrapped as inline. +{% endhighlight %}

    Basic block

    Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

    <p>Sample text here...</p>
    -
    -<pre>
-  &lt;p&gt;Sample text here...&lt;/p&gt;
-</pre>
-
    +{% highlight html linenos %} +
    <p>Sample text here...</p>
    +{% endhighlight %} +

    You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

    @@ -615,7 +582,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped

    Default styles

    -

    For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

    +

    For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

    @@ -647,12 +614,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
    - -
    -<table class="table">
-  …
-</table>
-
    + +{% highlight html linenos %} + + ... +
    +{% endhighlight %}

    Optional classes

    @@ -691,12 +658,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped - -
    -<table class="table table-striped">
-  …
-</table>
-
    + +{% highlight html linenos %} + + ... +
    +{% endhighlight %}

    .table-bordered

    Add borders and rounded corners to the table.

    @@ -735,12 +702,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped - -
    -<table class="table table-bordered">
-  …
-</table>
-
    + +{% highlight html linenos %} + + ... +
    +{% endhighlight %}

    .table-hover

    Enable a hover state on table rows within a <tbody>.

    @@ -774,12 +741,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped - -
    -<table class="table table-hover">
-  …
-</table>
-
    + +{% highlight html linenos %} + + ... +
    +{% endhighlight %} +

    .table-condensed

    Makes tables more compact by cutting cell padding in half.

    @@ -813,12 +781,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped - -
    -<table class="table table-condensed">
-  …
-</table>
-
    + +{% highlight html linenos %} + + ... +
    +{% endhighlight %} +

    Optional row classes

    @@ -890,25 +859,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped 03/04/2012 Pending - - 4 - TB - Monthly - 04/04/2012 - Call in to confirm - - -
    +          
+{% highlight html linenos %}
 ...
-  <tr class="success">
-    <td>1</td>
-    <td>TB - Monthly</td>
-    <td>01/04/2012</td>
-    <td>Approved</td>
-  </tr>
+
+  1
+  TB - Monthly
+  01/04/2012
+  Approved
+
 ...
-
    +{% endhighlight %} +

    Supported table markup

    @@ -983,23 +947,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<table>
-  <caption>...</caption>
-  <thead>
-    <tr>
-      <th>...</th>
-      <th>...</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>...</td>
-      <td>...</td>
-    </tr>
-  </tbody>
-</table>
-
    +{% highlight html linenos %} + + + + + + + + + + + + + + + + +
    ...
    .........
    .........
    +{% endhighlight %} @@ -1027,23 +993,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped - -
    -<form>
-  <fieldset>
-    <legend>Legend</legend>
-    <label>Label name</label>
-    <input type="text" placeholder="Type something…">
-    <span class="help-block">Example block-level help text here.</span>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox"> Check me out
-      </label>
-    </div>
-    <button type="submit" class="btn">Submit</button>
-  </fieldset>
-</form>
-
    + +{% highlight html linenos %} +
    +
    + Legend + + +

    Example block-level help text here.

    +
    + +
    + +
    +
    +{% endhighlight %}

    Optional layouts

    @@ -1060,19 +1026,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped - -
    -<form class="form-inline">
-  <input type="text" class="span3" placeholder="Email">
-  <input type="password" class="span3" placeholder="Password">
-    <div class="checkbox">
-      <label>
-        <input type="checkbox"> Remember me
-      </label>
-    </div>
-  <button type="submit" class="btn">Sign in</button>
-</form>
-
    + +{% highlight html linenos %} +
    + + +
    + +
    + +
    +{% endhighlight %}

    Horizontal form

    Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

    @@ -1106,32 +1072,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<form class="form-horizontal">
-  <div class="control-group">
-    <label class="control-label" for="inputEmail">Email</label>
-    <div class="controls">
-      <input type="text" id="inputEmail" placeholder="Email">
-    </div>
-  </div>
-  <div class="control-group">
-    <label class="control-label" for="inputPassword">Password</label>
-    <div class="controls">
-      <input type="password" id="inputPassword" placeholder="Password">
-    </div>
-  </div>
-  <div class="control-group">
-    <div class="controls">
-      <div class="checkbox">
-        <label>
-          <input type="checkbox"> Remember me
-        </label>
-      </div>
-      <button type="submit" class="btn">Sign in</button>
-    </div>
-  </div>
-</form>
-
    +{% highlight html linenos %} +
    +
    + +
    + +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +{% endhighlight %}

    Supported form controls

    @@ -1143,18 +1109,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped
    -
    -<input type="text" placeholder="Text input">
-
    +{% highlight html linenos %} + +{% endhighlight %}

    Textarea

    Form control which supports multiple lines of text. Change rows attribute as necessary.

    -
    -<textarea rows="3"></textarea>
-
    +{% highlight html linenos %} + +{% endhighlight %}

    Checkboxes and radios

    Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

    @@ -1180,27 +1146,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<div class="checkbox">
-  <label>
-    <input type="checkbox" value="">
+{% highlight html linenos %}
+
    
+  
+
    
 
-<div class="radio">
-  <label>
-    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+
    
+
    + + +{% endhighlight %}

    Inline checkboxes

    Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.

    @@ -1215,17 +1175,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped 3 -
    -<label class="checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-</label>
-<label class="checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-</label>
-<label class="checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-</label>
-
    +{% highlight html linenos %} + + + +{% endhighlight %}

    Selects

    Use the default option or specify a multiple="multiple" to show multiple options at once.

    @@ -1246,23 +1206,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<select>
-  <option>1</option>
-  <option>2</option>
-  <option>3</option>
-  <option>4</option>
-  <option>5</option>
-</select>
-
-<select multiple="multiple">
-  <option>1</option>
-  <option>2</option>
-  <option>3</option>
-  <option>4</option>
-  <option>5</option>
-</select>
-
    +{% highlight html linenos %} + + + +{% endhighlight %} @@ -1274,9 +1234,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped
    -
    -<input id="focusedInput" type="text" value="This is focused...">
-
    +{% highlight html linenos %} + +{% endhighlight %}

    Invalid inputs

    Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

    @@ -1284,18 +1244,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped
    -
    -<input class="span3" type="email" required>
-
    +{% highlight html linenos %} + +{% endhighlight %}

    Disabled inputs

    Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

    -
    -<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-
    +{% highlight html linenos %} + +{% endhighlight %}

    Disabled fieldsets

    Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

    @@ -1317,22 +1277,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<form class="form-inline">
-  <fieldset disabled>
-    <input type="text" class="span4" placeholder="Disabled input">
-    <select class="span4">
-      <option>Disabled select</option>
-    </select>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox"> Can't check this
-      </label>
-    </div>
-    <button type="submit" class="btn btn-primary">Submit</button>
-  </fieldset>
-</form>
-
    +{% highlight html linenos %} +
    +
    +
    + +
    +
    + +
    +
    + +
    + +
    +
    +{% endhighlight %}

    Validation states

    Bootstrap includes validation styles for error, warning, info, and success messages. To use:

    @@ -1362,26 +1326,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<div class="control-group has-warning">
-  <label class="control-label" for="inputWarning">Input with warning</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputWarning">
-  </div>
-</div>
-<div class="control-group has-error">
-  <label class="control-label" for="inputError">Input with error</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputError">
-  </div>
-</div>
-<div class="control-group has-success">
-  <label class="control-label" for="inputSuccess">Input with success</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback id="inputSuccess"">
-  </div>
-</div>
-
    +{% highlight html linenos %} +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +{% endhighlight %} @@ -1408,23 +1372,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped .00 -
    -<div class="input-group span9">
-  <span class="input-group-addon">@</span>
-  <input type="text" placeholder="Username">
-</div>
-
-<div class="input-group span6">
-  <input type="text">
-  <span class="input-group-addon">.00</span>
-</div>
-
-<div class="input-group span3">
-  <span class="input-group-addon">$</span>
-  <input type="text">
-  <span class="input-group-addon">.00</span>
-</div>
-
    +{% highlight html linenos %} +
    + @ + +
    + +
    + + .00 +
    + +
    + $ + + .00 +
    +{% endhighlight %}

    Optional sizes

    Add the relative form sizing classes to the `.input-group-addon`.

    @@ -1444,20 +1408,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<div class="input-group span9">
-  <span class="input-group-addon input-large">@</span>
-  <input type="text" class="input-large" placeholder="Username">
-</div>
-<div class="input-group span9">
-  <span class="input-group-addon">@</span>
-  <input type="text" placeholder="Username">
-</div>
-<div class="input-group span9">
-  <span class="input-group-addon input-small">@</span>
-  <input type="text" class="input-small" placeholder="Username">
-</div>
-
    +{% highlight html linenos %} +
    + @ + +
    + +
    + @ + +
    + +
    + @ + +
    +{% endhighlight %}

    Buttons instead of text

    Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

    @@ -1476,21 +1442,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<div class="input-group span7">
-  <span class="input-group-btn">
-    <button class="btn" type="button">Go!</button>
-  </span>
-  <input type="text">
-</div>
-
-<div class="input-group span7">
-  <input type="text">
-  <span class="input-group-btn">
-    <button class="btn" type="button">Go!</button>
-  </span>
-</div>
-
    +{% highlight html linenos %} +
    + + + + +
    + +
    + + + + +
    +{% endhighlight %}

    Button dropdowns

    @@ -1523,33 +1489,35 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<div class="input-group span7">
-  <div class="input-group-btn btn-group">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-      Action
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </div>
-  <input type="text">
-</div>
-
-<div class="input-group span7">
-  <input type="text">
-  <div class="input-group-btn btn-group">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-      Action
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </div>
-</div>
-
    +{% highlight html linenos %} +
    +
    + + +
    + +
    + +
    + +
    + + +
    +
    +{% endhighlight %}

    Segmented dropdown groups

    @@ -1567,7 +1535,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
  • Separated link
    • - +
    @@ -1589,16 +1557,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped
    -
    -<div class="input-prepend">
-  <div class="btn-group">...</div>
-  <input type="text" class="span3">
-</div>
-<div class="input-append">
-  <input type="text" class="span3">
-  <div class="btn-group">...</div>
-</div>
-
    +{% highlight html linenos %} +
    +
    + +
    + +
    + +
    + +
    + +
    +
    +{% endhighlight %}

    Control sizing

    Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

    @@ -1612,11 +1585,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<input class="input-large" type="text" placeholder=".input-large">
-<input type="text" placeholder="Default input">
-<input class="input-small" type="text" placeholder=".input-small">
-
    +{% highlight html linenos %} + + + +{% endhighlight %}

    Column sizing

    Use .span1 to .span12 for setting widths on inputs that match Bootstrap's grid system.

    @@ -1648,20 +1621,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<input class="span1" type="text" placeholder=".span1">
-<input class="span2" type="text" placeholder=".span2">
-<input class="span3" type="text" placeholder=".span3">
-<select class="span1">
+{% highlight html linenos %}
+
+
+
+
+
+
+{% endhighlight %}
+
           
    If you need multiple inputs on the same line, wrap them in the standard grid markup (with .row and .span* classes). Each input should have it's own column and will expand to fill the available width automatically.
    
           
    
             
    
@@ -1676,28 +1650,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped
               
    
             
           
    
-
    -<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>
-
    
+{% highlight html linenos %}
+
    
+  
    
+    
+  
    
+  
    
+    
+  
    
+  
    
+    
+  
    
+
    
+{% endhighlight %}
 
           
    Uneditable inputs
    
           
    Present data in a form that's not editable without using actual form markup.
    
           
    
             Some value here
           
    
-
    -<span class="input-xlarge uneditable-input">Some value here</span>
-
    
+{% highlight html linenos %}
+Some value here
+{% endhighlight %}
 
           
    Form actions
    
           
    End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.
    
@@ -1707,12 +1681,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
               
             
           
-
    -<div class="form-actions">
-  <button type="submit" class="btn btn-primary">Save changes</button>
-  <button type="button" class="btn">Cancel</button>
-</div>
-
    
+{% highlight html linenos %}
+
    
+  
+  
+
    
+{% endhighlight %}
 
           
    Help text
    
           
    Inline and block level support for help text that appears around form controls.
    
@@ -1720,18 +1694,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped
           
    
              Inline help text
           
    
-
    -<input type="text"><span class="help-inline">Inline help text</span>
-
    
+{% highlight html linenos %}
+
+Inline help text
+{% endhighlight %}
 
           
    Block help
    
           
    
             
             A longer block of help text that breaks onto a new line and may extend beyond one line.
           
    
-
    -<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
-
    
+{% highlight html linenos %}
+
+A longer block of help text that breaks onto a new line and may extend beyond one line.
+{% endhighlight %}
 
         
 
@@ -1817,24 +1793,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped
               
             
    
           
-
    -<p>
-  <button class="btn btn-large btn-primary" type="button">Large button</button>
-  <button class="btn btn-large" type="button">Large button</button>
-</p>
-<p>
-  <button class="btn btn-primary" type="button">Default button</button>
-  <button class="btn" type="button">Default button</button>
-</p>
-<p>
-  <button class="btn btn-small btn-primary" type="button">Small button</button>
-  <button class="btn btn-small" type="button">Small button</button>
-</p>
-<p>
-  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
-  <button class="btn btn-mini" type="button">Mini button</button>
-</p>
-
    
+{% highlight html linenos %}
+
    
+  
+  
+
    
+
    
+  
+  
+
    
+
    
+  
+  
+
    
+
    
+  
+  
+
    
+{% endhighlight %}
+
           
    Create block level buttons—those that span the full width of a parent— by adding .btn-block.
    
           
    
             
    
@@ -1842,40 +1819,40 @@ For example, <code>&lt;section&gt;</code> should be wrapped
               
             
    
           
    
-
    -<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
-<button class="btn btn-large btn-block" type="button">Block level button</button>
-
    
+{% highlight html linenos %}
+
+
+{% endhighlight %}
 
 
           
    Disabled state
    
           
    Make buttons look unclickable by fading them back 50%.
    
 
+          
    Button element
    
+          
    Add the disabled attribute to <button> buttons.
    
+          
    
+            
+            
+          
    
+{% highlight html linenos %}
+
+
+{% endhighlight %}
+
           
    Anchor element
    
           
    Add the .disabled class to <a> buttons.
    
           
    
             Primary link
             Link
           
    
-
    -<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-<a href="#" class="btn btn-large disabled">Link</a>
-
    
+{% highlight html linenos %}
+Primary link
+Link
+{% endhighlight %}
           
    
             We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
           
    
 
-          
    Button element
    
-          
    Add the disabled attribute to <button> buttons.
    
-          
    
-            
-            
-          
    
-
    -<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
-<button type="button" class="btn btn-large" disabled>Button</button>
-
    
-
 
           
    One class, multiple tags
    
           
    Use the .btn class on an <a>, <button>, or <input> element.
    
@@ -1885,13 +1862,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped
             
             
           
-
    -<a class="btn" href="">Link</a>
-<button class="btn" type="submit">Button</button>
-<input class="btn" type="button" value="Input">
-<input class="btn" type="submit" value="Submit">
-
    
-          
    As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.
    
+{% highlight html linenos %}
+Link
+
+
+
+{% endhighlight %}
+          
    As a best practice, we highly recommend matching using the <button< element whenever possible to ensure matching cross-browser rendering.
    
 
         
 
@@ -1906,15 +1883,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped
 
           
    Add classes to an <img> element to easily style images in any project. Rounded corners are not available in IE8.
    
           
    
-            
-            
-            
+            
+            
+            
           
    
-
    -<img src="..." class="img-rounded" alt="">
-<img src="..." class="img-circle" alt="">
-<img src="..." class="img-thumbnail" alt="">
-
    
+{% highlight html linenos %}
+
+
+
+{% endhighlight %}
 
         
 
@@ -2105,9 +2082,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped
 
           
    How to use
    
           
    Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:
    
-
    -<i class="glyphicon-search"></i>
-
    
+{% highlight html linenos %}
+
+{% endhighlight %}
           
    Want to change the icon color? Just change the color of the parent element.
    
           
    When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
    
 
@@ -2121,87 +2098,86 @@ For example, <code>&lt;section&gt;</code> should be wrapped
           
    
             
    
               
    
-                
-                
-                
-                
+                
+                
+                
+                
               
    
             
    
-          
    
-
    -<div class="btn-toolbar">
-  <div class="btn-group">
-
-    <a class="btn" href="#"><i class="glyphicon-align-left"></i></a>
-    <a class="btn" href="#"><i class="glyphicon-align-center"></i></a>
-    <a class="btn" href="#"><i class="glyphicon-align-right"></i></a>
-    <a class="btn" href="#"><i class="glyphicon-align-justify"></i></a>
-  </div>
-</div>
-
    
+          
+{% highlight html linenos %}
+
    
+  
    
+    
+    
+    
+    
+  
    
+
    
+{% endhighlight %}
 
           
    Dropdown in a button group
    
           
    
             
    
-               User
+               User
               
               
             
    
-          
    
-
    -<div class="btn-group">
-  <a class="btn btn-primary" href="#"><i class="glyphicon-user icon-white"></i> User</a>
-  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-  <ul class="dropdown-menu">
-    <li><a href="#"><i class="glyphicon-pencil"></i> Edit</a></li>
-    <li><a href="#"><i class="glyphicon-trash"></i> Delete</a></li>
-    <li><a href="#"><i class="glyphicon-ban-circle"></i> Ban</a></li>
-    <li class="divider"></li>
-    <li><a href="#"><i class="i"></i> Make admin</a></li>
-  </ul>
-</div>
-
    
+          
+{% highlight html linenos %}
+
    
+   User
+  
+  
+
    
+{% endhighlight %}
 
           
    Large button
    
           
    
-             Star
-          
    
-
    -<a class="btn btn-large" href="#"><i class="glyphicon-star"></i> Star</a>
-
    
+             Star
+          
+{% highlight html linenos %}
+ Star
+{% endhighlight %}
 
           
    Small button
    
           
    
-            
-          
    
-
    -<a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a>
-
    
+            
+          
+{% highlight html linenos %}
+
+{% endhighlight %}
 
 
           
    Navigation
    
           
    
             
-          
    
-
    -<ul class="nav nav-list">
-  <li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> Home</a></li>
-  <li><a href="#"><i class="glyphicon-book"></i> Library</a></li>
-  <li><a href="#"><i class="glyphicon-pencil"></i> Applications</a></li>
-  <li><a href="#"><i class="i"></i> Misc</a></li>
-</ul>
-
    
+          
+{% highlight html linenos %}
+
+{% endhighlight %}
 
           
    Form fields
    
           
    
@@ -2209,23 +2185,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped
               
               
    
                 
    
-                  
+                  
                   
                 
    
               
    
             
           
    
-
    -<div class="control-group">
-  <label class="control-label" for="inputIcon">Email address</label>
-  <div class="controls">
-    <div class="input-group">
-      <span class="input-group-addon"><i class="glyphicon-envelope"></i></span>
-      <input class="span2" id="inputIcon" type="text">
-    </div>
-  </div>
-</div>
-
    
+{% highlight html linenos %}
+
    
+  
+  
    
+    
    
+      
+      
+    
    
+  
    
+
    
+{% endhighlight %}
 
         
 
@@ -2312,75 +2288,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
 
 
 
-      
-    
-
-  
-
-
-
-    
-    
+      
+    
 
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-
-    
-    
-    
-
-    
-
-
-  
-
+  
-- 
cgit v1.2.3


From ce21926704778a2fb8ff76f5241b90a97abeea4c Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 16 Feb 2013 01:26:43 -0800
Subject: All Glyphicons now require a base class, e.g.
 .glyphicon.glyphicon-star

---
 docs/css.html | 416 +++++++++++++++++++++++++++++-----------------------------
 1 file changed, 208 insertions(+), 208 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index b05cfbc1b..297b4ea33 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -20,16 +20,16 @@ title: CSS
     
    
       
    
         
       
    
       
    
@@ -1908,171 +1908,171 @@ For example, <section> should be wrapped as inline.
           
    Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.
    
 
           
      
-            
    •  glyphicon-glass
      • 
-            
    •  glyphicon-music
      • 
-            
    •  glyphicon-search
      • 
-            
    •  glyphicon-envelope
      • 
-            
    •  glyphicon-heart
      • 
-            
    •  glyphicon-star
      • 
-            
    •  glyphicon-star-empty
      • 
-            
    •  glyphicon-user
      • 
-            
    •  glyphicon-film
      • 
-            
    •  glyphicon-th-large
      • 
-            
    •  glyphicon-th
      • 
-            
    •  glyphicon-th-list
      • 
-            
    •  glyphicon-ok
      • 
-            
    •  glyphicon-remove
      • 
-            
    •  glyphicon-zoom-in
      • 
-            
    •  glyphicon-zoom-out
      • 
-            
    •  glyphicon-off
      • 
-            
    •  glyphicon-signal
      • 
-            
    •  glyphicon-cog
      • 
-            
    •  glyphicon-trash
      • 
-            
    •  glyphicon-home
      • 
-            
    •  glyphicon-file
      • 
-            
    •  glyphicon-time
      • 
-            
    •  glyphicon-road
      • 
-            
    •  glyphicon-download-alt
      • 
-            
    •  glyphicon-download
      • 
-            
    •  glyphicon-upload
      • 
-            
    •  glyphicon-inbox
      • 
-
-            
    •  glyphicon-play-circle
      • 
-            
    •  glyphicon-repeat
      • 
-            
    •  glyphicon-refresh
      • 
-            
    •  glyphicon-list-alt
      • 
-            
    •  glyphicon-lock
      • 
-            
    •  glyphicon-flag
      • 
-            
    •  glyphicon-headphones
      • 
-            
    •  glyphicon-volume-off
      • 
-            
    •  glyphicon-volume-down
      • 
-            
    •  glyphicon-volume-up
      • 
-            
    •  glyphicon-qrcode
      • 
-            
    •  glyphicon-barcode
      • 
-            
    •  glyphicon-tag
      • 
-            
    •  glyphicon-tags
      • 
-            
    •  glyphicon-book
      • 
-            
    •  glyphicon-bookmark
      • 
-            
    •  glyphicon-print
      • 
-            
    •  glyphicon-camera
      • 
-            
    •  glyphicon-font
      • 
-            
    •  glyphicon-bold
      • 
-            
    •  glyphicon-italic
      • 
-            
    •  glyphicon-text-height
      • 
-            
    •  glyphicon-text-width
      • 
-            
    •  glyphicon-align-left
      • 
-            
    •  glyphicon-align-center
      • 
-            
    •  glyphicon-align-right
      • 
-            
    •  glyphicon-align-justify
      • 
-            
    •  glyphicon-list
      • 
-
-            
    •  glyphicon-indent-left
      • 
-            
    •  glyphicon-indent-right
      • 
-            
    •  glyphicon-facetime-video
      • 
-            
    •  glyphicon-picture
      • 
-            
    •  glyphicon-pencil
      • 
-            
    •  glyphicon-map-marker
      • 
-            
    •  glyphicon-adjust
      • 
-            
    •  glyphicon-tint
      • 
-            
    •  glyphicon-edit
      • 
-            
    •  glyphicon-share
      • 
-            
    •  glyphicon-check
      • 
-            
    •  glyphicon-move
      • 
-            
    •  glyphicon-step-backward
      • 
-            
    •  glyphicon-fast-backward
      • 
-            
    •  glyphicon-backward
      • 
-            
    •  glyphicon-play
      • 
-            
    •  glyphicon-pause
      • 
-            
    •  glyphicon-stop
      • 
-            
    •  glyphicon-forward
      • 
-            
    •  glyphicon-fast-forward
      • 
-            
    •  glyphicon-step-forward
      • 
-            
    •  glyphicon-eject
      • 
-            
    •  glyphicon-chevron-left
      • 
-            
    •  glyphicon-chevron-right
      • 
-            
    •  glyphicon-plus-sign
      • 
-            
    •  glyphicon-minus-sign
      • 
-            
    •  glyphicon-remove-sign
      • 
-            
    •  glyphicon-ok-sign
      • 
-
-            
    •  glyphicon-question-sign
      • 
-            
    •  glyphicon-info-sign
      • 
-            
    •  glyphicon-screenshot
      • 
-            
    •  glyphicon-remove-circle
      • 
-            
    •  glyphicon-ok-circle
      • 
-            
    •  glyphicon-ban-circle
      • 
-            
    •  glyphicon-arrow-left
      • 
-            
    •  glyphicon-arrow-right
      • 
-            
    •  glyphicon-arrow-up
      • 
-            
    •  glyphicon-arrow-down
      • 
-            
    •  glyphicon-share-alt
      • 
-            
    •  glyphicon-resize-full
      • 
-            
    •  glyphicon-resize-small
      • 
-            
    •  glyphicon-plus
      • 
-            
    •  glyphicon-minus
      • 
-            
    •  glyphicon-asterisk
      • 
-            
    •  glyphicon-exclamation-sign
      • 
-            
    •  glyphicon-gift
      • 
-            
    •  glyphicon-leaf
      • 
-            
    •  glyphicon-fire
      • 
-            
    •  glyphicon-eye-open
      • 
-            
    •  glyphicon-eye-close
      • 
-            
    •  glyphicon-warning-sign
      • 
-            
    •  glyphicon-plane
      • 
-            
    •  glyphicon-calendar
      • 
-            
    •  glyphicon-random
      • 
-            
    •  glyphicon-comment
      • 
-            
    •  glyphicon-magnet
      • 
-
-            
    •  glyphicon-chevron-up
      • 
-            
    •  glyphicon-chevron-down
      • 
-            
    •  glyphicon-retweet
      • 
-            
    •  glyphicon-shopping-cart
      • 
-            
    •  glyphicon-folder-close
      • 
-            
    •  glyphicon-folder-open
      • 
-            
    •  glyphicon-resize-vertical
      • 
-            
    •  glyphicon-resize-horizontal
      • 
-            
    •  glyphicon-hdd
      • 
-            
    •  glyphicon-bullhorn
      • 
-            
    •  glyphicon-bell
      • 
-            
    •  glyphicon-certificate
      • 
-            
    •  glyphicon-thumbs-up
      • 
-            
    •  glyphicon-thumbs-down
      • 
-            
    •  glyphicon-hand-right
      • 
-            
    •  glyphicon-hand-left
      • 
-            
    •  glyphicon-hand-up
      • 
-            
    •  glyphicon-hand-down
      • 
-            
    •  glyphicon-circle-arrow-right
      • 
-            
    •  glyphicon-circle-arrow-left
      • 
-            
    •  glyphicon-circle-arrow-up
      • 
-            
    •  glyphicon-circle-arrow-down
      • 
-            
    •  glyphicon-globe
      • 
-            
    •  glyphicon-wrench
      • 
-            
    •  glyphicon-tasks
      • 
-            
    •  glyphicon-filter
      • 
-            
    •  glyphicon-briefcase
      • 
-            
    •  glyphicon-fullscreen
      • 
-
-            
    •  glyphicon-dashboard
      • 
-            
    •  glyphicon-paperclip
      • 
-            
    •  glyphicon-heart-empty
      • 
-            
    •  glyphicon-link
      • 
-            
    •  glyphicon-phone
      • 
-            
    •  glyphicon-pushpin
      • 
-            
    •  glyphicon-euro
      • 
-            
    •  glyphicon-usd
      • 
-            
    •  glyphicon-gbp
      • 
-            
    •  glyphicon-sort
      • 
-            
    •  glyphicon-sort-by-alphabet
      • 
-            
    •  glyphicon-sort-by-alphabet-alt
      • 
-            
    •  glyphicon-sort-by-order
      • 
-            
    •  glyphicon-sort-by-order-alt
      • 
-            
    •  glyphicon-sort-by-attributes
      • 
-            
    •  glyphicon-sort-by-attributes-alt
      • 
-            
    •  glyphicon-unchecked
      • 
-            
    •  glyphicon-expand
      • 
-            
    •  glyphicon-collapse
      • 
-            
    •  glyphicon-collapse-top
      • 
+            
    •  glyphicon-glass
      • 
+            
    •  glyphicon-music
      • 
+            
    •  glyphicon-search
      • 
+            
    •  glyphicon-envelope
      • 
+            
    •  glyphicon-heart
      • 
+            
    •  glyphicon-star
      • 
+            
    •  glyphicon-star-empty
      • 
+            
    •  glyphicon-user
      • 
+            
    •  glyphicon-film
      • 
+            
    •  glyphicon-th-large
      • 
+            
    •  glyphicon-th
      • 
+            
    •  glyphicon-th-list
      • 
+            
    •  glyphicon-ok
      • 
+            
    •  glyphicon-remove
      • 
+            
    •  glyphicon-zoom-in
      • 
+            
    •  glyphicon-zoom-out
      • 
+            
    •  glyphicon-off
      • 
+            
    •  glyphicon-signal
      • 
+            
    •  glyphicon-cog
      • 
+            
    •  glyphicon-trash
      • 
+            
    •  glyphicon-home
      • 
+            
    •  glyphicon-file
      • 
+            
    •  glyphicon-time
      • 
+            
    •  glyphicon-road
      • 
+            
    •  glyphicon-download-alt
      • 
+            
    •  glyphicon-download
      • 
+            
    •  glyphicon-upload
      • 
+            
    •  glyphicon-inbox
      • 
+
+            
    •  glyphicon-play-circle
      • 
+            
    •  glyphicon-repeat
      • 
+            
    •  glyphicon-refresh
      • 
+            
    •  glyphicon-list-alt
      • 
+            
    •  glyphicon-lock
      • 
+            
    •  glyphicon-flag
      • 
+            
    •  glyphicon-headphones
      • 
+            
    •  glyphicon-volume-off
      • 
+            
    •  glyphicon-volume-down
      • 
+            
    •  glyphicon-volume-up
      • 
+            
    •  glyphicon-qrcode
      • 
+            
    •  glyphicon-barcode
      • 
+            
    •  glyphicon-tag
      • 
+            
    •  glyphicon-tags
      • 
+            
    •  glyphicon-book
      • 
+            
    •  glyphicon-bookmark
      • 
+            
    •  glyphicon-print
      • 
+            
    •  glyphicon-camera
      • 
+            
    •  glyphicon-font
      • 
+            
    •  glyphicon-bold
      • 
+            
    •  glyphicon-italic
      • 
+            
    •  glyphicon-text-height
      • 
+            
    •  glyphicon-text-width
      • 
+            
    •  glyphicon-align-left
      • 
+            
    •  glyphicon-align-center
      • 
+            
    •  glyphicon-align-right
      • 
+            
    •  glyphicon-align-justify
      • 
+            
    •  glyphicon-list
      • 
+
+            
    •  glyphicon-indent-left
      • 
+            
    •  glyphicon-indent-right
      • 
+            
    •  glyphicon-facetime-video
      • 
+            
    •  glyphicon-picture
      • 
+            
    •  glyphicon-pencil
      • 
+            
    •  glyphicon-map-marker
      • 
+            
    •  glyphicon-adjust
      • 
+            
    •  glyphicon-tint
      • 
+            
    •  glyphicon-edit
      • 
+            
    •  glyphicon-share
      • 
+            
    •  glyphicon-check
      • 
+            
    •  glyphicon-move
      • 
+            
    •  glyphicon-step-backward
      • 
+            
    •  glyphicon-fast-backward
      • 
+            
    •  glyphicon-backward
      • 
+            
    •  glyphicon-play
      • 
+            
    •  glyphicon-pause
      • 
+            
    •  glyphicon-stop
      • 
+            
    •  glyphicon-forward
      • 
+            
    •  glyphicon-fast-forward
      • 
+            
    •  glyphicon-step-forward
      • 
+            
    •  glyphicon-eject
      • 
+            
    •  glyphicon-chevron-left
      • 
+            
    •  glyphicon-chevron-right
      • 
+            
    •  glyphicon-plus-sign
      • 
+            
    •  glyphicon-minus-sign
      • 
+            
    •  glyphicon-remove-sign
      • 
+            
    •  glyphicon-ok-sign
      • 
+
+            
    •  glyphicon-question-sign
      • 
+            
    •  glyphicon-info-sign
      • 
+            
    •  glyphicon-screenshot
      • 
+            
    •  glyphicon-remove-circle
      • 
+            
    •  glyphicon-ok-circle
      • 
+            
    •  glyphicon-ban-circle
      • 
+            
    •  glyphicon-arrow-left
      • 
+            
    •  glyphicon-arrow-right
      • 
+            
    •  glyphicon-arrow-up
      • 
+            
    •  glyphicon-arrow-down
      • 
+            
    •  glyphicon-share-alt
      • 
+            
    •  glyphicon-resize-full
      • 
+            
    •  glyphicon-resize-small
      • 
+            
    •  glyphicon-plus
      • 
+            
    •  glyphicon-minus
      • 
+            
    •  glyphicon-asterisk
      • 
+            
    •  glyphicon-exclamation-sign
      • 
+            
    •  glyphicon-gift
      • 
+            
    •  glyphicon-leaf
      • 
+            
    •  glyphicon-fire
      • 
+            
    •  glyphicon-eye-open
      • 
+            
    •  glyphicon-eye-close
      • 
+            
    •  glyphicon-warning-sign
      • 
+            
    •  glyphicon-plane
      • 
+            
    •  glyphicon-calendar
      • 
+            
    •  glyphicon-random
      • 
+            
    •  glyphicon-comment
      • 
+            
    •  glyphicon-magnet
      • 
+
+            
    •  glyphicon-chevron-up
      • 
+            
    •  glyphicon-chevron-down
      • 
+            
    •  glyphicon-retweet
      • 
+            
    •  glyphicon-shopping-cart
      • 
+            
    •  glyphicon-folder-close
      • 
+            
    •  glyphicon-folder-open
      • 
+            
    •  glyphicon-resize-vertical
      • 
+            
    •  glyphicon-resize-horizontal
      • 
+            
    •  glyphicon-hdd
      • 
+            
    •  glyphicon-bullhorn
      • 
+            
    •  glyphicon-bell
      • 
+            
    •  glyphicon-certificate
      • 
+            
    •  glyphicon-thumbs-up
      • 
+            
    •  glyphicon-thumbs-down
      • 
+            
    •  glyphicon-hand-right
      • 
+            
    •  glyphicon-hand-left
      • 
+            
    •  glyphicon-hand-up
      • 
+            
    •  glyphicon-hand-down
      • 
+            
    •  glyphicon-circle-arrow-right
      • 
+            
    •  glyphicon-circle-arrow-left
      • 
+            
    •  glyphicon-circle-arrow-up
      • 
+            
    •  glyphicon-circle-arrow-down
      • 
+            
    •  glyphicon-globe
      • 
+            
    •  glyphicon-wrench
      • 
+            
    •  glyphicon-tasks
      • 
+            
    •  glyphicon-filter
      • 
+            
    •  glyphicon-briefcase
      • 
+            
    •  glyphicon-fullscreen
      • 
+
+            
    •  glyphicon-dashboard
      • 
+            
    •  glyphicon-paperclip
      • 
+            
    •  glyphicon-heart-empty
      • 
+            
    •  glyphicon-link
      • 
+            
    •  glyphicon-phone
      • 
+            
    •  glyphicon-pushpin
      • 
+            
    •  glyphicon-euro
      • 
+            
    •  glyphicon-usd
      • 
+            
    •  glyphicon-gbp
      • 
+            
    •  glyphicon-sort
      • 
+            
    •  glyphicon-sort-by-alphabet
      • 
+            
    •  glyphicon-sort-by-alphabet-alt
      • 
+            
    •  glyphicon-sort-by-order
      • 
+            
    •  glyphicon-sort-by-order-alt
      • 
+            
    •  glyphicon-sort-by-attributes
      • 
+            
    •  glyphicon-sort-by-attributes-alt
      • 
+            
    •  glyphicon-unchecked
      • 
+            
    •  glyphicon-expand
      • 
+            
    •  glyphicon-collapse
      • 
+            
    •  glyphicon-collapse-top
      • 
 
           
    
 
@@ -2083,7 +2083,7 @@ For example, <section> should be wrapped as inline.
           
    How to use
    
           
    Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:
    
 {% highlight html linenos %}
-
+
 {% endhighlight %}
           
    Want to change the icon color? Just change the color of the parent element.
    
           
    When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
    
@@ -2098,20 +2098,20 @@ For example, <section> should be wrapped as inline.
           
    
             
    
               
    
-                
-                
-                
-                
+                
+                
+                
+                
               
    
             
    
           
    
 {% highlight html linenos %}
 
    
   
    
-    
-    
-    
-    
+    
+    
+    
+    
   
    
 
    
 {% endhighlight %}
@@ -2119,63 +2119,63 @@ For example, <section> should be wrapped as inline.
           
    Dropdown in a button group
    
           
    
             
    
-               User
+               User
               
               
             
    
           
    
 {% highlight html linenos %}
 
    
-   User
+   User
   
   
 
    
 {% endhighlight %}
 
           
    Large button
    
           
    
-             Star
+             Star
           
    
 {% highlight html linenos %}
- Star
+ Star
 {% endhighlight %}
 
           
    Small button
    
           
    
-            
+            
           
    
 {% highlight html linenos %}
-
+
 {% endhighlight %}
 
 
           
    Navigation
    
           
    
             
           
    
 {% highlight html linenos %}
 
 {% endhighlight %}
 
@@ -2185,7 +2185,7 @@ For example, <section> should be wrapped as inline.
               
               
    
                 
    
-                  
+                  
                   
                 
    
               
    
@@ -2196,7 +2196,7 @@ For example, <section> should be wrapped as inline.
   
   
    
     
    
-      
+      
       
     
    
   
    
-- 
cgit v1.2.3


From 4cbb663d9d9f1399b37e97a54c0b9f67270c4943 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 17 Feb 2013 18:10:29 -0800
Subject: Update some links and rename #gridsystem to #grid-system

---
 docs/css.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 297b4ea33..a295ae244 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -23,7 +23,7 @@ title: CSS
           
  •  Global settings
    • 
           
  •  Typography
    • 
           
  •  Code
    • 
-          
  •  Grid system
    • 
+          
  •  Grid system
    • 
           
  •  Tables
    • 
           
  •  Forms
    • 
           
  •  Buttons
    • 
@@ -440,7 +440,7 @@ title: CSS
 
         
-        
    
+        
    
           
    
             
    Grid system
    
           
    
-- 
cgit v1.2.3


From e2d829e511a117a28dd6528267d57738b54a4adc Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 17 Feb 2013 20:23:31 -0800
Subject: fix inaccurate text classes code

---
 docs/css.html | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index a295ae244..88c3b48a1 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -182,11 +182,10 @@ title: CSS
             
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
    
           
    
 {% highlight html linenos %}
-
    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
    
-
    Etiam porta sem malesuada magna mollis euismod.
    
-
    Donec ullamcorper nulla non metus auctor fringilla.
    
-
    Donec ullamcorper nulla non metus auctor fringilla.
    
-
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
    
+
    ...
    
+
    ...
    
+
    ...
    
+
    ...
    
 {% endhighlight %}
 
 
-- 
cgit v1.2.3


From e1bb94c38370fd2542415557c660d0804d4f42b1 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 24 Feb 2013 01:29:19 -0800
Subject: try out new table-based type example

---
 docs/css.html | 36 ++++++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 88c3b48a1..13d39adeb 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -90,7 +90,39 @@ title: CSS
           
           
    Headings
    
           
    All HTML headings, <h1> through <h6> are available.
    
-          
    
+
+          
    
+            
+              
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+                
+                  
+                  
+                
+              
+            
    Bootstrap heading
    		Semibold 38px
    Bootstrap heading
    		Semibold 32px
    Bootstrap heading
    		Semibold 24px
    Bootstrap heading
    		Semibold 18px
    Bootstrap heading
    		Semibold 16px
    Bootstrap heading
    		Semibold 12px
    
+          
    
+
+
           
           
    Body copy
    
           
    Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
    
-- 
cgit v1.2.3


From bfc4aaf6e84f20728258672276ccc9db84638082 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 28 Feb 2013 21:19:02 -0800
Subject: Holy fucking shit fix that input group with buttons rounded corner
 noise

---
 docs/css.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 13d39adeb..501c791df 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1493,7 +1493,7 @@ For example, <section> should be wrapped as inline.
           
    
           
    
             
    
-              
    
+              
    
                 
                 
      
                   
    • Action
      • 
@@ -1508,7 +1508,7 @@ For example, <section> should be wrapped as inline.
             
      
             
      
               
-              
      
+              
      
                 
                 
        
                   
      • Action
        • 
@@ -1522,7 +1522,7 @@ For example, <section> should be wrapped as inline.
           
 {% highlight html linenos %}
 
        
-  
        
+  
        
     
     
          
       
        • Action
          • 
@@ -1537,7 +1537,7 @@ For example, <section> should be wrapped as inline.
 
 
          
   
-  
          
+  
          
     
     
            
       
          • Action
            • 
@@ -1553,7 +1553,7 @@ For example, <section> should be wrapped as inline.
           
            Segmented dropdown groups
            
           
            
             
            
-              
            
+              
            
                 
                 
                 
+            
+            
+            
+            
+            
+            
+          
            
+{% highlight html linenos %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
 
           
            Cross browser compatibility
            
           
            IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.
            
-- 
cgit v1.2.3


From 492c249537d7cdce6148ac8a1c056c4d89451fb2 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 1 Mar 2013 00:18:10 -0800
Subject: improve navbar toggle and hide code snippets on mobile devices for
 now

---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index dd7654ad1..69b132ce0 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -2228,7 +2228,7 @@ For example, <section> should be wrapped as inline.
           
            
           
            For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.
            
 
-          
+          
            
-- 
cgit v1.2.3


From 33913e4586dcd9bb08bb8daf4309f01ba4f7364a Mon Sep 17 00:00:00 2001
From: Ufuk Avcu 
Date: Sat, 9 Mar 2013 21:04:09 +0100
Subject: Fix Typo sucess to success

Mini typo fix in the docs...
---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 69b132ce0..bbf90364a 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -892,7 +892,7 @@ For example, <section> should be wrapped as inline.
           
 {% highlight html linenos %}
 ...
-
+
-- 
cgit v1.2.3


From 145eb054d9aac82977a339c0253e7bec6ad111d5 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 15 Mar 2013 21:57:16 -0700
Subject: begin to rewrite the grid docs

---
 docs/css.html | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index bbf90364a..fd6faa173 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -472,9 +472,10 @@ title: CSS
           
            
             
            Grid system
            
           
            
+          
            Bootstrap utilizes a responsive, percent-based grid system, that scales up appropriately as devices and viewport sizes increase. In other words, it's mobile first.
            
 
-          
            Live grid example
            
-          
            The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
            
+          
            Grid example
            
+          
            On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .span* elements within a .row. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
            
           
            
             
            
               
            1
            
@@ -500,18 +501,32 @@ title: CSS
               
            6
            
             
            
           
            
-
-          
            Basic grid HTML
            
-          
            For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
            
 {% highlight html linenos %}
 
            
-  
            8
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+
            
+
            
+  
            4
            
   
            4
            
+  
            4
            
+
            
+
            
+  
            6
            
+  
            6
            
 
            
 {% endhighlight %}
 
-          
            Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.
            
-
           
            Offsetting columns
            
           
            Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.
            
           
            
-- 
cgit v1.2.3


From bb38fa52865397e933db95885eb6347ea6d54109 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 15 Mar 2013 23:21:10 -0700
Subject: Overhaul the grid system and its docs

* Add new grid mixins adapted from Preboot (http://github.com/mdo/preboot)
* Drop the @grid-row-width and @grid-column-width variables
* Add the @grid-float-breakpoint variable, as used in Preboot
* Add support for .push* and .pull* classes for column ordering manipulation
* Document all the things
---
 docs/css.html | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 88 insertions(+), 6 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index fd6faa173..2116ad3d8 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -23,7 +23,7 @@ title: CSS
           
          •  Global settings
            • 
           
          •  Typography
            • 
           
          •  Code
            • 
-          
          •  Grid system
            • 
+          
          •  Grid system
            • 
           
          •  Tables
            • 
           
          •  Forms
            • 
           
          •  Buttons
            • 
@@ -468,13 +468,13 @@ title: CSS
 
         
-        
            
+        
            
           
            
             
            Grid system
            
           
            
-          
            Bootstrap utilizes a responsive, percent-based grid system, that scales up appropriately as devices and viewport sizes increase. In other words, it's mobile first.
            
+          
            Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.
            
 
-          
            Grid example
            
+          
            Grid example
            
           
            On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .span* elements within a .row. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
            
           
            
             
            
@@ -527,7 +527,7 @@ title: CSS
 
            
 {% endhighlight %}
 
-          
            Offsetting columns
            
+          
            Offsetting columns
            
           
            Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.
            
           
            
             
            
@@ -550,7 +550,7 @@ title: CSS
 {% endhighlight %}
 
 
-          
            Nesting columns
            
+          
            Nesting columns
            
           
            To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to 12.
            
           
            
             
            
@@ -581,6 +581,88 @@ title: CSS
 
            
 {% endhighlight %}
 
+          
            Column ordering
            
+          
            Easily the order of our built-in grid columns with .push* and .pull* modifier classes.
            
+
            
+  
            9
            
+  
            3
            
+
            
+
+{% highlight html linenos %}
+
            
+  
            9
            
+  
            3
            
+
            
+{% endhighlight %}
+
+          
            LESS mixins and variables
            
+          
            In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.
            
+
+          
            Variables
            
+          
            Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
            
+{% highlight css linenos %}
+@grid-columns:              12;
+@grid-gutter-width:         30px;
+@grid-float-breakpoint:     768px;
+{% endhighlight %}
+
+          
            Mixins
            
+          
            Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
            
+{% highlight css linenos %}
+// Creates a wrapper for a series of columns
+.make-row() {
+  // Negative margin the row out to align the content of columns
+  margin-left:  (@grid-gutter-width / -2);
+  margin-right: (@grid-gutter-width / -2);
+  // Then clear the floated columns
+  .clear_float();
+}
+
+// Generate the columns
+.make-column(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    float: left;
+    // Calculate width based on number of columns available
+    width: percentage(@columns / @grid-columns);
+  }
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Set inner padding as gutters instead of margin
+  padding-left:  (@grid-gutter-width / 2);
+  padding-right: (@grid-gutter-width / 2);
+}
+
+// Generate the column offsets
+.make-column-offset(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+{% endhighlight %}
+
+          
            Example usage
            
+          
            You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
            
+{% highlight css linenos %}
+.wrapper {
+  .make-row();
+}
+.content-main {
+  .make-column(8);
+}
+.content-secondary {
+  .make-column(3);
+  .make-column-offset(1);
+}
+{% endhighlight %}
+{% highlight html linenos %}
+
            
+  
            ...
            
+  
            ...
            
+
            
+{% endhighlight %}
+
+
+
         
            
 
 
-- 
cgit v1.2.3


From e0de08c38975b6b4b12a075b4b7d924922d71c88 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 16 Mar 2013 14:49:21 -0700
Subject: typo

---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 2116ad3d8..c740b1773 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -582,7 +582,7 @@ title: CSS
 {% endhighlight %}
 
           
            Column ordering
            
-          
            Easily the order of our built-in grid columns with .push* and .pull* modifier classes.
            
+          
            Easily change the order of our built-in grid columns with .push* and .pull* modifier classes.
            
 
            
   
            9
            
   
            3
            
-- 
cgit v1.2.3


From 28cdc8dc5f816bd2edde7d9c15f1540f0fc37914 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 17 Mar 2013 11:57:00 -0700
Subject: incorporate print utilities classes into responsive docs; rejigger
 some content

---
 docs/css.html | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index c740b1773..988610a6f 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -2323,8 +2323,9 @@ For example, <section> should be wrapped as inline.
           
            
             
            Responsive utilities
            
           
            
-          
            For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.
            
+          
            For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
            
 
+          
            Responsive classes
            
           
            
             
               
            
                 Class
            
   1
   TB - Monthly
   01/04/2012
            
@@ -2374,10 +2375,33 @@ For example, <section> should be wrapped as inline.
             
            
             
               
            
           
            
 
+          
            Print classes
            
+          
+            
+              
+                
+                
+                
+              
+            
+            
+              
+                
+                
+                
+              
+              
+                
+                
+                
+              
+            
+          
            ClassBrowserPrint
            .visible-printVisible
            .hidden-printVisible
            
+
           
            When to use
            
           
            Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.
            
 
-          
            Responsive utilities test case
            
+          
            Test case
            
           
            Resize your browser or load on different devices to test the above classes.
            
           
            Visible on...
            
           
            Green checkmarks indicate that class is visible in your current viewport.
            
-- 
cgit v1.2.3


From ca31f060a839b957ce3a85d3eaaaae09a78bbeb0 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 26 Mar 2013 17:12:17 -0700
Subject: New grid classes

---
 docs/css.html | 408 +++++++++++++++++++++++++++++-----------------------------
 1 file changed, 204 insertions(+), 204 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 988610a6f..874e00ed0 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -18,12 +18,12 @@ title: CSS
     
     
            
-      
            
+      
            
         
       
            
-      
            
+      
            
 
 
 
@@ -79,6 +79,207 @@ title: CSS
 
 
 
+        
+        
            
+          
            
+            
            Grid system
            
+          
            
+          
            Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.
            
+
+          
            Grid example
            
+          
            On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-span-* elements within a .row. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
            
+          
            
+            
            
+              
            1
            
+              
            1
            
+              
            1
            
+              
            1
            
+              
            1
            
+              
            1
            
+              
            1
            
+              
            1
            
+              
            1
            
+              
            1
            
+              
            1
            
+              
            1
            
+            
            
+            
            
+              
            4
            
+              
            4
            
+              
            4
            
+            
            
+            
            
+              
            6
            
+              
            6
            
+            
            
+          
            
+{% highlight html linenos %}
+
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+  
            1
            
+
            
+
            
+  
            4
            
+  
            4
            
+  
            4
            
+
            
+
            
+  
            6
            
+  
            6
            
+
            
+{% endhighlight %}
+
+          
            Offsetting columns
            
+          
            Move columns to the right using .col-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-offset-4 moves .col-span-4 over four columns.
            
+          
            
+            
            
+              
            4
            
+              
            4 offset 4
            
+            
            
+            
            
+              
            3 offset 3
            
+              
            3 offset 3
            
+            
            
+            
            
+              
            6 offset 6
            
+            
            
+          
            
+{% highlight html linenos %}
+
            
+  
            ...
            
+  
            ...
            
+
            
+{% endhighlight %}
+
+
+          
            Nesting columns
            
+          
            To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to 12.
            
+          
            
+            
            
+              Level 1: 9 columns
+              
            
+                
            
+                  Level 2: 6 columns
+                
            
+                
            
+                  Level 2: 6 columns
+                
            
+              
            
+            
            
+          
            
+{% highlight html linenos %}
+
            
+  
            
+    Level 1: 9 columns
+    
            
+      
            
+        Level 2: 6 columns
+      
            
+      
            
+        Level 2: 6 columns
+      
            
+    
            
+  
            
+
            
+{% endhighlight %}
+
+          
            Column ordering
            
+          
            Easily change the order of our built-in grid columns with .push* and .pull* modifier classes.
            
+
            
+  
            9
            
+  
            3
            
+
            
+
+{% highlight html linenos %}
+
            
+  
            9
            
+  
            3
            
+
            
+{% endhighlight %}
+
+          
            LESS mixins and variables
            
+          
            In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.
            
+
+          
            Variables
            
+          
            Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
            
+{% highlight css linenos %}
+@grid-columns:              12;
+@grid-gutter-width:         30px;
+@grid-float-breakpoint:     768px;
+{% endhighlight %}
+
+          
            Mixins
            
+          
            Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
            
+{% highlight css linenos %}
+// Creates a wrapper for a series of columns
+.make-row() {
+  // Negative margin the row out to align the content of columns
+  margin-left:  (@grid-gutter-width / -2);
+  margin-right: (@grid-gutter-width / -2);
+  // Then clear the floated columns
+  .clear_float();
+}
+
+// Generate the columns
+.make-column(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    float: left;
+    // Calculate width based on number of columns available
+    width: percentage(@columns / @grid-columns);
+  }
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Set inner padding as gutters instead of margin
+  padding-left:  (@grid-gutter-width / 2);
+  padding-right: (@grid-gutter-width / 2);
+}
+
+// Generate the column offsets
+.make-column-offset(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+{% endhighlight %}
+
+          
            Example usage
            
+          
            You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
            
+{% highlight css linenos %}
+.wrapper {
+  .make-row();
+}
+.content-main {
+  .make-column(8);
+}
+.content-secondary {
+  .make-column(3);
+  .make-column-offset(1);
+}
+{% endhighlight %}
+{% highlight html linenos %}
+
            
+  
            ...
            
+  
            ...
            
+
            
+{% endhighlight %}
+
+
+
+        
            
+
+
+
 
         
@@ -466,207 +667,6 @@ title: CSS
 
 
 
-        
-        
            
-          
            
-            
            Grid system
            
-          
            
-          
            Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.
            
-
-          
            Grid example
            
-          
            On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .span* elements within a .row. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
            
-          
            
-            
            
-              
            1
            
-              
            1
            
-              
            1
            
-              
            1
            
-              
            1
            
-              
            1
            
-              
            1
            
-              
            1
            
-              
            1
            
-              
            1
            
-              
            1
            
-              
            1
            
-            
            
-            
            
-              
            4
            
-              
            4
            
-              
            4
            
-            
            
-            
            
-              
            6
            
-              
            6
            
-            
            
-          
            
-{% highlight html linenos %}
-
            
-  
            1
            
-  
            1
            
-  
            1
            
-  
            1
            
-  
            1
            
-  
            1
            
-  
            1
            
-  
            1
            
-  
            1
            
-  
            1
            
-  
            1
            
-  
            1
            
-
            
-
            
-  
            4
            
-  
            4
            
-  
            4
            
-
            
-
            
-  
            6
            
-  
            6
            
-
            
-{% endhighlight %}
-
-          
            Offsetting columns
            
-          
            Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.
            
-          
            
-            
            
-              
            4
            
-              
            4 offset 4
            
-            
            
-            
            
-              
            3 offset 3
            
-              
            3 offset 3
            
-            
            
-            
            
-              
            6 offset 6
            
-            
            
-          
            
-{% highlight html linenos %}
-
            
-  
            ...
            
-  
            ...
            
-
            
-{% endhighlight %}
-
-
-          
            Nesting columns
            
-          
            To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to 12.
            
-          
            
-            
            
-              Level 1: 9 columns
-              
            
-                
            
-                  Level 2: 6 columns
-                
            
-                
            
-                  Level 2: 6 columns
-                
            
-              
            
-            
            
-          
            
-{% highlight html linenos %}
-
            
-  
            
-    Level 1: 9 columns
-    
            
-      
            
-        Level 2: 6 columns
-      
            
-      
            
-        Level 2: 6 columns
-      
            
-    
            
-  
            
-
            
-{% endhighlight %}
-
-          
            Column ordering
            
-          
            Easily change the order of our built-in grid columns with .push* and .pull* modifier classes.
            
-
            
-  
            9
            
-  
            3
            
-
            
-
-{% highlight html linenos %}
-
            
-  
            9
            
-  
            3
            
-
            
-{% endhighlight %}
-
-          
            LESS mixins and variables
            
-          
            In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.
            
-
-          
            Variables
            
-          
            Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
            
-{% highlight css linenos %}
-@grid-columns:              12;
-@grid-gutter-width:         30px;
-@grid-float-breakpoint:     768px;
-{% endhighlight %}
-
-          
            Mixins
            
-          
            Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
            
-{% highlight css linenos %}
-// Creates a wrapper for a series of columns
-.make-row() {
-  // Negative margin the row out to align the content of columns
-  margin-left:  (@grid-gutter-width / -2);
-  margin-right: (@grid-gutter-width / -2);
-  // Then clear the floated columns
-  .clear_float();
-}
-
-// Generate the columns
-.make-column(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
-    float: left;
-    // Calculate width based on number of columns available
-    width: percentage(@columns / @grid-columns);
-  }
-  // Prevent columns from collapsing when empty
-  min-height: 1px;
-  // Set inner padding as gutters instead of margin
-  padding-left:  (@grid-gutter-width / 2);
-  padding-right: (@grid-gutter-width / 2);
-}
-
-// Generate the column offsets
-.make-column-offset(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
-}
-{% endhighlight %}
-
-          
            Example usage
            
-          
            You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
            
-{% highlight css linenos %}
-.wrapper {
-  .make-row();
-}
-.content-main {
-  .make-column(8);
-}
-.content-secondary {
-  .make-column(3);
-  .make-column-offset(1);
-}
-{% endhighlight %}
-{% highlight html linenos %}
-
            
-  
            ...
            
-  
            ...
            
-
            
-{% endhighlight %}
-
-
-
-        
            
-
-
-
 
 
         
-- 
cgit v1.2.3


From 6696ff5d927fd2d584ddc226521b89fc8b9882eb Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 27 Mar 2013 15:54:17 -0700
Subject: clarify docs on unstyled lists

---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 226b55d6d..f3ab7a00a 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -576,7 +576,7 @@ title: CSS
 {% endhighlight %}
 
         
            Unstyled
            
-        
            Remove the default list-style and left padding on list items (immediate children only).
            
+        
            Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
            
         
            
           
              
             
            • Lorem ipsum dolor sit amet
              • 
-- 
cgit v1.2.3


From 081c061281c96818bf9a904a7e5e2a673aa7a54d Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 28 Mar 2013 00:21:21 -0700
Subject: new subnav on all pages

---
 docs/css.html | 49 +++++++++++++++----------------------------------
 1 file changed, 15 insertions(+), 34 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index f3ab7a00a..1c317d2cd 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -3,39 +3,25 @@ layout: default
 title: CSS
 ---
 
-
-
              
-  
              
-    
              CSS
              
-    
              Fundamental HTML elements styled and enhanced with extensible classes.
              
-  
              
-
              
+
              
+  
              CSS
              
+  
+
              
 
 
   
              
 
-    
-    
              
-      
              
-        
-      
              
-      
              
-
-
-
         
         
              
@@ -2420,9 +2406,4 @@ For example, <section> should be wrapped as inline.
 
         
              
 
-
-
-      
              
-    
              
-
   
              
-- 
cgit v1.2.3


From 4b8b8d2e46e25820d190db957b4e837b66198f72 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 28 Mar 2013 01:08:14 -0700
Subject: holy crap new docs layout separate from home, no more top navbar

---
 docs/css.html | 2409 ---------------------------------------------------------
 1 file changed, 2409 deletions(-)
 delete mode 100644 docs/css.html

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
deleted file mode 100644
index 1c317d2cd..000000000
--- a/docs/css.html
+++ /dev/null
@@ -1,2409 +0,0 @@
----
-layout: default
-title: CSS
----
-
-
              
-  
              CSS
              
-  
-
              
-
-
-  
              
-
-        
-        
              
-          
              
-            
              Global settings
              
-          
              
-          
              Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
              
-
-          
              Requires HTML5 doctype
              
-          
              Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
              
-
-{% highlight html linenos %}
-
-
-  ...
-
-{% endhighlight %}
-
-          
              Mobile first
              
-          
              With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
              
-          
              To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
              
-
-{% highlight html linenos %}
-
-{% endhighlight %}
-
-          
              Typography and links
              
-          
              Bootstrap sets basic global display, typography, and link styles. Specifically, we:
              
-          
                
-            
              • Remove margin on the body
                • 
-            
              • Set background-color: white; on the body
                • 
-            
              • Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base
                • 
-            
              • Set the global link color via @link-color and apply link underlines only on :hover
                • 
-          
              
-          
              These styles can be found within scaffolding.less.
              
-
-          
              Normalize reset
              
-          
              For improved cross-browser rendering, we use Normalize, a project by Nicolas Gallagher and Jonathan Neal.
              
-
-        
              
-
-
-
-        
-        
              
-          
              
-            
              Grid system
              
-          
              
-          
              Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.
              
-
-          
              Grid example
              
-          
              On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-span-* elements within a .row. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
              
-          
              
-            
              
-              
              1
              
-              
              1
              
-              
              1
              
-              
              1
              
-              
              1
              
-              
              1
              
-              
              1
              
-              
              1
              
-              
              1
              
-              
              1
              
-              
              1
              
-              
              1
              
-            
              
-            
              
-              
              4
              
-              
              4
              
-              
              4
              
-            
              
-            
              
-              
              6
              
-              
              6
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-
              
-
              
-  
              4
              
-  
              4
              
-  
              4
              
-
              
-
              
-  
              6
              
-  
              6
              
-
              
-{% endhighlight %}
-
-          
              Offsetting columns
              
-          
              Move columns to the right using .col-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-offset-4 moves .col-span-4 over four columns.
              
-          
              
-            
              
-              
              4
              
-              
              4 offset 4
              
-            
              
-            
              
-              
              3 offset 3
              
-              
              3 offset 3
              
-            
              
-            
              
-              
              6 offset 6
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              ...
              
-  
              ...
              
-
              
-{% endhighlight %}
-
-
-          
              Nesting columns
              
-          
              To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to 12.
              
-          
              
-            
              
-              Level 1: 9 columns
-              
              
-                
              
-                  Level 2: 6 columns
-                
              
-                
              
-                  Level 2: 6 columns
-                
              
-              
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              
-    Level 1: 9 columns
-    
              
-      
              
-        Level 2: 6 columns
-      
              
-      
              
-        Level 2: 6 columns
-      
              
-    
              
-  
              
-
              
-{% endhighlight %}
-
-          
              Column ordering
              
-          
              Easily change the order of our built-in grid columns with .push* and .pull* modifier classes.
              
-
              
-  
              9
              
-  
              3
              
-
              
-
-{% highlight html linenos %}
-
              
-  
              9
              
-  
              3
              
-
              
-{% endhighlight %}
-
-          
              LESS mixins and variables
              
-          
              In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.
              
-
-          
              Variables
              
-          
              Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
              
-{% highlight css linenos %}
-@grid-columns:              12;
-@grid-gutter-width:         30px;
-@grid-float-breakpoint:     768px;
-{% endhighlight %}
-
-          
              Mixins
              
-          
              Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
              
-{% highlight css linenos %}
-// Creates a wrapper for a series of columns
-.make-row() {
-  // Negative margin the row out to align the content of columns
-  margin-left:  (@grid-gutter-width / -2);
-  margin-right: (@grid-gutter-width / -2);
-  // Then clear the floated columns
-  .clear_float();
-}
-
-// Generate the columns
-.make-column(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
-    float: left;
-    // Calculate width based on number of columns available
-    width: percentage(@columns / @grid-columns);
-  }
-  // Prevent columns from collapsing when empty
-  min-height: 1px;
-  // Set inner padding as gutters instead of margin
-  padding-left:  (@grid-gutter-width / 2);
-  padding-right: (@grid-gutter-width / 2);
-}
-
-// Generate the column offsets
-.make-column-offset(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
-}
-{% endhighlight %}
-
-          
              Example usage
              
-          
              You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
              
-{% highlight css linenos %}
-.wrapper {
-  .make-row();
-}
-.content-main {
-  .make-column(8);
-}
-.content-secondary {
-  .make-column(3);
-  .make-column-offset(1);
-}
-{% endhighlight %}
-{% highlight html linenos %}
-
              
-  
              ...
              
-  
              ...
              
-
              
-{% endhighlight %}
-
-
-
-        
              
-
-
-
-
-        
-        
              
-          
              
-            
              Typography
              
-          
              
-
-          
-          
              Headings
              
-          
              All HTML headings, <h1> through <h6> are available.
              
-
-          
              
-            
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
              Bootstrap heading
              		Semibold 38px
              Bootstrap heading
              		Semibold 32px
              Bootstrap heading
              		Semibold 24px
              Bootstrap heading
              		Semibold 18px
              Bootstrap heading
              		Semibold 16px
              Bootstrap heading
              		Semibold 12px
              
-          
              
-
-
-          
-          
              Body copy
              
-          
              Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
              
-          
              
-            
              Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
              
-            
              Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
              
-            
              Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
              
-          
              
-{% highlight html linenos %}
-
              ...
              
-{% endhighlight %}
-
-          
-          
              Lead body copy
              
-          
              Make a paragraph stand out by adding .lead.
              
-          
              
-            
              Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
              
-          
              
-{% highlight html linenos %}
-
              ...
              
-{% endhighlight %}
-
-          
-          
              Built with Less
              
-          
              The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
              
-
-
-          
-          
              Emphasis
              
-          
              Make use of HTML's default emphasis tags with lightweight styles.
              
-
-          
              Small text
              
-          
              For de-emphasizing inline or blocks of text, use the small tag.
              
-          
              
-            
              This line of text is meant to be treated as fine print.
              
-          
              
-{% highlight html linenos %}
-This line of text is meant to be treated as fine print.
-{% endhighlight %}
-
-
-          
              Bold
              
-          
              For emphasizing a snippet of text with a heavier font-weight.
              
-          
              
-            
              The following snippet of text is rendered as bold text.
              
-          
              
-{% highlight html linenos %}
-rendered as bold text
-{% endhighlight %}
-
-          
              Italics
              
-          
              For emphasizing a snippet of text with italics.
              
-          
              
-            
              The following snippet of text is rendered as italicized text.
              
-          
              
-{% highlight html linenos %}
-rendered as italicized text
-{% endhighlight %}
-
-          
              Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
              
-
-          
              Alignment classes
              
-          
              Easily realign text to components with text alignment classes.
              
-          
              
-            
              Left aligned text.
              
-            
              Center aligned text.
              
-            
              Right aligned text.
              
-          
              
-{% highlight html linenos %}
-
              Left aligned text.
              
-
              Center aligned text.
              
-
              Right aligned text.
              
-{% endhighlight %}
-
-          
              Emphasis classes
              
-          
              Convey meaning through color with a handful of emphasis utility classes.
              
-          
              
-            
              Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
              
-            
              Etiam porta sem malesuada magna mollis euismod.
              
-            
              Donec ullamcorper nulla non metus auctor fringilla.
              
-            
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
              
-          
              
-{% highlight html linenos %}
-
              ...
              
-
              ...
              
-
              ...
              
-
              ...
              
-{% endhighlight %}
-
-
-          
-          
              Abbreviations
              
-          
              Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
              
-
-          
              Basic abbreviation
              
-          
              For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element.
              
-          
              
-            
              An abbreviation of the word attribute is attr.
              
-          
              
-{% highlight html linenos %}
-attr
-{% endhighlight %}
-
-          
              Initialism
              
-          
              Add .initialism to an abbreviation for a slightly smaller font-size.
              
-          
              
-            
              HTML is the best thing since sliced bread.
              
-          
              
-{% highlight html linenos %}
-HTML
-{% endhighlight %}
-
-
-          
-          
              Addresses
              
-          
              Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.
              
-          
              
-            
              
-              Twitter, Inc.
              
-              795 Folsom Ave, Suite 600
              
-              San Francisco, CA 94107
              
-              P: (123) 456-7890
-            
              
-            
              
-              Full Name
              
-              first.last@example.com
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  Twitter, Inc.
              
-  795 Folsom Ave, Suite 600
              
-  San Francisco, CA 94107
              
-  P: (123) 456-7890
-
              
-
-
              
-  Full Name
              
-  first.last@example.com
-
              
-{% endhighlight %}
-
-
-          
-          
              Blockquotes
              
-          
              For quoting blocks of content from another source within your document.
              
-
-          
              Default blockquote
              
-          
              Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
              
-          
              
-            
              
-              
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
-
              
-{% endhighlight %}
-
-          
              Blockquote options
              
-          
              Style and content changes for simple variations on a standard blockquote.
              
-
-          
              Naming a source
              
-          
              Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.
              
-          
              
-            
              
-              
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
-              Someone famous in Source Title
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
-  Someone famous Source Title
-
              
-{% endhighlight %}
-
-          
              Alternate displays
              
-          
              Use .pull-right for a floated, right-aligned blockquote.
              
-          
              
-            
              
-              
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
-              Someone famous in Source Title
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  ...
-
              
-{% endhighlight %}
-
-
-          
-          
              Lists
              
-
-          
              Unordered
              
-          
              A list of items in which the order does not explicitly matter.
              
-          
              
-            
                
-              
              • Lorem ipsum dolor sit amet
                • 
-              
              • Consectetur adipiscing elit
                • 
-              
              • Integer molestie lorem at massa
                • 
-              
              • Facilisis in pretium nisl aliquet
                • 
-              
              • Nulla volutpat aliquam velit
-                
                  
-                  
                • Phasellus iaculis neque
                  • 
-                  
                • Purus sodales ultricies
                  • 
-                  
                • Vestibulum laoreet porttitor sem
                  • 
-                  
                • Ac tristique libero volutpat at
                  • 
-                
                
-              
                • 
-              
              • Faucibus porta lacus fringilla vel
                • 
-              
              • Aenean sit amet erat nunc
                • 
-              
              • Eget porttitor lorem
                • 
-            
              
-          
              
-{% highlight html linenos %}
-
                
-  
              • ...
                • 
-
              
-{% endhighlight %}
-
-          
              Ordered
              
-          
              A list of items in which the order does explicitly matter.
              
-          
              
-            
                
-              
              1. Lorem ipsum dolor sit amet
                2. 
-              
              2. Consectetur adipiscing elit
                3. 
-              
              3. Integer molestie lorem at massa
                4. 
-              
              4. Facilisis in pretium nisl aliquet
                5. 
-              
              5. Nulla volutpat aliquam velit
                6. 
-              
              6. Faucibus porta lacus fringilla vel
                7. 
-              
              7. Aenean sit amet erat nunc
                8. 
-              
              8. Eget porttitor lorem
                9. 
-            
              
-          
              
-{% highlight html linenos %}
-
                
-  
              1. ...
                2. 
-
              
-{% endhighlight %}
-
-        
              Unstyled
              
-        
              Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
              
-        
              
-          
                
-            
              • Lorem ipsum dolor sit amet
                • 
-            
              • Consectetur adipiscing elit
                • 
-            
              • Integer molestie lorem at massa
                • 
-            
              • Facilisis in pretium nisl aliquet
                • 
-            
              • Nulla volutpat aliquam velit
-              
                  
-                
                • Phasellus iaculis neque
                  • 
-                
                • Purus sodales ultricies
                  • 
-                
                • Vestibulum laoreet porttitor sem
                  • 
-                
                • Ac tristique libero volutpat at
                  • 
-              
                
-            
                • 
-            
              • Faucibus porta lacus fringilla vel
                • 
-            
              • Aenean sit amet erat nunc
                • 
-            
              • Eget porttitor lorem
                • 
-          
              
-        
              
-{% highlight html linenos %}
-
                
-  
              • ...
                • 
-
              
-{% endhighlight %}
-
-        
              Inline
              
-        
              Place all list items on a single line with inline-block and some light padding.
              
-        
              
-          
                
-            
              • Lorem ipsum
                • 
-            
              • Phasellus iaculis
                • 
-            
              • Nulla volutpat
                • 
-          
              
-        
              
-{% highlight html linenos %}
-
                
-  
              • ...
                • 
-
              
-{% endhighlight %}
-
-        
              Description
              
-        
              A list of terms with their associated descriptions.
              
-        
              
-          
              
-            
              Description lists
              
-            
              A description list is perfect for defining terms.
              
-            
              Euismod
              
-            
              Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
              
-            
              Donec id elit non mi porta gravida at eget metus.
              
-            
              Malesuada porta
              
-            
              Etiam porta sem malesuada magna mollis euismod.
              
-          
              
-        
              
-{% highlight html linenos %}
-
              
-  
              ...
              
-  
              ...
              
-
              
-{% endhighlight %}
-
-        
              Horizontal description
              
-        
              Make terms and descriptions in <dl> line up side-by-side.
              
-        
              
-          
              
-            
              Description lists
              
-            
              A description list is perfect for defining terms.
              
-            
              Euismod
              
-            
              Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
              
-            
              Donec id elit non mi porta gravida at eget metus.
              
-            
              Malesuada porta
              
-            
              Etiam porta sem malesuada magna mollis euismod.
              
-            
              Felis euismod semper eget lacinia
              
-            
              Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
              
-          
              
-        
              
-{% highlight html linenos %}
-
              
-  
              ...
              
-  
              ...
              
-
              
-{% endhighlight %}
-
-        
              Auto-truncating
              
-        
              
-          Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.
-        
              
-      
              
-
-
-
-
-
-        
-        
              
-          
              
-            
              Code
              
-          
              
-
-          
              Inline
              
-          
              Wrap inline snippets of code with <code>.
              
-
              
-  For example, <section> should be wrapped as inline.
-
              
-{% highlight html linenos %}
-For example, <section> should be wrapped as inline.
-{% endhighlight %}
-
-          
              Basic block
              
-          
              Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
              
-
              
-  
              <p>Sample text here...</p>
              
-
              
-{% highlight html linenos %}
-
              <p>Sample text here...</p>
              
-{% endhighlight %}
-
-          
              You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.
              
-        
              
-
-
-
-        
-        
              
-          
              
-            
              Tables
              
-          
              
-
-          
              Default styles
              
-          
              For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
              
-          
              
-            
-              
-                
-                  
-                  
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                  
-                
-              
-            
              #First NameLast NameUsername
              1MarkOtto@mdo
              2JacobThornton@fat
              3Larrythe Bird@twitter
              
-          
              
-{% highlight html linenos %}
-
-  ...
-
              
-{% endhighlight %}
-
-
-          
              Optional classes
              
-          
              Add any of the following classes to the .table base class.
              
-
-          
              Striped
              
-          
              Use .table-striped to add zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE8).
              
-          
              
-            
-              
-                
-                  
-                  
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                  
-                
-              
-            
              #First NameLast NameUsername
              1MarkOtto@mdo
              2JacobThornton@fat
              3Larrythe Bird@twitter
              
-          
              
-{% highlight html linenos %}
-
-  ...
-
              
-{% endhighlight %}
-
-          
              Bordered
              
-          
              Add .table-bordered for borders and rounded corners.
              
-          
              
-            
-              
-                
-                  
-                  
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                
-              
-            
              #First NameLast NameUsername
              1MarkOtto@mdo
              MarkOtto@TwBootstrap
              2JacobThornton@fat
              3Larry the Bird@twitter
              
-          
              
-{% highlight html linenos %}
-
-  ...
-
              
-{% endhighlight %}
-
-          
              Hover rows
              
-          
              Add .table-hover to enable a hover state on table rows within a <tbody>.
              
-          
              
-            
-              
-                
-                  
-                  
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                
-              
-            
              #First NameLast NameUsername
              1MarkOtto@mdo
              2JacobThornton@fat
              3Larry the Bird@twitter
              
-          
              
-{% highlight html linenos %}
-
-  ...
-
              
-{% endhighlight %}
-
-
-          
              Condensed
              
-          
              Add .table-condensed to make tables more compact by cutting cell padding in half.
              
-          
              
-            
-              
-                
-                  
-                  
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                
-              
-            
              #First NameLast NameUsername
              1MarkOtto@mdo
              2JacobThornton@fat
              3Larry the Bird@twitter
              
-          
              
-{% highlight html linenos %}
-
-  ...
-
              
-{% endhighlight %}
-
-
-
-          
              Optional row classes
              
-          
              Use contextual classes to color table rows.
              
-          
-            -              -              -            
-            
-              
-                
-                
-              
-            
-            
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-            
-          
              



              ClassDescription
              
-                  .success
-                Indicates a successful or positive action.
              
-                  .error
-                Indicates a dangerous or potentially negative action.
              
-                  .warning
-                Indicates a warning that might need attention.
              
-                  .info
-                Used as an alternative to the default styles.
              
-          
              
-            
-              
-                
-                  
-                  
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                  
-                
-                
-                  
-                  
-                  
-                  
-                
-              
-            
              #ProductPayment TakenStatus
              1TB - Monthly01/04/2012Approved
              2TB - Monthly02/04/2012Declined
              3TB - Monthly03/04/2012Pending
              
-          
              
-{% highlight html linenos %}
-...
-
-  1
-  TB - Monthly
-  01/04/2012
-  Approved
-
-...
-{% endhighlight %}
-
-
-
-          
              Supported table markup
              
-          
              List of supported table HTML elements and how they should be used.
              
-          
-            -              -              -            
-            
-              
-                
-                
-              
-            
-            
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-            
-          
              



              TagDescription
              
-                  <table>
-                
-                  Wrapping element for displaying data in a tabular format
-                
              
-                  <thead>
-                
-                  Container element for table header rows (<tr>) to label table columns
-                
              
-                  <tbody>
-                
-                  Container element for table rows (<tr>) in the body of the table
-                
              
-                  <tr>
-                
-                  Container element for a set of table cells (<td> or <th>) that appears on a single row
-                
              
-                  <td>
-                
-                  Default table cell
-                
              
-                  <th>
-                
-                  Special table cell for column (or row, depending on scope and placement) labels
-                
              
-                  <caption>
-                
-                  Description or summary of what the table holds, especially useful for screen readers
-                
              
-{% highlight html linenos %}
-
-  
-  
-    
-      
-      
-      
-    
-  
-  
-    
-      
-      
-      
-    
-  
-
              ...
              .........
              .........
              
-{% endhighlight %}
-
-        
              
-
-
-
-        
-        
              
-          
              
-            
              Forms
              
-          
              
-
-          
              Default styles
              
-          
              Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.
              
-          
              
-            
              
-              Legend
-              
-              
-              
              Example block-level help text here.
              
-              
              
-                
-              
              
-              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              
-    Legend
-    
-    
-    
              Example block-level help text here.
              
-    
              
-      
-    
              
-    
-  
              
-
              
-{% endhighlight %}
-
-
-          
              Optional layouts
              
-          
              Included with Bootstrap are optional form layouts for common use cases.
              
-
-          
              Inline form
              
-          
              Add .form-inline for left-aligned labels and inline-block controls for a compact layout.
              
-          
              
-            
-            
-            
              
-              
-            
              
-            
-          
              
-{% highlight html linenos %}
-
              
-  
-  
-  
              
-    
-  
              
-  
-
              
-{% endhighlight %}
-
-          
              Horizontal form
              
-          
              Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
              
-          
                
-            
              • Add .form-horizontal to the form
                • 
-            
              • Wrap labels and controls in .control-group
                • 
-            
              • Add .control-label to the label
                • 
-            
              • Wrap any associated controls in .controls for proper alignment
                • 
-          
              
-          
              
-            
              
-              
-              
              
-                
-              
              
-            
              
-            
              
-              
-              
              
-                
-                
              
-                  
-                
              
-              
              
-            
              
-            
              
-              
              
-                
-              
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              
-    
-    
              
-      
-    
              
-  
              
-  
              
-    
-    
              
-      
-      
              
-        
-      
              
-    
              
-  
              
-  
              
-    
              
-      
-    
              
-  
              
-
              
-{% endhighlight %}
-
-
-          
              Supported form controls
              
-          
              Examples of standard form controls supported in an example form layout.
              
-
-          
              Inputs
              
-          
              Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
              
-          
              Requires the use of a specified type at all times.
              
-          
              
-            
-          
              
-{% highlight html linenos %}
-
-{% endhighlight %}
-
-          
              Textarea
              
-          
              Form control which supports multiple lines of text. Change rows attribute as necessary.
              
-          
              
-            
-          
              
-{% highlight html linenos %}
-
-{% endhighlight %}
-
-          
              Checkboxes and radios
              
-          
              Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
              
-          
              Default (stacked)
              
-          
              
-            
              
-              
-            
              
-            
              
-            
              
-              
-            
              
-            
              
-              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
-
              
-
-
              
-  
-
              
-{% endhighlight %}
-
-          
              Inline checkboxes
              
-          
              Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.
              
-          
              
-            
-            
-            
-          
              
-{% highlight html linenos %}
-
-
-
-{% endhighlight %}
-
-          
              Selects
              
-          
              Use the default option or specify a multiple="multiple" to show multiple options at once.
              
-          
              
-            
-            
              
-            
-          
              
-{% highlight html linenos %}
-
-
-
-{% endhighlight %}
-
-
-
-          
              Form control states
              
-          
              Provide feedback to users or visitors with basic feedback states on form controls and labels.
              
-
-          
              Input focus
              
-          
              We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.
              
-          
              
-            
-          
              
-{% highlight html linenos %}
-
-{% endhighlight %}
-
-          
              Invalid inputs
              
-          
              Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.
              
-          
              This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.
              
-          
              
-            
-          
              
-{% highlight html linenos %}
-
-{% endhighlight %}
-
-          
              Disabled inputs
              
-          
              Add the disabled attribute on an input to prevent user input and trigger a slightly different look.
              
-          
              
-            
-          
              
-{% highlight html linenos %}
-
-{% endhighlight %}
-
-          
              Disabled fieldsets
              
-          
              Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.
              
-          
              
-            
              
-              
              
-                
-              
              
-              
              
-                
-              
              
-              
              
-                
-              
              
-              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              
-    
              
-      
-    
              
-    
              
-      
-    
              
-    
              
-      
-    
              
-    
-  
              
-
              
-{% endhighlight %}
-
-          
              Validation states
              
-          
              Bootstrap includes validation styles for error, warning, info, and success messages. To use:
              
-          
                
-            
              • Add .has-warning, .has-error, or .has-success to the parent element
                • 
-            
              • Add .input-with-feedback to the field(s) in question
                • 
-          
              
-          
              Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.
              
-
-          
              
-            
              
-              
-              
              
-                
-              
              
-            
              
-            
              
-              
-              
              
-                
-              
              
-            
              
-            
              
-              
-              
              
-                
-              
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
-  
              
-    
-  
              
-
              
-
              
-  
-  
              
-    
-  
              
-
              
-
              
-  
-  
              
-    
-  
              
-
              
-{% endhighlight %}
-
-
-
-          
              Extending form controls
              
-          
              Adding on top of existing browser controls, Bootstrap includes other useful form components.
              
-
-          
              Input groups
              
-          
              Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with a .add-on to prepend or append elements to an <input>.
              
-          
              Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
              
-          
              
-            
              
-              @
-              
-            
              
-            
              
-            
              
-              
-              .00
-            
              
-            
              
-            
              
-              $
-              
-              .00
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  @
-  
-
              
-
-
              
-  
-  .00
-
              
-
-
              
-  $
-  
-  .00
-
              
-{% endhighlight %}
-
-          
              Optional sizes
              
-          
              Add the relative form sizing classes to the `.input-group-addon`.
              
-          
              
-            
              
-              @
-              
-            
              
-            
              
-            
              
-              @
-              
-            
              
-            
              
-            
              
-              @
-              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  @
-  
-
              
-
-
              
-  @
-  
-
              
-
-
              
-  @
-  
-
              
-{% endhighlight %}
-
-          
              Buttons instead of text
              
-          
              Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
              
-          
              
-            
              
-              
-                
-              
-              
-            
              
-            
              
-            
              
-              
-              
-                
-              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
-    
-  
-  
-
              
-
-
              
-  
-  
-    
-  
-
              
-{% endhighlight %}
-
-          
              Button dropdowns
              
-          
              
-          
              
-            
              
-              
              
-                
-                
-              
              
-              
-            
              
-            
              
-            
              
-              
-              
              
-                
-                
-              
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              
-    
-    
-  
              
-  
-
              
-
-
              
-  
-  
              
-    
-    
-  
              
-
              
-{% endhighlight %}
-
-          
              Segmented dropdown groups
              
-          
              
-            
              
-              
              
-                
-                
-                
-              
              
-              
-            
              
-
-            
              
-
-            
              
-              
-              
              
-                
-                
-                
-              
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              
-    
-  
              
-  
-
              
-
-
              
-  
-  
              
-    
-  
              
-
              
-{% endhighlight %}
-
-          
              Control sizing
              
-          
              Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.
              
-
-          
              Relative sizing
              
-          
              Create larger or smaller form controls that match button sizes.
              
-          
              
-            
              
-              
-              
-              
-            
              
-          
              
-{% highlight html linenos %}
-
-
-
-{% endhighlight %}
-
-          
              Column sizing
              
-          
              Use .span1 to .span12 for setting widths on inputs that match Bootstrap's grid system.
              
-          
              
-            
              
-              
-              
-              
-              
-              
-              
-            
              
-          
              
-{% highlight html linenos %}
-
-
-
-
-
-
-{% endhighlight %}
-
-          
              If you need multiple inputs on the same line, wrap them in the standard grid markup (with .row and .span* classes). Each input should have it's own column and will expand to fill the available width automatically.
              
-          
              
-            
              
-              
              
-                
-              
              
-              
              
-                
-              
              
-              
              
-                
-              
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              
-    
-  
              
-  
              
-    
-  
              
-  
              
-    
-  
              
-
              
-{% endhighlight %}
-
-          
              Uneditable inputs
              
-          
              Present data in a form that's not editable without using actual form markup.
              
-          
              
-            Some value here
-          
              
-{% highlight html linenos %}
-Some value here
-{% endhighlight %}
-
-          
              Form actions
              
-          
              End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.
              
-          
              
-            
              
-              
-              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
-  
-
              
-{% endhighlight %}
-
-          
              Help text
              
-          
              Inline and block level support for help text that appears around form controls.
              
-          
              Inline help
              
-          
              
-             Inline help text
-          
              
-{% highlight html linenos %}
-
-Inline help text
-{% endhighlight %}
-
-          
              Block help
              
-          
              
-            
-            A longer block of help text that breaks onto a new line and may extend beyond one line.
-          
              
-{% highlight html linenos %}
-
-A longer block of help text that breaks onto a new line and may extend beyond one line.
-{% endhighlight %}
-
-        
              
-
-
-
-        
-        
              
-          
              
-            
              Buttons
              
-          
              
-
-          
              Default buttons
              
-          
              Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.
              
-          
              
-            
-            
-            
-            
-            
-            
-            
-          
              
-{% highlight html linenos %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-
-          
              Cross browser compatibility
              
-          
              IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.
              
-
-
-          
              Button sizes
              
-          
              Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.
              
-          
              
-            
              
-              
-              
-            
              
-            
              
-              
-              
-            
              
-            
              
-              
-              
-            
              
-            
              
-              
-              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
-  
-
              
-
              
-  
-  
-
              
-
              
-  
-  
-
              
-
              
-  
-  
-
              
-{% endhighlight %}
-
-          
              Create block level buttons—those that span the full width of a parent— by adding .btn-block.
              
-          
              
-            
              
-              
-              
-            
              
-          
              
-{% highlight html linenos %}
-
-
-{% endhighlight %}
-
-
-          
              Disabled state
              
-          
              Make buttons look unclickable by fading them back 50%.
              
-
-          
              Button element
              
-          
              Add the disabled attribute to <button> buttons.
              
-          
              
-            
-            
-          
              
-{% highlight html linenos %}
-
-
-{% endhighlight %}
-
-          
              Anchor element
              
-          
              Add the .disabled class to <a> buttons.
              
-          
              
-            Primary link
-            Link
-          
              
-{% highlight html linenos %}
-Primary link
-Link
-{% endhighlight %}
-          
              
-            We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
-          
              
-
-
-          
              One class, multiple tags
              
-          
              Use the .btn class on an <a>, <button>, or <input> element.
              
-          
              
-            Link
-            
-            
-            
-          
              
-{% highlight html linenos %}
-Link
-
-
-
-{% endhighlight %}
-          
              As a best practice, we highly recommend matching using the <button< element whenever possible to ensure matching cross-browser rendering.
              
-
-        
              
-
-
-
-        
-        
              
-          
              
-            
              Images
              
-          
              
-
-          
              Add classes to an <img> element to easily style images in any project. Rounded corners are not available in IE8.
              
-          
              
-            
-            
-            
-          
              
-{% highlight html linenos %}
-
-
-
-{% endhighlight %}
-
-        
              
-
-
-
-        
-        
              
-          
              
-            
              Icons font by Glyphicons
              
-          
              
-
-          
              Included glyphs
              
-          
              Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.
              
-
-          
                
-            
              •  glyphicon-glass
                • 
-            
              •  glyphicon-music
                • 
-            
              •  glyphicon-search
                • 
-            
              •  glyphicon-envelope
                • 
-            
              •  glyphicon-heart
                • 
-            
              •  glyphicon-star
                • 
-            
              •  glyphicon-star-empty
                • 
-            
              •  glyphicon-user
                • 
-            
              •  glyphicon-film
                • 
-            
              •  glyphicon-th-large
                • 
-            
              •  glyphicon-th
                • 
-            
              •  glyphicon-th-list
                • 
-            
              •  glyphicon-ok
                • 
-            
              •  glyphicon-remove
                • 
-            
              •  glyphicon-zoom-in
                • 
-            
              •  glyphicon-zoom-out
                • 
-            
              •  glyphicon-off
                • 
-            
              •  glyphicon-signal
                • 
-            
              •  glyphicon-cog
                • 
-            
              •  glyphicon-trash
                • 
-            
              •  glyphicon-home
                • 
-            
              •  glyphicon-file
                • 
-            
              •  glyphicon-time
                • 
-            
              •  glyphicon-road
                • 
-            
              •  glyphicon-download-alt
                • 
-            
              •  glyphicon-download
                • 
-            
              •  glyphicon-upload
                • 
-            
              •  glyphicon-inbox
                • 
-
-            
              •  glyphicon-play-circle
                • 
-            
              •  glyphicon-repeat
                • 
-            
              •  glyphicon-refresh
                • 
-            
              •  glyphicon-list-alt
                • 
-            
              •  glyphicon-lock
                • 
-            
              •  glyphicon-flag
                • 
-            
              •  glyphicon-headphones
                • 
-            
              •  glyphicon-volume-off
                • 
-            
              •  glyphicon-volume-down
                • 
-            
              •  glyphicon-volume-up
                • 
-            
              •  glyphicon-qrcode
                • 
-            
              •  glyphicon-barcode
                • 
-            
              •  glyphicon-tag
                • 
-            
              •  glyphicon-tags
                • 
-            
              •  glyphicon-book
                • 
-            
              •  glyphicon-bookmark
                • 
-            
              •  glyphicon-print
                • 
-            
              •  glyphicon-camera
                • 
-            
              •  glyphicon-font
                • 
-            
              •  glyphicon-bold
                • 
-            
              •  glyphicon-italic
                • 
-            
              •  glyphicon-text-height
                • 
-            
              •  glyphicon-text-width
                • 
-            
              •  glyphicon-align-left
                • 
-            
              •  glyphicon-align-center
                • 
-            
              •  glyphicon-align-right
                • 
-            
              •  glyphicon-align-justify
                • 
-            
              •  glyphicon-list
                • 
-
-            
              •  glyphicon-indent-left
                • 
-            
              •  glyphicon-indent-right
                • 
-            
              •  glyphicon-facetime-video
                • 
-            
              •  glyphicon-picture
                • 
-            
              •  glyphicon-pencil
                • 
-            
              •  glyphicon-map-marker
                • 
-            
              •  glyphicon-adjust
                • 
-            
              •  glyphicon-tint
                • 
-            
              •  glyphicon-edit
                • 
-            
              •  glyphicon-share
                • 
-            
              •  glyphicon-check
                • 
-            
              •  glyphicon-move
                • 
-            
              •  glyphicon-step-backward
                • 
-            
              •  glyphicon-fast-backward
                • 
-            
              •  glyphicon-backward
                • 
-            
              •  glyphicon-play
                • 
-            
              •  glyphicon-pause
                • 
-            
              •  glyphicon-stop
                • 
-            
              •  glyphicon-forward
                • 
-            
              •  glyphicon-fast-forward
                • 
-            
              •  glyphicon-step-forward
                • 
-            
              •  glyphicon-eject
                • 
-            
              •  glyphicon-chevron-left
                • 
-            
              •  glyphicon-chevron-right
                • 
-            
              •  glyphicon-plus-sign
                • 
-            
              •  glyphicon-minus-sign
                • 
-            
              •  glyphicon-remove-sign
                • 
-            
              •  glyphicon-ok-sign
                • 
-
-            
              •  glyphicon-question-sign
                • 
-            
              •  glyphicon-info-sign
                • 
-            
              •  glyphicon-screenshot
                • 
-            
              •  glyphicon-remove-circle
                • 
-            
              •  glyphicon-ok-circle
                • 
-            
              •  glyphicon-ban-circle
                • 
-            
              •  glyphicon-arrow-left
                • 
-            
              •  glyphicon-arrow-right
                • 
-            
              •  glyphicon-arrow-up
                • 
-            
              •  glyphicon-arrow-down
                • 
-            
              •  glyphicon-share-alt
                • 
-            
              •  glyphicon-resize-full
                • 
-            
              •  glyphicon-resize-small
                • 
-            
              •  glyphicon-plus
                • 
-            
              •  glyphicon-minus
                • 
-            
              •  glyphicon-asterisk
                • 
-            
              •  glyphicon-exclamation-sign
                • 
-            
              •  glyphicon-gift
                • 
-            
              •  glyphicon-leaf
                • 
-            
              •  glyphicon-fire
                • 
-            
              •  glyphicon-eye-open
                • 
-            
              •  glyphicon-eye-close
                • 
-            
              •  glyphicon-warning-sign
                • 
-            
              •  glyphicon-plane
                • 
-            
              •  glyphicon-calendar
                • 
-            
              •  glyphicon-random
                • 
-            
              •  glyphicon-comment
                • 
-            
              •  glyphicon-magnet
                • 
-
-            
              •  glyphicon-chevron-up
                • 
-            
              •  glyphicon-chevron-down
                • 
-            
              •  glyphicon-retweet
                • 
-            
              •  glyphicon-shopping-cart
                • 
-            
              •  glyphicon-folder-close
                • 
-            
              •  glyphicon-folder-open
                • 
-            
              •  glyphicon-resize-vertical
                • 
-            
              •  glyphicon-resize-horizontal
                • 
-            
              •  glyphicon-hdd
                • 
-            
              •  glyphicon-bullhorn
                • 
-            
              •  glyphicon-bell
                • 
-            
              •  glyphicon-certificate
                • 
-            
              •  glyphicon-thumbs-up
                • 
-            
              •  glyphicon-thumbs-down
                • 
-            
              •  glyphicon-hand-right
                • 
-            
              •  glyphicon-hand-left
                • 
-            
              •  glyphicon-hand-up
                • 
-            
              •  glyphicon-hand-down
                • 
-            
              •  glyphicon-circle-arrow-right
                • 
-            
              •  glyphicon-circle-arrow-left
                • 
-            
              •  glyphicon-circle-arrow-up
                • 
-            
              •  glyphicon-circle-arrow-down
                • 
-            
              •  glyphicon-globe
                • 
-            
              •  glyphicon-wrench
                • 
-            
              •  glyphicon-tasks
                • 
-            
              •  glyphicon-filter
                • 
-            
              •  glyphicon-briefcase
                • 
-            
              •  glyphicon-fullscreen
                • 
-
-            
              •  glyphicon-dashboard
                • 
-            
              •  glyphicon-paperclip
                • 
-            
              •  glyphicon-heart-empty
                • 
-            
              •  glyphicon-link
                • 
-            
              •  glyphicon-phone
                • 
-            
              •  glyphicon-pushpin
                • 
-            
              •  glyphicon-euro
                • 
-            
              •  glyphicon-usd
                • 
-            
              •  glyphicon-gbp
                • 
-            
              •  glyphicon-sort
                • 
-            
              •  glyphicon-sort-by-alphabet
                • 
-            
              •  glyphicon-sort-by-alphabet-alt
                • 
-            
              •  glyphicon-sort-by-order
                • 
-            
              •  glyphicon-sort-by-order-alt
                • 
-            
              •  glyphicon-sort-by-attributes
                • 
-            
              •  glyphicon-sort-by-attributes-alt
                • 
-            
              •  glyphicon-unchecked
                • 
-            
              •  glyphicon-expand
                • 
-            
              •  glyphicon-collapse
                • 
-            
              •  glyphicon-collapse-top
                • 
-
-          
              
-
-          
              Glyphicons attribution
              
-          
              Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
              
-
-
-          
              How to use
              
-          
              Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:
              
-{% highlight html linenos %}
-
-{% endhighlight %}
-          
              Want to change the icon color? Just change the color of the parent element.
              
-          
              When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
              
-
-
-          
              Icon examples
              
-          
              Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
              
-
-          
              Buttons
              
-
-          
              Button group in a button toolbar
              
-          
              
-            
              
-              
              
-                
-                
-                
-                
-              
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
              
-    
-    
-    
-    
-  
              
-
              
-{% endhighlight %}
-
-          
              Dropdown in a button group
              
-          
              
-            
              
-               User
-              
-              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-   User
-  
-  
-
              
-{% endhighlight %}
-
-          
              Large button
              
-          
              
-             Star
-          
              
-{% highlight html linenos %}
- Star
-{% endhighlight %}
-
-          
              Small button
              
-          
              
-            
-          
              
-{% highlight html linenos %}
-
-{% endhighlight %}
-
-
-          
              Navigation
              
-          
              
-            
-          
              
-{% highlight html linenos %}
-
-{% endhighlight %}
-
-          
              Form fields
              
-          
              
-            
              
-              
-              
              
-                
              
-                  
-                  
-                
              
-              
              
-            
              
-          
              
-{% highlight html linenos %}
-
              
-  
-  
              
-    
              
-      
-      
-    
              
-  
              
-
              
-{% endhighlight %}
-
-        
              
-
-
-
-        
-        
              
-          
              
-            
              Responsive utilities
              
-          
              
-          
              For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
              
-
-          
              Responsive classes
              
-          
-            
-              
-                
-                
-                
-                
-              
-            
-            
-              
-                
-                
-                
-                
-              
-              
-                
-                
-                
-                
-              
-              
-                
-                
-                
-                
-              
-              
-                
-                
-                
-                
-              
-              
-                
-                
-                
-                
-              
-              
-                
-                
-                
-                
-              
-            
-          
              ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
              .visible-phoneVisible
              .visible-tabletVisible
              .visible-desktopVisible
              .hidden-phoneVisibleVisible
              .hidden-tabletVisibleVisible
              .hidden-desktopVisibleVisible
              
-
-          
              Print classes
              
-          
-            
-              
-                
-                
-                
-              
-            
-            
-              
-                
-                
-                
-              
-              
-                
-                
-                
-              
-            
-          
              ClassBrowserPrint
              .visible-printVisible
              .hidden-printVisible
              
-
-          
              When to use
              
-          
              Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.
              
-
-          
              Test case
              
-          
              Resize your browser or load on different devices to test the above classes.
              
-          
              Visible on...
              
-          
              Green checkmarks indicate that class is visible in your current viewport.
              
-          
                
-            
              • Phone✔ Phone
                • 
-            
              • Tablet✔ Tablet
                • 
-            
              • Desktop✔ Desktop
                • 
-          
              
-          
              Hidden on...
              
-          
              Here, green checkmarks indicate that class is hidden in your current viewport.
              
-          
                
-            
              • Phone✔ Phone
                • 
-            
              • Tablet✔ Tablet
                • 
-            
              • Desktop✔ Desktop
                • 
-          
              
-
-        
              
-
-  
              
-- 
cgit v1.2.3


From edb733ebc7db2d76bdac2611cbd83c5ae36f4fee Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 8 May 2013 21:56:08 -0700
Subject: Super massive docs overhaul

* Bring back the navbar up top
* Pull the docs content back into separate pages because a 6.6k line docs file is just crazy
* Recenter the page content and bring back affixed side nav (needs work)
---
 docs/css.html | 2057 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 2057 insertions(+)
 create mode 100644 docs/css.html

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
new file mode 100644
index 000000000..f5b61786f
--- /dev/null
+++ b/docs/css.html
@@ -0,0 +1,2057 @@
+---
+layout: default
+title: CSS
+slug: css
+lead: "Fundamental HTML elements styled and enhanced with extensible classes."
+---
+
+
+  
+  
              
+    
              
+      
              Overview
              
+    
              
+    
              Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
              
+
+    
              HTML5 doctype required
              
+    
              Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
              
+{% highlight html %}
+
+
+  ...
+
+{% endhighlight %}
+
+    
              Mobile first
              
+    
              With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
              
+    
              To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
              
+{% highlight html %}
+
+{% endhighlight %}
+
+    
              Responsive images
              
+    
              We automatically attempt to scale images to appropriate sizes with a global max-width: 100%; on all <img> elements. If you run into problems (e.g., with Google Maps), be sure to disable this property on a per-case basis.
              
+
+    
              Typography and links
              
+    
              Bootstrap sets basic global display, typography, and link styles. Specifically, we:
              
+    
                
+      
              • Remove margin on the body
                • 
+      
              • Set background-color: white; on the body
                • 
+      
              • Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base
                • 
+      
              • Set the global link color via @link-color and apply link underlines only on :hover
                • 
+    
              
+    
              These styles can be found within scaffolding.less.
              
+
+    
              Normalize reset
              
+    
              For improved cross-browser rendering, we use Normalize, a project by Nicolas Gallagher and Jonathan Neal.
              
+  
              
+
+
+
+  
+  
              
+    
              
+      
              Grid system
              
+    
              
+    
              Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.
              
+
+    
              Grid example
              
+    
              On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-span-* elements within a .row. As this is a 12-column grid, each .col-span-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
              
+    
              
+      
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+      
              
+      
              
+        
              4
              
+        
              4
              
+        
              4
              
+      
              
+      
              
+        
              6
              
+        
              6
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+
              
+
              
+  
              4
              
+  
              4
              
+  
              4
              
+
              
+
              
+  
              6
              
+  
              6
              
+
              
+{% endhighlight %}
+
+    
              Offsetting columns
              
+    
              Move columns to the right using .col-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-offset-4 moves .col col-lg-4 over four columns.
              
+    
              
+      
              
+        
              4
              
+        
              4 offset 4
              
+      
              
+      
              
+        
              3 offset 3
              
+        
              3 offset 3
              
+      
              
+      
              
+        
              6 offset 3
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              ...
              
+  
              ...
              
+
              
+
              
+  
              3 offset 3
              
+  
              3 offset 3
              
+
              
+
              
+  
              ...
              
+
              
+{% endhighlight %}
+
+
+    
              Nesting columns
              
+    
              To nest your content with the default grid, add a new .row and set of .col-span-* columns within an existing .col-span-* column. Nested rows should include a set of columns that add up to 12.
              
+    
              
+      
              
+        Level 1: 9 columns
+        
              
+          
              
+            Level 2: 6 columns
+          
              
+          
              
+            Level 2: 6 columns
+          
              
+        
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              
+    Level 1: 9 columns
+    
              
+      
              
+        Level 2: 6 columns
+      
              
+      
              
+        Level 2: 6 columns
+      
              
+    
              
+  
              
+
              
+{% endhighlight %}
+
+    
              Column ordering
              
+    
              Easily change the order of our built-in grid columns with .col-push-* and .col-pull-* modifier classes.
              
+    
              
+      
              9
              
+      
              3
              
+    
              
+
+{% highlight html %}
+
              
+  
              9
              
+  
              3
              
+
              
+{% endhighlight %}
+
+    
              Small device grid
              
+    
              Use the small device grid classes, like .col-sm-6, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.
              
+    
              
+      
              4 cols, 6 small cols
              
+      
              4 cols, 6 small cols
              
+      
              4 cols, 12 small cols
              
+    
              
+{% highlight html %}
+
              
+  
              4 cols, 6 small cols
              
+  
              4 cols, 6 small cols
              
+  
              4 cols, 12 small cols
              
+
              
+{% endhighlight %}
+
+    
              LESS mixins and variables
              
+    
              In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.
              
+
+    
              Variables
              
+    
              Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
              
+{% highlight css %}
+@grid-columns:              12;
+@grid-gutter-width:         30px;
+@grid-float-breakpoint:     768px;
+{% endhighlight %}
+
+    
              Mixins
              
+    
              Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
              
+{% highlight css %}
+// Creates a wrapper for a series of columns
+.make-row() {
+  // Negative margin the row out to align the content of columns
+  margin-left:  (@grid-gutter-width / -2);
+  margin-right: (@grid-gutter-width / -2);
+  // Then clear the floated columns
+  .clearfix();
+}
+
+// Generate the columns
+.make-column(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    float: left;
+    // Calculate width based on number of columns available
+    width: percentage(@columns / @grid-columns);
+  }
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Set inner padding as gutters instead of margin
+  padding-left:  (@grid-gutter-width / 2);
+  padding-right: (@grid-gutter-width / 2);
+}
+
+// Generate the column offsets
+.make-column-offset(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+{% endhighlight %}
+
+    
              Example usage
              
+    
              You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
              
+{% highlight css %}
+.wrapper {
+  .make-row();
+}
+.content-main {
+  .make-column(8);
+}
+.content-secondary {
+  .make-column(3);
+  .make-column-offset(1);
+}
+{% endhighlight %}
+{% highlight html %}
+
              
+  
              ...
              
+  
              ...
              
+
              
+{% endhighlight %}
+
+  
              
+
+
+
+
+  
+  
              
+    
              
+      
              Typography
              
+    
              
+
+    
+    
              Headings
              
+    
              All HTML headings, <h1> through <h6> are available.
              
+
+    
              
+      
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
              Bootstrap heading
              		Semibold 38px
              Bootstrap heading
              		Semibold 32px
              Bootstrap heading
              		Semibold 24px
              Bootstrap heading
              		Semibold 18px
              Bootstrap heading
              		Semibold 16px
              Bootstrap heading
              		Semibold 12px
              
+    
              
+{% highlight html %}
+
              ...
              
+
              ...
              
+
              ...
              
+
              ...
              
+
              ...
              
+
              ...
              
+{% endhighlight %}
+
+    
+    
              Body copy
              
+    
              Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
              
+    
              
+      
              Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
              
+      
              Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
              
+      
              Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
              
+    
              
+{% highlight html %}
+
              ...
              
+{% endhighlight %}
+
+    
+    
              Lead body copy
              
+    
              Make a paragraph stand out by adding .lead.
              
+    
              
+      
              Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
              
+    
              
+{% highlight html %}
+
              ...
              
+{% endhighlight %}
+
+    
+    
              Built with Less
              
+    
              The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
              
+
+
+    
+    
              Emphasis
              
+    
              Make use of HTML's default emphasis tags with lightweight styles.
              
+
+    
              Small text
              
+    
              For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.
              
+    
              
+      
              This line of text is meant to be treated as fine print.
              
+    
              
+{% highlight html %}
+This line of text is meant to be treated as fine print.
+{% endhighlight %}
+
+
+    
              Bold
              
+    
              For emphasizing a snippet of text with a heavier font-weight.
              
+    
              
+      
              The following snippet of text is rendered as bold text.
              
+    
              
+{% highlight html %}
+rendered as bold text
+{% endhighlight %}
+
+    
              Italics
              
+    
              For emphasizing a snippet of text with italics.
              
+    
              
+      
              The following snippet of text is rendered as italicized text.
              
+    
              
+{% highlight html %}
+rendered as italicized text
+{% endhighlight %}
+
+    
              Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
              
+
+    
              Alignment classes
              
+    
              Easily realign text to components with text alignment classes.
              
+    
              
+      
              Left aligned text.
              
+      
              Center aligned text.
              
+      
              Right aligned text.
              
+    
              
+{% highlight html %}
+
              Left aligned text.
              
+
              Center aligned text.
              
+
              Right aligned text.
              
+{% endhighlight %}
+
+    
              Emphasis classes
              
+    
              Convey meaning through color with a handful of emphasis utility classes.
              
+    
              
+      
              Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
              
+      
              Etiam porta sem malesuada magna mollis euismod.
              
+      
              Donec ullamcorper nulla non metus auctor fringilla.
              
+      
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
              
+    
              
+{% highlight html %}
+
              ...
              
+
              ...
              
+
              ...
              
+
              ...
              
+{% endhighlight %}
+
+
+    
+    
              Abbreviations
              
+    
              Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
              
+
+    
              Basic abbreviation
              
+    
              For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element.
              
+    
              
+      
              An abbreviation of the word attribute is attr.
              
+    
              
+{% highlight html %}
+attr
+{% endhighlight %}
+
+    
              Initialism
              
+    
              Add .initialism to an abbreviation for a slightly smaller font-size.
              
+    
              
+      
              HTML is the best thing since sliced bread.
              
+    
              
+{% highlight html %}
+HTML
+{% endhighlight %}
+
+
+    
+    
              Addresses
              
+    
              Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.
              
+    
              
+      
              
+        Twitter, Inc.
              
+        795 Folsom Ave, Suite 600
              
+        San Francisco, CA 94107
              
+        P: (123) 456-7890
+      
              
+      
              
+        Full Name
              
+        first.last@example.com
+      
              
+    
              
+{% highlight html %}
+
              
+  Twitter, Inc.
              
+  795 Folsom Ave, Suite 600
              
+  San Francisco, CA 94107
              
+  P: (123) 456-7890
+
              
+
+
              
+  Full Name
              
+  first.last@example.com
+
              
+{% endhighlight %}
+
+
+    
+    
              Blockquotes
              
+    
              For quoting blocks of content from another source within your document.
              
+
+    
              Default blockquote
              
+    
              Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
              
+    
              
+      
              
+        
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
+
              
+{% endhighlight %}
+
+    
              Blockquote options
              
+    
              Style and content changes for simple variations on a standard blockquote.
              
+
+    
              Naming a source
              
+    
              Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.
              
+    
              
+      
              
+        
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
+        Someone famous in Source Title
+      
              
+    
              
+{% highlight html %}
+
              
+  
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
+  Someone famous Source Title
+
              
+{% endhighlight %}
+
+    
              Alternate displays
              
+    
              Use .pull-right for a floated, right-aligned blockquote.
              
+    
              
+      
              
+        
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
+        Someone famous in Source Title
+      
              
+    
              
+{% highlight html %}
+
              
+  ...
+
              
+{% endhighlight %}
+
+
+    
+    
              Lists
              
+
+    
              Unordered
              
+    
              A list of items in which the order does not explicitly matter.
              
+    
              
+      
                
+        
              • Lorem ipsum dolor sit amet
                • 
+        
              • Consectetur adipiscing elit
                • 
+        
              • Integer molestie lorem at massa
                • 
+        
              • Facilisis in pretium nisl aliquet
                • 
+        
              • Nulla volutpat aliquam velit
+          
                  
+            
                • Phasellus iaculis neque
                  • 
+            
                • Purus sodales ultricies
                  • 
+            
                • Vestibulum laoreet porttitor sem
                  • 
+            
                • Ac tristique libero volutpat at
                  • 
+          
                
+        
                • 
+        
              • Faucibus porta lacus fringilla vel
                • 
+        
              • Aenean sit amet erat nunc
                • 
+        
              • Eget porttitor lorem
                • 
+      
              
+    
              
+{% highlight html %}
+
                
+  
              • ...
                • 
+
              
+{% endhighlight %}
+
+    
              Ordered
              
+    
              A list of items in which the order does explicitly matter.
              
+    
              
+      
                
+        
              1. Lorem ipsum dolor sit amet
                2. 
+        
              2. Consectetur adipiscing elit
                3. 
+        
              3. Integer molestie lorem at massa
                4. 
+        
              4. Facilisis in pretium nisl aliquet
                5. 
+        
              5. Nulla volutpat aliquam velit
                6. 
+        
              6. Faucibus porta lacus fringilla vel
                7. 
+        
              7. Aenean sit amet erat nunc
                8. 
+        
              8. Eget porttitor lorem
                9. 
+      
              
+    
              
+{% highlight html %}
+
                
+  
              1. ...
                2. 
+
              
+{% endhighlight %}
+
+    
              Unstyled
              
+    
              Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
              
+    
              
+      
                
+        
              • Lorem ipsum dolor sit amet
                • 
+        
              • Consectetur adipiscing elit
                • 
+        
              • Integer molestie lorem at massa
                • 
+        
              • Facilisis in pretium nisl aliquet
                • 
+        
              • Nulla volutpat aliquam velit
+          
                  
+            
                • Phasellus iaculis neque
                  • 
+            
                • Purus sodales ultricies
                  • 
+            
                • Vestibulum laoreet porttitor sem
                  • 
+            
                • Ac tristique libero volutpat at
                  • 
+          
                
+        
                • 
+        
              • Faucibus porta lacus fringilla vel
                • 
+        
              • Aenean sit amet erat nunc
                • 
+        
              • Eget porttitor lorem
                • 
+      
              
+    
              
+{% highlight html %}
+
                
+  
              • ...
                • 
+
              
+{% endhighlight %}
+
+    
              Inline
              
+    
              Place all list items on a single line with inline-block and some light padding.
              
+    
              
+      
                
+        
              • Lorem ipsum
                • 
+        
              • Phasellus iaculis
                • 
+        
              • Nulla volutpat
                • 
+      
              
+    
              
+{% highlight html %}
+
                
+  
              • ...
                • 
+
              
+{% endhighlight %}
+
+    
              Description
              
+    
              A list of terms with their associated descriptions.
              
+    
              
+      
              
+        
              Description lists
              
+        
              A description list is perfect for defining terms.
              
+        
              Euismod
              
+        
              Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
              
+        
              Donec id elit non mi porta gravida at eget metus.
              
+        
              Malesuada porta
              
+        
              Etiam porta sem malesuada magna mollis euismod.
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              ...
              
+  
              ...
              
+
              
+{% endhighlight %}
+
+    
              Horizontal description
              
+    
              Make terms and descriptions in <dl> line up side-by-side.
              
+    
              
+      
              
+        
              Description lists
              
+        
              A description list is perfect for defining terms.
              
+        
              Euismod
              
+        
              Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
              
+        
              Donec id elit non mi porta gravida at eget metus.
              
+        
              Malesuada porta
              
+        
              Etiam porta sem malesuada magna mollis euismod.
              
+        
              Felis euismod semper eget lacinia
              
+        
              Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              ...
              
+  
              ...
              
+
              
+{% endhighlight %}
+
+    
              Auto-truncating
              
+    
              
+      Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.
+    
              
+  
              
+
+
+  
+  
              
+    
              
+      
              Code
              
+    
              
+
+    
              Inline
              
+    
              Wrap inline snippets of code with <code>.
              
+
              
+  For example, <section> should be wrapped as inline.
+
              
+{% highlight html %}
+For example, <section> should be wrapped as inline.
+{% endhighlight %}
+
+    
              Basic block
              
+    
              Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
              
+
              
+  
              <p>Sample text here...</p>
              
+
              
+{% highlight html %}
+
              <p>Sample text here...</p>
              
+{% endhighlight %}
+
+    
              You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.
              
+  
              
+
+
+
+  
+  
              
+    
              
+      
              Tables
              
+    
              
+
+    
              Basic example
              
+    
              For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
              
+    
              
+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+        
+      
              #First NameLast NameUsername
              1MarkOtto@mdo
              2JacobThornton@fat
              3Larrythe Bird@twitter
              
+    
              
+{% highlight html %}
+
+  ...
+
              
+{% endhighlight %}
+
+
+    
              Optional classes
              
+    
              Add any of the following classes to the .table base class.
              
+
+    
              Striped
              
+    
              Use .table-striped to add zebra-striping to any table row within the <tbody>.
              
+    
              
+      
              Cross-browser compatibility
              
+      
              Striped tables are styled via the :nth-child CSS selector, which is not available in IE8.
              
+    
              
+    
              
+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+        
+      
              #First NameLast NameUsername
              1MarkOtto@mdo
              2JacobThornton@fat
              3Larrythe Bird@twitter
              
+    
              
+{% highlight html %}
+
+  ...
+
              
+{% endhighlight %}
+
+    
              Bordered
              
+    
              Add .table-bordered for borders and rounded corners.
              
+    
              
+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+          
+        
+      
              #First NameLast NameUsername
              1MarkOtto@mdo
              MarkOtto@TwBootstrap
              2JacobThornton@fat
              3Larry the Bird@twitter
              
+    
              
+{% highlight html %}
+
+  ...
+
              
+{% endhighlight %}
+
+    
              Hover rows
              
+    
              Add .table-hover to enable a hover state on table rows within a <tbody>.
              
+    
              
+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+          
+        
+      
              #First NameLast NameUsername
              1MarkOtto@mdo
              2JacobThornton@fat
              3Larry the Bird@twitter
              
+    
              
+{% highlight html %}
+
+  ...
+
              
+{% endhighlight %}
+
+
+    
              Condensed
              
+    
              Add .table-condensed to make tables more compact by cutting cell padding in half.
              
+    
              
+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+          
+        
+      
              #First NameLast NameUsername
              1MarkOtto@mdo
              2JacobThornton@fat
              3Larry the Bird@twitter
              
+    
              
+{% highlight html %}
+
+  ...
+
              
+{% endhighlight %}
+
+
+
+    
              Optional row classes
              
+    
              Use contextual classes to color table rows.
              
+    
+      +        +        +      
+      
+        
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+        
+        
+          
+          
+        
+        
+          
+          
+        
+      
+    
              



              ClassDescription
              
+            .success
+          Indicates a successful or positive action.
              
+            .danger
+          Indicates a dangerous or potentially negative action.
              
+            .warning
+          Indicates a warning that might need attention.
              
+            .info
+          Used as an alternative to the default styles.
              
+    
              
+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+        
+      
              #ProductPayment TakenStatus
              1TB - Monthly01/04/2012Approved
              2TB - Monthly02/04/2012Declined
              3TB - Monthly03/04/2012Pending
              
+    
              
+{% highlight html %}
+...
+
+  1
+  TB - Monthly
+  01/04/2012
+  Approved
+
+...
+{% endhighlight %}
+
+  
              
+
+
+
+  
+  
              
+    
              
+      
              Forms
              
+    
              
+
+    
              Basic example
              
+    
              Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.
              
+    
              
+      
              
+        Legend
+        
+        
+        
              Example block-level help text here.
              
+        
              
+          
+        
              
+        
+      
              
+    
              
+{% highlight html %}
+
              
+  
              
+    Legend
+    
+    
+    
              Example block-level help text here.
              
+    
              
+      
+    
              
+    
+  
              
+
              
+{% endhighlight %}
+
+
+    
              Optional layouts
              
+    
              Included with Bootstrap are optional form layouts for common use cases.
              
+
+    
              Inline form
              
+    
              Add .form-inline for left-aligned and inline-block controls for a compact layout.
              
+    
              
+      
              Requires custom widths
              
+      
              Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
              
+    
              
+    
              
+      
+      
+      
              
+        
+      
              
+      
+    
              
+{% highlight html %}
+
              
+  
+  
+  
              
+    
+  
              
+  
+
              
+{% endhighlight %}
+
+    
              Horizontal form
              
+    
              Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
              
+    
                
+      
              • Add .form-horizontal to the form
                • 
+      
              • Wrap labels and controls in .control-group
                • 
+      
              • Add .control-label to the label
                • 
+      
              • Wrap any associated controls in .controls for proper alignment
                • 
+    
              
+    
              
+      
              
+        
+        
              
+          
+        
              
+      
              
+      
              
+        
+        
              
+          
+          
              
+            
+          
              
+        
              
+      
              
+      
              
+        
              
+          
+        
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              
+    
+    
              
+      
+    
              
+  
              
+  
              
+    
+    
              
+      
+      
              
+        
+      
              
+    
              
+  
              
+  
              
+    
              
+      
+    
              
+  
              
+
              
+{% endhighlight %}
+
+
+    
              Supported form controls
              
+    
              Examples of standard form controls supported in an example form layout.
              
+
+    
              Inputs
              
+    
              Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
              
+    
              
+      
              Type declaration required
              
+      
              Inputs will only be fully styled if their type is properly declared.
              
+    
              
+    
              
+      
+    
              
+{% highlight html %}
+
+{% endhighlight %}
+
+    
              Textarea
              
+    
              Form control which supports multiple lines of text. Change rows attribute as necessary.
              
+    
              
+      
+    
              
+{% highlight html %}
+
+{% endhighlight %}
+
+    
              Checkboxes and radios
              
+    
              Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
              
+    
              Default (stacked)
              
+    
              
+      
              
+        
+      
              
+      
              
+      
              
+        
+      
              
+      
              
+        
+      
              
+    
              
+{% highlight html %}
+
              
+  
+
              
+
+
              
+  
+
              
+{% endhighlight %}
+
+    
              Inline checkboxes
              
+    
              Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.
              
+    
              
+      
+      
+      
+    
              
+{% highlight html %}
+
+
+
+{% endhighlight %}
+
+    
              Selects
              
+    
              Use the default option or specify a multiple="multiple" to show multiple options at once.
              
+    
              
+      
+      
              
+      
+    
              
+{% highlight html %}
+
+
+
+{% endhighlight %}
+
+
+
+    
              Form control states
              
+    
              Provide feedback to users or visitors with basic feedback states on form controls and labels.
              
+
+    
              Input focus
              
+    
              We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.
              
+    
              
+      
+    
              
+{% highlight html %}
+
+{% endhighlight %}
+
+    
              Invalid inputs
              
+    
              Style inputs via default browser functionality. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.
              
+
+    
              
+      
              Cross-browser compatibility
              
+      
              Invalid inputs are styled via the :invalid CSS selector, which is not supported by Internet Explorer 9 and below.
              
+    
              
+
+    
              
+      
+    
              
+{% highlight html %}
+
+{% endhighlight %}
+
+    
              Disabled inputs
              
+    
              Add the disabled attribute on an input to prevent user input and trigger a slightly different look.
              
+    
              
+      
+    
              
+{% highlight html %}
+
+{% endhighlight %}
+
+    
              Disabled fieldsets
              
+    
              Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.
              
+
+    
              
+      
              Link functionality of <a> not impacted
              
+      
              This class will only change the appearance of <a class="btn"> buttons, not their functionality. Use custom JavaScript to disable links here.
              
+    
              
+
+    
              
+      
              Cross-browser compatibility
              
+      
              While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <disabled> attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.
              
+    
              
+
+    
              
+      
              
+        
              
+          
+        
              
+        
              
+          
+        
              
+        
              
+          
+        
              
+        
+      
              
+    
              
+{% highlight html %}
+
              
+  
              
+    
              
+      
+    
              
+    
              
+      
+    
              
+    
              
+      
+    
              
+    
+  
              
+
              
+{% endhighlight %}
+
+    
              Validation states
              
+    
              Bootstrap includes validation styles for error, warning, info, and success messages. To use:
              
+    
                
+      
              • Add .has-warning, .has-error, or .has-success to the parent element
                • 
+      
              • Add .input-with-feedback to the field(s) in question
                • 
+    
              
+    
              Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.
              
+
+    
              
+      
              
+        
+        
              
+          
+        
              
+      
              
+      
              
+        
+        
              
+          
+        
              
+      
              
+      
              
+        
+        
              
+          
+        
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
+  
              
+    
+  
              
+
              
+
              
+  
+  
              
+    
+  
              
+
              
+
              
+  
+  
              
+    
+  
              
+
              
+{% endhighlight %}
+
+
+
+    
              Extending form controls
              
+    
              Adding on top of existing browser controls, Bootstrap includes other useful form components.
              
+
+    
              Input groups
              
+    
              Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with a .add-on to prepend or append elements to an <input>.
              
+
+    
              
+      
              Cross-browser compatibility
              
+      
              Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
              
+    
              
+
+    
              
+      
              
+        @
+        
+      
              
+      
              
+      
              
+        
+        .00
+      
              
+      
              
+      
              
+        $
+        
+        .00
+      
              
+    
              
+{% highlight html %}
+
              
+  @
+  
+
              
+
+
              
+  
+  .00
+
              
+
+
              
+  $
+  
+  .00
+
              
+{% endhighlight %}
+
+    
              Optional sizes
              
+    
              Add the relative form sizing classes to the `.input-group-addon`.
              
+    
              
+      
              
+        @
+        
+      
              
+      
              
+      
              
+        @
+        
+      
              
+      
              
+      
              
+        @
+        
+      
              
+    
              
+{% highlight html %}
+
              
+  @
+  
+
              
+
+
              
+  @
+  
+
              
+
+
              
+  @
+  
+
              
+{% endhighlight %}
+
+    
              Buttons instead of text
              
+    
              Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
              
+    
              
+      
              
+        
+          
+        
+        
+      
              
+      
              
+      
              
+        
+        
+          
+        
+      
              
+    
              
+{% highlight html %}
+
              
+  
+    
+  
+  
+
              
+
+
              
+  
+  
+    
+  
+
              
+{% endhighlight %}
+
+    
              Button dropdowns
              
+    
              
+    
              
+      
              
+        
              
+          
+          
+        
              
+        
+      
              
+      
              
+      
              
+        
+        
              
+          
+          
+        
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              
+    
+    
+  
              
+  
+
              
+
+
              
+  
+  
              
+    
+    
+  
              
+
              
+{% endhighlight %}
+
+    
              Segmented dropdown groups
              
+    
              
+      
              
+        
              
+          
+          
+          
+        
              
+        
+      
              
+
+      
              
+
+      
              
+        
+        
              
+          
+          
+          
+        
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              
+    
+  
              
+  
+
              
+
+
              
+  
+  
              
+    
+  
              
+
              
+{% endhighlight %}
+
+    
              Control sizing
              
+    
              Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .col-span-* classes.
              
+
+    
              Relative sizing
              
+    
              Create larger or smaller form controls that match button sizes.
              
+    
              
+      
              
+        
+        
+        
+      
              
+    
              
+{% highlight html %}
+
+
+
+{% endhighlight %}
+
+    
              Column sizing
              
+    
              Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
              
+    
              
+      
              
+        
              
+          
+        
              
+        
              
+          
+        
              
+        
              
+          
+        
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              
+    
+  
              
+  
              
+    
+  
              
+  
              
+    
+  
              
+
              
+{% endhighlight %}
+
+    
              Form actions
              
+    
              End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.
              
+    
              
+      
              
+        
+        
+      
              
+    
              
+{% highlight html %}
+
              
+  
+  
+
              
+{% endhighlight %}
+
+    
              Help text
              
+    
              Inline and block level support for help text that appears around form controls.
              
+    
              Inline help
              
+    
              
+       Inline help text
+    
              
+{% highlight html %}
+
+Inline help text
+{% endhighlight %}
+
+    
              Block help
              
+    
              
+      
+      A longer block of help text that breaks onto a new line and may extend beyond one line.
+    
              
+{% highlight html %}
+
+A longer block of help text that breaks onto a new line and may extend beyond one line.
+{% endhighlight %}
+
+  
              
+
+
+
+  
+  
              
+    
              
+      
              Buttons
              
+    
              
+
+    
              Button options
              
+    
              Use any of the available button classes to quickly create a styled button.
              
+    
              
+      
+      
+      
+      
+      
+      
+      
+    
              
+{% highlight html %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+    
              Button sizes
              
+    
              Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.
              
+    
              
+      
              
+        
+        
+      
              
+      
              
+        
+        
+      
              
+      
              
+        
+        
+      
              
+      
              
+        
+        
+      
              
+    
              
+{% highlight html %}
+
              
+  
+  
+
              
+
              
+  
+  
+
              
+
              
+  
+  
+
              
+
              
+  
+  
+
              
+{% endhighlight %}
+
+    
              Create block level buttons—those that span the full width of a parent— by adding .btn-block.
              
+    
              
+      
              
+        
+        
+      
              
+    
              
+{% highlight html %}
+
+
+{% endhighlight %}
+
+
+    
              Disabled state
              
+    
              Make buttons look unclickable by fading them back 50%.
              
+
+    
              Button element
              
+    
              Add the disabled attribute to <button> buttons.
              
+    
              
+      
+      
+    
              
+{% highlight html %}
+
+
+{% endhighlight %}
+
+    
              
+      
              Cross-browser compatibility
              
+      
              If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.
              
+    
              
+
+    
              Anchor element
              
+    
              Add the .disabled class to <a> buttons.
              
+    
              
+      Primary link
+      Link
+    
              
+{% highlight html %}
+Primary link
+Link
+{% endhighlight %}
+    
              
+      We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.
+    
              
+    
              
+      
              Link functionality not impacted
              
+      
              This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.
              
+    
              
+
+
+    
              Using multiple tags
              
+    
              Use the button classes on an <a>, <button>, or <input> element.
              
+    
              
+      Link
+      
+      
+      
+    
              
+{% highlight html %}
+Link
+
+
+
+{% endhighlight %}
+
+    
              
+      
              Cross-browser rendering
              
+      
              As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.
              
+    
              
+
+  
              
+
+
+
+  
+  
              
+    
              
+      
              Images
              
+    
              
+
+    
              Add classes to an <img> element to easily style images in any project.
              
+    
              
+      
              Cross-browser compatibility
              
+      
              Keep in mind that Internet Explorer 8 lacks support for rounded corners.
              
+    
              
+    
              
+      
+      
+      
+    
              
+{% highlight html %}
+
+
+
+{% endhighlight %}
+
+  
              
+
+
+  
+  
              
+    
              
+      
              Helper classes
              
+    
              
+
+    
              Close icon
              
+    
              Use the generic close icon for dismissing content like modals and alerts.
              
+    
              
+      
              
+    
              
+{% highlight html %}
+
+{% endhighlight %}
+
+    
              .pull-left
              
+    
              Float an element left
              
+{% highlight html %}
+
              ...
              
+{% endhighlight %}
+{% highlight css %}
+.pull-left {
+  float: left;
+}
+{% endhighlight %}
+
+    
              .pull-right
              
+    
              Float an element right
              
+{% highlight html %}
+
              ...
              
+{% endhighlight %}
+{% highlight css %}
+.pull-right {
+  float: right;
+}
+{% endhighlight %}
+
+    
              .clearfix
              
+    
              Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.
              
+{% highlight html %}
+
              ...
              
+{% endhighlight %}
+{% highlight css %}
+// Mixin
+.clearfix {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// Usage
+.element {
+  .clearfix();
+}
+{% endhighlight %}
+  
              
+
+  
+  
              
+    
              
+      
              Responsive utilities
              
+    
              
+    
              For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
              
+
+    
              Responsive classes
              
+    
+      
+        
+          
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+      
+    
              ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
              .visible-phoneVisible
              .visible-tabletVisible
              .visible-desktopVisible
              .hidden-phoneVisibleVisible
              .hidden-tabletVisibleVisible
              .hidden-desktopVisibleVisible
              
+
+    
              Print classes
              
+    
+      
+        
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+      
+    
              ClassBrowserPrint
              .visible-printVisible
              .hidden-printVisible
              
+
+    
              When to use
              
+    
              Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.
              
+
+    
              Test case
              
+    
              Resize your browser or load on different devices to test the above classes.
              
+    
              Visible on...
              
+    
              Green checkmarks indicate that class is visible in your current viewport.
              
+    
                
+      
              • Phone✔ Phone
                • 
+      
              • Tablet✔ Tablet
                • 
+      
              • Desktop✔ Desktop
                • 
+    
              
+    
              Hidden on...
              
+    
              Here, green checkmarks indicate that class is hidden in your current viewport.
              
+    
                
+      
              • Phone✔ Phone
                • 
+      
              • Tablet✔ Tablet
                • 
+      
              • Desktop✔ Desktop
                • 
+    
              
+
+  
              
-- 
cgit v1.2.3


From 09c3a4b3bcb2d7bb6a786854abd0bc17a12c6d39 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 8 May 2013 22:56:29 -0700
Subject: .bs-docs-example to .bs-example

---
 docs/css.html | 118 +++++++++++++++++++++++++++++-----------------------------
 1 file changed, 59 insertions(+), 59 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index f5b61786f..02e184751 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -282,7 +282,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              Headings
              
     
              All HTML headings, <h1> through <h6> are available.
              
 
-    
              
+    
              
       
@@ -324,7 +324,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              Body copy
              Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
              
-    
              
+    
              
       
              Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
              
       
              Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
              
       
              Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
              
@@ -336,7 +336,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
     
              Lead body copy
              
     
              Make a paragraph stand out by adding .lead.
              
-    
              
+    
              
       
              Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
              
     
              
 {% highlight html %}
@@ -354,7 +354,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Small text
              
     
              For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.
              
-    
              
+    
              
       
              This line of text is meant to be treated as fine print.
              
     
              
 {% highlight html %}
@@ -364,7 +364,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Bold
              
     
              For emphasizing a snippet of text with a heavier font-weight.
              
-    
              
+    
              
       
              The following snippet of text is rendered as bold text.
              
     
              
 {% highlight html %}
@@ -373,7 +373,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Italics
              
     
              For emphasizing a snippet of text with italics.
              
-    
              
+    
              
       
              The following snippet of text is rendered as italicized text.
              
     
              
 {% highlight html %}
@@ -384,7 +384,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Alignment classes
              
     
              Easily realign text to components with text alignment classes.
              
-    
              
+    
              
       
              Left aligned text.
              
       
              Center aligned text.
              
       
              Right aligned text.
              
@@ -397,7 +397,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Emphasis classes
              
     
              Convey meaning through color with a handful of emphasis utility classes.
              
-    
              
+    
              
       
              Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
              
       
              Etiam porta sem malesuada magna mollis euismod.
              
       
              Donec ullamcorper nulla non metus auctor fringilla.
              
@@ -417,7 +417,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Basic abbreviation
              
     
              For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element.
              
-    
              
+    
              
       
              An abbreviation of the word attribute is attr.
              
     
              
 {% highlight html %}
@@ -426,7 +426,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Initialism
              
     
              Add .initialism to an abbreviation for a slightly smaller font-size.
              
-    
              
+    
              
       
              HTML is the best thing since sliced bread.
              
     
              
 {% highlight html %}
@@ -437,7 +437,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
     
              Addresses
              
     
              Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.
              
-    
              
+    
              
       
              
         Twitter, Inc.
              
         795 Folsom Ave, Suite 600
              
@@ -470,7 +470,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Default blockquote
              
     
              Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
              
-    
              
+    
              
       
              
         
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
       
              
@@ -486,7 +486,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Naming a source
              
     
              Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.
              
-    
              
+    
              
       
              
         
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
         Someone famous in Source Title
@@ -501,7 +501,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Alternate displays
              
     
              Use .pull-right for a floated, right-aligned blockquote.
              
-    
              
+    
              
       
              
         
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
         Someone famous in Source Title
@@ -519,7 +519,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Unordered
              
     
              A list of items in which the order does not explicitly matter.
              
-    
              
+    
              
       
                
         
              • Lorem ipsum dolor sit amet
                • 
         
              • Consectetur adipiscing elit
                • 
@@ -546,7 +546,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
                Ordered
                
     
                A list of items in which the order does explicitly matter.
                
-    
                
+    
                
       
                  
         
                1. Lorem ipsum dolor sit amet
                  2. 
         
                2. Consectetur adipiscing elit
                  3. 
@@ -566,7 +566,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
                  Unstyled
                  
     
                  Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
                  
-    
                  
+    
                  
       
                    
         
                  • Lorem ipsum dolor sit amet
                    • 
         
                  • Consectetur adipiscing elit
                    • 
@@ -593,7 +593,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
                    Inline
                    
     
                    Place all list items on a single line with inline-block and some light padding.
                    
-    
                    
+    
                    
       
                      
         
                    • Lorem ipsum
                      • 
         
                    • Phasellus iaculis
                      • 
@@ -608,7 +608,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
                      Description
                      
     
                      A list of terms with their associated descriptions.
                      
-    
                      
+    
                      
       
                      
         
                      Description lists
                      
         
                      A description list is perfect for defining terms.
                      
@@ -628,7 +628,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
                      Horizontal description
                      
     
                      Make terms and descriptions in <dl> line up side-by-side.
                      
-    
                      
+    
                      
       
                      
         
                      Description lists
                      
         
                      A description list is perfect for defining terms.
                      
@@ -664,7 +664,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
                      Inline
                      
     
                      Wrap inline snippets of code with <code>.
                      
-
                      
+
                      
   For example, <section> should be wrapped as inline.
 
                      
 {% highlight html %}
@@ -673,7 +673,7 @@ For example, <section> should be wrapped as inline.
 
     
                      Basic block
                      
     
                      Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
                      
-
                      
+
                      
   
                      <p>Sample text here...</p>
                      
 
                      
 {% highlight html %}
@@ -694,7 +694,7 @@ For example, <section> should be wrapped as inline.
 
     
                      Basic example
                      
     
                      For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
                      
-    
                      
+    
                      
       
              
         
           
              
     
     
              
@@ -742,7 +742,7 @@ For example, <section> should be wrapped as inline.
       
              Cross-browser compatibility
              Striped tables are styled via the :nth-child CSS selector, which is not available in IE8.
              
-    
              
+    
              
       
              
         
           
              
       
     
              
@@ -782,7 +782,7 @@ For example, <section> should be wrapped as inline.
 
     
              Bordered
              Add .table-bordered for borders and rounded corners.
              
-    
              
+    
              
       
              
         
           
              
     
              
@@ -826,7 +826,7 @@ For example, <section> should be wrapped as inline.
 
     
              Hover rows
              Add .table-hover to enable a hover state on table rows within a <tbody>.
              
-    
              
+    
              
       
              
         
           
              
     
              
@@ -866,7 +866,7 @@ For example, <section> should be wrapped as inline.
 
     
              Condensed
              Add .table-condensed to make tables more compact by cutting cell padding in half.
              
-    
              
+    
              
       
              
         
           
              
     
              
@@ -945,7 +945,7 @@ For example, <section> should be wrapped as inline.
         
              
         
           
              
       
     
              
-    
              
+    
              
       
@@ -1001,7 +1001,7 @@ For example, <section> should be wrapped as inline.
 
     
              Basic example
              Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.
              
-    
+    
              
         Legend
         
@@ -1042,7 +1042,7 @@ For example, <section> should be wrapped as inline.
       
              Requires custom widths
              
       
              Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
              
     
-    
+    
       
       
       
              
@@ -1073,7 +1073,7 @@ For example, <section> should be wrapped as inline.
       
            • Add .control-label to the label
              • 
       
            • Wrap any associated controls in .controls for proper alignment
              • 
     
-    
+    
       
              
         
         
              
@@ -1134,7 +1134,7 @@ For example, <section> should be wrapped as inline.
       
              Type declaration required
              
       
              Inputs will only be fully styled if their type is properly declared.
              
     
              
-    
+    
       
     
 {% highlight html %}
@@ -1143,7 +1143,7 @@ For example, <section> should be wrapped as inline.
 
     
              Textarea
              
     
              Form control which supports multiple lines of text. Change rows attribute as necessary.
              
-    
              
+    
       
     
 {% highlight html %}
@@ -1153,7 +1153,7 @@ For example, <section> should be wrapped as inline.
     
              Checkboxes and radios
              
     
              Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
              
     
              Default (stacked)
              
-    
              
+    
       
              
         
              
 
-    
              
+    
       
     
 {% highlight html %}
@@ -1283,7 +1283,7 @@ For example, <section> should be wrapped as inline.
 
     
              Disabled inputs
              
     
              Add the disabled attribute on an input to prevent user input and trigger a slightly different look.
              
-    
              
+    
       
     
 {% highlight html %}
@@ -1303,7 +1303,7 @@ For example, <section> should be wrapped as inline.
       
              While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <disabled> attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.
              
     
              
 
-    
              
+    
       
              
         
              
           
@@ -1350,7 +1350,7 @@ For example, <section> should be wrapped as inline.
     
     
              Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.
              
 
-    
+    
       
              
         
         
              
@@ -1404,7 +1404,7 @@ For example, <section> should be wrapped as inline.
       
              Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
              
     
              
 
-    
+    
       
              
         @
         
@@ -1441,7 +1441,7 @@ For example, <section> should be wrapped as inline.
 
     
              Optional sizes
              
     
              Add the relative form sizing classes to the `.input-group-addon`.
              
-    
+    
       
              
         @
         
@@ -1476,7 +1476,7 @@ For example, <section> should be wrapped as inline.
 
     
              Buttons instead of text
              
     
              Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
              
-    
+    
       
              
         
           
@@ -1509,7 +1509,7 @@ For example, <section> should be wrapped as inline.
 
     
              Button dropdowns
              
     
              
-    
+    
       
              
         
              
           
@@ -1569,7 +1569,7 @@ For example, <section> should be wrapped as inline.
 {% endhighlight %}
 
     
              Segmented dropdown groups
              
-    
+    
       
              
         
              
           
@@ -1627,7 +1627,7 @@ For example, <section> should be wrapped as inline.
 
     
              Relative sizing
              
     
              Create larger or smaller form controls that match button sizes.
              
-    
+    
       
              
         
         
@@ -1642,7 +1642,7 @@ For example, <section> should be wrapped as inline.
 
     
              Column sizing
              
     
              Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
              
-    
+    
       
              
         
              
           
@@ -1671,7 +1671,7 @@ For example, <section> should be wrapped as inline.
 
     
              Form actions
              
     
              End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.
              
-    
+    
       
              
         
         
@@ -1687,7 +1687,7 @@ For example, <section> should be wrapped as inline.
     
              Help text
              
     
              Inline and block level support for help text that appears around form controls.
              
     
              Inline help
              
-    
+    
        Inline help text
     
 {% highlight html %}
@@ -1696,7 +1696,7 @@ For example, <section> should be wrapped as inline.
 {% endhighlight %}
 
     
              Block help
              
-    
              
+    
       
       A longer block of help text that breaks onto a new line and may extend beyond one line.
     
@@ -1718,7 +1718,7 @@ For example, <section> should be wrapped as inline.
 
     
              Button options
              
     
              Use any of the available button classes to quickly create a styled button.
              
-    
              
+    
              
       
       
       
@@ -1752,7 +1752,7 @@ For example, <section> should be wrapped as inline.
 
     
              Button sizes
              
     
              Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.
              
-    
              
+    
              
       
              
         
         
@@ -1790,7 +1790,7 @@ For example, <section> should be wrapped as inline.
 {% endhighlight %}
 
     
              Create block level buttons—those that span the full width of a parent— by adding .btn-block.
              
-    
              
+    
              
       
              
         
         
@@ -1807,7 +1807,7 @@ For example, <section> should be wrapped as inline.
 
     
              Button element
              
     
              Add the disabled attribute to <button> buttons.
              
-    
              
+    
              
       
       
     
              
@@ -1823,7 +1823,7 @@ For example, <section> should be wrapped as inline.
 
     
              Anchor element
              
     
              Add the .disabled class to <a> buttons.
              
-    
              
+    
              
       Primary link
       Link
     
              
@@ -1842,7 +1842,7 @@ For example, <section> should be wrapped as inline.
 
     
              Using multiple tags
              
     
              Use the button classes on an <a>, <button>, or <input> element.
              
-    
              
+    
       Link
       
       
@@ -1876,7 +1876,7 @@ For example, <section> should be wrapped as inline.
       
              Cross-browser compatibility
              
       
              Keep in mind that Internet Explorer 8 lacks support for rounded corners.
              
     
              
-    
              
+    
              
       
       
       
@@ -1899,7 +1899,7 @@ For example, <section> should be wrapped as inline.
 
     
              Close icon
              
     
              Use the generic close icon for dismissing content like modals and alerts.
              
-    
              
+    
              
       
              
     
              
 {% highlight html %}
-- 
cgit v1.2.3


From 766be659c15d0fef1c83767504b3aac96af19c1c Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 8 May 2013 22:58:54 -0700
Subject: .bs-docs-sidenote to .bs-callout

---
 docs/css.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 02e184751..c9f945f4e 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -738,7 +738,7 @@ For example, <section> should be wrapped as inline.
 
     
              Striped
              
     
              Use .table-striped to add zebra-striping to any table row within the <tbody>.
              
-    
              
+    
              
       
              Cross-browser compatibility
              
       
              Striped tables are styled via the :nth-child CSS selector, which is not available in IE8.
              
     
              
@@ -1038,7 +1038,7 @@ For example, <section> should be wrapped as inline.
 
     
              Inline form
              
     
              Add .form-inline for left-aligned and inline-block controls for a compact layout.
              
-    
              
+    
              
       
              Requires custom widths
              
       
              Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
              
     
              
@@ -1130,7 +1130,7 @@ For example, <section> should be wrapped as inline.
 
     
              Inputs
              
     
              Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
              
-    
              
+    
              
       
              Type declaration required
              
       
              Inputs will only be fully styled if their type is properly declared.
              
     
              
@@ -1269,7 +1269,7 @@ For example, <section> should be wrapped as inline.
     
              Invalid inputs
              
     
              Style inputs via default browser functionality. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.
              
 
-    
              
+    
              
       
              Cross-browser compatibility
              
       
              Invalid inputs are styled via the :invalid CSS selector, which is not supported by Internet Explorer 9 and below.
              
     
              
@@ -1293,12 +1293,12 @@ For example, <section> should be wrapped as inline.
     
              Disabled fieldsets
              
     
              Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.
              
 
-    
              
+    
              
       
              Link functionality of <a> not impacted
              
       
              This class will only change the appearance of <a class="btn"> buttons, not their functionality. Use custom JavaScript to disable links here.
              
     
              
 
-    
              
+    
              
       
              Cross-browser compatibility
              
       
              While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <disabled> attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.
              
     
              
@@ -1399,7 +1399,7 @@ For example, <section> should be wrapped as inline.
     
              Input groups
              
     
              Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with a .add-on to prepend or append elements to an <input>.
              
 
-    
              
+    
              
       
              Cross-browser compatibility
              
       
              Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
              
     
              
@@ -1816,7 +1816,7 @@ For example, <section> should be wrapped as inline.
 
 {% endhighlight %}
 
-    
              
+    
              
       
              Cross-browser compatibility
              
       
              If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.
              
     
              
@@ -1834,7 +1834,7 @@ For example, <section> should be wrapped as inline.
     
              
       We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.
     
              
-    
              
+    
              
       
              Link functionality not impacted
              
       
              This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.
              
     
              
@@ -1855,7 +1855,7 @@ For example, <section> should be wrapped as inline.
 
 {% endhighlight %}
 
-    
              
+    
              
       
              Cross-browser rendering
              
       
              As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.
              
     
              
@@ -1872,7 +1872,7 @@ For example, <section> should be wrapped as inline.
     
              
 
     
              Add classes to an <img> element to easily style images in any project.
              
-    
              
+    
              
       
              Cross-browser compatibility
              
       
              Keep in mind that Internet Explorer 8 lacks support for rounded corners.
              
     
              
-- 
cgit v1.2.3


From 751eb0bdcc1e62f8822cefb5b99d6fbc64de2469 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 9 May 2013 09:22:49 -0700
Subject: Fixes #7823: add mention of container to CSS page; build out CSS
 overview subnav

---
 docs/css.html | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index c9f945f4e..fb6de9c75 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -8,13 +8,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
   
-  
              
+  
              
     
              
       
              Overview
              
     
              
     
              Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
              
 
-    
              HTML5 doctype required
              
+    
              HTML5 doctype required
              
     
              Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
              
 {% highlight html %}
 
@@ -23,17 +23,17 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
 {% endhighlight %}
 
-    
              Mobile first
              
+    
              Mobile first
              
     
              With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
              
     
              To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
              
 {% highlight html %}
 
 {% endhighlight %}
 
-    
              Responsive images
              
+    
              Responsive images
              
     
              We automatically attempt to scale images to appropriate sizes with a global max-width: 100%; on all <img> elements. If you run into problems (e.g., with Google Maps), be sure to disable this property on a per-case basis.
              
 
-    
              Typography and links
              
+    
     
              Bootstrap sets basic global display, typography, and link styles. Specifically, we:
              
     
                
       
              • Remove margin on the body
                • 
@@ -43,8 +43,16 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              
     
              These styles can be found within scaffolding.less.
              
 
-    
              Normalize reset
              
+    
              Normalize reset
              
     
              For improved cross-browser rendering, we use Normalize, a project by Nicolas Gallagher and Jonathan Neal.
              
+
+    
              Centering with container
              
+    
              Easily center a page's contents by wrapping its contents in a container. Containers set `max-width` at various media query breakpoints to match our grid system.
              
+{% highlight html %}
+
              
+  ...
+
              
+{% endhighlight %}
   
              
 
 
-- 
cgit v1.2.3


From 88a4712540d0efcaca0684dcb8fb236bd98fe2a9 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 9 May 2013 13:12:40 -0700
Subject: fix broken buttons on css docs

---
 docs/css.html | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index fb6de9c75..2473576e2 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1020,7 +1020,7 @@ For example, <section> should be wrapped as inline.
              Check me out
           
         
              
-        
+        
       
              
     
 {% highlight html %}
@@ -1035,7 +1035,7 @@ For example, <section> should be wrapped as inline.
          Check me out
       
     
              
-    
+    
   
              
 {% endhighlight %}
@@ -1058,7 +1058,7 @@ For example, <section> should be wrapped as inline.
            Remember me
         
-      
+      
 {% highlight html %}
 
@@ -1069,7 +1069,7 @@ For example, <section> should be wrapped as inline.
        Remember me
     
-  
+  
 {% endhighlight %}
 
@@ -1101,7 +1101,7 @@ For example, <section> should be wrapped as inline.
       
              
         
              
-          
+          
         
              
       
              
@@ -1126,7 +1126,7 @@ For example, <section> should be wrapped as inline.
   
              
     
              
-      
+      
     
              
   
              
@@ -1303,7 +1303,7 @@ For example, <section> should be wrapped as inline.
 
     
              
       
              Link functionality of <a> not impacted
              
-      
              This class will only change the appearance of <a class="btn"> buttons, not their functionality. Use custom JavaScript to disable links here.
              
+      
              This class will only change the appearance of <a class="btn btn-default"> buttons, not their functionality. Use custom JavaScript to disable links here.
              
     
              
@@ -1487,7 +1487,7 @@ For example, <section> should be wrapped as inline.
     
              
       
              
         
-          
+          
         
         
       
              
@@ -1495,14 +1495,14 @@ For example, <section> should be wrapped as inline.
       
              
         
         
-          
+          
         
       
              
     
 {% highlight html %}
 
              
   
-    
+    
   
   
 
              
@@ -1510,7 +1510,7 @@ For example, <section> should be wrapped as inline.
 
              
   
   
-    
+    
   
 
              
 {% endhighlight %}
@@ -1520,7 +1520,7 @@ For example, <section> should be wrapped as inline.
     
              
       
              
         
              
-          
+          
           
                
             
              • Action
                • 
             
              • Another action
                • 
@@ -1535,7 +1535,7 @@ For example, <section> should be wrapped as inline.
       
                
         
         
                
-          
+          
           
                  
             
                • Action
                  • 
             
                • Another action
                  • 
@@ -1549,7 +1549,7 @@ For example, <section> should be wrapped as inline.
 {% highlight html %}
 
                  
   
                  
-    
+    
     
                    
       
                  • Action
                    • 
       
                  • Another action
                    • 
@@ -1564,7 +1564,7 @@ For example, <section> should be wrapped as inline.
 
                    
   
   
                    
-    
+    
     
                      
       
                    • Action
                      • 
       
                    • Another action
                      • 
@@ -1580,8 +1580,8 @@ For example, <section> should be wrapped as inline.
     
       
                      
         
                      
-          
-          
+          
           
                        
@@ -1600,8 +1600,8 @@ For example, <section> should be wrapped as inline.
       
                        
         
         
                        
-          
-          
+          
           
                          
@@ -1682,13 +1682,13 @@ For example, <section> should be wrapped as inline.
     
       
                          
         
-        
+        
       
                          
     
 {% highlight html %}
 
                          
   
-  
+  
 
                          
 {% endhighlight %}
 
-- 
cgit v1.2.3


From 293a3baca36fb8788fb75d331439f143f6762fc1 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 9 May 2013 15:05:06 -0700
Subject: More forms overhaul

* Refactor the .forms-horizontal code--much simpler now and built on the Bootstrap grid system instead
* Remove all the margins on form controls for simpler styling everywhere else--was overriding that way too often
* Drop .help-inline, but keep .help-block
* Drop the unused input grid class overrides
---
 docs/css.html | 56 ++++++++++++++++++--------------------------------------
 1 file changed, 18 insertions(+), 38 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 2473576e2..6d29f6ff2 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1008,7 +1008,7 @@ For example, <section> should be wrapped as inline.
     
                        
 
     
                        Basic example
                        
-    
                        Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.
                        
+    
                        Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements are set to width: 100%; by default.
                        
     
                        
       
                        
         Legend
@@ -1074,23 +1074,17 @@ For example, <section> should be wrapped as inline.
 {% endhighlight %}
 
     
                        Horizontal form
                        
-    
                        Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
                        
-    
                          
-      
                        • Add .form-horizontal to the form
                          • 
-      
                        • Wrap labels and controls in .control-group
                          • 
-      
                        • Add .control-label to the label
                          • 
-      
                        • Wrap any associated controls in .controls for proper alignment
                          • 
-    
                        
+    
                        Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
                        
     
-      
                        
-        
-        
                        
+      
                        
+        
+        
                        
           
         
                        
       
                        
-      
                        
-        
-        
                        
+      
                        
+        
+        
                        
           
           
                        
             
           
                        
         
                        
-      
                        
-      
                        
-        
                        
+        
                        
           
         
                        
       
                        
     
 {% highlight html %}
 
                        
-  
                        
-    
-    
                        
+  
                        
+    
+    
                        
       
     
                        
   
                        
-  
                        
-    
-    
                        
+  
                        
+    
+    
                        
       
       
                        
         
       
                        
     
                        
-  
                        
-  
                        
-    
                        
+    
                        
       
     
                        
   
                        
@@ -1693,18 +1683,8 @@ For example, <section> should be wrapped as inline.
 {% endhighlight %}
 
     
                        Help text
                        
-    
                        Inline and block level support for help text that appears around form controls.
                        
-    
                        Inline help
                        
-    
-       Inline help text
-    
-{% highlight html %}
-
-Inline help text
-{% endhighlight %}
-
-    
                        Block help
                        
-    
                        
+    
                        Block level help text for form controls.
                        
+    
       
       A longer block of help text that breaks onto a new line and may extend beyond one line.
     
-- 
cgit v1.2.3


From 3c72b1e9a0a56ad46fe7f330141ca18f6b348649 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 9 May 2013 16:31:10 -0700
Subject: remove the input from an example

---
 docs/css.html | 1 -
 1 file changed, 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 6d29f6ff2..b86fd2127 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1689,7 +1689,6 @@ For example, <section> should be wrapped as inline.
       A longer block of help text that breaks onto a new line and may extend beyond one line.
     
 {% highlight html %}
-
 A longer block of help text that breaks onto a new line and may extend beyond one line.
 {% endhighlight %}
 
-- 
cgit v1.2.3


From a19fda699daa56bb0e3fc1b9f3c48762cdab893f Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 9 May 2013 17:21:18 -0700
Subject: update reference to value of base line-height

---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index b86fd2127..e9fdb70d6 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -331,7 +331,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
     
                        Body copy
                        
-    
                        Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
                        
+    
                        Bootstrap's global default font-size is 14px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
                        
     
                        
       
                        Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
                        
       
                        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
                        
-- 
cgit v1.2.3


From 76ecfdfdc1ef06997eafdeef68d7a9a945614af3 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 10 May 2013 10:33:35 -0700
Subject: Font-size and line-height tweaks

* Use 1.428 for line-height instead of 1.5
* Use  function for full pixel values instead of decimals
---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index e9fdb70d6..9684d778c 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -331,7 +331,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
     
                        Body copy
                        
-    
                        Bootstrap's global default font-size is 14px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
                        
+    
                        Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).
                        
     
                        
       
                        Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
                        
       
                        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
                        
-- 
cgit v1.2.3


From 9880f7c80305ee37737c44b0dd7e20337ee64628 Mon Sep 17 00:00:00 2001
From: Vinay Raghu 
Date: Sat, 11 May 2013 19:34:59 +0530
Subject: Changed Responsive utilities section in docs/css.html

---
 docs/css.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 9684d778c..aec71a4f4 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1949,7 +1949,7 @@ For example, <section> should be wrapped as inline.
     
                        For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
                        
 
     
                        Responsive classes
                        
-    
              
         
           
              
     
              
       
 
       
     
              
   
 
       
     
   
 
 
     
              
+    
              
@@ -1960,37 +1960,37 @@ For example, <section> should be wrapped as inline.
       
-          
+          
-          
+          
-          
+          
-          
+          
-          
+          
-          
+          
@@ -2029,16 +2029,16 @@ For example, <section> should be wrapped as inline.
     
              Visible on...
              Green checkmarks indicate that class is visible in your current viewport.
                
-      
              • Phone✔ Phone
                • 
-      
              • Tablet✔ Tablet
                • 
-      
              • Desktop✔ Desktop
                • 
+      
              • Phone✔ Phone
                • 
+      
              • Tablet✔ Tablet
                • 
+      
              • Desktop✔ Desktop
                • 
     
              Hidden on...
              Here, green checkmarks indicate that class is hidden in your current viewport.
                
-      
              • Phone✔ Phone
                • 
-      
              • Tablet✔ Tablet
                • 
-      
              • Desktop✔ Desktop
                • 
+      
              • Phone
                • 
+      
              • Tablet✔ Tablet
                • 
+      
              • Desktop
                • 
     
              
-- 
cgit v1.2.3


From 046d82f0ef31520a64709f03b708721ed902a6c4 Mon Sep 17 00:00:00 2001
From: Robert Burns 
Date: Sun, 12 May 2013 22:04:01 -0400
Subject: Fix invalid input within docs

---
 docs/css.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 9684d778c..c84547caa 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1273,10 +1273,10 @@ For example, <section> should be wrapped as inline.
     
 
     
              
-      
+      
     
 {% highlight html %}
-
+
 {% endhighlight %}
 
     
              Disabled inputs
              
-- 
cgit v1.2.3


From 2c6e854eea823495d342a38e26863abf60ac32ec Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 12 May 2013 23:54:10 -0700
Subject: fix broken responsive utilities table

---
 docs/css.html | 98 ++++++++++++++++++++++++++++++-----------------------------
 1 file changed, 50 insertions(+), 48 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index aec71a4f4..a3eda473b 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1949,54 +1949,56 @@ For example, <section> should be wrapped as inline.
     
              For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
              
 
     
              Responsive classes
              
-                  
-      
-        
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-        
-      
-    
+    
 
     
              Print classes
              
     
-- 
cgit v1.2.3


From 45f62f9589c50175161b627d0f5b6f34ee8592aa Mon Sep 17 00:00:00 2001
From: Robert Burns 
Date: Tue, 14 May 2013 08:33:49 -0400
Subject: Cleanup form-inline examples in docs

---
 docs/css.html | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 520a252af..6a123c947 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1051,8 +1051,8 @@ For example, <section> should be wrapped as inline.
       
              Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
              
     
     
              
-      
-      
+      
+      
       
              
         
              
 
-    
              
+    
       
     
 {% highlight html %}
@@ -1281,7 +1281,7 @@ For example, <section> should be wrapped as inline.
 
     
              Disabled inputs
              
     
              Add the disabled attribute on an input to prevent user input and trigger a slightly different look.
              
-    
              
+    
       
     
 {% highlight html %}
@@ -1303,14 +1303,10 @@ For example, <section> should be wrapped as inline.
 
     
              
       
              
-        
              
-          
-        
              
-        
              
-          
-        
              
+        
+        
         
              
           
              
-            
-            
-            
+            
+            
+            
@@ -1997,23 +1997,23 @@ For example, <section> should be wrapped as inline.
     
              
           
              
             ClassPhones 767px and belowTablets 979px to 768pxDesktops DefaultSmall devices Up to 768pxMedium devices 768px to 979pxLarge devices 980px and up
           
              
                       
         
              
 
     
              When to use
              
-    
              Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.
              
+    
              Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning display: none; or display: block;. Use with inline and table elements is currently not supported.
              
 
     
              Test case
              
-    
              Resize your browser or load on different devices to test the above classes.
              
+    
              Resize your browser or load on different devices to test the responsive utility classes.
              
     
              Visible on...
              
-    
              Green checkmarks indicate that class is visible in your current viewport.
              
+    
              Green checkmarks indicate the element is visible in your current viewport.
              
     
                
-      
              • Phone✔ Phone
                • 
-      
              • Tablet✔ Tablet
                • 
-      
              • Desktop✔ Desktop
                • 
+      
              • Small✔ Visible on small
                • 
+      
              • Medium✔ Visible on medium
                • 
+      
              • Large✔ Visible on large
                • 
     
              
     
              Hidden on...
              
-    
              Here, green checkmarks indicate that class is hidden in your current viewport.
              
+    
              Here, green checkmarks indicate the element is hidden in your current viewport.
              
     
                
-      
              • Phone
                • 
-      
              • Tablet✔ Tablet
                • 
-      
              • Desktop
                • 
+      
              • Small
                • 
+      
              • Medium✔ Hidden on medium
                • 
+      
              • Large
                • 
     
              
 
   
              
-- 
cgit v1.2.3


From af0b9cb41a5d86726c622529c5b8f8a43cd18e45 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 16 May 2013 20:07:41 -0700
Subject: Simple responsive utilities test css

---
 docs/css.html | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 69bb0dd7c..f599f799f 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -2003,17 +2003,35 @@ For example, <section> should be wrapped as inline.
     
              Resize your browser or load on different devices to test the responsive utility classes.
              
     
              Visible on...
              
     
              Green checkmarks indicate the element is visible in your current viewport.
              
-    
                
-      
              • Small✔ Visible on small
                • 
-      
              • Medium✔ Visible on medium
                • 
-      
              • Large✔ Visible on large
                • 
+    
                  
+      
                • 
+        
+        ✔ Visible on small
+      
                  • 
+      
                • 
+        Medium
+        ✔ Visible on medium
+      
                  • 
+      
                • 
+        
+        ✔ Visible on large
+      
                  • 
     
                
     
                Hidden on...
                
     
                Here, green checkmarks indicate the element is hidden in your current viewport.
                
     
                  
-      
                • Small
                  • 
-      
                • Medium✔ Hidden on medium
                  • 
-      
                • Large
                  • 
+      
                • 
+        Small
+        
+      
                  • 
+      
                • 
+        Medium
+        ✔ Hidden on medium
+      
                  • 
+      
                • 
+        Large
+        
+      
                  • 
     
                
 
   
              
-- 
cgit v1.2.3


From 1983ca03ec4f84bf9076d9327bc966caffda4ea6 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 16 May 2013 20:17:42 -0700
Subject: Form validation and horizontal row update

* changed .row-label to .control-label as used elsewhere already
* changed .formFieldState mixin to .form-field-validation
---
 docs/css.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index f599f799f..be4e13098 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1077,13 +1077,13 @@ For example, <section> should be wrapped as inline.
     
              Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
              
     
              
       
              
-        
+        
         
              
           
         
              
       
              
       
              
-        
+        
         
              
           
           
              
@@ -1100,13 +1100,13 @@ For example, <section> should be wrapped as inline.
 {% highlight html %}
 
   
              
-    
+    
     
              
       
     
              
   
              
   
              
-    
+    
     
              
       
       
              
-- 
cgit v1.2.3


From 5f7352a6fe5f7a7eef4dce64184f55d1fec2676b Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 16 May 2013 22:11:31 -0700
Subject: Better grid template; link color change in docs navbar

---
 docs/css.html | 1 +
 1 file changed, 1 insertion(+)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index be4e13098..264d4c672 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -67,6 +67,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
     
              Grid example
              
     
              On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-lg-* elements within a .row. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
              
+    
              Be sure to checkout the full-page grid example as well.
              
     
              
       
              
         
              1
              
-- 
cgit v1.2.3


From 245ebda651fcdbc9687c1a436e8bbe3916354da6 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 3 Jun 2013 21:57:51 -0700
Subject: nuke the .col

---
 docs/css.html | 218 +++++++++++++++++++++++++++++-----------------------------
 1 file changed, 109 insertions(+), 109 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 264d4c672..ca10a731b 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -70,81 +70,81 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              Be sure to checkout the full-page grid example as well.
              
     
              
       
              
-        
              1
              
-        
              1
              
-        
              1
              
-        
              1
              
-        
              1
              
-        
              1
              
-        
              1
              
-        
              1
              
-        
              1
              
-        
              1
              
-        
              1
              
-        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
+        
              1
              
       
              
       
              
-        
              4
              
-        
              4
              
-        
              4
              
+        
              4
              
+        
              4
              
+        
              4
              
       
              
       
              
-        
              6
              
-        
              6
              
+        
              6
              
+        
              6
              
       
              
     
              
 {% highlight html %}
 
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
-  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
+  
              1
              
 
              
 
              
-  
              4
              
-  
              4
              
-  
              4
              
+  
              4
              
+  
              4
              
+  
              4
              
 
              
 
              
-  
              6
              
-  
              6
              
+  
              6
              
+  
              6
              
 
              
 {% endhighlight %}
 
     
              Offsetting columns
              
-    
              Move columns to the right using .col-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-offset-4 moves .col col-lg-4 over four columns.
              
+    
              Move columns to the right using .col-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-offset-4 moves .col-lg-4 over four columns.
              
     
              
       
              
-        
              4
              
-        
              4 offset 4
              
+        
              4
              
+        
              4 offset 4
              
       
              
       
              
-        
              3 offset 3
              
-        
              3 offset 3
              
+        
              3 offset 3
              
+        
              3 offset 3
              
       
              
       
              
-        
              6 offset 3
              
+        
              6 offset 3
              
       
              
     
              
 {% highlight html %}
 
              
-  
              ...
              
-  
              ...
              
+  
              ...
              
+  
              ...
              
 
              
 
              
-  
              3 offset 3
              
-  
              3 offset 3
              
+  
              3 offset 3
              
+  
              3 offset 3
              
 
              
 
              
-  
              ...
              
+  
              ...
              
 
              
 {% endhighlight %}
 
@@ -152,13 +152,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              Nesting columns
              
     
              To nest your content with the default grid, add a new .row and set of .col-lg-* columns within an existing .col-lg-* column. Nested rows should include a set of columns that add up to 12.
              
     
              
-      
              
+      
              
         Level 1: 9 columns
         
              
-          
              
+          
              
             Level 2: 6 columns
           
              
-          
              
+          
              
             Level 2: 6 columns
           
              
         
              
@@ -166,13 +166,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              
 {% highlight html %}
 
              
-  
              
+  
              
     Level 1: 9 columns
     
              
-      
              
+      
              
         Level 2: 6 columns
       
              
-      
              
+      
              
         Level 2: 6 columns
       
              
     
              
@@ -183,29 +183,29 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              Column ordering
              
     
              Easily change the order of our built-in grid columns with .col-push-* and .col-pull-* modifier classes.
              
     
              
-      
              9
              
-      
              3
              
+      
              9
              
+      
              3
              
     
              
 
 {% highlight html %}
 
              
-  
              9
              
-  
              3
              
+  
              9
              
+  
              3
              
 
              
 {% endhighlight %}
 
     
              Small device grid
              
     
              Use the small device grid classes, like .col-sm-6, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.
              
     
              
-      
              4 cols, 6 small cols
              
-      
              4 cols, 6 small cols
              
-      
              4 cols, 12 small cols
              
+      
              4 cols, 6 small cols
              
+      
              4 cols, 6 small cols
              
+      
              4 cols, 12 small cols
              
     
              
 {% highlight html %}
 
              
-  
              4 cols, 6 small cols
              
-  
              4 cols, 6 small cols
              
-  
              4 cols, 12 small cols
              
+  
              4 cols, 6 small cols
              
+  
              4 cols, 6 small cols
              
+  
              4 cols, 12 small cols
              
 
              
 {% endhighlight %}
 
@@ -918,8 +918,8 @@ For example, <section> should be wrapped as inline.
     
              Use contextual classes to color table rows.
              
     -        -        +        +        
@@ -1078,14 +1078,14 @@ For example, <section> should be wrapped as inline.
     
              Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
              
-        
-        
              
+        
+        
              
           
         
              
       
              
       
              
-        
-        
              
+        
+        
              
           
           
              
             
           
              
         
              
-        
              
+        
              
           
         
              
       
              
@@ -1101,14 +1101,14 @@ For example, <section> should be wrapped as inline.
 {% highlight html %}
 
   
              
-    
-    
              
+    
+    
              
       
     
              
   
              
   
              
-    
-    
              
+    
+    
              
       
       
              
         
       
              
     
              
-    
              
+    
              
       
     
              
   
              
@@ -1400,34 +1400,34 @@ For example, <section> should be wrapped as inline.
     
              
 
     
-      
              
+      
              
         @
         
       
              
       
              
-      
              
+      
              
         
         .00
       
              
       
              
-      
              
+      
              
         $
         
         .00
       
              
     
 {% highlight html %}
-
              
+
              
   @
   
 
              
 
-
              
+
              
   
   .00
 
              
 
-
              
+
              
   $
   
   .00
@@ -1437,33 +1437,33 @@ For example, <section> should be wrapped as inline.
     
              Optional sizes
              
     
              Add the relative form sizing classes to the `.input-group-addon`.
              
     
              
-      
              
+      
              
         @
         
       
              
       
              
-      
              
+      
              
         @
         
       
              
       
              
-      
              
+      
              
         @
         
       
              
     
 {% highlight html %}
-
              
+
              
   @
   
 
              
 
-
              
+
              
   @
   
 
              
 
-
              
+
              
   @
   
 
              
@@ -1472,14 +1472,14 @@ For example, <section> should be wrapped as inline.
     
              Buttons instead of text
              
     
              Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
              
     
              
-      
              
+      
              
         
           
         
         
       
              
       
              
-      
              
+      
              
         
         
           
@@ -1487,14 +1487,14 @@ For example, <section> should be wrapped as inline.
       
              
     
 {% highlight html %}
-
              
+
              
   
     
   
   
 
              
 
-
              
+
              
   
   
     
@@ -1505,7 +1505,7 @@ For example, <section> should be wrapped as inline.
     
              Button dropdowns
              
     
              
     
              
-      
              
+      
              
         
              
           
           
                
@@ -1519,7 +1519,7 @@ For example, <section> should be wrapped as inline.
         
       
              
       
              
-      
              
+      
              
         
         
              
           
@@ -1534,7 +1534,7 @@ For example, <section> should be wrapped as inline.
       
              
     
 {% highlight html %}
-
              
+
              
   
              
     
     
                
@@ -1548,7 +1548,7 @@ For example, <section> should be wrapped as inline.
   
 
              
 
-
              
+
              
   
   
              
     
@@ -1565,7 +1565,7 @@ For example, <section> should be wrapped as inline.
 
     
              Segmented dropdown groups
              
     
              
-      
              
+      
              
         
              
           
           
@@ -1602,14 +1602,14 @@ For example, <section> should be wrapped as inline.
       
              
     
 {% highlight html %}
-
              
+
              
   
              
     
   
              
   
 
              
 
-
              
+
              
   
   
              
     
@@ -1639,27 +1639,27 @@ For example, <section> should be wrapped as inline.
     
              Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
              
     
              
       
              
-        
              
-          
+        
              
+          
         
              
-        
              
-          
+        
              
+          
         
              
-        
              
-          
+        
              
+          
         
              
       
              
     
 {% highlight html %}
 
              
-  
              
-    
+  
              
+    
   
              
-  
              
-    
+  
              
+    
   
              
-  
              
-    
+  
              
+    
   
              
 
              
 {% endhighlight %}
-- 
cgit v1.2.3


From b1cc11cd98e3ab3707c6c39a80df458f277239ff Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 4 Jun 2013 21:55:59 -0700
Subject: reverse order of grid column examples for dual grid section

---
 docs/css.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index ca10a731b..981626c60 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -197,15 +197,15 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              Small device grid
              
     
              Use the small device grid classes, like .col-sm-6, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.
              
     
              
-      
              4 cols, 6 small cols
              
-      
              4 cols, 6 small cols
              
-      
              4 cols, 12 small cols
              
+      
              6 small cols, 4 large cols
              
+      
              6 small cols, 4 large cols
              
+      
              12 small cols, 4 large cols
              
     
              
 {% highlight html %}
 
              
-  
              4 cols, 6 small cols
              
-  
              4 cols, 6 small cols
              
-  
              4 cols, 12 small cols
              
+  
              6 small cols, 4 large cols
              
+  
              6 small cols, 4 large cols
              
+  
              12 small cols, 4 large cols
              
 
              
 {% endhighlight %}
 
-- 
cgit v1.2.3


From 232c03dc2f076534633f4579b8becf88633d07e7 Mon Sep 17 00:00:00 2001
From: Mladen Plavsic 
Date: Wed, 5 Jun 2013 13:59:13 +0300
Subject: Update css.html

Missing word "in" in "Someone famous in Source Title"
---
 docs/css.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 264d4c672..2806d3e4a 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -504,7 +504,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 {% highlight html %}
 
              
   
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              
-  Someone famous Source Title
+  Someone famous in Source Title
 
              
 {% endhighlight %}
 
-- 
cgit v1.2.3


From 441bbe1998c790dad1c4d44c5f85e6360209eaac Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 8 Jun 2013 18:34:16 -0230
Subject: Another grid update

* Update docs to include table of grid levels and behaviors
* Change from .col-md to .col-sm to match existing size variables we use elsewhere
* Keep .col-lg as-is though for simplicity as we won't likely add a fourth level of the grid
* Combine responsive .container breakpoints with grid breakpoints in grid.less
* Other misc docs updates
---
 docs/css.html | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 2 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 981626c60..dfab31523 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -63,9 +63,64 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              
       
              Grid system
              
     
              
-    
              Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.
              
+    
              Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
              
+
+    
              Grid options
              
+    
              Multiple device grids, columns, offsets, and column ordering.
              
+    
              
       




       
       
         
              
     
       
              
+      
+        
+          
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+        
+          
+          
+        
+        
+          
+          
+        
+        
+          
+          
+          
+        
+        
+          
+          
+          
+        
+      
+    
              
+            Tiny grid
+            Phones (<480px)
+          
+            Small grid
+            Tablets (<768px)
+          
+            Medium-large grid
+            Destkops (>768px)
+          
              Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
              Class prefix.col-.col-sm-.col-lg-
              # of columns12
              NestableYes
              OffsetsN/AYes
              Column orderingN/AYes
              
+
+    
              Grid examples
              
+    
              Bootstrap's grid system includes three levels of column sizing—phone, tablet, and desktop and up. Use each level in conjunction with the others for more control, or stick to the desktop classes for single-column, stacked mobile views.
              
 
-    
              Grid example
              
     
              On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-lg-* elements within a .row. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
              
     
              Be sure to checkout the full-page grid example as well.
              
     
              
-- 
cgit v1.2.3


From 0a18d33d2c1600c9d5133127dac4db2f690df71a Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 9 Jun 2013 23:43:43 -0700
Subject: Redo grid documentation

* Update example sections to include basic, mobile-desktop, and mobile-tablet-desktop implementations
* Add more examples to the grid example page
* Red columns instead of gray for more Bootstrapy aesthetic
---
 docs/css.html | 106 ++++++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 84 insertions(+), 22 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index dfab31523..843715aad 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -63,10 +63,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              
       
              Grid system
              
     
              
-    
              Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
              
+    
              Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
              
 
     
              Grid options
              
-    
              Multiple device grids, columns, offsets, and column ordering.
              
+    
              See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
              
     
@@ -118,11 +118,8 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
       
              
       
         
              
     
              
 
-    
              Grid examples
              
-    
              Bootstrap's grid system includes three levels of column sizing—phone, tablet, and desktop and up. Use each level in conjunction with the others for more control, or stick to the desktop classes for single-column, stacked mobile views.
              
-
-    
              On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-lg-* elements within a .row. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
              
-    
              Be sure to checkout the full-page grid example as well.
              
+    
              Example: Stacked-to-horizontal
              
+    
              Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.
              
     
              
       
              
         
              1
              
@@ -138,6 +135,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
         
              1
              
         
              1
              
       
              
+      
              
+        
              8
              
+        
              4
              
+      
              
       
              
         
              4
              
         
              4
              
@@ -163,6 +164,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
   
              1
              
   
              1
              
 
              
+
              
+  
              8
              
+  
              4
              
+
              
 
              
   
              4
              
   
              4
              
@@ -174,6 +179,78 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 
              
 {% endhighlight %}
 
+    
              Example: Combining mobile with desktop
              
+    
              Don't want your columns to simply stack in smaller devices? Use the small device grid system by adding .col-* classes to the existing .col-lg-* ones. See the example below for a better idea of how it all works.
              
+    
              
+      
              
+        
              8
              
+        
              4
              
+      
              
+      
              
+        
              4
              
+        
              4
              
+        
              4
              
+      
              
+      
              
+        
              6
              
+        
              6
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              8
              
+  
              4
              
+
              
+
              
+  
              4
              
+  
              4
              
+  
              4
              
+
              
+
              
+  
              6
              
+  
              6
              
+
              
+{% endhighlight %}
+
+    
              Example: Mobile, tablet, and desktop
              
+    
              Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.
              
+    
              
+      
              
+        
              .col-12 .col-lg-8
              
+        
              .col-6 .col-lg-4
              
+      
              
+      
              
+        
              .col-6 .col-lg-4
              
+        
              .col-6 .col-lg-4
              
+        
              .col-6 .col-lg-4
              
+      
              
+      
              
+        
              .col-6 .col-lg-6
              
+        
              .col-6 .col-lg-6
              
+      
              
+    
              
+{% highlight html %}
+
              
+  
              .col-12 .col-lg-8
              
+  
              .col-6 .col-lg-4
              
+
              
+
              
+  
              .col-6 .col-lg-4
              
+  
              .col-6 .col-lg-4
              
+  
              .col-6 .col-lg-4
              
+
              
+
              
+  
              .col-6 .col-lg-6
              
+  
              .col-6 .col-lg-6
              
+
              
+{% endhighlight %}
+
+    
              
+      
              Need more examples?
              
+      
              We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.
              
+      
              More grid examples
              
+    
              
+
     
              Offsetting columns
              
     
              Move columns to the right using .col-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-offset-4 moves .col-lg-4 over four columns.
              
     
              
@@ -247,21 +324,6 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
   
              9
              
   
              3
              
 
              
-{% endhighlight %}
-
-    
              Small device grid
              
-    
              Use the small device grid classes, like .col-sm-6, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.
              
-    
              
-      
              6 small cols, 4 large cols
              
-      
              6 small cols, 4 large cols
              
-      
              12 small cols, 4 large cols
              
-    
              
-{% highlight html %}
-
              
-  
              6 small cols, 4 large cols
              
-  
              6 small cols, 4 large cols
              
-  
              12 small cols, 4 large cols
              
-
              
 {% endhighlight %}
 
     
              LESS mixins and variables
              
-- 
cgit v1.2.3


From 258e1d62fbff743f8ae08ef75ffbc962fdb51e58 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 15 Jun 2013 11:37:59 -0700
Subject: Fix up broken input group example layouts

---
 docs/css.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 7cc50602e..6b6695464 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1516,7 +1516,7 @@ For example, <section> should be wrapped as inline.
       
              Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
              
     
              
 
-    
              
+    
       
              
         @
         
@@ -1553,7 +1553,7 @@ For example, <section> should be wrapped as inline.
 
     
              Optional sizes
              
     
              Add the relative form sizing classes to the `.input-group-addon`.
              
-    
+    
       
              
         @
         
@@ -1588,7 +1588,7 @@ For example, <section> should be wrapped as inline.
 
     
              Buttons instead of text
              
     
              Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
              
-    
+    
       
              
         
           
@@ -1621,7 +1621,7 @@ For example, <section> should be wrapped as inline.
 
     
              Button dropdowns
              
     
              
-    
+    
       
              
         
              
           
@@ -1681,7 +1681,7 @@ For example, <section> should be wrapped as inline.
 {% endhighlight %}
 
     
              Segmented dropdown groups
              
-    
+    
       
              
         
              
           
-- 
cgit v1.2.3


From 50df5de14f80a9f0ba1252195303d64b574b483f Mon Sep 17 00:00:00 2001
From: Chris Rebert 
Date: Sun, 16 Jun 2013 21:36:56 -0600
Subject: CSS docs page: backticks ==> 

---
 docs/css.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 6b6695464..c01255733 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -47,7 +47,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     
              For improved cross-browser rendering, we use Normalize, a project by Nicolas Gallagher and Jonathan Neal.
              
 
     
              Centering with container
              
-    
              Easily center a page's contents by wrapping its contents in a container. Containers set `max-width` at various media query breakpoints to match our grid system.
              
+    
              Easily center a page's contents by wrapping its contents in a container. Containers set max-width at various media query breakpoints to match our grid system.
              
 {% highlight html %}
 
              
   ...
@@ -1552,7 +1552,7 @@ For example, <section> should be wrapped as inline.
 {% endhighlight %}
 
     
              Optional sizes
              
-    
              Add the relative form sizing classes to the `.input-group-addon`.
              
+    
              Add the relative form sizing classes to the .input-group-addon.
              
     
       
              
         @
-- 
cgit v1.2.3


From 98a8eaffc00482caf68812fd0b4f65422caa8045 Mon Sep 17 00:00:00 2001
From: Kurt MacDonald 
Date: Wed, 19 Jun 2013 17:08:14 -0600
Subject: Add missing property to form-horizontal docs

---
 docs/css.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index c01255733..137f2a9e8 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1201,7 +1201,7 @@ For example, <section> should be wrapped as inline.
         
              
       
              
       
              
-        
+        
         
              
           
           
              
@@ -1224,7 +1224,7 @@ For example, <section> should be wrapped as inline.
     
              
   
              
   
              
-    
+    
     
              
       
       
              
-- 
cgit v1.2.3


From 5fcdf1229d1845ce9e115b0e6390610b702a3335 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 19 Jun 2013 19:02:24 -0700
Subject: Fixes #8001: add IDs for example inputs

---
 docs/css.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 137f2a9e8..d4e7f77d2 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1130,8 +1130,8 @@ For example, <section> should be wrapped as inline.
     
       
              
         Legend
-        
-        
+        
+        
         
              Example block-level help text here.