Date: Mon, 4 Jun 2012 21:08:31 -0700 Subject: revamp docs to have new width, start realigning the base css page to match --- docs/base-css.html | 335 ++++++++++++++++++++++++++--------------------------- 1 file changed, 164 insertions(+), 171 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 09552ec8b..d22fbc121 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -74,7 +74,7 @@ -

@@ -101,35 +101,37 @@

Typography Headings, paragraphs, lists, and other inline type elements

Headings & body copy

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

- -

Typographic scale

The entire typographic grid is based on two Less variables in our variables.less file: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height.

We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.

Example body text

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.

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.

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 13px, with a line-height of 18px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px 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.

- +

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.

+ +

Built with Less

The typographic scale is based on two Less variables in variables.less file: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height.

We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more. Customize them and watch Bootstrap adapt as you go.

+ +

Emphasis, address, and abbreviation

@@ -188,37 +190,39 @@

Using emphasis

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Note: Feel free to use <b> and <i> in HTML5, but their usage has changed a bit. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Example addresses

Here are two examples of how the <address> tag can be used:

- Twitter, Inc.
- 795 Folsom Ave, Suite 600
- San Francisco, CA 94107
- P: (123) 456-7890 -

- Full Name
- first.last@gmail.com -

Example abbreviations

Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.

Add the initialism class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.

HTML is the best thing since sliced bread.

An abbreviation of the word attribute is attr.

Using emphasis

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Note: 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.

+ +

Example addresses

Here are two examples of how the <address> tag can be used:

+ Twitter, Inc.
+ 795 Folsom Ave, Suite 600
+ San Francisco, CA 94107
+ P: (123) 456-7890 +

+ Full Name
+ first.last@gmail.com +

Example abbreviations

Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.

An abbreviation of the word attribute is attr.

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

HTML is the best thing since sliced bread.

+ +

Blockquotes

@@ -254,136 +258,125 @@

To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Include an optional <small> element to cite your source and you'll get an em dash — before it for styling purposes.

To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Include an optional <small> element to cite your source and you'll get an em dash — before it for styling purposes.

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

Example blockquotes

Default blockquotes are styled as such:

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
- Someone famous in Body of work -

To float your blockquote to the right, add class="pull-right":

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
- Someone famous in Body of work -

Default blockquotes are styled as such:

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
+ Someone famous in Body of work +

To float your blockquote to the right, add class="pull-right":

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
+ Someone famous in Body of work +

Lists

Unordered

<ul>

+ +

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

+ +

Unstyled

<ul class="unstyled">

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- 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
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
-

Unstyled

<ul class="unstyled">

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

Ordered

<ol>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

-
-

Description

<dl>

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.

Horizontal description

<dl class="dl-horizontal">

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.

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

+ +

Faucibus porta lacus fringilla vel

Aenean sit amet erat nunc

Eget porttitor lorem

+ + +

Ordered

<ol>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

+ +

Description

<dl>

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.

+ +

Horizontal description

<dl class="dl-horizontal">

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.

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

-- cgit v1.2.3 From 094e12f68da2b40cc69d9a2e0a2b1ac3a2319498 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 21:10:08 -0700 Subject: convert code section to new layout --- docs/base-css.html | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index d22fbc121..acb656417 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -387,17 +387,15 @@ -

Inline

Wrap inline snippets of code with <code>.

+ +

Inline

Wrap inline snippets of code with <code>.

 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.

+ +

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>

@@ -406,12 +404,11 @@ For example, <code>section</code> should be wrapped as inline. <p>Sample text here...</p> </pre> -

Note: 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.

Google Prettify

Take the same <pre> element and add two optional classes for enhanced rendering.

Note: 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.

+ +

Google Prettify

Take the same <pre> element and add two optional classes for enhanced rendering.

 <p>Sample text here...</p>

@@ -421,9 +418,7 @@ For example, <code>section</code> should be wrapped as inline. <p>Sample text here...</p> </pre> -

Download google-code-prettify and view the readme for how to use.

-- cgit v1.2.3 From 060100cf3a5367830fb5f29a587874b7fe7c4cdb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 21:13:35 -0700 Subject: update table section to single column --- docs/base-css.html | 511 +++++++++++++++++++++++++---------------------------- 1 file changed, 239 insertions(+), 272 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index acb656417..5c9d07b8e 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -431,81 +431,78 @@ For example, <code>section</code> should be wrapped as inline.

Table markup

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Tag	Description
- `<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 -

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

Tag	Description
+ `<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>
   <thead>
@@ -522,8 +519,7 @@ For example, <code>section</code> should be wrapped as inline.
   </tbody>
 </table>

Table options

@@ -575,233 +571,204 @@ For example, <code>section</code> should be wrapped as inline.

Example tables

1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

 <table class="table">
   …
 </table>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

2. Striped table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

 <table class="table table-striped">
   …
 </table>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

3. Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

 <table class="table table-bordered">
   …
 </table>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

4. Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

 <table class="table table-condensed">
   …
 </table>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

- + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

5. Combine them all!

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

 <table class="table table-striped table-bordered table-condensed">
   ...
 </table>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	Full name
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

	Full name
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

-- cgit v1.2.3 From 257890f8395c56e42f15fda475e6a7be8c26b9e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 23:03:21 -0700 Subject: finish off rest of base-css page --- docs/base-css.html | 940 +++++++++++++++++++++++++---------------------------- 1 file changed, 451 insertions(+), 489 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 5c9d07b8e..e0ecc0b04 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -779,29 +779,25 @@ For example, <code>section</code> should be wrapped as inline. -

Flexible HTML and CSS

The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.

More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.

Four layouts included

Bootstrap comes with support for four types of form layouts:

Vertical (default)
Search
Inline
Horizontal

Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.

Control states and more

Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.

States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.

+ +

Flexible HTML and CSS

More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.

+ +

Four layouts included

Bootstrap comes with support for four types of form layouts:

Vertical (default)
Search
Inline
Horizontal

Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.

+ +

Control states and more

States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.

Four types of forms

Bootstrap provides simple markup and styles for four styles of common web forms.

@@ -839,19 +835,17 @@ For example, <code>section</code> should be wrapped as inline.

Example forms using just form controls, no extra markup

Basic form

Smart and lightweight defaults without extra markup.

- +

Basic form

Smart and lightweight defaults without extra markup.

 <form class="well">
   <label>Label name</label>
@@ -863,14 +857,13 @@ For example, <code>section</code> should be wrapped as inline.
   <button type="submit" class="btn">Submit</button>
 </form>

Search form

Add .form-search to the form and .search-query to the input.

- + +

Search form

Add .form-search to the form and .search-query to the input.

 <form class="well form-search">
   <input type="text" class="input-medium search-query">
@@ -878,16 +871,16 @@ For example, <code>section</code> should be wrapped as inline.
 </form>

Inline form

Add .form-inline to finesse the vertical alignment and spacing of form controls.

- +

Inline form

Add .form-inline to finesse the vertical alignment and spacing of form controls.

 <form class="well form-inline">
   <input type="text" class="input-small" placeholder="Email">
@@ -898,89 +891,83 @@ For example, <code>section</code> should be wrapped as inline.
   <button type="submit" class="btn">Sign in</button>
 </form>

Horizontal forms

Shown on the right are all the default form controls we support. Here's the bulleted list:

text inputs (text, password, email, etc)
checkbox
radio
select
multiple select
file input
textarea

- Text input -

- -

In addition to freeform text, any HTML5 text-based input appears like so.

- Checkbox -

- - - Option one is this and that—be sure to include why it's great - -

- Select list -

- -

- Multicon-select -

- -

- File input -

- -

- Textarea -

- -

- - -

Example markup

Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

Shown on the right are all the default form controls we support. Here's the bulleted list:

text inputs (text, password, email, etc)
checkbox
radio
select
multiple select
file input
textarea

+ +

+ Text input +

+ +

In addition to freeform text, any HTML5 text-based input appears like so.

+ Checkbox +

+ + + Option one is this and that—be sure to include why it's great + +

+ Select list +

+ +

+ Multicon-select +

+ +

+ File input +

+ +

+ Textarea +

+ +

+ + +

Example markup

Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

 <form class="form-horizontal">
   <fieldset>
@@ -995,253 +982,241 @@ For example, <code>section</code> should be wrapped as inline.
   </fieldset>
 </form>

Form control states

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.

Form validation

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.

Form validation

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

 <fieldset
   class="control-group error">
   …
 </fieldset>

- Focused input -

- -

- Uneditable input -

- Some value here -

- Disabled input -

- -

- Disabled checkbox -

- - - This is a disabled checkbox - -

- Input with warning -

- - Something may have gone wrong -

- Input with error -

- - Please correct the error -

- Input with success -

- - Woohoo! -

- Select with success -

- - Woohoo! -

- - -

+ +

+ Focused input +

+ +

+ Uneditable input +

+ Some value here +

+ Disabled input +

+ +

+ Disabled checkbox +

+ + + This is a disabled checkbox + +

+ Input with warning +

+ + Something may have gone wrong +

+ Input with error +

+ + Please correct the error +

+ Input with success +

+ + Woohoo! +

+ Select with success +

+ + Woohoo! +

+ + +

Extending form controls

Prepend & append inputs

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

Checkboxes and radios

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

Inline forms and append/prepend

To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.

Form help text

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

- Form grid sizes -

- - - - - - -

Use the same .span* classes from the grid system for input sizes.

- Alternate sizes -

- - - -

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

- Prepended text -

- @ -

Here's some help text

- Appended text -

- .00 -

- Here's more help text -

- Append and prepend -

- $.00 -

- Append with button -

- -

- Two-button append -

- -

Prepend & append inputs

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

Checkboxes and radios

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

Inline forms and append/prepend

To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.

Form help text

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

+ + +

+ Form grid sizes +

+ + + + + + +

Use the same .span* classes from the grid system for input sizes.

+ Alternate sizes +

+ + + +

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

+ Prepended text +

+ @

- Inline checkboxes -

- - 1 - - - 2 - - - 3 - -

Here's some help text

+ Appended text +

+ .00

- Checkboxes -

- - - Option one is this and that—be sure to include why it's great - - - - Option two can also be checked and included in form results - - - - Option three can—yes, you guessed it—also be checked and included in form results - -

Note: Labels surround all the options for much larger click areas and a more usable form.

+ Here's more help text +

+ Append and prepend +

+ $.00

- Radio buttons -

- - - Option one is this and that—be sure to include why it's great - - - - Option two can be something else and selecting it will deselect option one - -

+ Append with button +

- - +

+ Two-button append +

- -

+ Inline checkboxes +

+ + 1 + + + 2 + + + 3 + +

+ Checkboxes +

+ + + Option one is this and that—be sure to include why it's great + + + + Option two can also be checked and included in form results + + + + Option three can—yes, you guessed it—also be checked and included in form results + +

Note: Labels surround all the options for much larger click areas and a more usable form.

+ Radio buttons +

+ + + Option one is this and that—be sure to include why it's great + + + + Option two can be something else and selecting it will deselect option one + +

+ + +

+ + @@ -1299,48 +1274,44 @@ For example, <code>section</code> should be wrapped as inline. -

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

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.

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.

Multiple sizes

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

- - -

-
-

Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

- Primary link - Link -

- - -

- Heads up! - We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. -

One class, multiple tags

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

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

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.

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.

+ +

Multiple sizes

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

+ + +

+
+

Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

+ Primary link + Link +

+ + +

+ Heads up! + We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. +

+ +

One class, multiple tags

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

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

+ @@ -1371,7 +1341,7 @@ For example, <code>section</code> should be wrapped as inline.

Icons Graciously provided by Glyphicons

icon-glass
icon-music
icon-headphones

icon-volume-off
icon-volume-down
icon-fast-backward

icon-backward
icon-play
icon-eye-open

icon-eye-close
icon-warning-sign

Built as a sprite

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

+ +

Built as a sprite

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

+ +

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

 <i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

 <i class="icon-search icon-white"></i>

There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

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

There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

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

+ +

Use cases

Icons are great, but where would one use them? Here are a few ideas:

As visuals for your sidebar navigation
For a purely icon-driven navigation
For buttons to help convey the meaning of an action
With links to share context on a user's destination

Essentially, anywhere you can put an <i> tag, you can put an icon.

+ + +

Examples

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

+ +

+ + + +

Use cases

Icons are great, but where would one use them? Here are a few ideas:

As visuals for your sidebar navigation
For a purely icon-driven navigation
For buttons to help convey the meaning of an action
With links to share context on a user's destination

+ User + + -

Essentially, anywhere you can put an <i> tag, you can put an icon.

+ Refresh + Checkout + Delete +

+ Comment + Settings + More Info +

Examples

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

- -- cgit v1.2.3 From dd127611e12b9bab9d6da0c24532c5cd151108fd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 00:46:16 -0700 Subject: two col scaffolding rev --- docs/base-css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 2afc8b528..75bfced93 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -74,7 +74,7 @@

@@ -1592,10 +1592,10 @@ For example, <code>section</code> should be wrapped as inline.

-- cgit v1.2.3 From 22918f8f92d29a12a42db4e357f3d439e41bad0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 17:16:17 -0700 Subject: more tweaks to layouts and some docs styles --- docs/base-css.html | 164 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 104 insertions(+), 60 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 75bfced93..95b4f1f97 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -74,14 +74,14 @@

Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

Typography
Code
Tables
Forms
Buttons
Icons by Glyphicons

@@ -288,7 +302,7 @@

Lists

Unordered

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

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

Lorem ipsum dolor sit amet

Unstyled

<ul class="unstyled">

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

Ordered

<ol>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

+<ol>
+  <li>...</li>
+</ol>
+

Unstyled

A list of items with no list-style or additional left padding.

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="unstyled">
+  <li>...</li>
+</ul>
+

Description

<dl>

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.

Horizontal description

<dl class="dl-horizontal">

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.

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! @@ -1592,10 +1636,10 @@ For example, <code>section</code> should be wrapped as inline.

-- cgit v1.2.3 From 8ee067952202cc8a6e4865eab46598e346ad3971 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 18:25:46 -0700 Subject: updated javascripts for first pass at single column --- docs/base-css.html | 95 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 84 insertions(+), 11 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 95b4f1f97..16eca66c7 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -74,6 +74,89 @@

Bootstrap

+ Scaffolding +
- Doctype
- Type and links
- Normalize reset
- Grid system
- Fluid grid system
- Layouts
- Responsive
+
+ Base CSS +
- Typography
- Code
- Tables
- Forms
- Buttons
- Glyphicons
+
+ Components +
- Button groups
- Button dropdowns
- Nav, tabs, pills
- Navbar
- Breadcrumbs
- Pagination
- Labels
- Badges
- Typography
- Thumbnails
- Alerts
- Progress bars
- Miscellaneous
+
+ Javascript +
- All plugins
- Modal
- Dropdown
- Scrollspy
- Tab
- Tooltip
- Popover
- Alert
- Button
- Collapse
- Carousel
- Typeahead
+
+ LESS +
- Built with Less
- Variables
- Mixins
- Compiling Bootstrap
+
+ Customize +
+ Examples +

-- cgit v1.2.3 From 5a614fb86d87cff1a2892fe76fb7bdcca231d764 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 19:53:54 -0700 Subject: remove sidenav --- docs/base-css.html | 83 ------------------------------------------------------ 1 file changed, 83 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 16eca66c7..aed1a5e08 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -74,89 +74,6 @@

Bootstrap

- Scaffolding -
- Doctype
- Type and links
- Normalize reset
- Grid system
- Fluid grid system
- Layouts
- Responsive
-
- Base CSS -
- Typography
- Code
- Tables
- Forms
- Buttons
- Glyphicons
-
- Components -
- Button groups
- Button dropdowns
- Nav, tabs, pills
- Navbar
- Breadcrumbs
- Pagination
- Labels
- Badges
- Typography
- Thumbnails
- Alerts
- Progress bars
- Miscellaneous
-
- Javascript -
- All plugins
- Modal
- Dropdown
- Scrollspy
- Tab
- Tooltip
- Popover
- Alert
- Button
- Collapse
- Carousel
- Typeahead
-
- LESS -
- Built with Less
- Variables
- Mixins
- Compiling Bootstrap
-
- Customize -
- Examples -

Lists

@@ -406,7 +395,6 @@ <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. -- cgit v1.2.3 From 10d68406fe5aa8e20183d02116f1a6e87b85a788 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 23:59:50 -0700 Subject: examples-wrap tables --- docs/base-css.html | 354 +++++++++++++++++++++++++++-------------------------- 1 file changed, 183 insertions(+), 171 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 3c5c8743b..a1d8418bb 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -545,7 +545,7 @@ For example, <code>section</code> should be wrapped as inline.

Table options

- + @@ -594,203 +594,215 @@ For example, <code>section</code> should be wrapped as inline.

1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

Name	Class

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 <table class="table">
   …
-</table>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

- +</table> +

2. Striped table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 <table class="table table-striped">
   …
-</table>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

+</table> +

3. Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 <table class="table table-bordered">
   …
-</table>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

+</table> +

4. Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 <table class="table table-condensed">
   …
-</table>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

+</table> +

5. Combine them all!

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

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

	Full name
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 <table class="table table-striped table-bordered table-condensed">
   ...
-</table>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	Full name
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

+</table> + + @@ -859,7 +871,7 @@ For example, <code>section</code> should be wrapped as inline.

Example forms using just form controls, no extra markup

Basic form

Smart and lightweight defaults without extra markup.

- @@ -895,7 +907,7 @@ For example, <code>section</code> should be wrapped as inline.

Inline form

Add .form-inline to finesse the vertical alignment and spacing of form controls.

+ -- cgit v1.2.3 From 2ecbd36cbf0cb8b2e894b2e36400e59a1c88eb1c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 6 Jun 2012 00:48:31 -0700 Subject: add back left rail nav, tweak colors --- docs/base-css.html | 138 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 79 insertions(+), 59 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index a1d8418bb..a1c59bd81 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -27,51 +27,84 @@ - - - - -

- - Bootstrap -

- Overview -
- Scaffolding -
- Base CSS -
- Components -
- Javascript plugins -
- Using LESS -
- Customize -
- Examples -

+ + +

Bootstrap

+ Scaffolding +
- Global styles
- Grid system
- Fluid grid system
- Customizing
- Layouts
- Responsive design
+
+ Base CSS +
- Typography
- Code
- Tables
- Forms
- Buttons
- Icons by Glyphicons
+
+ Components +
- Button groups
- Button dropdowns
- Nav, tabs, pills
- Navbar
- Breadcrumbs
- Pagination
- Labels
- Badges
- Typography
- Thumbnails
- Alerts
- Progress bars
- Miscellaneous
+
+ Javascript +
- All plugins
- Modal
- Dropdown
- Scrollspy
- Tab
- Tooltip
- Popover
- Alert
- Button
- Collapse
- Carousel
- Typeahead
+
+ LESS +
- Built with Less
- Variables
- Mixins
- Compiling Bootstrap
+
+ Customize +
+ Examples +

@@ -84,19 +117,6 @@ -

Typography
Code
Tables
Forms
Buttons
Icons by Glyphicons

@@ -1626,10 +1646,10 @@ For example, <code>section</code> should be wrapped as inline.

-- cgit v1.2.3 From a1aa2b188a0267290cb17c2a0b5d4ad8b7c693c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 10:20:52 -0700 Subject: more content changes to docs --- docs/base-css.html | 38 ++++++++++---------------------------- 1 file changed, 10 insertions(+), 28 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index a1c59bd81..7ed6c68ac 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -154,7 +154,7 @@

The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. 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

@@ -181,7 +181,7 @@

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.

Abbreviations

@@ -206,7 +206,7 @@ -

Addresses

@@ -241,7 +241,7 @@ -

Blockquotes

@@ -294,7 +294,7 @@ -

@@ -834,27 +834,10 @@ For example, <code>section</code> should be wrapped as inline.

Forms

Flexible HTML and CSS

More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.

- -

Four layouts included

Bootstrap comes with support for four types of form layouts:

Vertical (default)
Search
Inline
Horizontal

Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.

- -

Control states and more

States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.

- - -

Four types of forms

Bootstrap provides simple markup and styles for four styles of common web forms.

Controls and layouts

Forms include styles for all the base form controls like input, textarea, and select you'd expect. There are also a number of custom components like appended and prepended inputs and support for lists of checkboxes.

Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.

Error, warning, and success states are included for form controls, as wel as disabled.

@@ -887,7 +870,6 @@ For example, <code>section</code> should be wrapped as inline.

Example forms using just form controls, no extra markup

Basic form

Smart and lightweight defaults without extra markup.

@@ -1646,7 +1628,7 @@ For example, <code>section</code> should be wrapped as inline.

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

Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

Icons from Glyphicons Free, licensed under CC BY 3.0.

-- cgit v1.2.3 From ff6dd0cf56c1b50b7fa7cba35aab4d13cb251f05 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 14:01:03 -0700 Subject: nav and content tweaks --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 7ed6c68ac..58fbecc39 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -27,7 +27,7 @@ - +

Bootstrap

-- cgit v1.2.3 From df869f1eb074f5c2baaaf744f333c5f5d6ce0bee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 21:45:37 -0700 Subject: fix grids --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 58fbecc39..7ed6c68ac 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -27,7 +27,7 @@ - +

Bootstrap

-- cgit v1.2.3 From c1c7528dd9f0617cb65bc5fac7aa6b2cfc2eb822 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 21:48:03 -0700 Subject: drop the side nav, restore topbar --- docs/base-css.html | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 7ed6c68ac..56756b81f 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -29,6 +29,50 @@ + +

+ + Bootstrap +

+ Overview +
+ Scaffolding +
+ Base CSS +
+ Components +
+ Javascript plugins +
+ Using LESS +
+ Customize +
+ Examples +

Bootstrap

Date: Thu, 7 Jun 2012 22:10:36 -0700 Subject: restore top navs entirely --- docs/base-css.html | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 56756b81f..e012f2741 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -33,7 +33,7 @@ ================================================== -->

Bootstrap

- Scaffolding -
- Global styles
- Grid system
- Fluid grid system
- Customizing
- Layouts
- Responsive design
-
- Base CSS -
- Typography
- Code
- Tables
- Forms
- Buttons
- Icons by Glyphicons
-
- Components -
- Button groups
- Button dropdowns
- Nav, tabs, pills
- Navbar
- Breadcrumbs
- Pagination
- Labels
- Badges
- Typography
- Thumbnails
- Alerts
- Progress bars
- Miscellaneous
-
- Javascript -
- All plugins
- Modal
- Dropdown
- Scrollspy
- Tab
- Tooltip
- Popover
- Alert
- Button
- Collapse
- Carousel
- Typeahead
-
- LESS -
- Built with Less
- Variables
- Mixins
- Compiling Bootstrap
-
- Customize -
- Examples -

-- cgit v1.2.3 From aff3694f28946a0640f15dc07591dbfb332fcbaf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 12:58:55 -0700 Subject: remove mention of prettify from docs, fix docs subnav width when fixed --- docs/base-css.html | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index de0363dd4..084654b27 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -424,19 +424,6 @@ For example, <code>section</code> should be wrapped as inline.

Note: 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.

- -

Google Prettify

Take the same <pre> element and add two optional classes for enhanced rendering.

-<p>Sample text here...</p>
-

-<pre class="prettyprint
-     linenums">
-  &lt;p&gt;Sample text here...&lt;/p&gt;
-</pre>
-

Download google-code-prettify and view the readme for how to use.

@@ -448,6 +435,8 @@ For example, <code>section</code> should be wrapped as inline.

Tables For, you guessed it, tabular data

+ +

Table markup

-- cgit v1.2.3 From ca63ea2f26facca1510390f85eed77d55f8f2b89 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 13:15:28 -0700 Subject: overhaul tables docs for more streamlined content --- docs/base-css.html | 299 +++++++++++++++++++---------------------------------- 1 file changed, 105 insertions(+), 194 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 084654b27..71f8da87e 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -435,150 +435,8 @@ For example, <code>section</code> should be wrapped as inline.

Tables For, you guessed it, tabular data

- - -

Table markup

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Tag	Description
- `<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>
-  <thead>
-    <tr>
-      <th>…</th>
-      <th>…</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>…</td>
-      <td>…</td>
-    </tr>
-  </tbody>
-</table>
-

- - -

Table options

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name	Class	Description
Default	None	No styles, just columns and rows
Basic	- `.table` -	Only horizontal lines between rows
Bordered	- `.table-bordered` -	Rounds corners and adds outer border
Zebra-stripe	- `.table-striped` -	Adds light gray background color to odd rows (1, 3, 5, etc)
Condensed	- `.table-condensed` -	Cuts vertical padding in half, from 8px to 4px, within all `td` and `th` elements

- - -

Example tables

- -

1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

Default styles

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

@@ -617,9 +475,15 @@ For example, <code>section</code> should be wrapped as inline. </table> -

2. Striped table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

+ +

+ + +

Optional classes

Add any of the follow 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 IE7-IE8).

@@ -658,9 +522,8 @@ For example, <code>section</code> should be wrapped as inline. </table> - -

3. Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

`.table-bordered`

Add borders and rounded corners to the table.

@@ -703,8 +566,8 @@ For example, <code>section</code> should be wrapped as inline. </table> -

4. Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

`.table-condensed`

Makes tables more compact by cutting cell padding in half.

@@ -743,48 +606,96 @@ For example, <code>section</code> should be wrapped as inline. -

5. Combine them all!

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	Full name
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

-<table class="table table-striped table-bordered table-condensed">
-  ...
+  
+
+
+  Supported table markup
+  List of supported table HTML elements and how they should be used.
+  
+    +      +      +    
+    
+      
+        
+        
+      
+    
+    
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+    
+  


Tag Description

+          <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>
+  <thead>
+    <tr>
+      <th>…</th>
+      <th>…</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>…</td>
+      <td>…</td>
+    </tr>
+  </tbody>
 </table>
 
 
-- 
cgit v1.2.3


From c65006601e65cbfa23611f55c0af314fc762d84d Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 9 Jun 2012 19:15:46 -0700
Subject: overhaul forms docs to simplify presentation of everything, reduce
 text, and increase visibility of examples

---
 docs/base-css.html | 755 +++++++++++++++++++++++++++++------------------------
 1 file changed, 409 insertions(+), 346 deletions(-)

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 71f8da87e..0525a9674 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -710,48 +710,11 @@ For example, <code>section</code> should be wrapped as inline.
     Forms

Controls and layouts

Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.

Error, warning, and success states are included for form controls, as wel as disabled.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name	Class	Description
Vertical (default)	`.form-vertical` (not required)	Stacked, left-aligned labels over controls
Inline	`.form-inline`	Left-aligned label and inline-block controls for compact style
Search	`.form-search`	Extra-rounded text input for a typical search aesthetic
Horizontal	`.form-horizontal`	Float left, right-aligned labels on same line as controls

- -

Example forms using just form controls, no extra markup

Basic form

Smart and lightweight defaults without extra markup.

Default styles

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

Label name - +

Example block-level help text here.

Check me out @@ -761,7 +724,7 @@ For example, <code>section</code> should be wrapped as inline.

 <form class="well">
   <label>Label name</label>
-  <input type="text" class="span3" placeholder="Type something…">
+  <input type="text" placeholder="Type something…">
   <span class="help-block">Example block-level help text here.</span>
   <label class="checkbox">
     <input type="checkbox"> Check me out
@@ -770,21 +733,28 @@ For example, <code>section</code> should be wrapped as inline.
 </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.

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

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

Inline form

Add .form-inline to finesse the vertical alignment and spacing of form controls.

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

-<form class="well form-inline">
+<form class="form-inline">
   <input type="text" class="input-small" placeholder="Email">
   <input type="password" class="input-small" placeholder="Password">
   <label class="checkbox">
@@ -804,331 +774,424 @@ For example, <code>section</code> should be wrapped as inline.
 </form>

-
- -

Horizontal forms

Shown on the right are all the default form controls we support. Here's the bulleted list:

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:

text inputs (text, password, email, etc)
checkbox
radio
select
multiple select
file input
textarea
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

- -

- Text input -

- -

In addition to freeform text, any HTML5 text-based input appears like so.

- Checkbox -

- - - Option one is this and that—be sure to include why it's great - -

- Select list -

- -

- Multicon-select -

- -

- File input -

- -

+ +

+ Email +

- Textarea -

- -

+ Password +

- - +

+ + Remember me + +

Example markup

Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

 <form class="form-horizontal">
-  <fieldset>
-    <legend>Legend text</legend>
-    <div class="control-group">
-      <label class="control-label" for="input01">Text input</label>
-      <div class="controls">
-        <input type="text" class="input-xlarge" id="input01">
-        <p class="help-block">Supporting help text</p>
-      </div>
+  <div class="control-group">
+    <label class="control-label" for="">Email</label>
+    <div class="controls">
+      <input type="text" placeholder="Email">
+    </div>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="">Password</label>
+    <div class="controls">
+      <input type="password" placeholder="Password">
     </div>
-  </fieldset>
+  </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>

-
-

Form control states

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.

Form validation

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

+ + +

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.

-<fieldset
-  class="control-group error">
-  …
-</fieldset>
+<input type="text" placeholder="Text input">

- Focused input -

- -

- Uneditable input -

- Some value here -

- Disabled input -

- -

- Disabled checkbox -

- - - This is a disabled checkbox - -

- Input with warning -

- - Something may have gone wrong -

- Input with error -

- - Please correct the error -

- Input with success -

- - Woohoo! -

- Select with success -

- - Woohoo! -

- - -

Textarea

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

+ +

+<textarea id="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>something</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+<select>
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+

+ + +

Extending form controls

Prepend & append inputs

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

Checkboxes and radios

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

Inline forms and append/prepend

To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.

Form help text

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

- -

- Form grid sizes -

- - - - - - -

Use the same .span* classes from the grid system for input sizes.

- Alternate sizes -

- - - -

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

- Prepended text -

- @ -

Here's some help text

- Appended text -

- .00 -

- Here's more help text -

- Append and prepend -

- $.00 -

- Append with button -

- -

- Two-button append -

- -

- Inline checkboxes -

- - 1 - - - 2 - - - 3 - -

- Checkboxes -

Note: Labels surround all the options for much larger click areas and a more usable form.

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.

+ +

Default options

Wrap a .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 class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+</div>
+<div class="input-append">
+  <input class="span2" id="appendedInput" size="16" 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.

+ +

+<div class="input-prepend input-append">
+  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" 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="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+</div>
+
+<div class="input-append">
+  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+</div>
+

+ +

Control sizing

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

+ +

Relative sizing

+ +

+<input class="input-mini" type="text">
+<input class="input-small" type="text">
+<input class="input-medium" type="text">
+<input class="input-large" type="text">
+<input class="input-xlarge" type="text">
+<input class="input-xxlarge" type="text">
+

+ +

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

+ +

+<input class="span1" type="text">
+<input class="span2" type="text">
+<input class="span3" type="text">
+

+ +

Uneditable inputs

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

+ +

+  <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 class="btn">Cancel</button>
+</div>
+

+ +

Help text

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

Inline help

+ +

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

+ +

Block help

+ +

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

+ +

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, and success messages. To use, add the appropriate class to the surrounding .control-group.

+ +

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

+ -- cgit v1.2.3 From fc2481b8e57ec79a4ec0e7f6d26f4c8492bc84f7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 19:26:06 -0700 Subject: fix form display issue in docs --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 0525a9674..979a87385 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -963,7 +963,7 @@ For example, <code>section</code> should be wrapped as inline.

Default options

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

-- cgit v1.2.3 From 5ef2b6561a8409cc26c413e4a152df89a383f0e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 22:47:45 -0700 Subject: realign icons to five cols, fix buttons --- docs/base-css.html | 92 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 61 insertions(+), 31 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 979a87385..618dee29a 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1202,6 +1202,9 @@ For example, <code>section</code> should be wrapped as inline. + +

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.

@@ -1249,13 +1252,14 @@ For example, <code>section</code> should be wrapped as inline.

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

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.

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.

Multiple sizes

+ +

+ + +

Button sizes

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

@@ -1269,29 +1273,51 @@ For example, <code>section</code> should be wrapped as inline.

-
-

Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

+ + +

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.

One class, multiple tags

Button element

Add the disabled attribute to <button> buttons.

+ + +

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

+ + +

One class, multiple tags

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

- -Link - - - + + Link + + +

 <a class="btn" href="">Link</a>
@@ -1346,6 +1372,10 @@ For example, <code>section</code> should be wrapped as inline.
          icon-download
          icon-upload
          icon-inbox
+

icon-play-circle
icon-repeat
icon-refresh
icon-lock
icon-flag
icon-headphones

icon-volume-off
icon-volume-down
icon-volume-up
icon-align-right
icon-align-justify
icon-list

icon-indent-left
icon-indent-right
icon-facetime-video
icon-move
icon-step-backward
icon-fast-backward

icon-backward
icon-play
icon-pause
icon-minus-sign
icon-remove-sign
icon-ok-sign

icon-question-sign
icon-info-sign
icon-screenshot
icon-leaf
icon-fire
icon-eye-open

icon-eye-close
icon-warning-sign
icon-plane
icon-random
icon-comment
icon-magnet

icon-chevron-up
icon-chevron-down
icon-retweet

Date: Sat, 9 Jun 2012 23:26:46 -0700 Subject: redo icons section --- docs/base-css.html | 94 ++++++++++++++++++++++++------------------------------ 1 file changed, 41 insertions(+), 53 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 618dee29a..ee12d62e2 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1341,6 +1341,9 @@ For example, <code>section</code> should be wrapped as inline. + +

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

@@ -1504,16 +1507,12 @@ For example, <code>section</code> should be wrapped as inline.

-
+

Built as a sprite

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

 <i class="icon-search"></i>

@@ -1521,66 +1520,55 @@ For example, <code>section</code> should be wrapped as inline.

 <i class="icon-search icon-white"></i>

There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

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

Use cases

Icons are great, but where would one use them? Here are a few ideas:

As visuals for your sidebar navigation
For a purely icon-driven navigation
For buttons to help convey the meaning of an action
With links to share context on a user's destination

Essentially, anywhere you can put an <i> tag, you can put an icon.

+ +

Examples

Icon examples

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

- - - - +

Buttons

+ -

- User - -

+ +

Navigation

- Refresh - Checkout - Delete -

- Comment - Settings - More Info -

- -

Form fields

Email address

-- cgit v1.2.3 From 7ed02b461be8f520f672284f9984fdc9ce4487e7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 11 Jun 2012 20:20:51 -0700 Subject: fix blockquote alignment --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index ee12d62e2..66137d7c4 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -256,7 +256,7 @@

Alternate displays

Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title -- cgit v1.2.3 From c7ffe6edc894b00db16bc4386f421a3d8efadd50 Mon Sep 17 00:00:00 2001 From: Purwandi Date: Tue, 12 Jun 2012 12:17:10 +0700 Subject: Add space on navbar button --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 66137d7c4..08395f8d0 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -34,7 +34,7 @@

- + +

- + + +

-- cgit v1.2.3 From 71669dda63644a7b4162ca63f8b9c88b3586c7e4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 24 Jun 2012 20:26:48 -0700 Subject: tons of docs cleanup in css, adding subnav to official components --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 4b9e6d1ed..df2407f8b 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -81,7 +81,7 @@
Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

-
+

Typography

Code

Tables
-- cgit v1.2.3 From 6662f62236cd1800952fb45a528b79d9a899f5d5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 24 Jun 2012 21:03:39 -0700 Subject: remove subnav file, instead add an optional class for .navbar --- docs/base-css.html | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index df2407f8b..413639934 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -80,15 +80,17 @@

Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.
-
-
-
Typography
-
Code
-
Tables
-
Forms
-
Buttons
-
Icons by Glyphicons
-
+
+
+
+
Typography
+
Code
+
Tables
+
Forms
+
Buttons
+
Icons by Glyphicons
+
+

-- cgit v1.2.3 From 27845e4492741a973231ff1be6c493e001a28555 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 14:11:37 -0700 Subject: #3223: make table row hover optional class --- docs/base-css.html | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 413639934..9eed2bea2 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -566,6 +566,45 @@ For example, <code>section</code> should be wrapped as inline. <table class="table table-bordered"> … </table> +
+ +
.table-hover
+
Enable a hover state on table rows within a <tbody>.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
+
+
+<table class="table table-hover"> + … +</table>

.table-condensed
-- cgit v1.2.3 From a683497dbc0f9cc3f883f195206e87589d09caaf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Jun 2012 23:56:00 -0700 Subject: renamed less.html to extend.html, removing all the vars and mixins --- docs/base-css.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 9eed2bea2..2b679d994 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -57,9 +57,6 @@
Javascript
-
- LESS -

Customize @@ -67,6 +64,9 @@
Examples
+
+ Extend +

-- cgit v1.2.3 From c09e8473e2be483d3f53186840c002167647c44b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 28 Jun 2012 10:03:46 -0700 Subject: use variablef or wells background-color, update docs for glyphicons license mention, update popovers to remove that thick border and make them look mo betta --- docs/base-css.html | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 2b679d994..2b7c1ec71 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1555,6 +1555,9 @@ For example, <code>section</code> should be wrapped as inline.

Glyphicons attribution

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

-- cgit v1.2.3 From b4125748b0d0e12a7855350ee3d9089e0a2f93e7 Mon Sep 17 00:00:00 2001 From: "Gavin Cooper (work)" Date: Wed, 4 Jul 2012 12:22:34 +0100 Subject: added ability to give rows in tables status classes .success .error and .info. --- docs/base-css.html | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 2b7c1ec71..627cbc208 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -650,6 +650,85 @@ For example, <code>section</code> should be wrapped as inline.

Optional row classes

Included with Bootstrap is the ability to colourize rows.

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

Class	Description
+ `.success` +	Indicates a successful or positive action.
+ `.error` +	Indicates a dangerous or potentially negative action.
+ `.info` +	Used as an alternative to the default styles.

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

#	Product	Payment Taken	Status
1	TB - Monthly	01/04/2012	Approved
2	TB - Monthly	02/04/2012	Declined
3	TB - Monthly	03/04/2012	Pending

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

@@ -740,6 +819,7 @@ For example, <code>section</code> should be wrapped as inline. </table> + -- cgit v1.2.3 From 3c07eaa251b73e6c5eff4b56e074c54708a4b4ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 15:11:54 -0700 Subject: updates to type scale --- docs/base-css.html | 7 ------- 1 file changed, 7 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 2b7c1ec71..4655da12f 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -57,13 +57,6 @@

Javascript

- Customize -

- Examples -

Extend

-- cgit v1.2.3 From 6d447079a41f8441c061a9d6f572e28c627ccd6e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jul 2012 15:18:56 -0700 Subject: update buttons in docs to include type --- docs/base-css.html | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 2b7c1ec71..3df5a114b 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1136,13 +1136,13 @@ For example, <code>section</code> should be wrapped as inline.

- +

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

@@ -1263,37 +1263,37 @@ For example, <code>section</code> should be wrapped as inline. - + - + - + - + - + - + - + @@ -1310,16 +1310,16 @@ For example, <code>section</code> should be wrapped as inline.

Button sizes

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

- - + +

@@ -1347,12 +1347,12 @@ For example, <code>section</code> should be wrapped as inline.

Button element

Add the disabled attribute to <button> buttons.

- - + +

-<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
-<button class="btn btn-large" disabled>Button</button>
+<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>

-- cgit v1.2.3 From 5f861ef51735d8b0f2c0f0faf8f438808a480d99 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jul 2012 23:16:07 -0700 Subject: fix up docs to use default container, fix responsive home changes --- docs/base-css.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 9f27d862c..ed6f27871 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -33,7 +33,7 @@ ================================================== -->

@@ -1633,6 +1633,11 @@ For example, <code>section</code> should be wrapped as inline.

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

Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

Icons from Glyphicons Free, licensed under CC BY 3.0.

-- cgit v1.2.3 From 20676ddd4d3e46c9fb32aadfeddb3a4a68efa6a3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jul 2012 01:47:36 -0700 Subject: adding getting started page based on Bootstrap University from awhile back, testing out side nav on docs instead of subnav bar --- docs/base-css.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index ed6f27871..8c2879907 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -27,7 +27,7 @@ - + @@ -88,6 +88,20 @@ +

+ +

+ + @@ -1625,6 +1639,8 @@ For example, <code>section</code> should be wrapped as inline. +

-- cgit v1.2.3 From 16cf6b30cd0ea82dda210f021dfc163a3783fe1c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 00:17:36 -0700 Subject: docs changes for icons --- docs/base-css.html | 28 ++++++---------------------- 1 file changed, 6 insertions(+), 22 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 8c2879907..455a61d57 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -122,7 +122,7 @@

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 (9px 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.

@@ -1399,9 +1399,7 @@ For example, <code>section</code> should be wrapped as inline.

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

icon-glass
icon-music
icon-search
icon-download
icon-upload
icon-inbox

icon-play-circle
icon-repeat
icon-refresh
icon-align-right
icon-align-justify
icon-list

icon-indent-left
icon-indent-right
icon-facetime-video
icon-minus-sign
icon-remove-sign
icon-ok-sign

icon-question-sign
icon-info-sign
icon-screenshot
icon-random
icon-comment
icon-magnet

icon-chevron-up
icon-chevron-down
icon-retweet
icon-briefcase
icon-fullscreen

Glyphicons attribution

-- cgit v1.2.3 From 410decafad0496033ba965dc594786b9c4629449 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 00:17:52 -0700 Subject: indenting --- docs/base-css.html | 292 ++++++++++++++++++++++++++--------------------------- 1 file changed, 146 insertions(+), 146 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 455a61d57..0c5bf0bea 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1399,152 +1399,152 @@ For example, <code>section</code> should be wrapped as inline.

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

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

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

Glyphicons attribution

-- cgit v1.2.3 From 93be608bf0a4b85ec3331ebcc14e40f99a1974f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 20:49:17 -0700 Subject: fixes #3384: add support for multiple inputs per line when using grid sizing --- docs/base-css.html | 36 ++++++++++++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 0c5bf0bea..88f443642 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1074,7 +1074,7 @@ For example, <code>section</code> should be wrapped as inline.

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

Relative sizing

- +

@@ -1092,10 +1092,13 @@ For example, <code>section</code> should be wrapped as inline. <input class="input-xlarge" type="text"> <input class="input-xxlarge" type="text"> +

+ Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

- +

@@ -1127,6 +1130,35 @@ For example, <code>section</code> should be wrapped as inline. <input class="span1" type="text"> <input class="span2" type="text"> <input class="span3" type="text"> + + +

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 controls-row">
+  <input class="span4" type="text" placeholder=".span4">
+  <input class="span1" type="text" placeholder=".span1">
+</div>

Uneditable inputs

-- cgit v1.2.3 From 3ea309568f77dbe72f35b682041537c8d467664f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 22:34:33 -0700 Subject: fix indenting and remove hidden subnav on Base CSS docs --- docs/base-css.html | 2220 ++++++++++++++++++++++++++-------------------------- 1 file changed, 1107 insertions(+), 1113 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 88f443642..175825c71 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -68,26 +68,17 @@

Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

+ +

- + +

+ -

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

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

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.

Body copy

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.

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.

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.

Built with Less

Emphasis

Make use of HTML's default emphasis tags, <strong> and <em>.

Emphasis

Make use of HTML's default emphasis tags, <strong> and <em>.

`<strong>`

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

`<strong>`

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

 <strong>rendered as bold text</strong>

`<em>`

For emphasizing a snippet of text with stress

The following snippet of text is rendered as italicized text.

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

`<em>`

For emphasizing a snippet of text with stress

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.

Abbreviations

Stylized implemenation 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.

Abbreviations

`<abbr>`

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

An abbreviation of the word attribute is attr.

`<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 class="initialism">`

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

HTML is the best thing since sliced bread.

 <abbr title="attribute" class="initialism">attr</abbr>

Addresses

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

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@gmail.com -

`<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@gmail.com +

 <address>
   <strong>Twitter, Inc.</strong><br>
@@ -226,36 +217,36 @@

Blockquotes

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

Blockquotes

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

Default blockqoute

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

Default blockqoute

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.

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 -

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>
@@ -263,14 +254,14 @@
 </blockquote>

Alternate displays

Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Someone famous in Source Title -

Alternate displays

Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ Someone famous in Source Title +

 <blockquote class="pull-right">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -279,99 +270,99 @@

- -

Lists

+ +

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 +
Unordered
+
A list of items in which the order does not explicitly matter.
+
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- 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
-
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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ordered

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

 <ol>
   <li>...</li>
 </ol>

Unstyled

A list of items with no list-style or additional left padding.

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

Unstyled

A list of items with no list-style or additional left padding.

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="unstyled">
   <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.

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>
@@ -379,21 +370,21 @@
 </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.

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>
@@ -401,28 +392,28 @@
 </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. +

+ - -

- + +

+ -

Inline

Wrap inline snippets of code with <code>.

Inline

Wrap inline snippets of code with <code>.

 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.

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>

@@ -431,53 +422,53 @@ For example, <code>section</code> should be wrapped as inline. <p>Sample text here...</p> </pre> -

Note: 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.

Note: 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.

- -

- + +

+ -

Default styles

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

		`btn`	Standard gray button with gradient
		`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
		`btn btn-info`	Used as an alternative to the default styles
		`btn btn-success`	Indicates a successful or positive action
		`btn btn-warning`	Indicates caution should be taken with this action
		`btn btn-danger`	Indicates a dangerous or potentially negative action
		`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Default styles

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

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 <table class="table">
   …
@@ -485,168 +476,168 @@ For example, <code>section</code> should be wrapped as inline.

- - -

Optional classes

Add any of the follow 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 IE7-IE8).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

+ + +

Optional classes

Add any of the follow 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 IE7-IE8).

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 <table class="table table-striped">
   …
 </table>

`.table-bordered`

Add borders and rounded corners to the table.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

`.table-bordered`

Add borders and rounded corners to the table.

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 <table class="table table-bordered">
   …
 </table>

`.table-hover`

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

`.table-hover`

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

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 <table class="table table-hover">
   …
 </table>

`.table-condensed`

Makes tables more compact by cutting cell padding in half.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

`.table-condensed`

Makes tables more compact by cutting cell padding in half.

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 <table class="table table-condensed">
   …
@@ -654,82 +645,82 @@ For example, <code>section</code> should be wrapped as inline.

- - -

Supported table markup

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Tag	Description
- `<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 -

+ + +

Supported table markup

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

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

Tag	Description
+ `<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>
   <thead>
@@ -747,28 +738,28 @@ For example, <code>section</code> should be wrapped as inline.
 </table>

- + - - - -

- - -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use

- -

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 two additional sizes.

- - -

Disabled state

Make buttons look unclickable by fading them back 50%.

+ +

+ -

Anchor element

Add the .disabled class to <a> buttons.

- Primary link - Link -

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.

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

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use

+ +

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 two additional sizes.

+ + +

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

- -

Button element

Add the disabled attribute to <button> buttons.

- - -

+ Heads up! + We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. +

+ +

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.

- +

One class, multiple tags

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

 <a class="btn" href="">Link</a>
 <button class="btn" type="submit">
@@ -1416,247 +1407,250 @@ For example, <code>section</code> should be wrapped as inline.
 <input class="btn" type="submit"
          value="Submit">

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

- -

- + +

+ + +

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

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

+ +

Glyphicons attribution

+ + +

+ -

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

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

- -

Glyphicons attribution

- - -

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

 <i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

 <i class="icon-search icon-white"></i>

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

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

Icon examples

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

Icon examples

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

Buttons

- -

Navigation

- -

Form fields

+ +

+ + + +

- + -- cgit v1.2.3 From 5d8e78e0faedb4365216f1ebbc5d70dc560f3f6e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jul 2012 00:32:04 -0700 Subject: fixes #3605: add support for input-prepend/-append to .form-search --- docs/base-css.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 175825c71..75296003b 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -752,6 +752,7 @@ For example, <code>section</code> should be wrapped as inline.

Default styles

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

+ Legend Label name

Example block-level help text here.

@@ -822,6 +823,7 @@ For example, <code>section</code> should be wrapped as inline.

Wrap any associated controls in .controls for proper alignment

+ Legend

@@ -1059,6 +1061,24 @@ For example, <code>section</code> should be wrapped as inline. <div class="input-append"> <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> </div> + + +

Search form

+ +

+ + +

+ +

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

Control sizing

-- cgit v1.2.3 From 3c775f24323d649f55aaa175eb6a1a19024ab30c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 16:23:21 -0700 Subject: add chevrons to other docs navs --- docs/base-css.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 75296003b..b79d5295a 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -82,12 +82,12 @@

-- cgit v1.2.3 From 549d61fc289cb9efe5f8959e706e170b080663ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 17:02:55 -0700 Subject: updated footer --- docs/base-css.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index b79d5295a..b829dc3ae 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1671,10 +1671,14 @@ For example, <code>section</code> should be wrapped as inline.

+ - -

+ + -- cgit v1.2.3 From a12f0e551f7da763a9be23013d1b51c161a0f6f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 18:11:49 -0700 Subject: overhaul docs on sub pages, clean up css and copy --- docs/base-css.html | 2203 ++++++++++++++++++++++++++-------------------------- 1 file changed, 1102 insertions(+), 1101 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index b829dc3ae..fc04ea4c2 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -66,142 +66,143 @@ -

Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.

- -

+ +

- -

- + +

+ -

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

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

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.

Body copy

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.

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.

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.

Built with Less

Emphasis

Make use of HTML's default emphasis tags, <strong> and <em>.

Emphasis

Make use of HTML's default emphasis tags, <strong> and <em>.

`<strong>`

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

`<strong>`

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

 <strong>rendered as bold text</strong>

`<em>`

For emphasizing a snippet of text with stress

The following snippet of text is rendered as italicized text.

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

`<em>`

For emphasizing a snippet of text with stress

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.

Abbreviations

`<abbr>`

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

An abbreviation of the word attribute is attr.

`<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 class="initialism">`

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

HTML is the best thing since sliced bread.

 <abbr title="attribute" class="initialism">attr</abbr>

Addresses

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

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@gmail.com -

`<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@gmail.com +

 <address>
   <strong>Twitter, Inc.</strong><br>
@@ -217,36 +218,36 @@

Blockquotes

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

Blockquotes

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

Default blockqoute

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

Default blockqoute

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.

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 -

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>
@@ -254,14 +255,14 @@
 </blockquote>

Alternate displays

Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Someone famous in Source Title -

Alternate displays

Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ Someone famous in Source Title +

 <blockquote class="pull-right">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -270,16 +271,63 @@

- -

Lists

+ +

Lists

Unordered

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

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

+<ol>
+  <li>...</li>
+</ol>
+

+ +

Unstyled

A list of items with no list-style or additional left padding.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

-<ul>
+<ul class="unstyled">
   <li>...</li>
 </ul>

Ordered

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

Description

A list of terms with their associated descriptions.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.

-<ol>
-  <li>...</li>
-</ol>
-

- -

Unstyled

A list of items with no list-style or additional left padding.

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="unstyled">
-  <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.

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>

- -

- + +

+ -

Inline

Wrap inline snippets of code with <code>.

Inline

Wrap inline snippets of code with <code>.

 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.

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>

@@ -422,53 +423,53 @@ For example, <code>section</code> should be wrapped as inline. <p>Sample text here...</p> </pre> -

Note: 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.

Note: 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.

- -

- + +

+ -

Default styles

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Default styles

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

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 <table class="table">
   …
@@ -476,251 +477,251 @@ For example, <code>section</code> should be wrapped as inline.

- - -

Optional classes

Add any of the follow 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 IE7-IE8).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

+ + +

Optional classes

Add any of the follow 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 IE7-IE8).

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 <table class="table table-striped">
   …
 </table>

`.table-bordered`

Add borders and rounded corners to the table.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

`.table-bordered`

Add borders and rounded corners to the table.

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 <table class="table table-bordered">
   …
 </table>

`.table-hover`

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

- +

`.table-hover`

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

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

+<table class="table table-hover">
+  …
+</table>
+

+ +

`.table-condensed`

Makes tables more compact by cutting cell padding in half.

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

+<table class="table table-condensed">
+  …
+</table>
+

+ + +

Supported table markup

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

+ + + + + - - - - + + - - - - + + - - - - + + - - - + + - -

#	First Name	Last Name	Username	Tag	Description
1	Mark	Otto	@mdo	+ `<table>` +	+ Wrapping element for displaying data in a tabular format +
2	Jacob	Thornton	@fat	+ `<thead>` +	+ Container element for table header rows (`<tr>`) to label table columns +
3	Larry the Bird		@twitter	+ `<tbody>` +	+ Container element for table rows (`<tr>`) in the body of the table +

-<table class="table table-hover">
-  …
-</table>
-

- -

`.table-condensed`

Makes tables more compact by cutting cell padding in half.

- - - - - - + + - - - - - - + + - - - - + + - - - + +

#	First Name	Last Name	Username	+ `<tr>` +	+ Container element for a set of table cells (`<td>` or `<th>`) that appears on a single row +
1	Mark	Otto	@mdo	+ `<td>` +	+ Default table cell +
2	Jacob	Thornton	@fat	+ `<th>` +	+ Special table cell for column (or row, depending on scope and placement) labels + Must be used within a `<thead>` +
3	Larry the Bird		@twitter	+ `<caption>` +	+ Description or summary of what the table holds, especially useful for screen readers +

-<table class="table table-condensed">
-  …
-</table>
-

- - -

Supported table markup

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Tag	Description
- `<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>
   <thead>
@@ -738,29 +739,29 @@ For example, <code>section</code> should be wrapped as inline.
 </table>

- + - - - -

- + +

+ -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use

- -

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 two additional sizes.

- - -

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.

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

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use

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.

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

- Primary link - Link -

Button sizes

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

+ + +

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

- -

Button element

Add the disabled attribute to <button> buttons.

- - -

+ Heads up! + We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. +

+ +

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.

- +

One class, multiple tags

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

 <a class="btn" href="">Link</a>
 <button class="btn" type="submit">
@@ -1427,251 +1428,251 @@ For example, <code>section</code> should be wrapped as inline.
 <input class="btn" type="submit"
          value="Submit">

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

- -

- + +

+ -

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

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

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

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

Glyphicons attribution

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

 <i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

 <i class="icon-search icon-white"></i>

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

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

Icon examples

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

Icon examples

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

Buttons

-- cgit v1.2.3 From 9343e1e933c1a38ec4cc58024b01edda631863b0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 21:38:18 -0700 Subject: remove getting started link from home, add to navbar, overhaul getting started docs --- docs/base-css.html | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index fc04ea4c2..289745397 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -45,6 +45,9 @@

Home

+ Get started +

Scaffolding

-- cgit v1.2.3 From 463de252a9d695d6b52045e5e7df4e7b82ffb116 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 14:20:25 -0700 Subject: update static assets section of extend page, copy changes elsewhere --- docs/base-css.html | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 289745397..d01d5350c 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -123,12 +123,14 @@

<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

@@ -145,18 +147,14 @@

The following snippet of text is rendered as bold text.

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

<strong>rendered as bold text</strong>

`<em>`

For emphasizing a snippet of text with stress

The following snippet of text is rendered as italicized text.

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

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

@@ -172,18 +170,14 @@

An abbreviation of the word attribute is attr.

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

<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="attribute" class="initialism">attr</abbr>
-

<abbr title="attribute" class="initialism">attr</abbr>

-- cgit v1.2.3 From e20d2dfe9d1f43e164d8fdbef64f4041df70b762 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jul 2012 16:13:25 -0700 Subject: docs cleanup and blockquote cleanup for .pull-right option --- docs/base-css.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index d01d5350c..46685b112 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -253,7 +253,7 @@

Alternate displays

Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -262,8 +262,7 @@

 <blockquote class="pull-right">
-  <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>

-- cgit v1.2.3 From aac3736eeaa1ff1eaf3a6a04502efd6d5b9e7e49 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jul 2012 23:32:52 -0700 Subject: fixes #3845: add .btn-link for transparent buttons styled as links --- docs/base-css.html | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index a6b545c1d..a23008dd1 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -712,12 +712,14 @@ For example, <code>section</code> should be wrapped as inline.

-<tr class="success">
-  <td>1</td>
-  <td>TB - Monthly</td>
-  <td>01/04/2012</td>
-  <td>Approved</td>
-</tr>
+...
+  <tr class="success">
+    <td>1</td>
+    <td>TB - Monthly</td>
+    <td>01/04/2012</td>
+    <td>Approved</td>
+  </tr>
+...

@@ -1423,6 +1425,11 @@ For example, <code>section</code> should be wrapped as inline. btn btn-inverse Alternate dark gray button, not tied to a semantic action or use + + + btn btn-link + Deemphasize a button by making it look like a link while maintaining button behavior + -- cgit v1.2.3 From b9105b98f9ee5f15d5b18bccf277344683d4a6db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 Jul 2012 22:06:47 -0700 Subject: move from downloads.html to customize.html to better match purpose of page, fix up customize page layout to match other docs, link style refinement to jumbotrons --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index a23008dd1..8713a1b25 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -61,7 +61,7 @@ Javascript

- Extend + Customize

-- cgit v1.2.3 From dcf75697ecd243517b23d8ef440f772d91f699c0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jul 2012 18:28:39 -0700 Subject: some progress on affix plugin --- docs/base-css.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 8713a1b25..e99c6226b 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -85,7 +85,7 @@ ================================================== -->

Typography
Code
Tables

Date: Mon, 23 Jul 2012 22:36:08 -0700 Subject: make docs scroll over jumbotrons, but only for 980px up --- docs/base-css.html | 2356 ++++++++++++++++++++++++++-------------------------- 1 file changed, 1180 insertions(+), 1176 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 8713a1b25..5ad0dfeaf 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -78,128 +78,130 @@

- - - -

- -

- + +

+ +

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

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.

<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

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

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.

<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

Emphasis

Make use of HTML's default emphasis tags, <strong> and <em>.

`<strong>`

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

`<em>`

For emphasizing a snippet of text with stress

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

Make use of HTML's default emphasis tags, <strong> and <em>.

`<strong>`

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

`<em>`

For emphasizing a snippet of text with stress

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.

Abbreviations

`<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="attribute" class="initialism">attr</abbr>

Abbreviations

`<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="attribute" class="initialism">attr</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@gmail.com -

+ + +

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@gmail.com +

 <address>
   <strong>Twitter, Inc.</strong><br>
@@ -215,36 +217,36 @@

Blockquotes

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

Blockquotes

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

Default blockqoute

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

Default blockqoute

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.

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 -

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>
@@ -252,14 +254,14 @@
 </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 -

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">
   ...
@@ -267,16 +269,63 @@

- -

Lists

+ +

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

+<ol>
+  <li>...</li>
+</ol>
+

Unordered

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

Unstyled

A list of items with no list-style or additional left padding.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

-<ul>
+<ul class="unstyled">
   <li>...</li>
 </ul>

Ordered

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

Description

A list of terms with their associated descriptions.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.

-<ol>
-  <li>...</li>
-</ol>
-

- -

Unstyled

A list of items with no list-style or additional left padding.

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="unstyled">
-  <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.

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>

- -

- + +

+ -

Inline

Wrap inline snippets of code with <code>.

Inline

Wrap inline snippets of code with <code>.

 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.

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>

@@ -419,53 +421,53 @@ For example, <code>section</code> should be wrapped as inline. <p>Sample text here...</p> </pre> -

Note: 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.

Note: 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.

- -

- + +

+ -

Default styles

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Default styles

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

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 <table class="table">
   …
@@ -473,168 +475,168 @@ For example, <code>section</code> should be wrapped as inline.

- - -

Optional classes

Add any of the follow 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 IE7-IE8).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

+ + +

Optional classes

Add any of the follow 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 IE7-IE8).

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 <table class="table table-striped">
   …
 </table>

`.table-bordered`

Add borders and rounded corners to the table.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

`.table-bordered`

Add borders and rounded corners to the table.

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 <table class="table table-bordered">
   …
 </table>

`.table-hover`

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

`.table-hover`

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

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 <table class="table table-hover">
   …
 </table>

`.table-condensed`

Makes tables more compact by cutting cell padding in half.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

`.table-condensed`

Makes tables more compact by cutting cell padding in half.

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 <table class="table table-condensed">
   …
@@ -642,75 +644,75 @@ For example, <code>section</code> should be wrapped as inline.

- - -

Optional row classes

Use contextual classes to color table rows.

- - - - - - - - - - - - - - - - - - - - - - - - - -

Class	Description
- `.success` -	Indicates a successful or positive action.
- `.error` -	Indicates a dangerous or potentially negative action.
- `.info` -	Used as an alternative to the default styles.

- +

+ + +

Optional row classes

Use contextual classes to color table rows.

+ + + + - - - - + + - - - - - + + + - - - - - + + + - - - - - + + +

#	Product	Payment Taken	Status
1	TB - Monthly	01/04/2012	Approved
+ `.success` +	Indicates a successful or positive action.
2	TB - Monthly	02/04/2012	Declined
+ `.error` +	Indicates a dangerous or potentially negative action.
3	TB - Monthly	03/04/2012	Pending
+ `.info` +	Used as an alternative to the default styles.

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

#	Product	Payment Taken	Status
1	TB - Monthly	01/04/2012	Approved
2	TB - Monthly	02/04/2012	Declined
3	TB - Monthly	03/04/2012	Pending

 ...
   <tr class="success">
@@ -723,82 +725,82 @@ For example, <code>section</code> should be wrapped as inline.

- - -

Supported table markup

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Tag	Description
- `<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 -

+ + +

Supported table markup

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

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

Tag	Description
+ `<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>
   <thead>
@@ -816,29 +818,29 @@ For example, <code>section</code> should be wrapped as inline.
 </table>

- - - -

- + +

+ -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use
	`btn btn-link`	Deemphasize 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 two additional sizes.

- - -

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.

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

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use
	`btn btn-link`	Deemphasize 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.

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

- Primary link - Link -

Button sizes

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

+ + +

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

- -

Button element

Add the disabled attribute to <button> buttons.

- - -

+ Heads up! + We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. +

+ +

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.

- +

One class, multiple tags

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

 <a class="btn" href="">Link</a>
 <button class="btn" type="submit">
@@ -1510,248 +1512,250 @@ For example, <code>section</code> should be wrapped as inline.
 <input class="btn" type="submit"
          value="Submit">

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

- -

- + +

+ -

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

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

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

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

Glyphicons attribution

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

 <i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

 <i class="icon-search icon-white"></i>

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

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

Icon examples

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

Icon examples

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

Buttons

-- cgit v1.2.3 From e38fa4b1f40b8e8f64ad904fd5ea3d6d7ab9dffc Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jul 2012 00:30:58 -0700 Subject: fix scroll thinggg --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index d83076bf6..5987abc53 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -86,7 +86,7 @@ ================================================== -->

Typography
Code
Tables

Date: Tue, 24 Jul 2012 01:53:32 -0700 Subject: wrap footer in bs docs canvas for scrolling doodad --- docs/base-css.html | 76 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 39 insertions(+), 37 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 5987abc53..9aa012083 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1757,48 +1757,50 @@ For example, <code>section</code> should be wrapped as inline.

- - - + + + + + + + + + + + + + + + + + + + + + + + + +

- - - - - - - - - - - - - - - - - - - -- cgit v1.2.3 From 1e9b4506196bd448c4038151964733ca524c10bb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 00:06:43 -0700 Subject: add image styles, for now to scaffolding (soon to own file) --- docs/base-css.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 9aa012083..4f0df407d 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -92,6 +92,7 @@

@@ -1517,6 +1518,30 @@ For example, <code>section</code> should be wrapped as inline. + +

+ + +

Simple classes to easily style images in any project.

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

+ + +

-- cgit v1.2.3 From fe6a4b0b5497a78a085e85125f4397a27b7737dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 15:42:58 -0700 Subject: add .btn-block for a full-width button option --- docs/base-css.html | 47 ++++++++++++++++++++++++++--------------------- 1 file changed, 26 insertions(+), 21 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 4f0df407d..f827380ac 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1439,26 +1439,34 @@ For example, <code>section</code> should be wrapped as inline.

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 two additional sizes.

- - -

+ + +

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

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

+ +

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

Disabled state

@@ -1491,9 +1499,6 @@ For example, <code>section</code> should be wrapped as inline. -

- -

One class, multiple tags

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

-- cgit v1.2.3 From a30045daef809edf5ed592ad842c04377898e444 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 00:30:15 -0700 Subject: reverse navbar styles to save code --- docs/base-css.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index f827380ac..80bc8c9b0 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -31,7 +31,7 @@ -

-- cgit v1.2.3 From 9795e9bbe62b05a95e3485a64ba139539113f2db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 23:48:26 -0700 Subject: place chevrons first in sidenav in docs, fix ie7 bugs for said sidenav --- docs/base-css.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 80bc8c9b0..50c362864 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -87,13 +87,13 @@

-- cgit v1.2.3 From 31b30ab88e6ac823653a6211365d6c9d46c5fa5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 31 Jul 2012 00:06:37 -0700 Subject: copy edits to docs --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 50c362864..4b67ef17e 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -74,7 +74,7 @@

Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.

Fundamental HTML elements styled and enhanced with extensible classes.

-- cgit v1.2.3 From 7aaf1413718140d0f27876f3c210a08f52d41cd6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 16:57:27 -0700 Subject: add compability note to image styles --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 4b67ef17e..2f0c10f50 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1531,7 +1531,7 @@ For example, <code>section</code> should be wrapped as inline.

Images

Simple classes to easily style images in any project.

Simple classes to easily style images in any project. Heads up: .img-rounded and .img-circle don't work in IE7-8.

-- cgit v1.2.3 From c2e899f2a014e18f9cf981ea89a20e18a5c9fefb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 19:00:25 -0700 Subject: remove the canvas slider doodad --- docs/base-css.html | 76 ++++++++++++++++++++++++++---------------------------- 1 file changed, 36 insertions(+), 40 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 2f0c10f50..cd550adc3 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -78,7 +78,6 @@

@@ -1790,47 +1789,44 @@ For example, <code>section</code> should be wrapped as inline. + + - - - - - - - - - - - - - - - - - - - - - - - - -

+ + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3 From f3479a39537b7b10bf66846c11d500f3364af88a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 Aug 2012 15:44:25 -0700 Subject: compensate for ie7 button padding with no borders, fix indentation --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index cd550adc3..56f6bde95 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1257,7 +1257,7 @@ For example, <code>section</code> should be wrapped as inline. Some value here

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

Form actions

-- cgit v1.2.3 From dee57462e2805421a0fe0d786229446bbaef677b Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 14 Aug 2012 21:06:08 -0700 Subject: get affix actually working and update docs --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index cd550adc3..f8fd8da33 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -85,7 +85,7 @@ ================================================== -->

Typography
Code
Tables

Date: Wed, 15 Aug 2012 11:07:43 -0300 Subject: Fixed spelling error in forms documentation. --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index c1598821c..fb6616fb7 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -967,7 +967,7 @@ For example, <code>section</code> should be wrapped as inline.

Textarea

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

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

-- cgit v1.2.3 From 5b947b8a2f801d33af2fe8d78f9655ce1ebd5e7c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 17 Aug 2012 16:11:52 -0700 Subject: fix up padding on small buttons, add button examples --- docs/base-css.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index fb6616fb7..3ea3bdce3 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -967,7 +967,7 @@ For example, <code>section</code> should be wrapped as inline.

Textarea

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

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

@@ -1445,6 +1445,10 @@ For example, <code>section</code> should be wrapped as inline.

+ + +

@@ -1457,6 +1461,7 @@ For example, <code>section</code> should be wrapped as inline.

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

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

@@ -1740,6 +1745,7 @@ For example, <code>section</code> should be wrapped as inline.

User @@ -1751,6 +1757,8 @@ For example, <code>section</code> should be wrapped as inline.

Make admin

+

+

-- cgit v1.2.3 From 05571db10990ff66d312abc9cd25144dad36517d Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 13:40:37 +0200 Subject: Add to Supported table markup example --- docs/base-css.html | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 3ea3bdce3..b24d3eea4 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -802,6 +802,7 @@ For example, <code>section</code> should be wrapped as inline.

 <table>
+  <caption>…</caption>
   <thead>
     <tr>
       <th>…</th>
-- 
cgit v1.2.3


From 0c24f51d2a6e67446cf96c5a5a15319ff63f3f43 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 13:56:02 +0200
Subject: Change .help-block tag for "Forms => Default styles" example into
 

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index b24d3eea4..41ef5526f 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -835,7 +835,7 @@ For example, <code>section</code> should be wrapped as inline.
             Legend
             Label name
             
-            Example block-level help text here.
+            Example block-level help text here.
             
                Check me out
             
-- 
cgit v1.2.3


From 7f5aa177f5f6e67801db7f17d93092aeb47bfd75 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 14:00:33 +0200
Subject: Make Forms => Default styles code snippet the same as example

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 41ef5526f..5e9cdf7b2 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -842,7 +842,8 @@ For example, <code>section</code> should be wrapped as inline.
             
           
 -<form class="well">
+<form>
+  <legend>Legend</legend>
   <label>Label name</label>
   <input type="text" placeholder="Type something…">
   <span class="help-block">Example block-level help text here.</span>
-- 
cgit v1.2.3


From c8b8d914b83ffe736ce21b3848b6fb6467eaffe8 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 14:22:41 +0200
Subject: Make Forms => Textarea code snippet the same as example

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 5e9cdf7b2..05b0fdb98 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -974,7 +974,7 @@ For example, <code>section</code> should be wrapped as inline.
             
           
 -<textarea id="textarea" rows="3"></textarea>
+<textarea rows="3"></textarea>
 
 
           Checkboxes and radios
-- 
cgit v1.2.3


From 25f8ef32605a259648e2085102689bc797c9aa42 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 14:36:30 +0200
Subject: Add multiple="multiple" to Forms => Selects as described in
 explanation

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 05b0fdb98..1d5e804e9 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1047,7 +1047,7 @@ For example, <code>section</code> should be wrapped as inline.
               
             
             

-            
               
               
               
@@ -1064,7 +1064,7 @@ For example, <code>section</code> should be wrapped as inline.
   <option>5</option>
 </select>
 
-<select>
+<select multiple="multiple">
   <option>1</option>
   <option>2</option>
   <option>3</option>
-- 
cgit v1.2.3


From a8b18b6f54f42ab3d22357412933381998ed3f50 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 14:54:32 +0200
Subject: Fix typo

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 1d5e804e9..5fd44e373 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1084,7 +1084,7 @@ For example, <code>section</code> should be wrapped as inline.
           Add text or buttons before or after any text-based input. Do note that select elements are not supported here.
 
           Default options
-          Wrap a .add-on and an input with one of two classes to prepend or append text to an input.
+          Wrap an .add-on and an input with one of two classes to prepend or append text to an input.
           
             
               @
-- 
cgit v1.2.3


From 663fd4ff620b2a79cfba97623f24c3f1ff8c01fd Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 15:29:55 +0200
Subject: Make Extending form ... => Search form code snippet the same as
 example

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 5fd44e373..df307c381 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1157,8 +1157,14 @@ For example, <code>section</code> should be wrapped as inline.
           
  <form class="form-search">
-  <input type="text" class="span2 search-query">
-  <button type="submit" class="btn">Search</button>
+  <div class="input-append">
+    <input type="text" class="span2 search-query">
+    <button type="submit" class="btn">Search</button>
+  </div>
+  <div class="input-prepend">
+    <input type="text" class="span2 search-query">
+    <button type="submit" class="btn">Search</button>
+  </div>
 </form>
 
 
-- 
cgit v1.2.3


From 01dadc05f4522250f7a06b28ce27f8a0c3a91997 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 15:31:11 +0200
Subject: Make Relative sizing code snippet the same as example

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index df307c381..85dab82e3 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1183,12 +1183,12 @@ For example, <code>section</code> should be wrapped as inline.
             
           
 -<input class="input-mini" type="text">
-<input class="input-small" type="text">
-<input class="input-medium" type="text">
-<input class="input-large" type="text">
-<input class="input-xlarge" type="text">
-<input class="input-xxlarge" type="text">
+<input class="input-mini" type="text" placeholder=".input-mini">
+<input class="input-small" type="text" placeholder=".input-small">
+<input class="input-medium" type="text" placeholder=".input-medium">
+<input class="input-large" type="text" placeholder=".input-large">
+<input class="input-xlarge" type="text" placeholder=".input-xlarge">
+<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
 
           
             Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.
-- 
cgit v1.2.3


From f37d4b0918bbcdd507c31f81d00621d03acf0248 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 15:43:00 +0200
Subject: Add missing placeholders and  into Help text code snippet as shown in example

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 50fa1a8f8..b3cb0466a 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1303,7 +1303,7 @@ For example, <code>section</code> should be wrapped as inline.
              Inline help text
           
 
-<span class="help-inline">Inline help text</span>
+<input type="text"><span class="help-inline">Inline help text</span>
 
 
           Block help
@@ -1312,7 +1312,7 @@ For example, <code>section</code> should be wrapped as inline.
             A longer block of help text that breaks onto a new line and may extend beyond one line.
           
 -<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+<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>
 
 
 
-- 
cgit v1.2.3


From a3c474c4048eff0c43b24bc8134b7ca753ced975 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 16:07:48 +0200
Subject: Move code within  tags as close to the left for Input focus

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index b3cb0466a..7b09e7175 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1327,9 +1327,9 @@ For example, <code>section</code> should be wrapped as inline.
           
             
           
-  -  <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
-  
++<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+
 
           Disabled inputs
           Add the disabled attribute on an input to prevent user input and trigger a slightly different look.
-- 
cgit v1.2.3


From 41253fb07366e49557d611b98d68b6057ca47417 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 16:36:40 +0200
Subject: Improve doc for Button sizes

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 7b09e7175..c84a42cf7 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1460,30 +1460,42 @@ For example, <code>section</code> should be wrapped as inline.
 
 
           Button sizes
-          Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.
+          Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.
           
             
-              
-              
+              
+              
             
             
-              
-              
+              
+              
             
             
-              
-              
+              
+              
             
             
-              
-              
+              
+              
             
           
 -<button class="btn btn-large" type="button">Large button</button>
-<button class="btn btn-small" type="button">Small button</button>
-<button class="btn" type="button">Default button</button>
-<button class="btn btn-mini" type="button">Mini button</button>
+<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.
           
-- 
cgit v1.2.3


From 7b7a02542b5fa46338bc14fd83ca9b84d43c6b55 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 16:41:40 +0200
Subject: Improve doc for block level buttons

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index c84a42cf7..584ce7d07 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1500,11 +1500,14 @@ For example, <code>section</code> should be wrapped as inline.
           Create block level buttons—those that span the full width of a parent— by adding .btn-block.
           
             
-              
+              
               
             
           
-          <button class="btn btn-large btn-block" type="button">Block level button</button>
++<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
-- 
cgit v1.2.3


From 04a20fb402e45c4362c6e7804efb21d77f45e6a6 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 16:47:15 +0200
Subject: Use one line per tag in code snippet for One class, multiple tags

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 584ce7d07..c1b13655d 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1550,13 +1550,9 @@ For example, <code>section</code> should be wrapped as inline.
           
  <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">
+<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 you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.
 
-- 
cgit v1.2.3


From 2ab0c8de1ab01986d4dacdd3455eaea6fe8a65a4 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 16:50:08 +0200
Subject: Fix typo in One class, multiple tags section

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index c1b13655d..069b79047 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1554,7 +1554,7 @@ For example, <code>section</code> should be wrapped as inline.
 <input class="btn" type="button" value="Input">
 <input class="btn" type="submit" value="Submit">
 
-          As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.
+          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.

-- cgit v1.2.3 From f1854a3cec75c56093ae920ab532bca51d6fdbb6 Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 16:53:43 +0200 Subject: Move code within

 tags as close to the left for Images section

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 069b79047..cd46ec047 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1574,9 +1574,9 @@ For example, <code>section</code> should be wrapped as inline.
             
           
 -  <img src="..." class="img-rounded">
-  <img src="..." class="img-circle">
-  <img src="..." class="img-polaroid">
+<img src="..." class="img-rounded">
+<img src="..." class="img-circle">
+<img src="..." class="img-polaroid">
 
 
 
-- 
cgit v1.2.3


From d8eb75d6e83a20f087856258cbd66ef01edee823 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 18:14:20 +0200
Subject: Fix Heads up! part for Images section

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index cd46ec047..67065bcc0 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1567,7 +1567,8 @@ For example, <code>section</code> should be wrapped as inline.
             Images
           
 
-          Simple classes to easily style images in any project. Heads up: .img-rounded and .img-circle don't work in IE7-8.
+          Simple classes to easily style images in any project.
+          Heads up! .img-rounded and .img-circle don't work in IE7-8.
           
             
             
-- 
cgit v1.2.3


From 97247a157c6d8c5a1c42461a3a7b569ecb930e86 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 18:24:18 +0200
Subject: Improve description for Images section

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 67065bcc0..1428e38ec 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1567,7 +1567,7 @@ For example, <code>section</code> should be wrapped as inline.
             Images
           
 
-          Simple classes to easily style images in any project.
+          Add the .img-rounded, .img-circle or .img-polaroid class to a <img> element to easily style images in any project.
           Heads up! .img-rounded and .img-circle don't work in IE7-8.
           
             
-- 
cgit v1.2.3


From d71efb855bda3ecd0b0fd079d2d9cb231c8ba71b Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 19:21:01 +0200
Subject: Separate Buttons examples in Icon examples section and add code
 snippets

---
 docs/base-css.html | 66 +++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 51 insertions(+), 15 deletions(-)

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 1428e38ec..40bfbcf06 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1770,30 +1770,66 @@ For example, <code>section</code> should be wrapped as inline.
           Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
 
           Buttons
+
+          Button group in a button toolbar
           
-            
+            
               
                 
                 
                 
                 
               
-              


-              
-                 User
-                
-                
-                   Edit
-                   Delete
-                   Ban
-                  
-                   Make admin
-                
-              
-              


-              
             
           
++<div class="btn-toolbar">
+  <div class="btn-group">
+
+    <a class="btn" href="#"><i class="icon-align-left"></i></a>
+    <a class="btn" href="#"><i class="icon-align-center"></i></a>
+    <a class="btn" href="#"><i class="icon-align-right"></i></a>
+    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
+  </div>
+</div>
+
+
+          Dropdown in a button group
+          
+            
+               User
+              
+              
+                 Edit
+                 Delete
+                 Ban
+                
+                 Make admin
+              
+            
+          
++<div class="btn-group">
+  <a class="btn btn-primary" href="#"><i class="icon-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="icon-pencil"></i> Edit</a></li>
+    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
+    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><i class="i"></i> Make admin</a></li>
+  </ul>
+</div>
+
+
+          Button
+          
+            
+          
++<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+
+
 
           Navigation
           
-- 
cgit v1.2.3


From 8b763286df34d4eadd8e5a254b7390a6c1ccbc3e Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 19:31:29 +0200
Subject: Add code snippet to Icon examples => Navigation section

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 40bfbcf06..3a8a928d0 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1842,6 +1842,14 @@ For example, <code>section</code> should be wrapped as inline.
               
             
           
++<ul class="nav nav-list">
+  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
+  <li><a href="#"><i class="icon-book"></i> Library</a></li>
+  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
+  <li><a href="#"><i class="i"></i> Misc</a></li>
+</ul>
+
 
           Form fields
           
-- 
cgit v1.2.3


From 2327d30ef5bcbebd5519488178534f2b09de89af Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 19:40:42 +0200
Subject: Add code snippet to Icon examples => Form fields section

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 3a8a928d0..549bb415d 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1862,6 +1862,15 @@ For example, <code>section</code> should be wrapped as inline.
               
             
           
++<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="icon-envelope"><i><span><input class="span2" id="inputIcon" type="text">
+  </div>
+</div>
+
 
         
 
-- 
cgit v1.2.3


From 3f12c746e59de41fc13964a70eaa31891f71c760 Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 19:49:27 +0200
Subject: Replace Note: by Heads up!

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 549bb415d..30c7f8d3f 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -420,7 +420,7 @@ For example, <code>section</code> should be wrapped as inline.
   &lt;p&gt;Sample text here...&lt;/p&gt;
 </pre>

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

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.

-- cgit v1.2.3 From b7233a49dd42a17032389351f340c8175d77f36a Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 19:51:57 +0200 Subject: Move code within code snippet as close to the left for Basic block --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 30c7f8d3f..718beee6d 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -417,7 +417,7 @@ For example, <code>section</code> should be wrapped as inline.

 <pre>
-  &lt;p&gt;Sample text here...&lt;/p&gt;
+&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.

-- cgit v1.2.3 From ae275dccb82023c9e8f0b8d8b689566ad07db8d9 Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 21:44:57 +0200 Subject: Fix empty for attribute on labels in Horizontal form --- docs/base-css.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 718beee6d..6c9208907 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -906,15 +906,15 @@ For example, <code>section</code> should be wrapped as inline.

Legend

- Email + Email

- +

- Password + Password

- +

@@ -929,15 +929,15 @@ For example, <code>section</code> should be wrapped as inline.

 <form class="form-horizontal">
   <div class="control-group">
-    <label class="control-label" for="">Email</label>
+    <label class="control-label" for="inputEmail">Email</label>
     <div class="controls">
-      <input type="text" placeholder="Email">
+      <input type="text" id="inputEmail" placeholder="Email">
     </div>
   </div>
   <div class="control-group">
-    <label class="control-label" for="">Password</label>
+    <label class="control-label" for="inputPassword">Password</label>
     <div class="controls">
-      <input type="password" placeholder="Password">
+      <input type="password" id="inputPassword" placeholder="Password">
     </div>
   </div>
   <div class="control-group">
-- 
cgit v1.2.3


From dda951d1e1283738c132f1132e9dec28f27fa1ec Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 21:52:43 +0200
Subject: Remove inexisting end tag 

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

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 6c9208907..363f91a02 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -855,7 +855,7 @@ For example, <code>section</code> should be wrapped as inline.

Optional layouts

@@ -952,7 +952,7 @@ For example, <code>section</code> should be wrapped as inline. -

Supported form controls

@@ -1074,7 +1074,7 @@ For example, <code>section</code> should be wrapped as inline. -

Extending form controls

@@ -1316,7 +1316,7 @@ For example, <code>section</code> should be wrapped as inline. -

Form control states

-- cgit v1.2.3 From 9ae137aede2ec2664793c3d67c99c81188f1c6f5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 18 Aug 2012 16:42:50 -0700 Subject: modifications to new content --- docs/base-css.html | 39 +++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 18 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 363f91a02..9c7569563 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -406,18 +406,21 @@

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

<p>Sample text here...</p>

 <pre>
-&lt;p&gt;Sample text here...&lt;/p&gt;
+  &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.

@@ -802,17 +805,17 @@ For example, <code>section</code> should be wrapped as inline.

 <table>
-  <caption>…</caption>
+  <caption>...</caption>
   <thead>
     <tr>
-      <th>…</th>
-      <th>…</th>
+      <th>...</th>
+      <th>...</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>…</td>
-      <td>…</td>
+      <td>...</td>
+      <td>...</td>
     </tr>
   </tbody>
 </table>
@@ -1040,7 +1043,7 @@ For example, <code>section</code> should be wrapped as inline.
           Use the default option or specify a multiple="multiple" to show multiple options at once.

Typography Headings, paragraphs, lists, and other inline type elements

Headings & body copy

Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Typographic scale

Example body text

Lead body copy

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Body copy

Lead body copy

Built with Less

Emphasis, address, and abbreviation

Using emphasis

Example addresses

Example abbreviations

Using emphasis

Example addresses

Example abbreviations

Blockquotes

Example blockquotes

Lists

Unordered

Unordered

Unstyled

Unstyled

Ordered

Description

Horizontal description

Ordered

Description

Horizontal description

Code Inline and block code snippets

Inline

Inline

Basic block

Basic block

Google Prettify

Google Prettify

Table markup

Table options

Example tables

1. Default table styles

2. Striped table

3. Bordered table

4. Condensed table

5. Combine them all!

Forms

Flexible HTML and CSS

Four layouts included

Control states and more

Flexible HTML and CSS

Four layouts included

Control states and more

Four types of forms

Example forms using just form controls, no extra markup

Basic form

Basic form

Search form

Search form

Inline form

Inline form

Horizontal forms

Example markup

Example markup

Form control states

Form validation

Form validation

Extending form controls

Prepend & append inputs

Checkboxes and radios