Date: Mon, 23 Jan 2012 14:14:16 -0800 Subject: add templates for doc generation --- docs/templates/layout.mustache | 144 +++ docs/templates/pages/base-css.mustache | 1427 +++++++++++++++++++++++++++++ docs/templates/pages/components.mustache | 1176 ++++++++++++++++++++++++ docs/templates/pages/index.mustache | 188 ++++ docs/templates/pages/javascript.mustache | 1299 ++++++++++++++++++++++++++ docs/templates/pages/less.mustache | 406 ++++++++ docs/templates/pages/scaffolding.mustache | 311 +++++++ docs/templates/pages/upgrading.mustache | 86 ++ 8 files changed, 5037 insertions(+) create mode 100644 docs/templates/layout.mustache create mode 100644 docs/templates/pages/base-css.mustache create mode 100644 docs/templates/pages/components.mustache create mode 100644 docs/templates/pages/index.mustache create mode 100644 docs/templates/pages/javascript.mustache create mode 100644 docs/templates/pages/less.mustache create mode 100644 docs/templates/pages/scaffolding.mustache create mode 100644 docs/templates/pages/upgrading.mustache (limited to 'docs/templates') diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache new file mode 100644 index 000000000..cc36a05ed --- /dev/null +++ b/docs/templates/layout.mustache @@ -0,0 +1,144 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + + + + + +

+ +{{>body}} + + + + +

+ + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache new file mode 100644 index 000000000..3933c867d --- /dev/null +++ b/docs/templates/pages/base-css.mustache @@ -0,0 +1,1427 @@ + +

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 & body copy

+ + +

Typographic scale

The entire typographic grid is based on two Less variables in our preboot.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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

+ + +

Emphasis, address, and abbreviation

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

Element	Usage	Optional
+ `<strong>` +	+ For emphasizing a snippet of text with important +	+ None +
+ `<em>` +	+ For emphasizing a snippet of text with stress +	+ None +
+ `<abbr>` +	+ Wraps abbreviations and acronyms to show the expanded version on hover +	+ Include optional `title` for expanded text +
+ `<address>` +	+ For contact information for its nearest ancestor or the entire body of work +	+ Preserve formatting by ending all lines with `<br>` +

+ +

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 are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.

HTML is the best thing since sliced bread.

An abbreviation of the word attribute is attr.

+ + + +

Blockquotes

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

Element	Usage	Optional
+ `<blockquote>` +	+ Block-level element for quoting content from another source +	+ Add `cite` attribute for source URL + Use `.pull-left` and `.pull-right` classes for floated options +
+ `<small>` +	+ Optional element for adding a user-facing citation, typically an author with title of work +	+ Place the `<cite>` around the title or name of source +

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 +

+ + + +

Lists

Unordered

<ul>

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

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

+ + + + +

Code Inline and block

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

Element	Result
`<code>`	In a line of text like this, your wrapped code will look like this `<html>` element.
`<pre>`	+ <div> + <h1>Heading</h1> + <p>Something right here...</p> +</div> + Note: Be sure to keep code within `<pre>` tags as close to the left as possible; it will render all tabs. +
`<pre class="prettyprint">`	+ Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers. + <div> + <h1>Heading</h1> + <p>Something right here...</p> +</div> + <div> + <h1>Heading</h1> + <p>Something right here...</p> +</div> + Download google-code-prettify and view the readme for how to use. +

+ + +

Inline labels for special attention

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

Labels	Markup
+ Default +	+ `<span class="label">Default</span>` +
+ New +	+ `<span class="label success">New</span>` +
+ Warning +	+ `<span class="label warning">Warning</span>` +
+ Important +	+ `<span class="label important">Important</span>` +
+ Notice +	+ `<span class="label notice">Notice</span>` +

+ +

+ + + + +

+ + +

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

+<table class="table">
+  ...
+</table>

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

#	First Name	Last Name	Language
1	Mark	Otto	CSS
2	Jacob	Thornton	Javascript
3	Stu	Dent	HTML

+ + +

2. Striped table

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

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

+<table class="table table-striped">
+  ...
+</table>

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

#	First Name	Last Name	Language
1	Mark	Otto	CSS
2	Jacob	Thornton	Javascript
3	Stu	Dent	HTML

+ + +

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	Language
1	Mark Otto		CSS
2	Jacob	Thornton	Javascript
3	Stu	Dent	Javascript
3	Brosef	Stalin	HTML

+ + +

4. Condensed table

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

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

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

#	First Name	Last Name	Language
1	Mark	Otto	CSS
2	Jacob	Thornton	Javascript
3	Stu	Dent	HTML

+ + + +

5. Striped table w/ TableSorter.js

Include the jQuery Tablesorter plugin and automaically get clear styles for sorted columns.

+<script src="jquery.tablesorter.js"></script>
+<script >
+  $(function() {
+    $("table#sortTableExample")
+    .tablesorter({
+      sortList: [[1,0]]
+    });
+  });
+</script>
+<table class="table table-striped">
+  ...
+</table>

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

#	First Name	Last Name	Language
1	Mark	Otto	CSS
2	Jacob	Thornton	Javascript
3	Stu	Dent	HTML
4	Brosef	Stalin	HTML

Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.

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

#	First Name	Last Name	Language
1	Mark	Otto	CSS
2	Jacob	Thornton	Javascript
3	Stu	Dent	HTML
4	Brosef	Stalin	HTML

+ + + + +

+ +

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.

+ +

Four types of forms

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

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

Name	Class	Description
Vertical (default)	`.vertical-form` (not required)	Stacked, left-aligned labels over controls
Horizontal	`.form-horizontal`	Float left, right-aligned labels on same line as 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

+ + +

Example forms using just form controls, no extra markup

Basic form

With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.

+ +

Search form

Reflecting default WebKit styles, just add .form-search for extra rounded search fields.

+ +

Inline form

Inputs are block level to start. For .form-inline and .form-horizontal, we use inline-block.

+ +

+ +
+ +

Horizontal forms

+ Controls Bootstrap supports +

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

+ +

+ Multi-select +

+ +

+ File input +

+ +

+ Textarea +

+ +

+ + +

What's included

Shown on the left 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

New defaults with v2.0

Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.

+ +
+ +

+ +

Redesigned browser states

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

Form validation

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

+<fieldset
+  class="control-group error">
+  ...
+</fieldset>
+

+ +
+ +

+ Extending form controls +

+ Form sizes +

+ + + +

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

+ Prepended text +

+ @ + +

Here's some help text

+ Appended text +

+ + .00 +

Here's more help text

+ 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 is something else and selecting it will deselect option one + +

+ + +

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.

+ + + +

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

Button	Class	Description
Default	`.btn`	Standard gray button with gradient
Primary	`.primary`	Provides extra visual weight and identifies the primary action in a set of buttons
Info	`.info`	Used as an alternate to the default styles
Success	`.success`	Indicates a successful or positive action
Danger	`.danger`	Indicates a dangerous or potentially negative action

+ +

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.

For anchors and forms

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

Note: All buttons must include the .btn class. Button styles should be applied to <button> and <a> elements for consistency.

+ +

Multiple sizes

Fancy larger or smaller buttons? Have at it!

+ Primary action + Action +

Disabled state

For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.

+ Primary action + Action +

+ +

+ +
+ +

+ + + + +

+ +

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

+ + + + + + + + + + +

Light red background color is only used to show the dimensions of the icons in the docs.

+ +
+ +

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.

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

How to use

With v2.0.0, the <i> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:

+<i class="chevron-left"></i>
+

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

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 nav
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, or in button groups for a toolbar style presentation.

+ Refresh + Settings +

+ +

Or, use them in navigation.

\ No newline at end of file diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache new file mode 100644 index 000000000..21ddf4747 --- /dev/null +++ b/docs/templates/pages/components.mustache @@ -0,0 +1,1176 @@ + +

Components

Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

+ + + +

+ +

Button groups

Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.

+ Left + Middle + Right +

+ +

Example markup

Here's how the HTML looks for a standard button group built with anchor tag buttons:

+<div class="btn-group">
+  <a class="btn" href="#">1</a>
+  <a class="btn" href="#">2</a>
+  <a class="btn" href="#">3</a>
+</div>
+

And with a toolbar for multiple groups:

+<div class="btn-toolbar">
+  <div class="btn-group">
+    ...
+  </div>
+</div>
+

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

Get the javascript »

Heads up

CSS for button groups is in a separate file, button-groups.less.

+ + + + +

+ +

Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

+ + +

Example markup

Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

+<div class="btn-group">
+  <a class="btn" href="#">Action</a>
+  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+    <span class="caret"></span>
+  </a>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+

+ + + + +

+ + +

Lightweight defaults Same markup, different classes

Powerful base class

All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.

Why tabs and pills

Tabs and pills in Bootstrap are built on a <ul> with the same core HTML, a list of links. Swap between tabs or pills with only a class.

Both options are great for sub-sections of content or navigating between pages of related content.

Basic tabs

Take a regular <ul> of links and add .tabs:

+<ul class="nav tabs">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">...</a></li>
+  <li><a href="#">...</a></li>
+</ul>
+

Basic pills

Take that same HTML, but use .pills instead:

+<ul class="nav pills">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">...</a></li>
+  <li><a href="#">...</a></li>
+</ul>
+

+ +

Stackable Make tabs or pills vertical

How to stack 'em

As tabs and pills are horizontal by default, just add a second class, .stacked, to make them appear vertically stacked.

Stacked tabs

+<ul class="nav tabs stacked">
+  ...
+</ul>
+

Stacked pills

+<ul class="nav pills stacked">
+  ...
+</ul>
+

+ +

Dropdowns For advanced nav components

Rich menus made easy

Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.

Head over to the Javascript page to read the docs on initializing dropdowns in Bootstrap.

Tabs with dropdowns

Home
Profile
+ Dropdown +
- Action
- Another action
- Something else here
- Separated link
+

+<ul class="nav tabs">
+  <li class="dropdown">
+    <a class="dropdown-toggle"
+       data-toggle="dropdown"
+       href="#">
+        Dropdown
+        <b class="caret"></b>
+      </a>
+    <ul class="dropdown-menu">
+      <!-- links -->
+    </ul>
+  </li>
+</ul>
+

Pills with dropdowns

Home
Profile
+ Dropdown +
- Action
- Another action
- Something else here
- Separated link
+

+<ul class="nav pills">
+  <li class="dropdown">
+    <a class="dropdown-toggle"
+       data-toggle="dropdown"
+       href="#">
+        Dropdown
+        <b class="caret"></b>
+      </a>
+    <ul class="dropdown-menu">
+      <!-- links -->
+    </ul>
+  </li>
+</ul>
+

+ +

Nav lists Build simple stacked navs, great for sidebars

Application-style navigation

Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.

With icons

Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.

Example nav list

Take a list of links and add class="nav list":

List header
Home
Library
Applications
Another list header
Profile
Settings
Help

+<ul class="nav list">
+  <li class="nav-header">
+    List header
+  </li>
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li>
+    <a href="#">Library</a>
+  </li>
+  ...
+</ul>
+

Example with icons

Same example, but with <i> tags for icons.

List header
Home
Library
Applications
Another list header
Profile
Settings
Help

+<ul class="nav list">
+  ...
+  <li>
+    <a href="#">
+      <i class="book"></i>
+      Library
+    </a>
+  </li>
+  ...
+</ul>
+

+ + +

Tabbable nav Bring tabs to life via javascript

What's included

Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

Changing between them is easy and only requires changing very little markup.

Tabbable example

To make tabs tabbable, wrap the .tabs in another div with class .tabbable.

Section 1
Section 2
Section 3

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Custom jQuery plugin

All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

Get the javascript →

+ +

Straightforward markup

Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

+<div class="tabbable">
+  <ul class="nav tabs">
+    <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
+    <li><a href="#2" data-toggle="tab">Section 2</a></li>
+  </ul>
+  <div class="tab-content">
+    <div class="tab-pane active" id="1">
+      <p>I'm in Section 1.</p>
+    </div>
+    <div class="tab-pane" id="2">
+      <p>Howdy, I'm in Section 2.</p>
+    </div>
+  </div>
+</div>
+

+ +

Tabbable in any direction

+ +

Tabs on the bottom

Flip the order of the HTML and add a class to put tabs on the bottom.

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

Section 1
Section 2
Section 3

+<div class="tabbable tabs-bottom">
+  <ul class="nav tabs">
+    ...
+  </ul>
+  <div class="tab-content">
+    ...
+  </div>
+</div>
+

Tabs on the left

Swap the class to put tabs on the left.

Section 1
Section 2
Section 3

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

+<div class="tabbable tabs-left">
+  <ul class="nav tabs">
+    ...
+  </ul>
+  <div class="tab-content">
+    ...
+  </div>
+</div>
+

Tabs on the right

Swap the class to put tabs on the right.

Section 1
Section 2
Section 3

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

+<div class="tabbable tabs-right">
+  <ul class="nav tabs">
+    ...
+  </ul>
+  <div class="tab-content">
+    ...
+  </div>
+</div>
+

+ +

+ + + + +

+ +

Static navbar example

An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

+ + +

Navbar scaffolding

The navbar requires only a few divs to structure it well for static or fixed display.

+<div class="navbar navbar-static">
+  <div class="navbar-inner">
+    <div class="container">
+      ...
+    </div>
+  </div>
+</div>
+

To make the navbar fixed, swap the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

+<div class="navbar navbar-fixed">
+  ...
+</div>
+

Brand name

A simple link to show your brand or project name only requires an anchor tag.

+<a class="brand" href="#">
+  Project name
+</a>
+

Search form

Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.

+<form class="navbar-search">
+  <input type="text" class="search-query pull-left" placeholder="Search">
+</form>
+

Nav links

Nav items are simple to add via unordered lists.

+<ul class="nav">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">Link</a></li>
+  <li><a href="#">Link</a></li>
+</ul>
+

Adding dropdowns

Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.

+<ul class="nav">
+  <li class="dropdown">
+    <a href="#"
+          class="dropdown-toggle"
+          data-toggle="dropdown">
+          Account
+          <b class="caret"></b>
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+

Get the javascript →

+ +

+ + + + +

+ + +

Why use them

Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.

+ +

Examples

A single example shown as it might be displayed across multiple pages.

+ + + +

Markup

HTML is your standard unordered list with links.

+<ul class="breadcrumb">
+  <li>
+    <a href="#">Home</a> <span class="divider">/</span>
+  </li>
+  <li>
+    <a href="#">Library</a> <span class="divider">/</span>
+  </li>
+  <li class="active">
+    <a href="#">Data</a>
+  </li>
+</ul>
+

+ +

+ + + + +

+ + +

Multi-page pagination

When to use

Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Stateful page links

Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

Flexible alignment

Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

Examples

The default pagination component is flexible and works in a number of variations.

Markup

Wrapped in a <div>, pagination is just a <ul>.

+<div class="pagination">
+  <ul>
+    <li><a href="#">Prev</a></li>
+    <li class="active">
+      <a href="#">1</a>
+    </li>
+    <li><a href="#">2</a></li>
+    <li><a href="#">3</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">Next</a></li>
+  </ul>
+</div>
+

+ +

Pager For quick previous and next links

About pager

The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.

+ +

+<ul class="pager">
+  <li>
+    <a href="#">Previous</a>
+  </li>
+  <li>
+    <a href="#">Next</a>
+  </li>
+</ul>
+

Aligned links

Alternatively, you can align each link to the sides:

+ +

+<ul class="pager">
+  <li class="previous">
+    <a href="#">&larr; Older</a>
+  </li>
+  <li class="next">
+    <a href="#">Newer &rarr;</a>
+  </li>
+</ul>
+

+ + + + +

+ + +

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

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

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

+
+ +
+
Thumbnail label
+
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
Action Action
+
+
+
+
+ +
+
Thumbnail label
+
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
Action Action
+
+
+

+ +

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

+ +

The markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

+<ul class="thumbnails">
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/210x150" alt="">
+    </a>
+  </li>
+  ...
+</ul>
+

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

+<ul class="thumbnails">
+  <li class="span3">
+    <div class="thumbnail">
+      <img src="http://placehold.it/210x150" alt="">
+      <h5>Thumbnail label</h5>
+      <p>Thumbnail caption right here...</p>
+    </div>
+  </li>
+  ...
+</ul>
+

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

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

+ +

+ + + + +

+ + +

Lightweight defaults

Rewritten base class

With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.

Single alert message

For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.

Goes great with javascript

Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

Get the plugin »

Example alerts

Wrap your message and an optional close icon in a div with simple class.

+ × + Warning! Best check yo self, you’re not looking too good. +

+<div class="alert">
+  <a class="close">×</a>
+  <strong>Warning!</strong> Best check yo self, you’re not looking too good.
+</div>
+

Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

+ × +

Warning!

Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+<div class="alert alert-block">
+  <a class="close">×</a>
+  <h4 class="alert-heading">Warning!</h4>
+  Best check yo self, you’re not...
+</div>
+

+ +

Contextual alternatives Add optional classes to change an alert's connotation

Error or danger

+ × + Oh snap! Change a few things up and try submitting again. +

+<div class="alert alert-error">
+  ...
+</div>
+

Success

+ × + Well done! You successfully read this important alert message. +

+<div class="alert alert-success">
+  ...
+</div>
+

Information

+ × + Heads up! This alert needs your attention, but it’s not super important. +

+<div class="alert alert-info">
+  ...
+</div>
+

+ +

+ + + + +

+ + +

Examples and markup

Basic

Default progress bar with a vertical gradient.

+<div class="progress">
+  <div class="bar"
+       style="width: 60%;"></div>
+</div>
+

Striped

Uses a gradient to create a striped effect.

+<div class="progress info
+     striped">
+  <div class="bar"
+       style="width: 20%;"></div>
+</div>
+

Animated

Takes the striped example and animates it.

+<div class="progress danger
+     striped active">
+  <div class="bar"
+       style="width: 40%;"></div>
+</div>
+

+ +

Options and browser support

Additional colors

Progress bars utilize some of the same classes as buttons and alert messages for quick styling.

.info
.success
.danger

Alternatively, you can customize the LESS files and roll your own colors and sizes.

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.

Opera does not support animations at this time.

+ +

\ No newline at end of file diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache new file mode 100644 index 000000000..f07116a5a --- /dev/null +++ b/docs/templates/pages/index.mustache @@ -0,0 +1,188 @@ +

+ + +

Bootstrap,
from Twitter

Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.

+ Download on GitHub + Get started → +

+ +

Feature highlights

× Built on LESS
× Complete styleguide docs
× Fully responsive design
× Small footprint (7kb gzipped)
× Support for IE7 and up
× Custom jQuery plugins
× Dozens of components

+ +

Quick links
GitHub
Issues
Roadmap
Changelog
·
+ +
+ +
·
+ Follow @twbootstrap +
+ Tweet +

+ + +

Built with Bootstrap.

For even more sites built with Bootstrap, visit the unofficial Tumblr.

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

+ +

Designed for everyone, everywhere.

Need reasons to love Bootstrap? Look no further.

Built for and by nerds

Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

For all skill levels

Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

Cross-everything

Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

12-column grid

Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

Responsive design

With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

Styleguide docs

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

Growing library

Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

Custom jQuery plugins

What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

Built on LESS

Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

HTML5

Built to support new HTML5 elements and syntax.

CSS3

Progressively enhanced components for ultimate style.

Open-source

Built for and maintained by the community via GitHub.

Made at Twitter

Brought to you by an experienced engineer and designer.

+ + + +

Get started in no time.

Quickly start using Bootstrap within your workflow and development process.

+ + + + + + + + +

Hotlink the CSS

For the quickest and easiest start, just copy this snippet into your webpage.

+ +

Use it with LESS

A fan of using LESS? No problem, just clone the repo and add these lines:

+ +

Fork on GitHub

Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.

Bootstrap on GitHub »

Currently v2.0.0

\ No newline at end of file diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache new file mode 100644 index 000000000..aefe87846 --- /dev/null +++ b/docs/templates/pages/javascript.mustache @@ -0,0 +1,1299 @@ + +

Javascript for Bootstrap

Bring Bootstrap's components to life—now with 12 custom jQuery plugins. +

+ + + + + + + + +

+ +

About modals

A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.

+ Download file +

Static example

Below is a statically rendered modal.

+ +

Live demo

Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.

+ + + Launch demo modal + +

+ +

Using bootstrap-modal

Call the modal via javascript:

$('#myModal').modal(options)

Options

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

Name	type	default	description
backdrop	boolean	true	Includes a modal-backdrop element
keyboard	boolean	true	Closes the modal when escape key is pressed

Markup

You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal.

Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.

+<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
+

+ +

+<div class="modal">
+<div class="modal-header">
+<a href="#" class="close js-dismiss">×</a>
+<h3>Modal header</h3>
+</div>
+<div class="modal-body">
+<p>One fine body…</p>
+</div>
+<div class="modal-footer">
+<a href="#" class="btn primary">Save changes</a>
+<a href="#" class="btn">Close</a>
+</div>
+</div>
+

Notice If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action).

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object. +

+$('#myModal').modal({
+keyboard: false
+})

.modal('toggle')

Manually toggles a modal.

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal.

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal.

$('#myModal').modal('hide')

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

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

Event	Description
show	This event fires immediately when the `show` instance method is called.
shown	This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide	This event is fired immediately when the `hide` instance method has been called.
hidden	This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

+ +

+$('#myModal').on('hidden', function () {
+// do something ...
+})

+ + + + +

+ +

About dropdowns

Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.

+ Download file +

Examples

Click on the dropdown nav links in the navbar and pills below to test dropdowns.

+ + +

Regular link
+ Dropdown +
- Action
- Another action
- Something else here
- Separated link
+
+ Dropdown 2 +
- Action
- Another action
- Something else here
- Separated link
+
+ Dropdown 3 +
- Action
- Another action
- Something else here
- Separated link
+

+ +

Using bootstrap-dropdown.js

Call the dropdowns via javascript:

$('.dropdown-toggle').dropdown()

Markup

To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.

Notice For added control and flexibility, optionally specify a data-target="#fat" or href="#fat" - this allows you to target specific dropdowns.

+ +

+<ul class="nav pills">
+<li class="active"><a href="#">Regular link</a></li>
+<li class="dropdown" id="menu1">
+<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
+  Dropdown
+  <b class="caret"></b>
+</a>
+<ul class="dropdown-menu">
+  <li><a href="#">Action</a></li>
+  <li><a href="#">Another action</a></li>
+  <li><a href="#">Something else here</a></li>
+  <li class="divider"></li>
+  <li><a href="#">Separated link</a></li>
+</ul>
+</li>
+...
+</ul>

Methods

$().dropdown()

+ A programatic api for activating menus for a given navbar or tabbed navigation. +

+ + + + +

+ +

The ScrollSpy plugin is for automatically updating nav targets based on scroll position.

+ Download file +

Example navbar with scrollspy

Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!

+ +

@fat

+ Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. +

@mdo

+ Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt. +

one

+ Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone. +

two

+ In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. +

three

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. +

Using bootstrap-scrollspy.js

Call the scrollspy via javascript:

$('#navbar').scrollspy()

Markup

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body). +

<body data-spy="scroll" >...</body>

Notice Navbar anchor tags must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>. +

Options

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

Name	type	default	description
offset	number	10	Pixels to offset from top when calculating position of scroll.

+ + + + +

+ +

This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.

+ Download file +

Example tabs

Click the tabs below to toggle between hidden panes, even via dropdown menus.

Home
Profile
+ Dropdown +
- @fat
- @mdo
+

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Using bootstrap-tab.js

Enable tabbable tabs via javascript:

$('#myTab').tab('show')

Markup

You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.

+<ul class="tabs">
+<li><a href="#home" data-toggle="tab">Home</a></li>
+<li><a href="#profile" data-toggle="tab">Profile</a></li>
+<li><a href="#messages" data-toggle="tab">Messages</a></li>
+<li><a href="#ettings" data-toggle="tab">Settings</a></li>
+</ul>

Methods

$().tab

+ Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom. +

+<ul class="tabs">
+<li class="active"><a href="#home">Home</a></li>
+<li><a href="#profile">Profile</a></li>
+<li><a href="#messages">Messages</a></li>
+<li><a href="#settings">Settings</a></li>
+</ul>
+
+<div class="tab-content">
+<div class="active" id="home">...</div>
+<div id="profile">...</div>
+<div id="messages">...</div>
+<div id="settings">...</div>
+</div>
+
+<script>
+$(function () {
+$('.tabs a:last').tab('show')
+})
+</script>

Events

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

Event	Description
show	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
shown	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.

+ +

+$('a[data-toggle="tab"]').on('shown', function (e) {
+e.target // activated tab
+e.relatedTarget // previous tab
+})

+ + + +

+ +

About Tooltips

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.

+ Download file +

Example use of Tooltips

Hover over the links below to see tooltips:

+ +

Using bootstrap-tooltip.js

Trigger the tooltip via javascript:

$('#example').tooltip(options)

Options

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

Name	type	default	description
animation	boolean	true	apply a css fade transition to the tooltip
placement	string	'top'	how to position the tooltip - top \| bottom \| left \| right
selector	string	false	If a selector is provided, tooltip objects will be delegated to the specified targets.
title	string \| function	''	default title value if `title` tag isn't present
trigger	string	'hover'	how tooltip is triggered - hover \| focus \| manual
delay	number \| object	0	+ delay showing/hiding the tooltip (ms) + If a number is supplied, delay is applied to both hide/show + Object structure is: `delay: { show: 500, hide: 100 }` +

Notice Individual tooltip instance options can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an elements tooltip.

$('#element').tooltip('show')

.tooltip('hide')

Hides an elements tooltip.

$('#element').tooltip('hide')

+ + + + +

+ +

About popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

* Requires Tooltip to be included

+ Download file +

Example hover popover

Hover over the button to trigger the popover.

+ hover for popover +

Using bootstrap-popover.js

Enable popovers via javascript:

$('#example').popover(options)

Options

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

Name	type	default	description
animation	boolean	true	apply a css fade transition to the tooltip
placement	string	'right'	how to position the popover - top \| bottom \| left \| right
selector	string	false	if a selector is provided, tooltip objects will be delegated to the specified targets
trigger	string	'hover'	how tooltip is triggered - hover \| focus \| manual
title	string \| function	''	default title value if `title` attribute isn't present
content	string \| function	''	default content value if `data-content` attribute isn't present
delay	number \| object	0	+ delay showing/hiding the popover (ms) + If a number is supplied, delay is applied to both hide/show + Object structure is: `delay: { show: 500, hide: 100 }` +

Notice Individual popover instance options can alternatively be specified through the use of data attributes.

Markup

+ For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option. +

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

$('#element').popover('show')

.popover('hide')

Hides an elements popover.

$('#element').popover('hide')

+ + + + +

+ +

About alerts

The alert plugin is a tiny class for adding close functionality to alerts.

+ Download +

Example alerts

The alerts plugin works on regular alert messages, and block messages.

+ × + Holy guacamole! Best check yo self, you’re not looking too good. +

+ × +

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

+ Take this action Or do this +

Using bootstrap-alerts.js

Enable dismissal of an alert via javascript:

$(".alert-message").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

<a class="close" data-dismiss="alert" href="#">&times;</a>

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert-message").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

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

Event	Description
close	This event fires immediately when the `close` instance method is called.
closed	This event is fired when the alert has been closed (will wait for css transitions to complete).

+$('#my-alert').bind('closed', function () {
+// do something ...
+})

+ + + + +

+ +

About

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

+ Download file +

Example uses

Use the buttons plugin for states and toggles.

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

Stateful	+ +
Single toggle	+ +
Checkbox	+ + + + + +
Radio	+ + + + + +

Using bootstrap-button.js

Enable buttons via javascript:

$('.tabs').button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

+<!-- Add data-toggle="button" to activate toggling on a single button -->
+<button class="btn" data-toggle="button">Single Toggle</button>
+
+<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
+<div class="btn-group" data-toggle="buttons-checkbox">
+<button class="btn">Left</button>
+<button class="btn">Middle</button>
+<button class="btn">Right</button>
+</div>
+
+<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
+<div class="btn-group" data-toggle="buttons-radio">
+<button class="btn">Left</button>
+<button class="btn">Middle</button>
+<button class="btn">Right</button>
+</div>
+

Methods

$().button('toggle')

Toggles push state. Gives btn the look that it's been activated.

Notice You can enable auto toggling of a button by using the data-toggle attribute.

<button class="btn" data-toggle="button" >...</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text. +

<button class="btn" data-loading-text="loading stuff..." >...</button>

+ Notice Firefox persists the disabled state across page loads. A workaround for this is to use: autocomplete="off". More info can be found here. +

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

<button class="btn" data-complete-text="finished!" >...</button>
+<script>
+$('.btn').button('complete')
+</script>

+ + + + +

+ +

About

Get base styles and flexible support for collapsible components like accordions and navigation.

+ Download file +

Example accordion

Using the collapse plugin, we built a simple accordion style widget:

+ +

+ + Collapsible Group Item #1 + +

+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +

+ + Collapsible Group Item #2 + +

+ + Collapsible Group Item #3 + +

+ + +

Using bootstrap-collapse.js

Enable via javascript:

$(".collapse").collapse()

Options

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

Name	type	default	description
parent	selector	false	If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)
toggle	boolean	true	Toggles the collapsible element on invocation

Markup

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

+<button class="btn danger" data-toggle="collapse" data-target="#demo">
+simple collapsible
+</button>
+
+<div id="demo" class="collapse in"> … </div>

Notice To add accordion like group management to a collapsible control just add the additional data attribute data-parent="#selector". Refer to the demo below to see this in action.

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object. +

+$('#myCollapsible').collapse({
+toggle: false
+})

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

+ Bootstrap's collapse class exposes a few events for hooking into collapse functionality. +

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

Event	Description
show	This event fires immediately when the `show` instance method is called.
shown	This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
hide	+ This event is fired immediately when the `hide` method has been called. +
hidden	This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).

+ +

+$('#myCollapsible').on('hidden', function () {
+// do something ...
+})

+ + + + +

+ +

About

A generic plugin for cycling through elements. A merry-go-round.

+ Download file +

Example carousel

Watch the slideshow below.

First Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ ‹ + › +

Using bootstrap-carousel.js

Call via javascript:

$('.carousel').carousel()

Options

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

Name	type	default	description
interval	number	5000	The amount of type to delay between automatically cycling an item.

Markup

Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.

+<div class="carousel">
+<!-- Carousel items -->
+<div class="carousel-inner">
+...
+</div>
+<!-- Carousel nav -->
+<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+</div>
+

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

+$('.myCarousel').carousel({
+interval: 2000
+})
+

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

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

Event	Description
slide	This event fires immediately when the `slide` instance method is invoked.
slid	This event is fired when the carousel has completed it's slide transition.

+ + + + +

+ +

About

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

+ Download file +

Example

Start typing in the field below to show the typeahead results.

+ +

Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

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

Name	type	default	description
items	number	8	The max number of items to display in the dropdown.

+ +

Markup

Add data attributes to register an element with typeahead functionality.

+<input type="text" data-provide="typeahead">
+

\ No newline at end of file diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache new file mode 100644 index 000000000..568e857be --- /dev/null +++ b/docs/templates/pages/less.mustache @@ -0,0 +1,406 @@ + +

Using LESS with Bootstrap

Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.

+ + + + + +

Why LESS?

Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

What's included?

As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

Learn more

Visit the official website at http://lesscss.org to learn more.

Variables

Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.

Mixins

Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.

Operations

Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.

+ + + + + + +

Hyperlinks

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

Variable	Value	Usage
`@linkColor`	#0069d6	Default link text color
`@linkColorHover`	`darken(@linkColor, 15)`	Default link text hover color

+ +

Grayscale colors

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

`@black`	#000
`@grayDark`	`lighten(@black, 25%)`
`@gray`	`lighten(@black, 50%)`
`@grayLight`	`lighten(@black, 75%)`
`@grayLighter`	`lighten(@black, 90%)`
`@white`	#fff

Accent colors

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

`@blue`	#049CDB
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

+ +

Grid system

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

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@siteWidth`	`(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))`

Typography

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

`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18px

+ +

Visuals

+ + + + + + + + +

`@primaryButtonColor`	`@blue`

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

+ +

Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.

Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.

How to use it

Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.

+<link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
+<script src="js/less-1.1.3.min.js"></script>

Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.

+ +

What’s included

Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.

Variables

Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.

+// Links
+@linkColor:         #8b59c2;
+@linkColorHover:    darken(@linkColor, 10);
+
+// Grays
+@black:             #000;
+@grayDark:          lighten(@black, 25%);
+@gray:              lighten(@black, 50%);
+@grayLight:         lighten(@black, 70%);
+@grayLighter:       lighten(@black, 90%);
+@white:             #fff;
+
+// Accent Colors
+@blue:              #08b5fb;
+@green:             #46a546;
+@red:               #9d261d;
+@yellow:            #ffc40d;
+@orange:            #f89406;
+@pink:              #c3325f;
+@purple:            #7a43b6;
+
+// Baseline grid
+@basefont:          13px;
+@baseline:          18px;
+

+ +

Commenting

Less also provides another style of commenting in addition to CSS’s normal /* ... */ syntax.

+// This is a comment
+/* This is also a comment */
+

+ +

Mixins up the wazoo

Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.

Font stacks

+#font {
+  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+    font-size: @size;
+    font-weight: @weight;
+    line-height: @lineHeight;
+  }
+  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: @size;
+    font-weight: @weight;
+    line-height: @lineHeight;
+  }
+  ...
+}
+

Gradients

+#gradient {
+  ...
+  .vertical (@startColor: #555, @endColor: #333) {
+    background-color: @endColor;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
+    background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
+    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+    background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
+    background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
+    background-image: linear-gradient(@startColor, @endColor); // The standard
+  }
+  ...
+}
+

+ +

Operations

Get fancy and perform some math to generate flexible and powerful mixins like the one below.

+// Griditude
+@gridColumns:       16;
+@gridColumnWidth:   40px;
+@gridGutterWidth:   20px;
+@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Make some columns
+.columns(@columnSpan: 1) {
+  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+}
+

+ +

Compiling Less

After modifying the .less files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.

Ways to compile

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

Method	Steps
Node with makefile	+ Install the LESS command line compiler with npm by running the following command: + $ npm install less + Once installed just run `make` from the root of your bootstrap directory and you're all set. + Additionally, if you have watchr installed, you may run `make watch` to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method). +
Javascript	+ Download the latest Less.js and include the path to it (and Bootstrap) in the `<head>`. + +<link rel="stylesheet/less" href="/path/to/bootstrap.less"> +<script src="/path/to/less.js"></script> + + To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage. +
Command line	+ Install the LESS command line tool via Node and run the following command: + $ lessc ./lib/bootstrap.less > bootstrap.css + Be sure to include `--compress` in that command if you're trying to save some bytes! +
Unofficial Mac app	+ The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. + If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in. +
Crunch	Crunch is a great looking LESS editor and compiler built on Adobe Air.
CodeKit	Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.
Simpless	Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

+ +

\ No newline at end of file diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache new file mode 100644 index 000000000..567ac6d0d --- /dev/null +++ b/docs/templates/pages/scaffolding.mustache @@ -0,0 +1,311 @@ + + +

Scaffolding

Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.

+ + + + +

+ + +

Default 940px grid

+ +

The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.

It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.

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

As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.

+ +

Offsetting columns

4 offset 4

3 offset 3

8 offset 4

+ +
+ +

Nesting columns

With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.

Example

+ Level 1 of column +

+ Level 2 +

+<div class="row">
+  <div class="span12">
+    Level 1 of column
+    <div class="row">
+      <div class="span6">Level 2</div>
+      <div class="span6">Level 2</div>
+    </div>
+  </div>
+</div>
+

+ +

Grid customization

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

Variable	Default value	Description
`@gridColumns`	12	Number of columns
`@gridColumnWidth`	60px	Width of each column
`@gridGutterWidth`	20px	Negative space between columns
`@siteWidth`	Computed sum of all columns and gutters	Counts number of columns and gutters to set width of the `.fixed-container()` mixin

Variables in LESS

Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.

How to customize

Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the four ways documented to recompile.

Staying responsive

Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.

+ +

+ + + + +

+ + +

Fixed layout

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.

+<body>
+  <div class="container">
+    ...
+  </div>
+</body>
+

Fluid layout

<div class="fluid-container"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.

+ +

+<body>
+  <div class="fluid-container sidebar-left">
+    <div class="fluid-sidebar">
+      ...
+    </div>
+    <div class="fluid-content">
+      ...
+    </div>
+  </div>
+</body>
+

+ + + + + +

+ + +

Supported devices

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

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

Label	Layout width	Column width	Gutter width
Smartphones	480px and below	Fluid columns, no fixed widths
Portrait tablets	480px to 768px	Fluid columns, no fixed widths
Landscape tablets	768px to 940px	44px	20px
Default	940px and up	60px	20px
Large display	1210px and up	70px	30px

+ +

What they do

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

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

+ +
+ + +

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

Use the compiled responsive version, bootstrap.reponsive.css
Add @import "responsive.less" and recompile Bootstrap
Compile responsive.less as a separate file and include that

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

+  // Landscape phones and down
+  @media (max-width: 480px) { ... }
+
+  // Landscape phone to portrait tablet
+  @media (min-width: 480px) and (max-width: 768px) { ... }
+
+  // Portrait tablet to landscape and desktop
+  @media (min-width: 768px) and (max-width: 940px) { ... }
+
+  // Large desktop
+  @media (min-width: 1210px) { .. }
+

\ No newline at end of file diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache new file mode 100644 index 000000000..a243d6ad5 --- /dev/null +++ b/docs/templates/pages/upgrading.mustache @@ -0,0 +1,86 @@ + +

Upgrading to Bootstrap 2

Learn about significant changes and additions since v1.4 with this handy guide.

+ + +

Rough outline

Docs completely overhauled +
- Responsive thanks to new grid system
- Now less marketing and more information
- Extensive use of tables to share classes and elements of most components
- Broken down into several pages for easier consumption
+
Updated grid system, now only 12 columns +
- Same great classes, but now only 12 columns
- Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more
+
New thumbnails (previously media grids) +
- .media-grid class has been changed to .thumbnails
- Individual thumbnails now require .thumbnail class
+
Updated forms +
- Default form style is now stacked to use less CSS and add flexibility
- Exact same markup is required for vertical or horizontal forms—just swap the classes
- New form defaults for search, inline, vertical, and horizontal
+
Updated tables +
- Table classes made more consistent
- Removed unused table color options (too much code for such little impact)
+
Typography +
- Right-aligned option for blockquotes if float: right;
- h4 elements were dropped from 16px to 14px with a default line-height of 18px
- h5 elements were dropped from 14px to 12px
- h6 elements were dropped from 13px to 11px
+
Buttons +
- Added button bar options
+
Examples +
- Fluid examples redone. .fluid-container now requires a .sidebar-left or .sidebar-right as well. Fluid sidebar element has a new class, .fluid-sidebar.
+
Dropdown menus +
- Updated the .dropdown-menu to tighten up spacing
- Now requires you to add a <span class="caret"></span> to show the dropdown arrow
- The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.
+
Navigation +
- Tabs and pills now require the use of a new base class, .nav, on their <ul>
- New nav list component added that uses the same base class, .nav
- Vertical tabs and pills have been added—just add .stacked to the <ul>
- Pills were restyled to be less rounded by default
- Pills now have dropdown menu support (they share the same markup and styles as tabs)
+

+ + \ No newline at end of file -- cgit v1.2.3 From b4b1ef68398b68dcdfa29465d06cd76d6bf2c49d Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 23 Jan 2012 15:17:32 -0800 Subject: rebuild with new templates --- docs/templates/layout.mustache | 79 +- docs/templates/pages/base-css.mustache | 7 + docs/templates/pages/components.mustache | 26 +- docs/templates/pages/index.mustache | 356 ++--- docs/templates/pages/javascript.mustache | 2338 +++++++++++++++-------------- docs/templates/pages/scaffolding.mustache | 18 +- docs/templates/pages/upgrading.mustache | 12 +- 7 files changed, 1412 insertions(+), 1424 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index cc36a05ed..eccc67974 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -27,79 +27,30 @@ -

Bootstrap

Overview
- - Scaffolding - - -
- Grid system
- Layouts
- Responsive design
+
+ Overview
- - Base CSS - - -
- Typography
- Tables
- Forms
- Buttons
- Icons by Glyphicons
+
+ Scaffolding
- - Components - - -
- Button groups
- Split button dropdowns
- Nav, tabs, pills
- Navbar
- Breadcrumbs
- Pagination
- Thumbnails
- Alert messages
- Progress bars
+
+ Base CSS
- - Javascript plugins - - -
- Overview
- Modal
- Dropdown
- Scrollspy
- Tab
- Tooltip
- Popover
- Alert
- Button
- Collapse
- Carousel
- Typeahead
+
+ Components
- - Using LESS - +
+ Javascript plugins +
+ Using LESS

@@ -110,7 +61,7 @@ {{>body}} -

\ No newline at end of file diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index aefe87846..93789cc03 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1,1299 +1,1313 @@ - -

Javascript for Bootstrap

Bring Bootstrap's components to life—now with 12 custom jQuery plugins. -

+ +

Javascript for Bootstrap

Bring Bootstrap's components to life—now with 12 custom jQuery plugins. +

- - +

+ Select/Unselect All Plugins +

Note: All plugins require the latest version of jQuery to be included.

+ - -

- -

About modals

A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.

- Download file -

Static example

Below is a statically rendered modal.

- - - + +

+ +

About modals

A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.

+ Download file

Static example

Below is a statically rendered modal.

+ +

Live demo

Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.

- - + Launch demo modal -

Using bootstrap-modal

Call the modal via javascript:

$('#myModal').modal(options)

Options

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

Name	type	default	description
backdrop	boolean	true	Includes a modal-backdrop element
keyboard	boolean	true	Closes the modal when escape key is pressed

Markup

Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.

Using bootstrap-modal

Call the modal via javascript:

$('#myModal').modal(options)

Options

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

Name	type	default	description
backdrop	boolean	true	Includes a modal-backdrop element
keyboard	boolean	true	Closes the modal when escape key is pressed

Markup

Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.

 <a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

 <div class="modal">
-<div class="modal-header">
-<a href="#" class="close js-dismiss">×</a>
-<h3>Modal header</h3>
-</div>
-<div class="modal-body">
-<p>One fine body…</p>
-</div>
-<div class="modal-footer">
-<a href="#" class="btn primary">Save changes</a>
-<a href="#" class="btn">Close</a>
-</div>
+  <div class="modal-header">
+    <a href="#" class="close js-dismiss">×</a>
+    <h3>Modal header</h3>
+  </div>
+  <div class="modal-body">
+    <p>One fine body…</p>
+  </div>
+  <div class="modal-footer">
+    <a href="#" class="btn primary">Save changes</a>
+    <a href="#" class="btn">Close</a>
+  </div>
 </div>

Notice If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action).

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object. +

Notice If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action).

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

 $('#myModal').modal({
-keyboard: false
+  keyboard: false
 })

.modal('toggle')

Manually toggles a modal.

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal.

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal.

$('#myModal').modal('hide')

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

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

Event	Description
show	This event fires immediately when the `show` instance method is called.
shown	This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide	This event is fired immediately when the `hide` instance method has been called.
hidden	This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

.modal('toggle')

Manually toggles a modal.

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal.

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal.

$('#myModal').modal('hide')

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

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

Event	Description
show	This event fires immediately when the `show` instance method is called.
shown	This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide	This event is fired immediately when the `hide` instance method has been called.
hidden	This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

 $('#myModal').on('hidden', function () {
-// do something ...
+  // do something ...
 })

+ + + - -

- -

About dropdowns

Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.

- Download file -

Examples

Click on the dropdown nav links in the navbar and pills below to test dropdowns.

- Project Name -

- Dropdown -
- Action
- Another action
- Something else here
- Separated link

Regular link
- Dropdown -
- Action
- Another action
- Something else here
- Separated link
-
- Dropdown 2 -
- Action
- Another action
- Something else here
- Separated link
-
- Dropdown 3 -
- Action
- Another action
- Something else here
- Separated link
-

Regular link
+ Dropdown +
- Action
- Another action
- Something else here
- Separated link
+
+ Dropdown 2 +
- Action
- Another action
- Something else here
- Separated link
+
+ Dropdown 3 +
- Action
- Another action
- Something else here
- Separated link
+

Using bootstrap-dropdown.js

Call the dropdowns via javascript:

$('.dropdown-toggle').dropdown()

Markup

To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.

Notice For added control and flexibility, optionally specify a data-target="#fat" or href="#fat" - this allows you to target specific dropdowns.

Using bootstrap-dropdown.js

Call the dropdowns via javascript:

$('.dropdown-toggle').dropdown()

Markup

To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.

Notice For added control and flexibility, optionally specify a data-target="#fat" or href="#fat" - this allows you to target specific dropdowns.

 <ul class="nav pills">
-<li class="active"><a href="#">Regular link</a></li>
-<li class="dropdown" id="menu1">
-<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
-  Dropdown
-  <b class="caret"></b>
-</a>
-<ul class="dropdown-menu">
-  <li><a href="#">Action</a></li>
-  <li><a href="#">Another action</a></li>
-  <li><a href="#">Something else here</a></li>
-  <li class="divider"></li>
-  <li><a href="#">Separated link</a></li>
-</ul>
-</li>
-...
+  <li class="active"><a href="#">Regular link</a></li>
+  <li class="dropdown" id="menu1">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
+      Dropdown
+      <b class="caret"></b>
+    </a>
+    <ul class="dropdown-menu">
+      <li><a href="#">Action</a></li>
+      <li><a href="#">Another action</a></li>
+      <li><a href="#">Something else here</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Separated link</a></li>
+    </ul>
+  </li>
+  ...
 </ul>

Methods

$().dropdown()

- A programatic api for activating menus for a given navbar or tabbed navigation. -

Methods

$().dropdown()

+ A programatic api for activating menus for a given navbar or tabbed navigation. +

+ + + - -

- -

The ScrollSpy plugin is for automatically updating nav targets based on scroll position.

- Download file -

Example navbar with scrollspy

Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!

- Project Name -

@fat
@mdo
- Dropdown -
- one
- two
- three
+

@fat

@mdo

one

two

three

Using bootstrap-scrollspy.js

Call the scrollspy via javascript:

$('#navbar').scrollspy()

Markup

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body). +

<body data-spy="scroll" >...</body>

Notice Navbar anchor tags must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>. +

Options

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

Name	type	default	description
offset	number	10	Pixels to offset from top when calculating position of scroll.

@fat

- Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. -

@mdo

- Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt. -

one

- Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone. -

two

- In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. -

three

Using bootstrap-scrollspy.js

Call the scrollspy via javascript:

$('#navbar').scrollspy()

Markup

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body). -

<body data-spy="scroll" >...</body>

Notice Navbar anchor tags must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>. -

Options

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

Name	type	default	description
offset	number	10	Pixels to offset from top when calculating position of scroll.

- - -

+ - -

- -

This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.

- Download file -

Example tabs

Click the tabs below to toggle between hidden panes, even via dropdown menus.

Home
Profile
- Dropdown -
- @fat
- @mdo
-

+ +

+ -

Using bootstrap-tab.js

Enable tabbable tabs via javascript:

$('#myTab').tab('show')

Markup

You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.

This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.

+ Download file +

Example tabs

Click the tabs below to toggle between hidden panes, even via dropdown menus.

Home
Profile
+ Dropdown +
- @fat
- @mdo
+

Using bootstrap-tab.js

Enable tabbable tabs via javascript:

$('#myTab').tab('show')

Markup

You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.

 <ul class="tabs">
-<li><a href="#home" data-toggle="tab">Home</a></li>
-<li><a href="#profile" data-toggle="tab">Profile</a></li>
-<li><a href="#messages" data-toggle="tab">Messages</a></li>
-<li><a href="#ettings" data-toggle="tab">Settings</a></li>
+  <li><a href="#home" data-toggle="tab">Home</a></li>
+  <li><a href="#profile" data-toggle="tab">Profile</a></li>
+  <li><a href="#messages" data-toggle="tab">Messages</a></li>
+  <li><a href="#ettings" data-toggle="tab">Settings</a></li>
 </ul>

Methods

$().tab

- Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom. -

Methods

$().tab

+ Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom. +

 <ul class="tabs">
-<li class="active"><a href="#home">Home</a></li>
-<li><a href="#profile">Profile</a></li>
-<li><a href="#messages">Messages</a></li>
-<li><a href="#settings">Settings</a></li>
+  <li class="active"><a href="#home">Home</a></li>
+  <li><a href="#profile">Profile</a></li>
+  <li><a href="#messages">Messages</a></li>
+  <li><a href="#settings">Settings</a></li>
 </ul>
 
 <div class="tab-content">
-<div class="active" id="home">...</div>
-<div id="profile">...</div>
-<div id="messages">...</div>
-<div id="settings">...</div>
+  <div class="active" id="home">...</div>
+  <div id="profile">...</div>
+  <div id="messages">...</div>
+  <div id="settings">...</div>
 </div>
 
 <script>
-$(function () {
-$('.tabs a:last').tab('show')
-})
+  $(function () {
+    $('.tabs a:last').tab('show')
+  })
 </script>

Events

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

Event	Description
show	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
shown	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.

Events

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

Event	Description
show	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
shown	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.

+           $('a[data-toggle="tab"]').on('shown', function (e) {
-e.target // activated tab
-e.relatedTarget // previous tab
+  e.target // activated tab
+  e.relatedTarget // previous tab
 })
-

- -

About Tooltips

- Download file -

Example use of Tooltips

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. -

+ +

+ -

Using bootstrap-tooltip.js

Trigger the tooltip via javascript:

$('#example').tooltip(options)

Options

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

Name	type	default	description
animation	boolean	true	apply a css fade transition to the tooltip
placement	string	'top'	how to position the tooltip - top \| bottom \| left \| right
selector	string	false	If a selector is provided, tooltip objects will be delegated to the specified targets.
title	string \| function	''	default title value if `title` tag isn't present
trigger	string	'hover'	how tooltip is triggered - hover \| focus \| manual
delay	number \| object	0	- delay showing/hiding the tooltip (ms) - If a number is supplied, delay is applied to both hide/show - Object structure is: `delay: { show: 500, hide: 100 }` -

Notice Individual tooltip instance options can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an elements tooltip.

$('#element').tooltip('show')

.tooltip('hide')

Hides an elements tooltip.

$('#element').tooltip('hide')

About Tooltips

+ Download file +

Example use of Tooltips

Hover over the links below to see tooltips:

+ +

Using bootstrap-tooltip.js

Trigger the tooltip via javascript:

$('#example').tooltip(options)

Options

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

Name	type	default	description
animation	boolean	true	apply a css fade transition to the tooltip
placement	string	'top'	how to position the tooltip - top \| bottom \| left \| right
selector	string	false	If a selector is provided, tooltip objects will be delegated to the specified targets.
title	string \| function	''	default title value if `title` tag isn't present
trigger	string	'hover'	how tooltip is triggered - hover \| focus \| manual
delay	number \| object	0	+ delay showing/hiding the tooltip (ms) + If a number is supplied, delay is applied to both hide/show + Object structure is: `delay: { show: 500, hide: 100 }` +

Notice Individual tooltip instance options can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an elements tooltip.

$('#element').tooltip('show')

.tooltip('hide')

Hides an elements tooltip.

$('#element').tooltip('hide')

+ - -

- -

About popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

* Requires Tooltip to be included

- Download file -

Example hover popover

Hover over the button to trigger the popover.

- hover for popover + +

+ -

Using bootstrap-popover.js

Enable popovers via javascript:

$('#example').popover(options)

Options

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

Name	type	default	description
animation	boolean	true	apply a css fade transition to the tooltip
placement	string	'right'	how to position the popover - top \| bottom \| left \| right
selector	string	false	if a selector is provided, tooltip objects will be delegated to the specified targets
trigger	string	'hover'	how tooltip is triggered - hover \| focus \| manual
title	string \| function	''	default title value if `title` attribute isn't present
content	string \| function	''	default content value if `data-content` attribute isn't present
delay	number \| object	0	- delay showing/hiding the popover (ms) - If a number is supplied, delay is applied to both hide/show - Object structure is: `delay: { show: 500, hide: 100 }` -

Notice Individual popover instance options can alternatively be specified through the use of data attributes.

Markup

- For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option. -

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

$('#element').popover('show')

.popover('hide')

Hides an elements popover.

$('#element').popover('hide')

About popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

* Requires Tooltip to be included

+ Download file +

Example hover popover

Hover over the button to trigger the popover.

+ hover for popover +

Using bootstrap-popover.js

Enable popovers via javascript:

$('#example').popover(options)

Options

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

Name	type	default	description
animation	boolean	true	apply a css fade transition to the tooltip
placement	string	'right'	how to position the popover - top \| bottom \| left \| right
selector	string	false	if a selector is provided, tooltip objects will be delegated to the specified targets
trigger	string	'hover'	how tooltip is triggered - hover \| focus \| manual
title	string \| function	''	default title value if `title` attribute isn't present
content	string \| function	''	default content value if `data-content` attribute isn't present
delay	number \| object	0	+ delay showing/hiding the popover (ms) + If a number is supplied, delay is applied to both hide/show + Object structure is: `delay: { show: 500, hide: 100 }` +

Notice Individual popover instance options can alternatively be specified through the use of data attributes.

Markup

+ For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option. +

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

$('#element').popover('show')

.popover('hide')

Hides an elements popover.

$('#element').popover('hide')

+ - -

- -

About alerts

The alert plugin is a tiny class for adding close functionality to alerts.

- Download -

Example alerts

The alerts plugin works on regular alert messages, and block messages.

- × - Holy guacamole! Best check yo self, you’re not looking too good. + +

+ -

- × -

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

- Take this action Or do this -

Using bootstrap-alerts.js

Enable dismissal of an alert via javascript:

$(".alert-message").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

<a class="close" data-dismiss="alert" href="#">&times;</a>

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert-message").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

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

Event	Description
close	This event fires immediately when the `close` instance method is called.
closed	This event is fired when the alert has been closed (will wait for css transitions to complete).

About alerts

The alert plugin is a tiny class for adding close functionality to alerts.

+ Download +

Example alerts

The alerts plugin works on regular alert messages, and block messages.

+ × + Holy guacamole! Best check yo self, you’re not looking too good. +

+ × +

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

+ Take this action Or do this +

Using bootstrap-alerts.js

Enable dismissal of an alert via javascript:

$(".alert-message").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

<a class="close" data-dismiss="alert" href="#">&times;</a>

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert-message").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

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

Event	Description
close	This event fires immediately when the `close` instance method is called.
closed	This event is fired when the alert has been closed (will wait for css transitions to complete).

 $('#my-alert').bind('closed', function () {
-// do something ...
+  // do something ...
 })

- -

About

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

- Download file -

Example uses

Use the buttons plugin for states and toggles.

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

Stateful	- -
Single toggle	- -
Checkbox	- - - - - -
Radio	- - - - - -

Using bootstrap-button.js

Enable buttons via javascript:

$('.tabs').button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

+ +

About

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

+ Download file +

Example uses

Use the buttons plugin for states and toggles.

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

Stateful	+ +
Single toggle	+ +
Checkbox	+ + + + + +
Radio	+ + + + + +

Using bootstrap-button.js

Enable buttons via javascript:

$('.tabs').button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

 <!-- Add data-toggle="button" to activate toggling on a single button -->
 <button class="btn" data-toggle="button">Single Toggle</button>
 
 <!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
 <div class="btn-group" data-toggle="buttons-checkbox">
-<button class="btn">Left</button>
-<button class="btn">Middle</button>
-<button class="btn">Right</button>
+  <button class="btn">Left</button>
+  <button class="btn">Middle</button>
+  <button class="btn">Right</button>
 </div>
 
 <!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
 <div class="btn-group" data-toggle="buttons-radio">
-<button class="btn">Left</button>
-<button class="btn">Middle</button>
-<button class="btn">Right</button>
+  <button class="btn">Left</button>
+  <button class="btn">Middle</button>
+  <button class="btn">Right</button>
 </div>

Methods

$().button('toggle')

Toggles push state. Gives btn the look that it's been activated.

Notice You can enable auto toggling of a button by using the data-toggle attribute.

<button class="btn" data-toggle="button" >...</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text. -

<button class="btn" data-loading-text="loading stuff..." >...</button>

- Notice Firefox persists the disabled state across page loads. A workaround for this is to use: autocomplete="off". More info can be found here. -

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

Methods

$().button('toggle')

Toggles push state. Gives btn the look that it's been activated.

Notice You can enable auto toggling of a button by using the data-toggle attribute.

<button class="btn" data-toggle="button" >...</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text. +

<button class="btn" data-loading-text="loading stuff..." >...</button>

+ Notice Firefox persists the disabled state across page loads. A workaround for this is to use: autocomplete="off". More info can be found here. +

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

<button class="btn" data-complete-text="finished!" >...</button>
 <script>
-$('.btn').button('complete')
+  $('.btn').button('complete')
 </script>

- -

About

Get base styles and flexible support for collapsible components like accordions and navigation.

- Download file -

Example accordion

Using the collapse plugin, we built a simple accordion style widget:

- -

- - Collapsible Group Item #1 - -

- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -

+ +

About

Get base styles and flexible support for collapsible components like accordions and navigation.

+ Download file

- - Collapsible Group Item #2 - -

Example accordion

Using the collapse plugin, we built a simple accordion style widget:

+ +

+ + Collapsible Group Item #1 + +

- - Collapsible Group Item #3 - -

+ + Collapsible Group Item #2 + +

+ + Collapsible Group Item #3 + +

- -

Using bootstrap-collapse.js

Enable via javascript:

$(".collapse").collapse()

Options

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

Name	type	default	description
parent	selector	false	If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)
toggle	boolean	true	Toggles the collapsible element on invocation

Markup

+          
+          
+          Using bootstrap-collapse.js
+          Enable via javascript:
+          $(".collapse").collapse()
+          Options
+          
+            
+             
+               
+               
+               
+               
+             
+            
+            
+             
+               
+               
+               
+               
+             
+             
+               
+               
+               
+               
+             
+            
+          Name type default description
parent selector false If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)
toggle boolean true Toggles the collapsible element on invocation
+          Markup
+          Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
+           <button class="btn danger" data-toggle="collapse" data-target="#demo">
-simple collapsible
+  simple collapsible
 </button>
 
 <div id="demo" class="collapse in"> … </div>
-     Notice To add accordion like group management to a collapsible control just add the additional data attribute data-parent="#selector". Refer to the demo below to see this in action.
-      Methods
-      .collapse(options)
-      Activates your content as a collapsible element. Accepts an optional options object.
+         
Notice To add accordion like group management to a collapsible control just add the additional data attribute data-parent="#selector". Refer to the demo below to see this in action.
+          Methods
+          .collapse(options)
+          Activates your content as a collapsible element. Accepts an optional options object.
 
 $('#myCollapsible').collapse({
-toggle: false
+  toggle: false
 })
-      .collapse('toggle')
-      Toggles a collapsible element to shown or hidden.
-      .collapse('show')
-      Shows a collapsible element.
-      .collapse('hide')
-      Hides a collapsible element.
-      Events
-      
-        Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
-      
-      
-        
-         
-           
-           
-         
-        
-        
-         
-           
-           
-         
-         
-           
-           
-         
-         
-           
-           
-         
-         
-           
-           
-         
-        
-      Event Description
show This event fires immediately when the show instance method is called.
shown This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
hide 
-            This event is fired immediately when the hide method has been called.
-           
hidden This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
+          .collapse('toggle')
+          Toggles a collapsible element to shown or hidden.
+          .collapse('show')
+          Shows a collapsible element.
+          .collapse('hide')
+          Hides a collapsible element.
+          Events
+          
+            Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
+          
+          
+            
+             
+               
+               
+             
+            
+            
+             
+               
+               
+             
+             
+               
+               
+             
+             
+               
+               
+             
+             
+               
+               
+             
+            
+          Event Description
show This event fires immediately when the show instance method is called.
shown This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
hide 
+                This event is fired immediately when the hide method has been called.
+               
hidden This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
 
  $('#myCollapsible').on('hidden', function () {
-// do something ...
+  // do something ...
 })
-

- -

About

A generic plugin for cycling through elements. A merry-go-round.

- Download file -

Example carousel

Watch the slideshow below.

First Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ +

About

A generic plugin for cycling through elements. A merry-go-round.

+ Download file +

Example carousel

Watch the slideshow below.

First Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ ‹ + ›

- ‹ - › -

Using bootstrap-carousel.js

Call via javascript:

$('.carousel').carousel()

Options

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

Name	type	default	description
interval	number	5000	The amount of type to delay between automatically cycling an item.

Markup

Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.

Using bootstrap-carousel.js

Call via javascript:

$('.carousel').carousel()

Options

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

Name	type	default	description
interval	number	5000	The amount of type to delay between automatically cycling an item.

Markup

Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.

 <div class="carousel">
-<!-- Carousel items -->
-<div class="carousel-inner">
-...
-</div>
-<!-- Carousel nav -->
-<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
-<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+  <!-- Carousel items -->
+  <div class="carousel-inner">
+    ...
+  </div>
+  <!-- Carousel nav -->
+  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
 </div>

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

 $('.myCarousel').carousel({
-interval: 2000
+  interval: 2000
 })

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

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

Event	Description
slide	This event fires immediately when the `slide` instance method is invoked.
slid	This event is fired when the carousel has completed it's slide transition.

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

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

Event	Description
slide	This event fires immediately when the `slide` instance method is invoked.
slid	This event is fired when the carousel has completed it's slide transition.

+ + + - -

- -

About

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

- Download file -

Example

Start typing in the field below to show the typeahead results.

- + +

+ -

Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

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

Name	type	default	description
items	number	8	The max number of items to display in the dropdown.

About

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

+ Download file +

Example

Start typing in the field below to show the typeahead results.

+ +

Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

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

Name	type	default	description
items	number	8	The max number of items to display in the dropdown.

Markup

Add data attributes to register an element with typeahead functionality.

Markup

Add data attributes to register an element with typeahead functionality.

 <input type="text" data-provide="typeahead">

\ No newline at end of file +

\ No newline at end of file diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 567ac6d0d..c586af1b9 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -1,10 +1,14 @@ - - -

Scaffolding

Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.

+ +

Scaffolding

Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.

diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache index a243d6ad5..475539284 100644 --- a/docs/templates/pages/upgrading.mustache +++ b/docs/templates/pages/upgrading.mustache @@ -1,9 +1,9 @@ - -

Upgrading to Bootstrap 2

Learn about significant changes and additions since v1.4 with this handy guide.

+ +

Upgrading to Bootstrap 2

Learn about significant changes and additions since v1.4 with this handy guide.

Rough outline

-- cgit v1.2.3 From 82de03b67cf729291ea5a73741e44838a42940f8 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 23 Jan 2012 19:55:00 -0800 Subject: start wrapping text in {{_i}} for translation --- docs/templates/layout.mustache | 3 +- docs/templates/pages/javascript.mustache | 460 +++++++++++++++---------------- 2 files changed, 230 insertions(+), 233 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index eccc67974..919872db2 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -22,11 +22,10 @@ - - +

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 93789cc03..e1856d6c2 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1,21 +1,21 @@

Javascript for Bootstrap

Bring Bootstrap's components to life—now with 12 custom jQuery plugins. +

{{_i}}Javascript for{{/i}} Bootstrap

{{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}}

@@ -24,105 +24,105 @@ ================================================== --> @@ -131,93 +131,93 @@ ================================================== -->

About modals

A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.

- Download file +

{{_i}}About modals{{/i}}

{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}

+ {{_i}}Download file{{/i}}

Static example

Below is a statically rendered modal.

{{_i}}Static example{{/i}}

{{_i}}Below is a statically rendered modal.{{/i}}

Live demo

Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.

{{_i}}Live demo{{/i}}

{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}

- Launch demo modal + {{_i}}Launch demo modal{{/i}}

Using bootstrap-modal

Call the modal via javascript:

{{_i}}Using bootstrap-modal{{/i}}

{{_i}}Call the modal via javascript:{{/i}}

$('#myModal').modal(options)

Options

{{_i}}Options{{/i}}

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

Name	type	default	description	{{_i}}Name{{/i}}	{{_i}}type{{/i}}	{{_i}}default{{/i}}	{{_i}}description{{/i}}
backdrop	boolean	true	Includes a modal-backdrop element	{{_i}}backdrop{{/i}}	{{_i}}boolean{{/i}}	{{_i}}true{{/i}}	{{_i}}Includes a modal-backdrop element{{/i}}
keyboard	boolean	true	Closes the modal when escape key is pressed	{{_i}}keyboard{{/i}}	{{_i}}boolean{{/i}}	{{_i}}true{{/i}}	{{_i}}Closes the modal when escape key is pressed{{/i}}

Markup

Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.

{{_i}}Markup{{/i}}

{{_i}}You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal.

Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.{{/i}}

-<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
+<a class="btn" data-toggle="modal" href="#myModal" >{{_i}}Launch Modal{{/i}}</a>

@@ -227,63 +227,63 @@
     <h3>Modal header</h3>
   </div>
   <div class="modal-body">
-    <p>One fine body…</p>
+    <p>{{_i}}One fine body…{{/i}}</p>
   </div>
   <div class="modal-footer">
-    <a href="#" class="btn primary">Save changes</a>
-    <a href="#" class="btn">Close</a>
+    <a href="#" class="btn primary">{{_i}}Save changes{{/i}}</a>
+    <a href="#" class="btn">{{_i}}Close{{/i}}</a>
   </div>
 </div>

Notice If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action).

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object. +

{{_i}}Notice If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action).{{/i}}

+ Methods{{/i}} +

.modal({{_i}}options{{/i}})

{{_i}}Activates your content as a modal. Accepts an optional options object.{{/i}}

 $('#myModal').modal({
   keyboard: false
 })

.modal('toggle')

Manually toggles a modal.

{{_i}}Manually toggles a modal.{{/i}}

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal.

{{_i}}Manually opens a modal.{{/i}}

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal.

{{_i}}Manually hides a modal.{{/i}}

$('#myModal').modal('hide')

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

{{_i}}Events{{/i}}

{{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}

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

Event	Description	{{_i}}Event{{/i}}	{{_i}}Description{{/i}}
show	This event fires immediately when the `show` instance method is called.	{{_i}}show{{/i}}	{{_i}}This event fires immediately when the `show` instance method is called.{{/i}}
shown	This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).	{{_i}}shown{{/i}}	{{_i}}This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).{{/i}}
hide	This event is fired immediately when the `hide` instance method has been called.	{{_i}}hide{{/i}}	{{_i}}This event is fired immediately when the `hide` instance method has been called.{{/i}}
hidden	This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).	{{_i}}hidden{{/i}}	{{_i}}This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).{{/i}}

 $('#myModal').on('hidden', function () {
-  // do something ...
+  // {{_i}}do something…{{/i}}
 })

@@ -295,52 +295,52 @@ $('#myModal').on('hidden', function () { ================================================== -->

About dropdowns

Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.

- Download file +

{{_i}}About dropdowns{{/i}}

{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}

+ {{_i}}Download file{{/i}}

Examples

Click on the dropdown nav links in the navbar and pills below to test dropdowns.

{{_i}}Examples{{/i}}

{{_i}}Click on the dropdown nav links in the navbar and pills below to test dropdowns.{{/i}}

- Project Name + {{_i}}Project Name{{/i}}

- Dropdown 3 + {{_i}}Dropdown 3{{/i}}

@@ -349,71 +349,69 @@ $('#myModal').on('hidden', function () {

Using bootstrap-dropdown.js

Call the dropdowns via javascript:

{{_i}}Using{{/i}} bootstrap-dropdown.js

{{_i}}Call the dropdowns via javascript:{{/i}}

$('.dropdown-toggle').dropdown()

Markup

To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.

Notice For added control and flexibility, optionally specify a data-target="#fat" or href="#fat" - this allows you to target specific dropdowns.

{{_i}}Markup{{/i}}

{{_i}}To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.{{/i}}

{{_i}}Notice For added control and flexibility, optionally specify a data-target="#fat" or href="#fat" - this allows you to target specific dropdowns.{{/i}}

 <ul class="nav pills">
   <li class="active"><a href="#">Regular link</a></li>
   <li class="dropdown" id="menu1">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
-      Dropdown
+      {{_i}}Dropdown{{/i}}
       <b class="caret"></b>
     </a>
     <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
+      <li><a href="#">{{_i}}Action{{/i}}</a></li>
+      <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+      <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
       <li class="divider"></li>
-      <li><a href="#">Separated link</a></li>
+      <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
     </ul>
   </li>
   ...
 </ul>

Methods

{{_i}}Methods{{/i}}

$().dropdown()

- A programatic api for activating menus for a given navbar or tabbed navigation. -

{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}

@@ -424,30 +422,30 @@ $('#myModal').on('hidden', function () { ================================================== -->

The ScrollSpy plugin is for automatically updating nav targets based on scroll position.

- Download file +

{{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position.{{/i}}

+ {{_i}}Download file{{/i}}

Example navbar with scrollspy

Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!

{{_i}}Example navbar with scrollspy{{/i}}

{{_i}}Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!{{/i}}

- Project Name + {{_i}}Project Name{{/i}}

@fat
@mdo
- Dropdown + {{_i}}Dropdown{{/i}}
- one
- two
- {{_i}}one{{/i}}
- {{_i}}two{{/i}}
- three
- {{_i}}three{{/i}}

@@ -479,29 +477,29 @@ $('#myModal').on('hidden', function () {

Using bootstrap-scrollspy.js

Call the scrollspy via javascript:

{{_i}}Using bootstrap-scrollspy.js{{/i}}

{{_i}}Call the scrollspy via javascript:{{/i}}

$('#navbar').scrollspy()

Markup

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body). +

{{_i}}Markup{{/i}}

{{_i}}To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body).{{/i}}

<body data-spy="scroll" >...</body>

Notice Navbar anchor tags must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>. -

Options

{{_i}}Notice Navbar anchor tags must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.{{/i}}

{{_i}}Options{{/i}}

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

Name	type	default	description	{{_i}}Name{{/i}}	{{_i}}type{{/i}}	{{_i}}default{{/i}}	{{_i}}description{{/i}}
offset	number	10	Pixels to offset from top when calculating position of scroll.	{{_i}}offset{{/i}}	{{_i}}number{{/i}}	{{_i}}10{{/i}}	{{_i}}Pixels to offset from top when calculating position of scroll.{{/i}}

@@ -515,21 +513,21 @@ $('#myModal').on('hidden', function () { ================================================== -->

This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.

- Download file +

{{_i}}This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.{{/i}}

+ {{_i}}Download file{{/i}}

Example tabs

Click the tabs below to toggle between hidden panes, even via dropdown menus.

{{_i}}Example tabs{{/i}}

{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}

Home
Profile
{{_i}}Home{{/i}}
{{_i}}Profile{{/i}}
- Dropdown + {{_i}}Dropdown{{/i}}
- @fat
- @mdo

Using bootstrap-tab.js

Enable tabbable tabs via javascript:

{{_i}}Using bootstrap-tab.js{{/i}}

{{_i}}Enable tabbable tabs via javascript:{{/i}}

$('#myTab').tab('show')

Markup

You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.

{{_i}}Markup{{/i}}

{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.{{/i}}

 <ul class="tabs">
-  <li><a href="#home" data-toggle="tab">Home</a></li>
-  <li><a href="#profile" data-toggle="tab">Profile</a></li>
-  <li><a href="#messages" data-toggle="tab">Messages</a></li>
-  <li><a href="#ettings" data-toggle="tab">Settings</a></li>
+  <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
+  <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
+  <li><a href="#messages" data-toggle="tab">{{_i}}Messages{{/i}}</a></li>
+  <li><a href="#ettings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li>
 </ul>

Methods

{{_i}}Methods{{/i}}

$().tab

- Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom. + {{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}

 <ul class="tabs">
-  <li class="active"><a href="#home">Home</a></li>
-  <li><a href="#profile">Profile</a></li>
-  <li><a href="#messages">Messages</a></li>
-  <li><a href="#settings">Settings</a></li>
+  <li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li>
+  <li><a href="#profile">{{_i}}Profile{{/i}}</a></li>
+  <li><a href="#messages">{{_i}}Messages{{/i}}</a></li>
+  <li><a href="#settings">{{_i}}Settings{{/i}}</a></li>
 </ul>
 
 <div class="tab-content">
@@ -589,22 +587,22 @@ $('#myModal').on('hidden', function () {
   })
 </script>

Events

{{_i}}Events{{/i}}

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

Event	Description	{{_i}}Event{{/i}}	{{_i}}Description{{/i}}
show	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.	{{_i}}show{{/i}}	{{_i}}This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.{{/i}}
shown	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.	{{_i}}shown{{/i}}	{{_i}}This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.{{/i}}

@@ -623,41 +621,41 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ================================================== -->

About Tooltips

- Download file +

{{_i}}About Tooltips{{/i}}

{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.{{/i}}

+ {{_i}}Download file{{/i}}

Example use of Tooltips

Hover over the links below to see tooltips:

{{_i}}Example use of Tooltips{{/i}}

{{_i}}Hover over the links below to see tooltips:{{/i}}

Using bootstrap-tooltip.js

Trigger the tooltip via javascript:

$('#example').tooltip(options)

Options

{{_i}}Using{{/i}} bootstrap-tooltip.js

{{_i}}Trigger the tooltip via javascript:{{/i}}

$('#example').tooltip({{_i}}options{{/i}})

{{_i}}Options{{/i}}

- - - - + + + + - - + + - + -- cgit v1.2.3 From 16440eea92e97ae1027ba867839170bfe88ae38d Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 23 Jan 2012 19:59:05 -0800 Subject: move translation tag for bootstrap --- docs/templates/pages/javascript.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index e1856d6c2..1170c21cc 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1,7 +1,7 @@

{{_i}}Javascript for{{/i}} Bootstrap

{{_i}}Javascript for Bootstrap{{/i}}

{{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}}

{{_i}}Overview{{/i}}

Date: Tue, 24 Jan 2012 12:11:05 -0800 Subject: javascript pages markedup with {{_i}} --- docs/templates/pages/javascript.mustache | 454 +++++++++++++++---------------- 1 file changed, 227 insertions(+), 227 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 1170c21cc..c85b9d2a2 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -658,52 +658,52 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

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

Name	type	default	description	{{_i}}Name{{/i}}	{{_i}}type{{/i}}	default{{/i}}
animation	boolean	{{_i}}animation{{/i}}	{{_i}}boolean{{/i}}	true	apply a css fade transition to the tooltip	{{_i}}apply a css fade transition to the tooltip{{/i}}
placement	{{_i}}apply a css fade transition to the tooltip{{/i}}
placement	string	{{_i}}placement{{/i}}	{{_i}}string{{/i}}	'top'	how to position the tooltip - top \| bottom \| left \| right	{{_i}}how to position the tooltip{{/i}} - top \| bottom \| left \| right
selector	string	{{_i}}selector{{/i}}	{{_i}}string{{/i}}	false	If a selector is provided, tooltip objects will be delegated to the specified targets.	{{_i}}If a selector is provided, tooltip objects will be delegated to the specified targets.{{/i}}
title	string \| function	{{_i}}title{{/i}}	{{_i}}string \| function{{/i}}	''	default title value if `title` tag isn't present	{{_i}}default title value if `title` tag isn't present{{/i}}
trigger	string	{{_i}}trigger{{/i}}	{{_i}}string{{/i}}	'hover'	how tooltip is triggered - hover \| focus \| manual	{{_i}}how tooltip is triggered{{/i}} - hover \| focus \| manual
delay	number \| object	{{_i}}delay{{/i}}	{{_i}}number \| object{{/i}}	0	- delay showing/hiding the tooltip (ms) - If a number is supplied, delay is applied to both hide/show - Object structure is: `delay: { show: 500, hide: 100 }` + {{_i}}delay showing/hiding the tooltip (ms){{/i}} + {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}} + {{_i}}Object structure is: `delay: { show: 500, hide: 100 }`{{/i}}

Notice Individual tooltip instance options can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

{{_i}}Notice Individual tooltip instance options can alternatively be specified through the use of data attributes.{{/i}}

{{_i}}Markup{{/i}}

{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

{{_i}}Methods{{/i}}

$().tooltip({{_i}}options{{/i}})

{{_i}}Attaches a tooltip handler to an element collection.{{/i}}

.tooltip('show')

Reveals an elements tooltip.

{{_i}}Reveals an elements tooltip.{{/i}}

$('#element').tooltip('show')

.tooltip('hide')

Hides an elements tooltip.

{{_i}}Hides an elements tooltip.{{/i}}

$('#element').tooltip('hide')

@@ -715,97 +715,97 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ================================================== -->

About popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

* Requires Tooltip to be included

- Download file +

{{_i}}About popovers{{/i}}

{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}

* {{_i}}Requires Tooltip to be included{{/i}}

+ {{_i}}Download file{{/i}}

Example hover popover

Hover over the button to trigger the popover.

{{_i}}Example hover popover{{/i}}

{{_i}}Hover over the button to trigger the popover.{{/i}}

- hover for popover + {{_i}}hover for popover{{/i}}

Using bootstrap-popover.js

Enable popovers via javascript:

$('#example').popover(options)

Options

{{_i}}Using bootstrap-popover.js{{/i}}

{{_i}}Enable popovers via javascript:{{/i}}

$('#example').popover({{_i}}options{{/i}})

{{_i}}Options{{/i}}

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

Name	type	default	description	{{_i}}Name{{/i}}	{{_i}}type{{/i}}	{{_i}}default{{/i}}
animation	boolean	{{_i}}animation{{/i}}	{{_i}}boolean{{/i}}	true	apply a css fade transition to the tooltip	{{_i}}apply a css fade transition to the tooltip{{/i}}
placement	string	{{_i}}placement{{/i}}	{{_i}}string{{/i}}	'right'	how to position the popover - top \| bottom \| left \| right	{{_i}}how to position the popover{{/i}} - top \| bottom \| left \| right
selector	string	{{_i}}selector{{/i}}	{{_i}}string{{/i}}	false	if a selector is provided, tooltip objects will be delegated to the specified targets	{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
trigger	string	{{_i}}trigger{{/i}}	{{_i}}string{{/i}}	'hover'	how tooltip is triggered - hover \| focus \| manual	{{_i}}how tooltip is triggered{{/i}} - hover \| focus \| manual
title	string \| function	{{_i}}title{{/i}}	{{_i}}string \| function{{/i}}	''	default title value if `title` attribute isn't present	{{_i}}default title value if `title` attribute isn't present{{/i}}
content	string \| function	{{_i}}content{{/i}}	{{_i}}string \| function{{/i}}	''	default content value if `data-content` attribute isn't present	{{_i}}default content value if `data-content` attribute isn't present{{/i}}
delay	number \| object	{{_i}}delay{{/i}}	{{_i}}number \| object{{/i}}	0	- delay showing/hiding the popover (ms) - If a number is supplied, delay is applied to both hide/show - Object structure is: `delay: { show: 500, hide: 100 }` + {{_i}}delay showing/hiding the popover (ms){{/i}} + {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}} + {{_i}}Object structure is: `delay: { show: 500, hide: 100 }`{{/i}}

Notice Individual popover instance options can alternatively be specified through the use of data attributes.

Markup

{{_i}}Notice Individual popover instance options can alternatively be specified through the use of data attributes.{{/i}}

{{_i}}Markup{{/i}}

- For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option. + {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}}

Methods

$().popover(options)

Initializes popovers for an element collection.

{{_i}}Methods{{/i}}

$().popover({{_i}}options{{/i}})

{{_i}}Initializes popovers for an element collection.{{/i}}

.popover('show')

Reveals an elements popover.

{{_i}}Reveals an elements popover.{{/i}}

$('#element').popover('show')

.popover('hide')

Hides an elements popover.

{{_i}}Hides an elements popover.{{/i}}

$('#element').popover('hide')

@@ -817,65 +817,65 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ================================================== -->

About alerts

The alert plugin is a tiny class for adding close functionality to alerts.

- Download +

{{_i}}About alerts{{/i}}

{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}

+ {{_i}}Download{{/i}}

Example alerts

The alerts plugin works on regular alert messages, and block messages.

{{_i}}Example alerts{{/i}}

{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}

× - Holy guacamole! Best check yo self, you’re not looking too good. + {{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you’re not looking too good.{{/i}}

× -

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

{{_i}}Oh snap! You got an error!{{/i}}

{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

- Take this action Or do this + {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}}

Using bootstrap-alerts.js

Enable dismissal of an alert via javascript:

{{_i}}Using bootstrap-alerts.js{{/i}}

{{_i}}Enable dismissal of an alert via javascript:{{/i}}

$(".alert-message").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

{{_i}}Markup{{/i}}

{{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}

<a class="close" data-dismiss="alert" href="#">&times;</a>

Methods

{{_i}}Methods{{/i}}

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}

.alert('close')

Closes an alert.

{{_i}}Closes an alert.{{/i}}

$(".alert-message").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

{{_i}}Events{{/i}}

{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}

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

Event	Description	{{_i}}Event{{/i}}	{{_i}}Description{{/i}}
close	This event fires immediately when the `close` instance method is called.	{{_i}}close{{/i}}	{{_i}}This event fires immediately when the `close` instance method is called.{{/i}}
closed	This event is fired when the alert has been closed (will wait for css transitions to complete).	{{_i}}closed{{/i}}	{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}

 $('#my-alert').bind('closed', function () {
-  // do something ...
+  // {{_i}}do something…{{/i}}
 })

@@ -887,61 +887,61 @@ $('#my-alert').bind('closed', function () { ================================================== -->

About

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

- Download file +

{{_i}}About{{/i}}

{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}

+ {{_i}}Download file{{/i}}

Example uses

Use the buttons plugin for states and toggles.

{{_i}}Example uses{{/i}}

{{_i}}Use the buttons plugin for states and toggles.{{/i}}

- + - + - + - +

Stateful	{{_i}}Stateful{{/i}}
Single toggle	{{_i}}Single toggle{{/i}}	- +
Checkbox	{{_i}}Checkbox{{/i}}	- - - + + +
Radio	{{_i}}Radio{{/i}}	- - - + + +

Using bootstrap-button.js

Enable buttons via javascript:

{{_i}}Using bootstrap-button.js{{/i}}

{{_i}}Enable buttons via javascript:{{/i}}

$('.tabs').button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

{{_i}}Markup{{/i}}

{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}

 <!-- Add data-toggle="button" to activate toggling on a single button -->
 <button class="btn" data-toggle="button">Single Toggle</button>
@@ -960,22 +960,22 @@ $('#my-alert').bind('closed', function () {
   <button class="btn">Right</button>
 </div>

Methods

{{_i}}Methods{{/i}}

$().button('toggle')

Toggles push state. Gives btn the look that it's been activated.

Notice You can enable auto toggling of a button by using the data-toggle attribute.

<button class="btn" data-toggle="button" >...</button>

{{_i}}Toggles push state. Gives btn the look that it's been activated.{{/i}}

{{_i}}Notice You can enable auto toggling of a button by using the data-toggle attribute.{{/i}}

<button class="btn" data-toggle="button" >…</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text. +

{{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.{{/i}}

<button class="btn" data-loading-text="loading stuff..." >...</button>

- Notice Firefox persists the disabled state across page loads. A workaround for this is to use: autocomplete="off". More info can be found here. + {{_i}}Notice Firefox persists the disabled state across page loads. A workaround for this is to use: autocomplete="off". More info can be found here.{{/i}}

$().button('reset')

Resets button state - swaps text to original text.

{{_i}}Resets button state - swaps text to original text.{{/i}}

$().button(string)

Resets button state - swaps text to any data defined text state.

{{_i}}Resets button state - swaps text to any data defined text state.{{/i}}

<button class="btn" data-complete-text="finished!" >...</button>
 <script>
   $('.btn').button('complete')
@@ -990,23 +990,23 @@ $('#my-alert').bind('closed', function () {
     ================================================== -->
     
       
-        Collapse bootstrap-collapse.js
+        {{_i}}Collapse{{/i}} bootstrap-collapse.js
       
       
         
-          About
-          Get base styles and flexible support for collapsible components like accordions and navigation.
-          Download file
+          {{_i}}About{{/i}}
+          {{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}
+          {{_i}}Download file{{/i}}
         
         
-          Example accordion
-          Using the collapse plugin, we built a simple accordion style widget:
+          {{_i}}Example accordion{{/i}}
+          {{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}
         
           
             
               
                 
-                  Collapsible Group Item #1
+                  {{_i}}Collapsible Group Item #1{{/i}}
                 
               
               
@@ -1018,7 +1018,7 @@ $('#my-alert').bind('closed', function () {
             
               
                 
-                  Collapsible Group Item #2
+                  {{_i}}Collapsible Group Item #2{{/i}}
                 
               
               
@@ -1030,7 +1030,7 @@ $('#my-alert').bind('closed', function () {
             
               
                 
-                  Collapsible Group Item #3
+                  {{_i}}Collapsible Group Item #3{{/i}}
                 
               
               
@@ -1043,92 +1043,92 @@ $('#my-alert').bind('closed', function () {
 
           
           
-          Using bootstrap-collapse.js
+          {{_i}}Using bootstrap-collapse.js{{/i}}
           Enable via javascript:
           $(".collapse").collapse()
-          Options
+          {{_i}}Options{{/i}}
           
-               
-               
-               
-               
+               
+               
+               
+               
-               
-               
+               
+               
-               
+               
-               
-               
+               
+               
-               
+               
             
              Name type default description {{_i}}Name{{/i}} {{_i}}type{{/i}} {{_i}}default{{/i}} {{_i}}description{{/i}}
              
             
             
              parent selector {{_i}}parent{{/i}} {{_i}}selector{{/i}}
                false If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior) {{_i}}If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior){{/i}}
              
              toggle boolean {{_i}}toggle{{/i}} {{_i}}boolean{{/i}}
                true Toggles the collapsible element on invocation {{_i}}Toggles the collapsible element on invocation{{/i}}
              
             
           
-          Markup
-          Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
+          {{_i}}Markup{{/i}}
+          {{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}
            <button class="btn danger" data-toggle="collapse" data-target="#demo">
-  simple collapsible
+  {{_i}}simple collapsible{{/i}}
 </button>
 
 <div id="demo" class="collapse in"> … </div>
-         Notice To add accordion like group management to a collapsible control just add the additional data attribute data-parent="#selector". Refer to the demo below to see this in action.
-          Methods
-          .collapse(options)
-          Activates your content as a collapsible element. Accepts an optional options object.
+         
{{_i}}Notice To add accordion like group management to a collapsible control just add the additional data attribute data-parent="#selector". Refer to the demo below to see this in action.{{/i}}
+          {{_i}}Methods{{/i}}
+          .collapse({{_i}}options{{/i}})
+          {{_i}}Activates your content as a collapsible element. Accepts an optional options object.{{/i}}
 
 $('#myCollapsible').collapse({
   toggle: false
 })
           .collapse('toggle')
-          Toggles a collapsible element to shown or hidden.
+          {{_i}}Toggles a collapsible element to shown or hidden.{{/i}}
           .collapse('show')
-          Shows a collapsible element.
+          {{_i}}Shows a collapsible element.{{/i}}
           .collapse('hide')
-          Hides a collapsible element.
-          Events
+          {{_i}}Hides a collapsible element.{{/i}}
+          {{_i}}Events{{/i}}
           
-            Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
+            {{_i}}Bootstrap's collapse class exposes a few events for hooking into collapse functionality.{{/i}}
           
           
-               
-               
+               
+               
-               
-               
+               
-               
-               
+               
+               
-               
+               
-               
-               
+               
+               
             
              Event Description {{_i}}Event{{/i}} {{_i}}Description{{/i}}
              
             
             
              show This event fires immediately when the show instance method is called. {{_i}}show{{/i}}/td>
+               {{_i}}This event fires immediately when the show instance method is called.{{/i}}
              
              shown This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete). {{_i}}shown{{/i}} {{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}
              
              hide {{_i}}hide{{/i}}
                
-                This event is fired immediately when the hide method has been called.
+                {{_i}}This event is fired immediately when the hide method has been called.{{/i}}
                
              
              hidden This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete). {{_i}}hidden{{/i}} {{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}
              
             
           
 
  $('#myCollapsible').on('hidden', function () {
-  // do something ...
+  // {{_i}}do something…{{/i}}
 })
         
       
@@ -1140,37 +1140,37 @@ $('#myCollapsible').on('hidden', function () {
     ================================================== -->
     
       
-        Carousel bootstrap-carousel.js
+        {{_i}}Carousel{{/i}} bootstrap-carousel.js
       
       
         
-          About
-          A generic plugin for cycling through elements. A merry-go-round.
-          Download file
+          {{_i}}About{{/i}}
+          {{_i}}A generic plugin for cycling through elements. A merry-go-round.{{/i}}
+          {{_i}}Download file{{/i}}
         
         
-          Example carousel
-          Watch the slideshow below.
+          {{_i}}Example carousel{{/i}}
+          {{_i}}Watch the slideshow below.{{/i}}
           
             
               
                 
                 
-                  First Thumbnail label
+                  {{_i}}First Thumbnail label{{/i}}
                   Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                 
               
               
                 
                 
-                  Second Thumbnail label
+                  {{_i}}Second Thumbnail label{{/i}}
                   Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                 
               
               
                 
                 
-                  Third Thumbnail label
+                  {{_i}}Third Thumbnail label{{/i}}
                   Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                 
               
@@ -1179,30 +1179,30 @@ $('#myCollapsible').on('hidden', function () {
             ›
           
           
-          Using bootstrap-carousel.js
-          Call via javascript:
+          {{_i}}Using bootstrap-carousel.js{{/i}}
+          {{_i}}Call via javascript:{{/i}}
           $('.carousel').carousel()
-          Options
+          {{_i}}Options{{/i}}
           
-               
-               
-               
-               
+               
+               
+               
+               
-               
-               
+               
+               
-               
+               
             
              Name type default description {{_i}}Name{{/i}} {{_i}}type{{/i}} {{_i}}default{{/i}} {{_i}}description{{/i}}
              
             
             
              interval number {{_i}}interval{{/i}} {{_i}}number{{/i}}
                5000 The amount of type to delay between automatically cycling an item. {{_i}}The amount of type to delay between automatically cycling an item.{{/i}}
              
             
           
-          Markup
-          Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.
+          {{_i}}Markup{{/i}}
+          {{_i}}Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.{{/i}}
  <div class="carousel">
   <!-- Carousel items -->
@@ -1214,41 +1214,41 @@ $('#myCollapsible').on('hidden', function () {
   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
 </div>
 
-          Methods
-          .carousel(options)
-          Initializes the carousel with an optional options object and starts cycling through items.
+          {{_i}}Methods{{/i}}
+          .carousel({{_i}}options{{/i}})
+          {{_i}}Initializes the carousel with an optional options object and starts cycling through items.{{/i}}
  $('.myCarousel').carousel({
   interval: 2000
 })
 
           .carousel('cycle')
-          Cycles through the carousel items from left to right.
+          {{_i}}Cycles through the carousel items from left to right.{{/i}}
           .carousel('pause')
-          Stops the carousel from cycling through items.
+          {{_i}}Stops the carousel from cycling through items.{{/i}}
           .carousel(number)
-          Cycles the carousel to a particular frame (0 based, similar to an array).
+          {{_i}}Cycles the carousel to a particular frame (0 based, similar to an array).{{/i}}
           .carousel('prev')
-          Cycles to the previous item.
+          {{_i}}Cycles to the previous item.{{/i}}
           .carousel('next')
-          Cycles to the next item.
-          Events
-          Bootstrap's modal class exposes a few events for hooking into modal functionality. 
+          {{_i}}Cycles to the next item.{{/i}}
+          {{_i}}Events{{/i}}
+          {{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}
           
-               
-               
+               
+               
-               
-               
+               
+               
-               
-               
+               
+               
@@ -1263,46 +1263,46 @@ $('.myCarousel').carousel({
     ================================================== -->
     
       
-        Typeahead bootstrap-typeahead.js
+        {{_i}}Typeahead{{/i}} bootstrap-typeahead.js
       
       
         
-          About
-          A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.
-          Download file
+          {{_i}}About{{/i}}
+          {{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}
+          {{_i}}Download file{{/i}}
         
         
-          Example
-          Start typing in the field below to show the typeahead results.
+          {{_i}}Example{{/i}}
+          {{_i}}Start typing in the field below to show the typeahead results.{{/i}}
           
             
           
           
-          Using bootstrap-typeahead.js
-          Call the typeahead via javascript:
+          {{_i}}Using bootstrap-typeahead.js{{/i}}
+          {{_i}}Call the typeahead via javascript:{{/i}}
           $('.typeahead').typeahead()
-          Options
+          {{_i}}Options{{/i}}
           

             
              Event Description {{_i}}Event{{/i}} {{_i}}Description{{/i}}
              
             
             
              slide This event fires immediately when the slide instance method is invoked. {{_i}}slide{{/i}} {{_i}}This event fires immediately when the slide instance method is invoked.{{/i}}
              
              slid This event is fired when the carousel has completed it's slide transition. {{_i}}slid{{/i}} {{_i}}This event is fired when the carousel has completed it's slide transition.{{/i}}
              
              
             
-               
-               
-               
-               
+               
+               
+               
+               
-               
-               
+               
+               
-               
+               
             
              Name type default description {{_i}}Name{{/i}} {{_i}}type{{/i}} {{_i}}default{{/i}} {{_i}}description{{/i}}
              
             
             
              items number {{_i}}items{{/i}} {{_i}}number{{/i}}
                8 The max number of items to display in the dropdown. {{_i}}The max number of items to display in the dropdown.{{/i}}
              
             
           
 
-          Markup
-          Add data attributes to register an element with typeahead functionality.
+          {{_i}}Markup{{/i}}
+          {{_i}}Add data attributes to register an element with typeahead functionality.{{/i}}
  <input type="text" data-provide="typeahead">
 
-- 
cgit v1.2.3


From bc9c89f1577aea454111a01a3d7a565c4cc63ded Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Muller?= 
Date: Tue, 24 Jan 2012 21:29:55 +0100
Subject: Start adding tag for Base CSS translation

---
 docs/templates/pages/base-css.mustache | 154 ++++++++++++++++-----------------
 1 file changed, 77 insertions(+), 77 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 28ca2912b..3b9cbd39a 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1,14 +1,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.
+  {{_i}}Base CSS{{/i}}
+  {{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}
   
-    Typography
-    Tables
-    Forms
-    Buttons
-    Icons by Glyphicons
+    {{_i}}Typography{{/i}}
+    {{_i}}Tables{{/i}}
+    {{_i}}Forms{{/i}}
+    {{_i}}Buttons{{/i}}
+    {{_i}}Icons by Glyphicons{{/i}}
   
 
 
@@ -17,43 +17,43 @@
 ================================================== -->
 
   
-    Typography Headings, paragraphs, lists, and other inline type elements
+    {{_i}}Typography Headings, paragraphs, lists, and other inline type elements{{/i}}
   
 
-  Headings & body copy
+  {{_i}}Headings & body copy{{/i}}
 
   
   
     
-      Typographic scale
-      The entire typographic grid is based on two Less variables in our preboot.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.
+      {{_i}}Typographic scale{{/i}}
+      {{_i}}The entire typographic grid is based on two Less variables in our preboot.less file: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height.{{/i}}
+      {{_i}}We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.{{/i}}
     
     
-      Example body text
+      {{_i}}Example body text{{/i}}
       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 ut id elit.
       Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
     
     
       
-        h1. Heading 1
-        h2. Heading 2
-        h3. Heading 3
-        h4. Heading 4
-        h5. Heading 5
-        h6. Heading 6
+        h1. {{_i}}Heading 1{{/i}}
+        h2. {{_i}}Heading 2{{/i}}
+        h3. {{_i}}Heading 3{{/i}}
+        h4. {{_i}}Heading 4{{/i}}
+        h5. {{_i}}Heading 5{{/i}}
+        h6. {{_i}}Heading 6{{/i}}
       
     
   
 
   
-  Emphasis, address, and abbreviation
+  {{_i}}Emphasis, address, and abbreviation{{/i}}
   
-        
-        
-        
+        
+        
+        
@@ -62,10 +62,10 @@
           <strong>
@@ -73,10 +73,10 @@
           <em>
@@ -84,10 +84,10 @@
           <abbr>
@@ -95,10 +95,10 @@
           <address>
@@ -106,13 +106,13 @@
 
   
     
-      Using emphasis
+      {{_i}}Using emphasis{{/i}}
       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.
+      {{_i}}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.{{/i}}
     
     
-      Example addresses
-      Here are two examples of how the <address> tag can be used:
+      {{_i}}Example addresses{{/i}}
+      {{_i}}Here are two examples of how the <address> tag can be used:{{/i}}
       
         Twitter, Inc.

         795 Folsom Ave, Suite 600

@@ -120,15 +120,15 @@
         P: (123) 456-7890
       
       
-        Full Name

-        first.last@gmail.com
+        {{_i}}Full Name{{/i}}

+        {{_i}}first.last@gmail.com{{/i}}
       
     
     
-      Example abbreviations
-      Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.
-      HTML is the best thing since sliced bread.
-      An abbreviation of the word attribute is attr.
+      {{_i}}Example abbreviations{{/i}}
+      {{_i}}Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.{{/i}}
+      {{_i}}HTML is the best thing since sliced bread.{{/i}}
+      {{_i}}An abbreviation of the word attribute is attr.{{/i}}
     
   
 
@@ -138,9 +138,9 @@
   
     
       Element Usage Optional {{_i}}Element{{/i}} {{_i}}Usage{{/i}} {{_i}}Optional{{/i}}
       
     
     
         
         
-          For emphasizing a snippet of text with important
+          {{_i}}For emphasizing a snippet of text with important{{/i}}
         
         
-          None
+          {{_i}}None{{/i}}
         
       
       
         
         
-          For emphasizing a snippet of text with stress
+          {{_i}}For emphasizing a snippet of text with stress{{/i}}
         
         
-          None
+          {{_i}}None{{/i}}
         
       
       
         
         
-          Wraps abbreviations and acronyms to show the expanded version on hover
+          {{_i}}Wraps abbreviations and acronyms to show the expanded version on hover{{/i}}
         
         
-          Include optional title for expanded text
+          {{_i}}Include optional title for expanded text{{/i}}
         
       
       
         
         
-          For contact information for its nearest ancestor or the entire body of work
+          {{_i}}For contact information for its nearest ancestor or the entire body of work{{/i}}
         
         
-          Preserve formatting by ending all lines with <br>
+          {{_i}}Preserve formatting by ending all lines with <br>{{/i}}
         
       
     
-        
-        
-        
+        
+        
+        
@@ -149,11 +149,11 @@
           <blockquote>
@@ -161,53 +161,53 @@
           <small>
     
       Element Usage Optional {{_i}}Element{{/i}} {{_i}}Usage{{/i}} {{_i}}Optional{{/i}}
       
     
     
         
         
-          Block-level element for quoting content from another source
+          {{_i}}Block-level element for quoting content from another source{{/i}}
         
         
-          Add cite attribute for source URL
-          Use .pull-left and .pull-right classes for floated options
+          {{_i}}Add cite attribute for source URL{{/i}}
+          {{_i}}Use .pull-left and .pull-right classes for floated options{{/i}}
         
       
       
         
         
-          Optional element for adding a user-facing citation, typically an author with title of work
+          {{_i}}Optional element for adding a user-facing citation, typically an author with title of work{{/i}}
         
         
-          Place the <cite> around the title or name of source
+          {{_i}}Place the <cite> around the title or name of source{{/i}}
         
       
     
   
   
     
-      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 &mdash; before it for styling purposes.
+      {{_i}}To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}
+      {{_i}}Include an optional <small> element to cite your source and you'll get an em dash &mdash; before it for styling purposes.{{/i}}
     
     
  <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
-  <small>Someone famous</small>
+  <small>{{_i}}Someone famous{{/i}}</small>
 </blockquote>
 
     
   

 
-  Example blockquotes
+  {{_i}}Example blockquotes{{/i}}
   
     
-      Default blockquotes are styled as such:
+      {{_i}}Default blockquotes are styled as such:{{/i}}
       
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
-        Someone famous in Body of work
+        {{_i}}Someone famous in Body of work{{/i}}
       
     
     
-      To float your blockquote to the right, add class="pull-right":
+      {{_i}}To float your blockquote to the right, add class="pull-right":{{/i}}
       
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
-        Someone famous in Body of work
+        {{_i}}Someone famous in Body of work{{/i}}
       
     
   
 
 
   
-  Lists
+  {{_i}}Lists{{/i}}
   
     
-      Unordered
+      {{_i}}Unordered{{/i}}
       <ul>
       
         Lorem ipsum dolor sit amet
@@ -228,7 +228,7 @@
       
     
     
-      Unstyled
+      {{_i}}Unstyled{{/i}}
       <ul class="unstyled">
       
         Lorem ipsum dolor sit amet
@@ -249,7 +249,7 @@
       
     
     
-      Ordered
+      {{_i}}Ordered{{/i}}
       <ol>
       
         Lorem ipsum dolor sit amet
@@ -263,11 +263,11 @@
       
     
     
-      Description
+      {{_i}}Description{{/i}}
       <dl>
       
-        Description lists
-        A description list is perfect for defining terms.
+        {{_i}}Description lists{{/i}}
+        {{_i}}A description list is perfect for defining terms.{{/i}}
         Euismod
         Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
         Donec id elit non mi porta gravida at eget metus.
@@ -280,42 +280,42 @@
 
   
 
-  Code Inline and block
+  {{_i}}Code Inline and block{{/i}}
   
-        
-        
+        
+        
-        
+        
-- 
cgit v1.2.3


From a9c6dca0940f5f689e9e8d70eda42783265bee37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Muller?= 
Date: Tue, 24 Jan 2012 21:45:42 +0100
Subject: More translation tags in Base CSS

---
 docs/templates/pages/base-css.mustache | 162 ++++++++++++++++-----------------
 1 file changed, 81 insertions(+), 81 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 3b9cbd39a..5a58b9663 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -134,7 +134,7 @@
 
 
   
-  Blockquotes
+  {{_i}}Blockquotes{{/i}}
   
     
       Element Result {{_i}}Element{{/i}} {{_i}}Result{{/i}}
       
     
     
       
         <code> In a line of text like this, your wrapped code will look like this <html> element. {{_i}}In a line of text like this, your wrapped code will look like this <html> element.{{/i}}
       
       
         <pre>
         
 <div>
-  <h1>Heading</h1>
-  <p>Something right here...</p>
+  <h1>{{_i}}Heading{{/i}}</h1>
+  <p>{{_i}}Something right here…{{/i}}</p>
 </div>
-          Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.
+          {{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}
         
       
       
         <pre class="prettyprint">
         
-          Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.
+          {{_i}}Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}
 <div>
-  <h1>Heading</h1>
-  <p>Something right here...</p>
+  <h1>{{_i}}Heading{{/i}}</h1>
+  <p>{{_i}}Something right here…{{/i}}</p>
 </div>
 <div>
-  <h1>Heading</h1>
-  <p>Something right here...</p>
+  <h1>{{_i}}Heading{{/i}}</h1>
+  <p>{{_i}}Something right here…{{/i}}</p>
 </div>
-          Download google-code-prettify and view the readme for how to use.
+          {{_i}}Download google-code-prettify and view the readme for how to use.{{/i}}
         
       
     
@@ -322,53 +322,53 @@
   
     
       
 
   
-  Inline labels for special attention
+  {{_i}}Inline labels for special attention{{/i}}
   
-        
-        
+        
+        
@@ -382,17 +382,17 @@
 ================================================== -->
 
   
-    Tables For, you guessed it, tabular data
+    {{_i}}Tables For, you guessed it, tabular data{{/i}}
   
 
-  Table markup
+  {{_i}}Table markup{{/i}}
   
     
       

     
       Labels Markup {{_i}}Labels{{/i}} {{_i}}Markup{{/i}}
       
     
     
       
         
-          Default
+          {{_i}}Default{{/i}}
         
         
-          <span class="label">Default</span>
+          <span class="label">{{_i}}Default{{/i}}</span>
         
       
       
         
-          New
+          {{_i}}New{{/i}}
         
         
-          <span class="label success">New</span>
+          <span class="label success">{{/_i}}New{{/i}}</span>
         
       
       
         
-          Warning
+          {{_i}}Warning{{/i}}
         
         
-          <span class="label warning">Warning</span>
+          <span class="label warning">{{_i}}Warning{{/i}}</span>
         
       
       
         
-          Important
+          {{_i}}Important{{/i}}
         
         
-          <span class="label important">Important</span>
+          <span class="label important">{{_i}}Important{{/i}}</span>
         
       
       
         
-          Notice
+          {{_i}}Notice{{/i}}
         
         
-          <span class="label notice">Notice</span>
+          <span class="label notice">{{_i}}Notice{{/i}}</span>
         
       
     
-            
-            
+            
+            
@@ -401,7 +401,7 @@
               <table>
@@ -409,7 +409,7 @@
               <thead>
@@ -417,7 +417,7 @@
               <tbody>
@@ -425,7 +425,7 @@
               <tr>
@@ -433,7 +433,7 @@
               <td>
@@ -441,8 +441,8 @@
               <th>
@@ -450,7 +450,7 @@
               <caption>
@@ -461,14 +461,14 @@
 <table>
   <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>
@@ -476,62 +476,62 @@
     
 
-  Table options
+  {{_i}}Table options{{/i}}

         
           Tag Description {{_i}}Tag{{/i}} {{_i}}Description{{/i}}
           
         
         
             
             
-              Wrapping element for displaying data in a tabular format
+              {{_i}}Wrapping element for displaying data in a tabular format{{/i}}
             
           
           
             
             
-              Container element for table header rows (<tr>) to label table columns
+              {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}}
             
           
           
             
             
-              Container element for table rows (<tr>) in the body of the table
+              {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}}
             
           
           
             
             
-              Container element for a set of table cells (<td> or <th>) that appears on a single row
+              {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}}
             
           
           
             
             
-              Default table cell
+              {{_i}}Default table cell{{/i}}
             
           
           
             
             
-              Special table cell for column (or row, depending on scope and placement) labels

-              Must be used within a <thead>
+              {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}

+              {{_i}}Must be used within a <thead>{{/i}}
             
           
           
             
             
-              Description or summary of what the table holds, especially useful for screen readers
+              {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}}
             
           
         
   
   
-        
-        
-        
+        
+        
+        
-        
-        
-        
+        
+        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
   
       Name Class Description {{_i}}Name{{/i}} {{_i}}Class{{/i}} {{_i}}Description{{/i}}
       
     
     
       Default None No styles, just columns and rows {{_i}}Default{{/i}} {{_i}}None{{/i}} {{_i}}No styles, just columns and rows{{/i}}
       
       Basic {{_i}}Basic{{/i}}
         
           .table
         Only horizontal lines between rows {{_i}}Only horizontal lines between rows{{/i}}
       
       Bordered {{_i}}Bordered{{/i}}
         
           .table-bordered
         Rounds corners and adds outter border {{_i}}Rounds corners and adds outter border{{/i}}
       
       Zebra-stripe {{_i}}Zebra-stripe{{/i}}
         
           .table-striped
         Adds light gray background color to odd rows (1, 3, 5, etc) {{_i}}Adds light gray background color to odd rows (1, 3, 5, etc){{/i}}
       
       Condensed {{_i}}Condensed{{/i}}
         
           .table-condensed
         Cuts vertical padding in half, from 8px to 4px, within all td and th elements {{_i}}Cuts vertical padding in half, from 8px to 4px, within all td and th elements{{/i}}
       
     
   
 
 
-  Example tables
+  {{_i}}Example tables{{/i}}
 
-  1. Default table styles
+  1. {{_i}}Default table styles{{/i}}
   
     
-      Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.
+      {{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.{{/i}}
  <table class="table">
-  ...
+  …
 </table>
     
     
@@ -539,9 +539,9 @@
         
           
             #
-            First Name
-            Last Name
-            Language
+            {{_i}}First Name{{/i}}
+            {{_i}}Last Name{{/i}}
+            {{_i}}Language{{/i}}
           
         
         
@@ -569,14 +569,14 @@
   
 
 
-  2. Striped table
+  2. {{_i}}Striped table{{/i}}
   
     
-      Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.
-      Note: Sprited tables use the :nth-child CSS selector and is not available in IE7-IE8.
+      {{_i}}Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.{{/i}}
+      {{_i}}Note: Sprited tables use the :nth-child CSS selector and is not available in IE7-IE8.{{/i}}
  <table class="table table-striped">
-  ...
+  …
 </table>
     
     
@@ -584,9 +584,9 @@
         
           
             #
-            First Name
-            Last Name
-            Language
+            {{_i}}First Name{{/i}}
+            {{_i}}Last Name{{/i}}
+            {{_i}}Language{{/i}}
           
         
         
@@ -614,13 +614,13 @@
   
 
 
-  3. Bordered table
+  3. {{_i}}Bordered table{{/i}}
   
     
-      Add borders around the entire table and rounded corners for aesthetic purposes.
+      {{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}
  <table class="table table-bordered">
-  ...
+  …
 </table>
     
     
@@ -628,9 +628,9 @@
         
           
             #
-            First Name
-            Last Name
-            Language
+            {{_i}}First Name{{/i}}
+            {{_i}}Last Name{{/i}}
+            {{_i}}Language{{/i}}
           
         
         
@@ -662,13 +662,13 @@
   
 
 
-  4. Condensed table
+  4. {{_i}}Condensed table{{/i}}
   
     
-      Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 10px to 5px).
+      {{_i}}Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).{{/i}}
  <table class="table table-condensed">
-  ...
+  …
 </table>
     
     
@@ -676,9 +676,9 @@
         
           
             #
-            First Name
-            Last Name
-            Language
+            {{_i}}First Name{{/i}}
+            {{_i}}Last Name{{/i}}
+            {{_i}}Language{{/i}}
           
         
         
@@ -707,10 +707,10 @@
 
 
 
-  5. Striped table w/ TableSorter.js
+  5. {{_i}}Striped table w/ TableSorter.js{{/i}}
   
     
-      Include the jQuery Tablesorter plugin and automaically get clear styles for sorted columns.
+      {{_i}}Include the jQuery Tablesorter plugin and automatically get clear styles for sorted columns.{{/i}}
  <script src="jquery.tablesorter.js"></script>
 <script >
@@ -722,7 +722,7 @@
   });
 </script>
 <table class="table table-striped">
-  ...
+  …
 </table>
     
     
@@ -730,9 +730,9 @@
         
           
             #
-            First Name
-            Last Name
-            Language
+            {{_i}}First Name{{/i}}
+            {{_i}}Last Name{{/i}}
+            {{_i}}Language{{/i}}
           
         
         
@@ -762,14 +762,14 @@
           
         
       
-      Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.
+      {{_i}}Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.{{/i}}
       
-            
-            
-            
+            
+            
+            
-- 
cgit v1.2.3


From 425e5bfb71527e932858ad41f9e234fc05d65c6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Muller?= 
Date: Tue, 24 Jan 2012 22:17:32 +0100
Subject: Final translation tags in Base CSS

---
 docs/templates/pages/base-css.mustache | 325 +++++++++++++++++----------------
 1 file changed, 163 insertions(+), 162 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 5a58b9663..b8c413888 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -809,125 +809,125 @@
 ================================================== -->
 
   
-    Forms
+    {{_i}}Forms{{/i}}
   
   
     
-      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.
+      {{_i}}Flexible HTML and CSS{{/i}}
+      {{_i}}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.{{/i}}
+      {{_i}}More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.{{/i}}
     
     
-      Four layouts included
-      Bootstrap comes with support for four types of form layouts:
+      {{_i}}Four layouts included{{/i}}
+      {{_i}}Bootstrap comes with support for four types of form layouts:{{/i}}
       
-        Vertical (default)
-        Search
-        Inline
-        Horizontal
+        {{_i}}Vertical (default){{/i}}
+        {{_i}}Search{{/i}}
+        {{_i}}Inline{{/i}}
+        {{_i}}Horizontal{{/i}}
       
-      Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.
+      {{_i}}Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.{{/i}}
     
     
-      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.
+      {{_i}}Control states and more{{/i}}
+      {{_i}}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.{{/i}}
+      {{_i}}States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.{{/i}}
     
   
 
-  Four types of forms
-  Bootstrap provides simple markup and styles for four styles of common web forms.
+  {{_i}}Four types of forms{{/i}}
+  {{_i}}Bootstrap provides simple markup and styles for four styles of common web forms.{{/i}}
   
         
           
             # First Name Last Name Language {{_i}}First Name{{/i}} {{_i}}Last Name{{/i}} {{_i}}Language{{/i}}
           
         
         
-        
-        
-        
+        
+        
+        
-        
-        
-        
+        
+        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
     
       Name Class Description {{_i}}Name{{/i}} {{_i}}Class{{/i}} {{_i}}Description{{/i}}
       
     
     
       Vertical (default) .vertical-form (not required) Stacked, left-aligned labels over controls {{_i}}Vertical (default){{/i}} .vertical-form ({{_i}}not required{{/i}}) {{_i}}Stacked, left-aligned labels over controls{{/i}}
       
       Horizontal {{_i}}Horizontal{{/i}}
         .form-horizontal Float left, right-aligned labels on same line as controls {{_i}}Float left, right-aligned labels on same line as controls{{/i}}
       
       Inline {{_i}}Inline{{/i}}
         .form-inline Left-aligned label and inline-block controls for compact style {{_i}}Left-aligned label and inline-block controls for compact style{{/i}}
       
       Search {{_i}}Search{{/i}}
         .form-search Extra-rounded text input for a typical search aesthetic {{_i}}Extra-rounded text input for a typical search aesthetic{{/i}}
       
     
   
 
 
-  Example forms using just form controls, no extra markup
+  {{_i}}Example forms using just form controls, no extra markup{{/i}}
   
     
-      Basic form
-      With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.
+      {{_i}}Basic form{{/i}}
+      {{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}
       
-        Label name
-        
+        {{_i}}Label name{{/i}}
+        
         
-           Check me out
+           {{_i}}Check me out{{/i}}
         
-        
+        
       
     
     
-      Search form
-      Reflecting default WebKit styles, just add .form-search for extra rounded search fields.
+      {{_i}}Search form{{/i}}
+      {{_i}}Reflecting default WebKit styles, just add .form-search for extra rounded search fields.{{/i}}
       
         
-        
+        
       
     
     
-      Inline form
-      Inputs are block level to start. For .form-inline and .form-horizontal, we use inline-block.
+      {{_i}}Inline form{{/i}}
+      {{_i}}Inputs are block level to start. For .form-inline and .form-horizontal, we use inline-block.{{/i}}
       
-        
-        
-        
+        
+        
+        
       
     
   

 
   

 
-  Horizontal forms
+  {{_i}}Horizontal forms{{/i}}
   
     
       
-        Controls Bootstrap supports
+        {{_i}}Controls Bootstrap supports{{/i}}
         
-          Text input
+          {{_i}}Text input{{/i}}
           
             
-            In addition to freeform text, any HTML5 text-based input appears like so.
+            {{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}
           
         
         
-          Checkbox
+          {{_i}}Checkbox{{/i}}
           
             
               
-              Option one is this and that—be sure to include why it’s great
+              {{_i}}Option one is this and that—be sure to include why it’s great{{/i}}
             
           
         
         
-          Select list
+          {{_i}}Select list{{/i}}
           
             
               
@@ -951,39 +951,39 @@
           
         
         
-          File input
+          {{_i}}File input{{/i}}
           
             
           
         
         
-          Textarea
+          {{_i}}Textarea{{/i}}
           
             
           
         
         
-          
-          
+          
+          
         
       
     
     
       
-        What's included
-        Shown on the left are all the default form controls we support. Here's the bulleted list:
+        {{_i}}What's included{{/i}}
+        {{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}
         
-          text inputs (text, password, email, etc)
-          checkbox
-          radio
-          select
-          multiple select
-          file input
-          textarea
+          {{_i}}text inputs (text, password, email, etc){{/i}}
+          {{_i}}checkbox{{/i}}
+          {{_i}}radio{{/i}}
+          {{_i}}select{{/i}}
+          {{_i}}multiple select{{/i}}
+          {{_i}}file input{{/i}}
+          {{_i}}textarea{{/i}}
         
         
-        New defaults with v2.0
-        Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.
+        {{_i}}New defaults with v2.0{{/i}}
+        {{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}
       
     
   
@@ -993,66 +993,66 @@
   
     
       
-        Form control states
+        {{_i}}Form control states{{/i}}
         
-          Focused input
+          {{_i}}Focused input{{/i}}
           
-            
+            
           
         
         
-          Disabled input
+          {{_i}}Disabled input{{/i}}
           
-            
+            
           
         
         
-          Disabled checkbox
+          {{_i}}Disabled checkbox{{/i}}
           
             
               
-              This is a disabled checkbox
+              {{_i}}This is a disabled checkbox{{/i}}
             
           
         
         
-          Input with warning
+          {{_i}}Input with warning{{/i}}
           
             
-            Something may have gone wrong
+            {{_i}}Something may have gone wrong{{/i}}
           
         
         
-          Input with error
+          {{_i}}Input with error{{/i}}
           
             
-            Please correct the error
+            {{_i}}Please correct the error{{/i}}
           
         
         
-          Input with success
+          {{_i}}Input with success{{/i}}
           
             
-            Woohoo!
+            {{_i}}Woohoo!{{/i}}
           
         
         
-          
-          
+          
+          
         
       
     
     
       
-        Redesigned browser states
-        Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.
+        {{_i}}Redesigned browser states{{/i}}
+        {{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}
         
-        Form validation
-        It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.
+        {{_i}}Form validation{{/i}}
+        {{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.{{/i}}
  <fieldset
   class="control-group error">
-  ...
+  …
 </fieldset>
 
       
@@ -1064,38 +1064,38 @@
   
     
       
-        Extending form controls
+        {{_i}}Extending form controls{{/i}}
         
-          Form sizes
+          {{_i}}Form sizes{{/i}}
           
             
             
             
-            Use the same .span* classes from the grid system for input sizes.
+            {{_i}}Use the same .span* classes from the grid system for input sizes.{{/i}}
           
         
         
-          Prepended text
+          {{_i}}Prepended text{{/i}}
           
             
               @
               
             
-            Here's some help text
+            {{_i}}Here's some help text{{/i}}
           
         
         
-          Appended text
+          {{_i}}Appended text{{/i}}
           
             
               
               .00
             
-            Here's more help text
+            {{_i}}Here's more help text{{/i}}
           
         
         
-          Inline checkboxes
+          {{_i}}Inline checkboxes{{/i}}
           
             
                1
@@ -1109,50 +1109,50 @@
           
         
         
-          Checkboxes
+          {{_i}}Checkboxes{{/i}}
           
             
               
-              Option one is this and that—be sure to include why it’s great
+              {{_i}}Option one is this and that—be sure to include why it’s great{{/i}}
             
             
               
-              Option two can also be checked and included in form results
+              {{_i}}Option two can also be checked and included in form results{{/i}}
             
             
               
-              Option three can—yes, you guessed it—also be checked and included in form results
+              {{_i}}Option three can—yes, you guessed it—also be checked and included in form results{{/i}}
             
-            Note: Labels surround all the options for much larger click areas and a more usable form.
+            {{_i}}Note: Labels surround all the options for much larger click areas and a more usable form.{{/i}}
           
         
         
-          Radio buttons
+          {{_i}}Radio buttons{{/i}}
           
             
               
-              Option one is this and that—be sure to include why it’s great
+              {{_i}}Option one is this and that—be sure to include why it’s great{{/i}}
             
             
               
-              Option two can is something else and selecting it will deselect option one
+              {{_i}}Option two can is something else and selecting it will deselect option one{{/i}}
             
           
         
         
-          
-          
+          
+          
         
       
     
     
       
-        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.
+        {{_i}}Prepend & append inputs{{/i}}
+        {{_i}}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.{{/i}}
         
-        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.
+        {{_i}}Checkboxes and radios{{/i}}
+        {{_i}}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">.{{/i}}
+        {{_i}}Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.{{/i}}
       
     
   

@@ -1162,81 +1162,82 @@
 
 
   
-    Buttons
+    {{_i}}Buttons{{/i}}
   
   
-        
-        
-        
+        
+        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
-        
+        
     
       Button Class Description {{_i}}Button{{/i}} {{_i}}Class{{/i}} {{_i}}Description{{/i}}
       
     
     
       Default {{_i}}Default{{/i}}
         .btn Standard gray button with gradient {{_i}}Standard gray button with gradient{{/i}}
       
       Primary {{_i}}Primary{{/i}}
         .primary Provides extra visual weight and identifies the primary action in a set of buttons {{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
       
       Info {{_i}}Info{{/i}}
         .info Used as an alternate to the default styles {{_i}}Used as an alternate to the default styles{{/i}}
       
       Success {{_i}}Success{{/i}}
         .success Indicates a successful or positive action {{_i}}Indicates a successful or positive action{{/i}}
       
       Danger {{_i}}Danger{{/i}}
         .danger Indicates a dangerous or potentially negative action {{_i}}Indicates a dangerous or potentially negative action{{/i}}
       
     
   
 
   
     
-      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.
+      {{_i}}Buttons for actions{{/i}}
+      {{_i}}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.{{/i}}
     
     
-      For anchors and forms
-      Button styles can be applied to anything with the .btn applied. However, typically you’ll want to apply these to only <a> and <button> elements.
+      {{_i}}For anchors and forms{{/i}}
+      {{_i}}Button styles can be applied to anything with the .btn applied. However, typically you’ll want to apply these to only <a> and <button> elements.{{/i}}
     
     
-      Note: All buttons must include the .btn class. Button styles should be applied to <button> and <a> elements for consistency.
+      {{_i}}Note: All buttons must include the .btn class. Button styles should be applied to <button> and <a> elements for consistency.{{/i}}
     
   
 
   
     
-      Multiple sizes
-      Fancy larger or smaller buttons? Have at it!
+      {{_i}}Multiple sizes{{/i}}
+      {{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}
       
-        Primary action
-        Action
+        {{_i}}Primary action{{/i}}
+        {{_i}}Action{{/i}}
       
       
-        Primary action
-        Action
+        {{_i}}Primary action{{/i}}
+        {{_i}}Action{{/i}}
       
     
     
-      Disabled state
-      For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.
+      {{_i}}Disabled state{{/i}}
+      {{_i}}For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.{{/i}}
       
-        Primary action
-        Action
+        {{_i}}Primary action{{/i}}
+        {{_i}}Action{{/i}}
       
       
-         
+        
+        
       
     
   
@@ -1251,7 +1252,7 @@
 ================================================== -->
 
   
-    Icons Graciously provided by Glyphicons
+    {{_i}}Icons Graciously provided by Glyphicons{{/i}}
   
   
     
@@ -1365,7 +1366,7 @@
       
     
     
-      Light red background color is only used to show the dimensions of the icons in the docs.
+      {{_i}}Light red background color is only used to show the dimensions of the icons in the docs.{{/i}}
     
   
 
@@ -1373,38 +1374,38 @@
 
   
     
-      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.
-      Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit. Please consider doing the same in your projects.
+      {{_i}}Built as a sprite{{/i}}
+      {{_i}}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.{{/i}}
+      {{_i}}Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit. Please consider doing the same in your projects.{{/i}}
     
     
-      How to use
-      With v2.0.0, the <i> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:
+      {{_i}}How to use{{/i}}
+      {{_i}}With v2.0.0, the <i> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:{{/i}}
  <i class="chevron-left"></i>
 
-      There are over 100 classes to choose from for your icons. Just add an <i> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.
+      {{_i}}There are over 100 classes to choose from for your icons. Just add an <i> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.{{/i}}
     
     
-      Use cases
-      Icons are great, but where would one use them? Here are a few ideas:
+      {{_i}}Use cases{{/i}}
+      {{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}
       
-        As visuals for your sidebar navigation
-        For a purely icon-driven nav
-        For buttons to help convey the meaning of an action
-        With links to share context on a user's destination
+        {{_i}}As visuals for your sidebar navigation{{/i}}
+        {{_i}}For a purely icon-driven nav{{/i}}
+        {{_i}}For buttons to help convey the meaning of an action{{/i}}
+        {{_i}}With links to share context on a user's destination{{/i}}
       
-      Essentially, anywhere you can put an <i> tag, you can put an icon.
+      {{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon.{{/i}}
     
   
 
-  Examples
+  {{_i}}Examples{{/i}}
   
     
-      Use them in buttons, or in button groups for a toolbar style presentation.
+      {{_i}}Use them in buttons, or in button groups for a toolbar style presentation.{{/i}}
       
-         Refresh
-         Settings
+         {{_i}}Refresh{{/i}}
+         {{_i}}Settings{{/i}}
       
       
         
@@ -1421,12 +1422,12 @@
       
     
     
-      Or, use them in navigation.
+      {{_i}}Or, use them in navigation.{{/i}}
       
         
-           Home
-           Library
-           Applications
+           {{_i}}Home{{/i}}
+           {{_i}}Library{{/i}}
+           {{_i}}Applications{{/i}}
         
       
 
     
-- 
cgit v1.2.3


From 72117c3f9751d9ccb7bebf76f8a5776c99a51857 Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Tue, 24 Jan 2012 13:57:44 -0800
Subject: add i18n for less.mustache

---
 docs/templates/pages/less.mustache | 138 ++++++++++++++++++-------------------
 1 file changed, 69 insertions(+), 69 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index 568e857be..d6376ae2f 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -1,8 +1,8 @@
       
       
-        Using LESS with Bootstrap
-        Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.
+        {{_i}}Using LESS with Bootstrap{{/i}}
+        {{_i}}Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}
       
 
 
@@ -10,35 +10,35 @@
       
       
-        Built with LESS
+        {{_i}}Built with LESS{{/i}}
       
       
         
-          Why LESS?
-          Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.
+          {{_i}}Why LESS?{{/i}}
+          {{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}
         
         
-          What's included?
-          As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.
+          {{_i}}What's included?{{/i}}
+          {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}
         
         
-          Learn more
+          {{_i}}Learn more{{/i}}
           
-          Visit the official website at http://lesscss.org to learn more.
+          {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}
         
       
       
         
-          Variables
-          Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.
+          {{_i}}Variables{{/i}}
+          {{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}
         
         
-          Mixins
-          Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.
+          {{_i}}Mixins{{/i}}
+          {{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}
         
         
-          Operations
-          Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.
+          {{_i}}Operations{{/i}}
+          {{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}
         
       
 
@@ -47,35 +47,35 @@
       
       
-        Variables from variables.less
+        {{_i}}Variables from variables.less{{/i}}
       
 
-          Hyperlinks
+          {{_i}}Hyperlinks{{/i}}
           
-                
-                
-                
+                
+                
+                
-                
+                
-                
+                
             
               Variable Value Usage {{_i}}Variable{{/i}} {{_i}}Value{{/i}} {{_i}}Usage{{/i}}
               
             
             
               
                 @linkColor
                 #0069d6 Default link text color {{_i}}Default link text color{{/i}}
               
               
                 @linkColorHover
                 darken(@linkColor, 15) Default link text hover color {{_i}}Default link text hover color{{/i}}
               
             
           
 
       
         
-          Grayscale colors
+          {{_i}}Grayscale colors{{/i}}
           
@@ -106,7 +106,7 @@
           
             
               
         
         
-          Accent colors
+          {{_i}}Accent colors{{/i}}
           
@@ -144,7 +144,7 @@
 
       
         
-          Grid system
+          {{_i}}Grid system{{/i}}
           

             
               
@@ -167,7 +167,7 @@
           
             
               
         
         
-          Typography
+          {{_i}}Typography{{/i}}
           
@@ -190,7 +190,7 @@
 
       
         
-          Visuals
+          {{_i}}Visuals{{/i}}
         
         
           

             
               
@@ -209,7 +209,7 @@
       
-        Mixins from mixins.less
+        {{_i}}Mixins from mixins.less{{/i}}
       
 
 
@@ -217,7 +217,7 @@
       
-        Operations
+        {{_i}}Operations{{/i}}
       
 
 
@@ -225,7 +225,7 @@
       
-        Compiling LESS and Bootstrap
+        {{_i}}Compiling LESS and Bootstrap{{/i}}
       
 
 
@@ -235,25 +235,25 @@
 ================================================== -->
 
 
-  Using Bootstrap with Less Supercharge your CSS with variables, mixins, and functions
+  {{_i}}Using Bootstrap with Less Supercharge your CSS with variables, mixins, and functions{{/i}}
 
 
   
-    Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.
-    Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.
+    {{_i}}Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.{{/i}}
+    {{_i}}Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.{{/i}}
   
   
-    How to use it
-    Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.
+    {{_i}}How to use it{{/i}}
+    {{_i}}Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.{{/i}}
  <link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
 <script src="js/less-1.1.3.min.js"></script>
-Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.
+{{_i}}Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.{{/i}}
 
-    What’s included
-    Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.
-    Variables
-    Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.
+    {{_i}}What’s included{{/i}}
+    {{_i}}Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.{{/i}}
+    {{_i}}Variables{{/i}}
+    {{_i}}Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.{{/i}}
  // Links
 @linkColor:         #8b59c2;
@@ -281,16 +281,16 @@
 @baseline:          18px;
 
 
-Commenting
-Less also provides another style of commenting in addition to CSS’s normal /* ... */ syntax.
+{{_i}}Commenting{{/i}}
+{{_i}}Less also provides another style of commenting in addition to CSS’s normal /* ... */ syntax.{{/i}}
  // This is a comment
 /* This is also a comment */
 
 
-Mixins up the wazoo
-Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.
-Font stacks
+{{_i}}Mixins up the wazoo{{/i}}
+{{_i}}Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.{{/i}}
+{{_i}}Font stacks{{/i}}
  #font {
   .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
@@ -307,7 +307,7 @@
   ...
 }
 
-Gradients
+{{_i}}Gradients{{/i}}
  #gradient {
   ...
@@ -326,8 +326,8 @@
 }
 
 
-Operations
-Get fancy and perform some math to generate flexible and powerful mixins like the one below.
+{{_i}}Operations{{/i}}
+{{_i}}Get fancy and perform some math to generate flexible and powerful mixins like the one below.{{/i}}
  // Griditude
 @gridColumns:       16;
@@ -341,62 +341,62 @@
 }
 
 
-    Compiling Less
-    After modifying the .less files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.
-    Ways to compile
+    {{_i}}Compiling Less{{/i}}
+    {{_i}}After modifying the .less files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.{{/i}}
+    {{_i}}Ways to compile{{/i}}
     

       
       
       
-          
-          
+          
+          
-          
+          
-          
+          
-          
+          
-          
+          
-          
+          
-          
+          
-          
+          
       
         Method Steps {{_i}}Method{{/i}} {{_i}}Steps{{/i}}
         
       
       
         Node with makefile {{_i}}Node with makefile{{/i}}
           
-            Install the LESS command line compiler with npm by running the following command:
+            {{_i}}Install the LESS command line compiler with npm by running the following command:{{/i}}
             $ npm install less
-            Once installed just run make from the root of your bootstrap directory and you're all set.
-            Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).
+            {{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}
+            {{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}
           
         
Javascript {{_i}}Javascript{{/i}}
           
-            Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.
+            {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}
  <link rel="stylesheet/less" href="/path/to/bootstrap.less">
 <script src="/path/to/less.js"></script>
 
-            To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.
+            {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}
           
         
         Command line {{_i}}Command line{{/i}}
           
-            Install the LESS command line tool via Node and run the following command:
+            {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}
               $ lessc ./lib/bootstrap.less > bootstrap.css
-            Be sure to include --compress in that command if you're trying to save some bytes!
+            {{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}
           
         
         Unofficial Mac app {{_i}}Unofficial Mac app{{/i}}
           
-            The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.
-            If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.
+            {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}
+            {{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}
           
         
         
           Crunch Crunch is a great looking LESS editor and compiler built on Adobe Air. {{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}
         
         
           CodeKit Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript. {{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}
         
         
           Simpless Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub. {{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}
         
       
     
-- 
cgit v1.2.3


From f03e170054be081738493c6dace4b37a7a3d40cd Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Tue, 24 Jan 2012 14:08:03 -0800
Subject: scaffolding i18n

---
 docs/templates/pages/scaffolding.mustache | 134 +++++++++++++++---------------
 1 file changed, 67 insertions(+), 67 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index c586af1b9..7c0c12e8f 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -1,12 +1,12 @@
       
       
-        Scaffolding
-        Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.
+        {{_i}}Scaffolding{{/i}}
+        {{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}
         
-          Grid system
-          Layouts
-          Responsive design
+          {{_i}}Grid system{{/i}}
+          {{_i}}Layouts{{/i}}
+          {{_i}}Responsive design{{/i}}
         
       
 
@@ -16,7 +16,7 @@
 ================================================== -->
 
   
-    Grid system 12 columns with a responsive twist
+    {{_i}}Grid system 12 columns with a responsive twist{{/i}}
   
 
   Default 940px grid
@@ -53,8 +53,8 @@
 
   
     
-      The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.
-      It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.
+      {{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}
+      {{_i}}It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.{{/i}}
     
     
 @@ -65,7 +65,7 @@
 
     
     
-      As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.
+      {{_i}}As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}
     
   

 
@@ -84,20 +84,20 @@
 
   

 
-  Nesting columns
+  {{_i}}Nesting columns{{/i}}
   
     
-      With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.
-      Example
+      {{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.{{/i}}
+      {{_i}}Example{{/i}}
       
         
-          Level 1 of column
+          {{_i}}Level 1 of column{{/i}}
           
             
-              Level 2
+              {{_i}}Level 2{{/i}}
             
             
-              Level 2
+              {{_i}}Level 2{{/i}}
             
           
         
@@ -107,10 +107,10 @@
  <div class="row">
   <div class="span12">
-    Level 1 of column
+    {{_i}}Level 1 of column{{/i}}
     <div class="row">
-      <div class="span6">Level 2</div>
-      <div class="span6">Level 2</div>
+      <div class="span6">{{_i}}Level 2{{/i}}</div>
+      <div class="span6">{{_i}}Level 2{{/i}}</div>
     </div>
   </div>
 </div>
@@ -118,50 +118,50 @@
     
   
 
-  Grid customization
+  {{_i}}Grid customization{{/i}}
   
-        
-        
-        
+        
+        
+        
-        
+        
-        
+        
-        
+        
-        
-        
+        
+        
     
       Variable Default value Description {{_i}}Variable{{/i}} {{_i}}Default value{{/i}} {{_i}}Description{{/i}}
       
     
     
       
         @gridColumns
         12 Number of columns {{_i}}Number of columns{{/i}}
       
       
         @gridColumnWidth
         60px Width of each column {{_i}}Width of each column{{/i}}
       
       
         @gridGutterWidth
         20px Negative space between columns {{_i}}Negative space between columns{{/i}}
       
       
         @siteWidth Computed sum of all columns and gutters Counts number of columns and gutters to set width of the .fixed-container() mixin {{_i}}Computed sum of all columns and gutters{{/i}} {{_i}}Counts number of columns and gutters to set width of the .fixed-container() mixin{{/i}}
       
     
   
   
     
-      Variables in LESS
-      Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.
+      {{_i}}Variables in LESS{{/i}}
+      {{_i}}Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.{{/i}}
     
     
-      How to customize
-      Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the four ways documented to recompile.
+      {{_i}}How to customize{{/i}}
+      {{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the four ways documented to recompile.{{/i}}
     
     
-      Staying responsive
-      Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.
+      {{_i}}Staying responsive{{/i}}
+      {{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.{{/i}}
     
   

 
@@ -173,13 +173,13 @@
 ================================================== -->
 
   
-    Layouts Basic templates to create webpages
+    {{_i}}Layouts Basic templates to create webpages{{/i}}
   
 
   
     
-      Fixed layout
-      The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.
+      {{_i}}Fixed layout{{/i}}
+      {{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.{{/i}}
       
         
       
@@ -192,8 +192,8 @@

Fluid layout

<div class="fluid-container"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.

{{_i}}Fluid layout{{/i}}

{{_i}}<div class="fluid-container"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}

@@ -221,7 +221,7 @@ ================================================== -->

@@ -229,42 +229,42 @@ Responsive devices

Supported devices

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

{{_i}}Supported devices{{/i}}

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

- - - - + + + + - + - + - + - + - + - + - + @@ -272,12 +272,12 @@

Label	Layout width	Column width	Gutter width	{{_i}}Label{{/i}}	{{_i}}Layout width{{/i}}
Smartphones	{{_i}}Smartphones{{/i}}	480px and below	Fluid columns, no fixed widths		{{_i}}Fluid columns, no fixed widths{{/i}}
Portrait tablets	{{_i}}Portrait tablets{{/i}}	480px to 768px	Fluid columns, no fixed widths		{{_i}}Fluid columns, no fixed widths{{/i}}
Landscape tablets	{{_i}}Landscape tablets{{/i}}	768px to 940px	44px	20px
Default	{{_i}}Default{{/i}}	940px and up	60px	20px
Large display	{{_i}}Large display{{/i}}	1210px and up	70px	30px

What they do

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

{{_i}}What they do{{/i}}

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

Modify the width of column in our grid
Stack elements instead of float wherever necessary
Resize headings and text to be more appropriate for devices
{{_i}}Modify the width of column in our grid{{/i}}
{{_i}}Stack elements instead of float wherever necessary{{/i}}
{{_i}}Resize headings and text to be more appropriate for devices{{/i}}

@@ -285,29 +285,29 @@
-

Using the media queries

{{_i}}Using the media queries{{/i}}

{{_i}}Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:{{/i}}

Use the compiled responsive version, bootstrap.reponsive.css
Add @import "responsive.less" and recompile Bootstrap
Compile responsive.less as a separate file and include that
{{_i}}Use the compiled responsive version, bootstrap.reponsive.css{{/i}}
{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}
{{_i}}Compile responsive.less as a separate file and include that{{/i}}

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

{{_i}}Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}

-  // Landscape phones and down
+  // {{_i}}Landscape phones and down{{/i}}
   @media (max-width: 480px) { ... }
 
-  // Landscape phone to portrait tablet
+  // {{_i}}Landscape phone to portrait tablet{{/i}}
   @media (min-width: 480px) and (max-width: 768px) { ... }
 
-  // Portrait tablet to landscape and desktop
+  // {{_i}}Portrait tablet to landscape and desktop{{/i}}
   @media (min-width: 768px) and (max-width: 940px) { ... }
 
-  // Large desktop
+  // {{_i}}Large desktop{{/i}}
   @media (min-width: 1210px) { .. }

-- cgit v1.2.3 From f4543ecb19f41f93db94e56601e0a4132ea4828f Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jan 2012 14:14:01 -0800 Subject: add i18n to upgrading --- docs/templates/pages/upgrading.mustache | 74 ++++++++++++++++----------------- 1 file changed, 37 insertions(+), 37 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache index 475539284..cc731eae1 100644 --- a/docs/templates/pages/upgrading.mustache +++ b/docs/templates/pages/upgrading.mustache @@ -1,78 +1,78 @@

Upgrading to Bootstrap 2

Learn about significant changes and additions since v1.4 with this handy guide.

{{_i}}Upgrading to Bootstrap 2{{/i}}

{{_i}}Learn about significant changes and additions since v1.4 with this handy guide.{{/i}}

Rough outline

Docs completely overhauled +
{{_i}}Docs completely overhauled{{/i}}
- Responsive thanks to new grid system
- Now less marketing and more information
- Extensive use of tables to share classes and elements of most components
- Broken down into several pages for easier consumption
- {{_i}}Responsive thanks to new grid system{{/i}}
- {{_i}}Now less marketing and more information{{/i}}
- {{_i}}Extensive use of tables to share classes and elements of most components{{/i}}
- {{_i}}Broken down into several pages for easier consumption{{/i}}
Updated grid system, now only 12 columns +
{{_i}}Updated grid system, now only 12 columns{{/i}}
- Same great classes, but now only 12 columns
- Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more
- {{_i}}Same great classes, but now only 12 columns{{/i}}
- {{_i}}Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more{{/i}}
New thumbnails (previously media grids) +
{{_i}}New thumbnails (previously media grids){{/i}}
- .media-grid class has been changed to .thumbnails
- Individual thumbnails now require .thumbnail class
- {{_i}}.media-grid class has been changed to .thumbnails{{/i}}
- {{_i}}Individual thumbnails now require .thumbnail class{{/i}}
Updated forms +
{{_i}}Updated forms{{/i}}
- Default form style is now stacked to use less CSS and add flexibility
- Exact same markup is required for vertical or horizontal forms—just swap the classes
- New form defaults for search, inline, vertical, and horizontal
- {{_i}}Default form style is now stacked to use less CSS and add flexibility{{/i}}
- {{_i}}Exact same markup is required for vertical or horizontal forms—just swap the classes{{/i}}
- {{_i}}New form defaults for search, inline, vertical, and horizontal{{/i}}
Updated tables
- Table classes made more consistent
- Removed unused table color options (too much code for such little impact)
- {{_i}}Table classes made more consistent{{/i}}
- {{_i}}Removed unused table color options (too much code for such little impact){{/i}}
Typography
- Right-aligned option for blockquotes if float: right;
- h4 elements were dropped from 16px to 14px with a default line-height of 18px
- h5 elements were dropped from 14px to 12px
- h6 elements were dropped from 13px to 11px
- {{_i}}Right-aligned option for blockquotes if float: right;{{/i}}
- {{_i}}h4 elements were dropped from 16px to 14px with a default line-height of 18px{{/i}}
- {{_i}}h5 elements were dropped from 14px to 12px{{/i}}
- {{_i}}h6 elements were dropped from 13px to 11px{{/i}}
Buttons +
{{_i}}Buttons{{/i}}
- Added button bar options
- {{_i}}Added button bar options{{/i}}
Examples +
{{_i}}Examples{{/i}}
- Fluid examples redone. .fluid-container now requires a .sidebar-left or .sidebar-right as well. Fluid sidebar element has a new class, .fluid-sidebar.
- {{_i}}Fluid examples redone. .fluid-container now requires a .sidebar-left or .sidebar-right as well. Fluid sidebar element has a new class, .fluid-sidebar.{{/i}}
Dropdown menus +
{{_i}}Dropdown menus{{/i}}
- Updated the .dropdown-menu to tighten up spacing
- Now requires you to add a <span class="caret"></span> to show the dropdown arrow
- The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.
- {{_i}}Updated the .dropdown-menu to tighten up spacing{{/i}}
- {{_i}}Now requires you to add a <span class="caret"></span> to show the dropdown arrow{{/i}}
- {{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}
Navigation +
{{_i}}Navigation{{/i}}
- Tabs and pills now require the use of a new base class, .nav, on their <ul>
- New nav list component added that uses the same base class, .nav
- Vertical tabs and pills have been added—just add .stacked to the <ul>
- Pills were restyled to be less rounded by default
- Pills now have dropdown menu support (they share the same markup and styles as tabs)
- {{_i}}Tabs and pills now require the use of a new base class, .nav, on their <ul>{{/i}}
- {{_i}}New nav list component added that uses the same base class, .nav{{/i}}
- {{_i}}Vertical tabs and pills have been added—just add .stacked to the <ul><{{/i}}/li> +
- {{_i}}Pills were restyled to be less rounded by default{{/i}}
- {{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}

-- cgit v1.2.3 From a800d6ceac11eb834295567c20e890abf88c64af Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jan 2012 14:22:02 -0800 Subject: i18n index --- docs/templates/pages/index.mustache | 106 ++++++++++++++++++------------------ 1 file changed, 53 insertions(+), 53 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 8927bc640..1e77d4a25 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -4,34 +4,34 @@ ================================================== -->

Bootstrap,
from Twitter

Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.

{{_i}}Bootstrap,
from Twitter{{/i}}

{{_i}}Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.{{/i}}

- Download on GitHub - Get started → + {{_i}}Download on GitHub{{/i}} + {{_i}}Get started →{{/i}}

Feature highlights

{{_i}}Feature highlights{{/i}}

× Built on LESS
× Complete styleguide docs
× Fully responsive design
× Small footprint (7kb gzipped)
× Support for IE7 and up
× Custom jQuery plugins
× Dozens of components
{{_i}}× Built on LESS{{/i}}
{{_i}}× Complete styleguide docs{{/i}}
{{_i}}× Fully responsive design{{/i}}
{{_i}}× Small footprint (7kb gzipped){{/i}}
{{_i}}× Support for IE7 and up{{/i}}
{{_i}}× Custom jQuery plugins{{/i}}
{{_i}}× Dozens of components{{/i}}

Quick links
{{_i}}Quick links{{/i}}
GitHub
Issues
Roadmap
Changelog
{{_i}}Issues{{/i}}
{{_i}}Roadmap{{/i}}
{{_i}}Changelog{{/i}}
·

@@ -56,8 +56,8 @@

Built with Bootstrap.

For even more sites built with Bootstrap, visit the unofficial Tumblr.

{{_i}}Built with Bootstrap.{{/i}}

{{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr.{{/i}}

@@ -76,109 +76,109 @@

Designed for everyone, everywhere.

Need reasons to love Bootstrap? Look no further.

+ +

{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

Built for and by nerds

Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

{{_i}}Built for and by nerds{{/i}}

{{_i}}Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.{{/i}}

For all skill levels

Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

{{_i}}For all skill levels{{/i}}

{{_i}}Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}

Cross-everything

Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

{{_i}}Cross-everything{{/i}}

{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}

12-column grid

Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

{{_i}}12-column grid{{/i}}

{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}

Responsive design

With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

{{_i}}Responsive design{{/i}}

{{_i}}With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}

Styleguide docs

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

{{_i}}Styleguide docs{{/i}}

{{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}

Growing library

Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

{{_i}}Growing library{{/i}}

{{_i}}Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}

Custom jQuery plugins

What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

{{_i}}Custom jQuery plugins{{/i}}

{{_i}}What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.{{/i}}

Built on LESS

Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

{{_i}}Built on LESS{{/i}}

{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}

HTML5

Built to support new HTML5 elements and syntax.

{{_i}}Built to support new HTML5 elements and syntax.{{/i}}

CSS3

Progressively enhanced components for ultimate style.

{{_i}}Progressively enhanced components for ultimate style.{{/i}}

Open-source

Built for and maintained by the community via GitHub.

{{_i}}Open-source{{/i}}

{{_i}}Built for and maintained by the community via GitHub.{{/i}}

Made at Twitter

Brought to you by an experienced engineer and designer.

{{_i}}Made at Twitter{{/i}}

{{_i}}Brought to you by an experienced engineer and designer.{{/i}}

Get started in no time.

Quickly start using Bootstrap within your workflow and development process.

{{_i}}Get started in no time.{{/i}}

{{_i}}Quickly start using Bootstrap within your workflow and development process.{{/i}}

-- cgit v1.2.3 From fea1dc906e153440896a8c62d89fd2dfa7c39b9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Muller?= Date: Tue, 24 Jan 2012 23:23:43 +0100 Subject: i18n for index page --- docs/templates/pages/index.mustache | 116 ++++++++++++++++++------------------ 1 file changed, 58 insertions(+), 58 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 8927bc640..072ed6da6 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -4,34 +4,34 @@ ================================================== -->

Bootstrap,
from Twitter

Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.

{{_i}}Bootstrap,
from Twitter{{/i}}

{{_i}}Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.{{/i}}

- Download on GitHub - Get started → + {{_i}}Download on GitHub{{/i}} + {{_i}}Get started →{{/i}}

Feature highlights

{{_i}}Feature highlights{{/i}}

× Built on LESS
× Complete styleguide docs
× Fully responsive design
× Small footprint (7kb gzipped)
× Support for IE7 and up
× Custom jQuery plugins
× Dozens of components
× {{_i}}Built on LESS{{/i}}
× {{_i}}Complete styleguide docs{{/i}}
× {{_i}}Fully responsive design{{/i}}
× {{_i}}Small footprint (7kb gzipped){{/i}}
× {{_i}}Support for IE7 and up{{/i}}
× {{_i}}Custom jQuery plugins{{/i}}
× {{_i}}Dozens of components{{/i}}

Quick links
{{_i}}Quick links{{/i}}
GitHub
Issues
Roadmap
Changelog
{{_i}}Issues{{/i}}
{{_i}}Roadmap{{/i}}
{{_i}}Changelog{{/i}}
·
@@ -40,14 +40,14 @@
·
- Follow @twbootstrap + {{_i}}Follow @twbootstrap{{/i}}
Tweet @@ -56,8 +56,8 @@
-
Built with Bootstrap.
-
For even more sites built with Bootstrap, visit the unofficial Tumblr.
+
{{_i}}Built with Bootstrap.{{/i}}
+
{{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr.{{/i}}
- @@ -76,110 +76,110 @@
-
Designed for everyone, everywhere.
-
Need reasons to love Bootstrap? Look no further.
+
{{_i}}Designed for everyone, everywhere.{{/i}}
+
{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

-
Built for and by nerds
-
Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.
+
{{_i}}Built for and by nerds{{/i}}
+
{{_i}}Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.{{_i}}

-
For all skill levels
-
Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
+
{{_i}}For all skill levels{{/i}}
+
{{_i}}Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}

-
Cross-everything
-
Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.
+
{{_i}}Cross-everything{{/i}}
+
{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}

-
12-column grid
-
Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.
+
{{_i}}12-column grid{{/i}}
+
{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}

-
Responsive design
-
With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.
+
{{_i}}Responsive design{{/i}}
+
{{_i}}With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}

-
Styleguide docs
-
Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.
+
{{_i}}Styleguide docs{{/i}}
+
{{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}

-
Growing library
-
Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.
+
{{_i}}Growing library{{/i}}
+
{{_i}}Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}

-
Custom jQuery plugins
-
What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.
+
{{_i}}Custom jQuery plugins{{/i}}
+
{{_i}}What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.{{/i}}

-
Built on LESS
-
Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.
+
{{_i}}Built on LESS{{/i}}
+
{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}

-
HTML5
-
Built to support new HTML5 elements and syntax.
+
{{_i}}HTML5{{/i}}
+
{{_i}}Built to support new HTML5 elements and syntax.{{/i}}

-
CSS3
-
Progressively enhanced components for ultimate style.
+
{{_i}}CSS3{{/i}}
+
{{_i}}Progressively enhanced components for ultimate style.{{/i}}

-
Open-source
-
Built for and maintained by the community via GitHub.
+
{{_i}}Open-source{{/i}}
+
{{_i}}Built for and maintained by the community via GitHub.{{/i}}

-
Made at Twitter
-
Brought to you by an experienced engineer and designer.
+
{{_i}}Made at Twitter{{/i}}
+
{{_i}}Brought to you by an experienced engineer and designer.{{/i}}

-
Get started in no time.
-
Quickly start using Bootstrap within your workflow and development process.
+
{{_i}}Get started in no time.{{/i}}
+
{{_i}}Quickly start using Bootstrap within your workflow and development process.{{/i}}

Hotlink the CSS

For the quickest and easiest start, just copy this snippet into your webpage.

{{_i}}Hotlink the CSS{{/i}}

{{_i}}For the quickest and easiest start, just copy this snippet into your webpage.{{/i}}

Use it with LESS

A fan of using LESS? No problem, just clone the repo and add these lines:

{{_i}}Use it with LESS{{/i}}

{{_i}}A fan of using LESS? No problem, just clone the repo and add these lines:{{/i}}

Fork on GitHub

Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.

Bootstrap on GitHub »

{{_i}}Fork on GitHub{{/i}}

{{_i}}Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.{{/i}}

{{_i}}Bootstrap on GitHub »{{/i}}

Currently v2.0.0

-- cgit v1.2.3 From fecd4ddd135a893f2c5c103d565e9d1ab110d247 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 14:25:30 -0800 Subject: docs updates to make the getting started section more responsive, updated the benefits to be clearer and swap x for checkmark --- docs/templates/pages/index.mustache | 68 ++++++++++++++++++------------------- 1 file changed, 34 insertions(+), 34 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 8927bc640..dc99d2c83 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -14,13 +14,13 @@

Feature highlights

× Built on LESS
× Complete styleguide docs
× Fully responsive design
× Small footprint (7kb gzipped)
× Support for IE7 and up
× Custom jQuery plugins
× Dozens of components
✔ Built on LESS
✔ Complete style guide docs
✔ Fully responsive design
✔ Small CSS footprint (10kb gzipped)
✔ Support for IE7 and up
✔ Custom jQuery plugins
✔ Dozens of components

@@ -157,32 +157,32 @@ ================================================== -->

Get started in no time.

Quickly start using Bootstrap within your workflow and development process.

Hotlink the CSS

For the quickest and easiest start, just copy this snippet into your webpage.

{{_i}}Hotlink the CSS{{/i}}

{{_i}}For the quickest and easiest start, just copy this snippet into your webpage.{{/i}}

Use it with LESS

A fan of using LESS? No problem, just clone the repo and add these lines:

{{_i}}Use it with LESS{{/i}}

{{_i}}A fan of using LESS? No problem, just clone the repo and add these lines:{{/i}}

Fork on GitHub

Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.

Bootstrap on GitHub »

Currently v2.0.0

{{_i}}Fork on GitHub{{/i}}

{{_i}}Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.{{/i}}

{{_i}}Bootstrap on GitHub »{{/i}}

{{_i}}Currently{{/i}} v2.0.0

- - - - - - - -

Hotlink the CSS

For the quickest and easiest start, just copy this snippet into your webpage.

- -

Use it with LESS

A fan of using LESS? No problem, just clone the repo and add these lines:

- -

Fork on GitHub

Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.

Bootstrap on GitHub »

Currently v2.0.0

+ +

Hotlink the CSS

For the quickest and easiest start, just copy this snippet into your webpage.

+ +

Use it with LESS.js

A fan of using LESS? No problem, just download the repo and add these lines to your page:

+ +

Fork on GitHub

Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.

Bootstrap on GitHub »

Currently v2.0.0

\ No newline at end of file -- cgit v1.2.3 From ef869776e5a4642f3cab1589cfef5d199a347362 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Oko=C5=84ski?= Date: Wed, 25 Jan 2012 00:00:35 +0100 Subject: Wrap stuff in components.mustache --- docs/templates/pages/components.mustache | 666 +++++++++++++++---------------- 1 file changed, 333 insertions(+), 333 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 20d7ae921..e926e8702 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1,18 +1,18 @@

Components

Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

{{_i}}Components{{/i}}

{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

@@ -22,18 +22,18 @@ ================================================== -->

Button groups

Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.

{{_i}}Button groups{{/i}}

{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}

{{_i}}You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.{{/i}}

- Left - Middle - Right + {{_i}}Left{{/i}} + {{_i}}Middle{{/i}} + {{_i}}Right{{/i}}

@@ -57,8 +57,8 @@

Example markup

Here's how the HTML looks for a standard button group built with anchor tag buttons:

{{_i}}Example markup{{/i}}

{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}

 <div class="btn-group">
   <a class="btn" href="#">1</a>
@@ -66,7 +66,7 @@
   <a class="btn" href="#">3</a>
 </div>

And with a toolbar for multiple groups:

{{_i}}And with a toolbar for multiple groups:{{/i}}

 <div class="btn-toolbar">
   <div class="btn-group">
@@ -76,12 +76,12 @@

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

Get the javascript »

{{_i}}Checkbox and radio flavors{{/i}}

{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.{{/i}}

{{_i}}Get the javascript »{{/i}}

Heads up

CSS for button groups is in a separate file, button-groups.less.

{{_i}}Heads up{{/i}}

{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}

@@ -92,85 +92,85 @@ ================================================== -->

Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

{{_i}}Split button dropdowns{{/i}}

{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

Example markup

Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

{{_i}}Example markup{{/i}}

{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}

 <div class="btn-group">
-  <a class="btn" href="#">Action</a>
+  <a class="btn" href="#">{{_i}}Action{{/i}}</a>
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
     <span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
+    <!-- {{_i}}dropdown menu links{{/i}} -->
   </ul>
 </div>

@@ -184,30 +184,30 @@ ================================================== -->

Lightweight defaults Same markup, different classes

{{_i}}Lightweight defaults{{/i}} {{_i}}Same markup, different classes{{/i}}

Powerful base class

All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.

Why tabs and pills

Tabs and pills in Bootstrap are built on a <ul> with the same core HTML, a list of links. Swap between tabs or pills with only a class.

Both options are great for sub-sections of content or navigating between pages of related content.

{{_i}}Powerful base class{{/i}}

{{_i}}All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.{{/i}}

{{_i}}Why tabs and pills{{/i}}

{{_i}}Tabs and pills in Bootstrap are built on a <ul> with the same core HTML, a list of links. Swap between tabs or pills with only a class.{{/i}}

{{_i}}Both options are great for sub-sections of content or navigating between pages of related content.{{/i}}

Basic tabs

Take a regular <ul> of links and add .tabs:

{{_i}}Basic tabs{{/i}}

{{_i}}Take a regular <ul> of links and add .tabs:{{/i}}

 <ul class="nav tabs">
   <li class="active">
-    <a href="#">Home</a>
+    <a href="#">{{_i}}Home{{/i}}</a>
   </li>
   <li><a href="#">...</a></li>
   <li><a href="#">...</a></li>
@@ -215,17 +215,17 @@

Basic pills

Take that same HTML, but use .pills instead:

{{_i}}Basic pills{{/i}}

{{_i}}Take that same HTML, but use .pills instead:{{/i}}

 <ul class="nav pills">
   <li class="active">
-    <a href="#">Home</a>
+    <a href="#">{{_i}}Home{{/i}}</a>
   </li>
   <li><a href="#">...</a></li>
   <li><a href="#">...</a></li>
@@ -234,18 +234,18 @@

Stackable Make tabs or pills vertical

{{_i}}Stackable{{/i}} {{_i}}Make tabs or pills vertical{{/i}}

How to stack 'em

As tabs and pills are horizontal by default, just add a second class, .stacked, to make them appear vertically stacked.

{{_i}}How to stack 'em{{/i}}

{{_i}}As tabs and pills are horizontal by default, just add a second class, .stacked, to make them appear vertically stacked.{{/i}}

Stacked tabs

{{_i}}Stacked tabs{{/i}}

 <ul class="nav tabs stacked">
@@ -254,11 +254,11 @@

Stacked pills

{{_i}}Stacked pills{{/i}}

 <ul class="nav pills stacked">
@@ -268,26 +268,26 @@

Dropdowns For advanced nav components

{{_i}}Dropdowns{{/i}} {{_i}}For advanced nav components{{/i}}

Rich menus made easy

Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.

Head over to the Javascript page to read the docs on initializing dropdowns in Bootstrap.

{{_i}}Rich menus made easy{{/i}}

{{_i}}Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.{{/i}}

{{_i}}Head over to the Javascript page to read the docs on initializing dropdowns in Bootstrap.{{/i}}

Tabs with dropdowns

{{_i}}Tabs with dropdowns{{/i}}

@@ -297,29 +297,29 @@ <a class="dropdown-toggle" data-toggle="dropdown" href="#"> - Dropdown + {{_i}}Dropdown{{/i}} <b class="caret"></b> </a> <ul class="dropdown-menu"> -  +  </ul> </li> </ul>

Pills with dropdowns

{{_i}}Pills with dropdowns{{/i}}

@@ -329,11 +329,11 @@ <a class="dropdown-toggle" data-toggle="dropdown" href="#"> - Dropdown + {{_i}}Dropdown{{/i}} <b class="caret"></b> </a> <ul class="dropdown-menu"> -  +  </ul> </li> </ul> @@ -341,58 +341,58 @@

Nav lists Build simple stacked navs, great for sidebars

{{_i}}Nav lists{{/i}} {{_i}}Build simple stacked navs, great for sidebars{{/i}}

Application-style navigation

Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.

With icons

Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.

{{_i}}Application-style navigation{{/i}}

{{_i}}Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}

{{_i}}Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.{{/i}}

{{_i}}With icons{{/i}}

{{_i}}Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.{{/i}}

Example nav list

Take a list of links and add class="nav list":

{{_i}}Example nav list{{/i}}

{{_i}}Take a list of links and add class="nav list":{{/i}}

List header
Home
Library
Applications
Another list header
Profile
Settings
Help
{{_i}}List header{{/i}}
{{_i}}Home{{/i}}
{{_i}}Library{{/i}}
{{_i}}Applications{{/i}}
{{_i}}Another list header{{/i}}
{{_i}}Profile{{/i}}
{{_i}}Settings{{/i}}
{{_i}}Help{{/i}}

 <ul class="nav list">
   <li class="nav-header">
-    List header
+    {{_i}}List header{{/i}}
   </li>
   <li class="active">
-    <a href="#">Home</a>
+    <a href="#">{{_i}}Home{{/i}}</a>
   </li>
   <li>
-    <a href="#">Library</a>
+    <a href="#">{{_i}}Library{{/i}}</a>
   </li>
   ...
 </ul>

Example with icons

Same example, but with <i> tags for icons.

{{_i}}Example with icons{{/i}}

{{_i}}Same example, but with <i> tags for icons.{{/i}}

List header
Home
Library
Applications
Another list header
Profile
Settings
Help
{{_i}}List header{{/i}}
{{_i}}Home{{/i}}
{{_i}}Library{{/i}}
{{_i}}Applications{{/i}}
{{_i}}Another list header{{/i}}
{{_i}}Profile{{/i}}
{{_i}}Settings{{/i}}
{{_i}}Help{{/i}}

@@ -401,7 +401,7 @@
   <li>
     <a href="#">
       <i class="book"></i>
-      Library
+      {{_i}}Library{{/i}}
     </a>
   </li>
   ...
@@ -411,62 +411,62 @@

Tabbable nav Bring tabs to life via javascript

{{_i}}Tabbable nav{{/i}} {{_i}}Bring tabs to life via javascript{{/i}}

What's included

Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

Changing between them is easy and only requires changing very little markup.

{{_i}}What's included{{/i}}

{{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}

{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}

Tabbable example

To make tabs tabbable, wrap the .tabs in another div with class .tabbable.

{{_i}}Tabbable example{{/i}}

{{_i}}To make tabs tabbable, wrap the .tabs in another div with class .tabbable.{{/i}}

Section 1
Section 2
Section 3
{{_i}}Section 1{{/i}}
{{_i}}Section 2{{/i}}
{{_i}}Section 3{{/i}}

I'm in Section 1.

{{_i}}I'm in Section 1.{{/i}}

Howdy, I'm in Section 2.

{{_i}}Howdy, I'm in Section 2.{{/i}}

What up girl, this is Section 3.

{{_i}}What up girl, this is Section 3.{{/i}}

Custom jQuery plugin

All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

Get the javascript →

{{_i}}Custom jQuery plugin{{/i}}

{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.{{/i}}

{{_i}}Get the javascript →{{/i}}

Straightforward markup

Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

{{_i}}Straightforward markup{{/i}}

{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}

 <div class="tabbable">
   <ul class="nav tabs">
-    <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
-    <li><a href="#2" data-toggle="tab">Section 2</a></li>
+    <li class="active"><a href="#1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
+    <li><a href="#2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
   </ul>
   <div class="tab-content">
     <div class="tab-pane active" id="1">
-      <p>I'm in Section 1.</p>
+      <p>{{_i}}I'm in Section 1.{{/i}}</p>
     </div>
     <div class="tab-pane" id="2">
-      <p>Howdy, I'm in Section 2.</p>
+      <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
     </div>
   </div>
 </div>

Tabbable in any direction

{{_i}}Tabbable in any direction{{/i}}

Tabs on the bottom

Flip the order of the HTML and add a class to put tabs on the bottom.

{{_i}}Tabs on the bottom{{/i}}

{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}

I'm in Section A.

{{_i}}I'm in Section A.{{/i}}

Howdy, I'm in Section B.

{{_i}}Howdy, I'm in Section B.{{/i}}

What up girl, this is Section C.

{{_i}}What up girl, this is Section C.{{/i}}

Section 1
Section 2
Section 3
{{_i}}Section 1{{/i}}
{{_i}}Section 2{{/i}}
{{_i}}Section 3{{/i}}

@@ -506,23 +506,23 @@

Tabs on the left

Swap the class to put tabs on the left.

{{_i}}Tabs on the left{{/i}}

{{_i}}Swap the class to put tabs on the left.{{/i}}

Section 1
Section 2
Section 3
{{_i}}Section 1{{/i}}
{{_i}}Section 2{{/i}}
{{_i}}Section 3{{/i}}

I'm in Section A.

{{_i}}I'm in Section A.{{/i}}

Howdy, I'm in Section B.

{{_i}}Howdy, I'm in Section B.{{/i}}

What up girl, this is Section C.

{{_i}}What up girl, this is Section C.{{/i}}

@@ -538,23 +538,23 @@

Tabs on the right

Swap the class to put tabs on the right.

{{_i}}Tabs on the right{{/i}}

{{_i}}Swap the class to put tabs on the right.{{/i}}

Section 1
Section 2
Section 3
{{_i}}Section 1{{/i}}
{{_i}}Section 2{{/i}}
{{_i}}Section 3{{/i}}

I'm in Section A.

{{_i}}I'm in Section A.{{/i}}

Howdy, I'm in Section B.

{{_i}}Howdy, I'm in Section B.{{/i}}

What up girl, this is Section C.

{{_i}}What up girl, this is Section C.{{/i}}

@@ -579,27 +579,27 @@ ================================================== -->

Static navbar example

An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

{{_i}}Static navbar example{{/i}}

{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}

- Project name + {{_i}}Project name{{/i}}

@@ -607,16 +607,16 @@

@@ -626,8 +626,8 @@

Navbar scaffolding

The navbar requires only a few divs to structure it well for static or fixed display.

{{_i}}Navbar scaffolding{{/i}}

{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}

 <div class="navbar navbar-static">
   <div class="navbar-inner">
@@ -637,48 +637,48 @@
   </div>
 </div>

To make the navbar fixed, swap the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

{{_i}}To make the navbar fixed, swap the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}

 <div class="navbar navbar-fixed">
   ...
 </div>

Brand name

A simple link to show your brand or project name only requires an anchor tag.

{{_i}}Brand name{{/i}}

{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}

 <a class="brand" href="#">
-  Project name
+  {{_i}}Project name{{/i}}
 </a>

Search form

Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.

{{_i}}Search form{{/i}}

{{_i}}Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.{{/i}}

 <form class="navbar-search">
-  <input type="text" class="search-query pull-left" placeholder="Search">
+  <input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}">
 </form>

Nav links

Nav items are simple to add via unordered lists.

{{_i}}Nav links{{/i}}

{{_i}}Nav items are simple to add via unordered lists.{{/i}}

 <ul class="nav">
   <li class="active">
-    <a href="#">Home</a>
+    <a href="#">{{_i}}Home{{/i}}</a>
   </li>
-  <li><a href="#">Link</a></li>
-  <li><a href="#">Link</a></li>
+  <li><a href="#">{{_i}}Link{{/i}}</a></li>
+  <li><a href="#">{{_i}}Link{{/i}}</a></li>
 </ul>

Adding dropdowns

Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.

{{_i}}Adding dropdowns{{/i}}

{{_i}}Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.{{/i}}

 <ul class="nav">
   <li class="dropdown">
     <a href="#"
           class="dropdown-toggle"
           data-toggle="dropdown">
-          Account
+          {{_i}}Account{{/i}}
           <b class="caret"></b>
     </a>
     <ul class="dropdown-menu">
@@ -687,7 +687,7 @@
   </li>
 </ul>

Get the javascript →

{{_i}}Get the javascript →{{/i}}

@@ -699,42 +699,42 @@ ================================================== -->

Why use them

Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.

{{_i}}Why use them{{/i}}

{{_i}}Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.{{/i}}

Examples

A single example shown as it might be displayed across multiple pages.

{{_i}}Examples{{/i}}

{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}

Markup

HTML is your standard unordered list with links.

{{_i}}Markup{{/i}}

{{_i}}HTML is your standard unordered list with links.{{/i}}

 <ul class="breadcrumb">
   <li>
-    <a href="#">Home</a> <span class="divider">/</span>
+    <a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span>
   </li>
   <li>
-    <a href="#">Library</a> <span class="divider">/</span>
+    <a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span>
   </li>
   <li class="active">
-    <a href="#">Data</a>
+    <a href="#">{{_i}}Data{{/i}}</a>
   </li>
 </ul>

@@ -749,22 +749,22 @@ ================================================== -->

Multi-page pagination

{{_i}}Multi-page pagination{{/i}}

When to use

Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Stateful page links

Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

Flexible alignment

Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

{{_i}}When to use{{/i}}

{{_i}}Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}

{{_i}}Stateful page links{{/i}}

{{_i}}Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.{{/i}}

{{_i}}Flexible alignment{{/i}}

{{_i}}Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}

Examples

The default pagination component is flexible and works in a number of variations.

{{_i}}Examples{{/i}}

{{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}

Markup

Wrapped in a <div>, pagination is just a <ul>.

{{_i}}Markup{{/i}}

{{_i}}Wrapped in a <div>, pagination is just a <ul>.{{/i}}

 <div class="pagination">
   <ul>
@@ -823,44 +823,44 @@

Pager For quick previous and next links

{{_i}}Pager{{/i}} {{_i}}For quick previous and next links{{/i}}

About pager

The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

{{_i}}About pager{{/i}}

{{_i}}The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}

Default example

By default, the pager centers links.

{{_i}}Default example{{/i}}

{{_i}}By default, the pager centers links.{{/i}}

 <ul class="pager">
   <li>
-    <a href="#">Previous</a>
+    <a href="#">{{_i}}Previous{{/i}}</a>
   </li>
   <li>
-    <a href="#">Next</a>
+    <a href="#">{{_i}}Next{{/i}}</a>
   </li>
 </ul>

Aligned links

Alternatively, you can align each link to the sides:

{{_i}}Aligned links{{/i}}

{{_i}}Alternatively, you can align each link to the sides:{{/i}}

 <ul class="pager">
   <li class="previous">
-    <a href="#">&larr; Older</a>
+    <a href="#">{{_i}}&larr; Older{{/i}}</a>
   </li>
   <li class="next">
-    <a href="#">Newer &rarr;</a>
+    <a href="#">{{_i}}Newer &rarr;{{/i}}</a>
   </li>
 </ul>

@@ -874,13 +874,13 @@ ================================================== -->

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

{{_i}}Default thumbnails{{/i}}

{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

@@ -905,16 +905,16 @@

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

{{_i}}Highly customizable{{/i}}

{{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}

-
Thumbnail label
+
{{_i}}Thumbnail label{{/i}}

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
-
Action Action
+
{{_i}}Action{{/i}} {{_i}}Action{{/i}}

Thumbnail label

{{_i}}Thumbnail label{{/i}}

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

{{_i}}Action{{/i}} {{_i}}Action{{/i}}

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

{{_i}}Why use thumbnails{{/i}}

{{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

Simple, flexible markup

{{_i}}Simple, flexible markup{{/i}}

{{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

{{_i}}Uses grid column sizes{{/i}}

{{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

The markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

{{_i}}The markup{{/i}}

{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

 <ul class="thumbnails">
   <li class="span3">
@@ -961,14 +961,14 @@
   ...
 </ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

{{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

 <ul class="thumbnails">
   <li class="span3">
     <div class="thumbnail">
       <img src="http://placehold.it/210x150" alt="">
-      <h5>Thumbnail label</h5>
-      <p>Thumbnail caption right here...</p>
+      <h5>{{_i}}Thumbnail label{{/i}}</h5>
+      <p>{{_i}}Thumbnail caption right here...{{/i}}</p>
     </div>
   </li>
   ...
@@ -976,8 +976,8 @@

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

{{_i}}More examples{{/i}}

{{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

@@ -1021,57 +1021,57 @@ ================================================== -->

-
Alerts Styles for success, warning, and error messages
+
{{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}

-
Lightweight defaults
+
{{_i}}Lightweight defaults{{/i}}

-
Rewritten base class
-
With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.
-
Single alert message
-
For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.
+
{{_i}}Rewritten base class{{/i}}
+
{{_i}}With Bootstrap 2, e've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.{{/i}}
+
{{_i}}Single alert message{{/i}}
+
{{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.{{/i}}

-
Goes great with javascript
-
Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.
-
Get the plugin »
+
{{_i}}Goes great with javascript{{/i}}
+
{{_i}}Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.{{/i}}
+
{{_i}}Get the plugin »{{/i}}

-
Example alerts
-
Wrap your message and an optional close icon in a div with simple class.
+
{{_i}}Example alerts{{/i}}
+
{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}

× - Warning! Best check yo self, you’re not looking too good. + {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you’re not looking too good.{{/i}}

<div class="alert"> <a class="close">×</a> - <strong>Warning!</strong> Best check yo self, you’re not looking too good. + <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you’re not looking too good.{{/i}} </div>
-
Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.
+
{{_i}}Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.{{/i}}

× -
Warning!
-
Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+
{{_i}}Warning!{{/i}}
+
{{_i}}Best check yo self, you’re not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block"> <a class="close">×</a> - <h4 class="alert-heading">Warning!</h4> - Best check yo self, you’re not... + <h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4> + {{_i}}Best check yo self, you’re not...{{/i}} </div>

-
Contextual alternatives Add optional classes to change an alert's connotation
+
{{_i}}Contextual alternatives{{/i}} {{_i}}Add optional classes to change an alert's connotation{{/i}}

-
Error or danger
+
{{_i}}Error or danger{{/i}}

× - Oh snap! Change a few things up and try submitting again. + {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}}

<div class="alert alert-error"> @@ -1080,10 +1080,10 @@

-
Success
+
{{_i}}Success{{/i}}

× - Well done! You successfully read this important alert message. + {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}}

<div class="alert alert-success"> @@ -1092,10 +1092,10 @@

-
Information
+
{{_i}}Information{{/i}}

× - Heads up! This alert needs your attention, but it’s not super important. + {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it’s not super important.{{/i}}

<div class="alert alert-info"> @@ -1113,14 +1113,14 @@ ================================================== -->

-
Progress bars For loading, redirecting, or action status
+
{{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

-
Examples and markup
+
{{_i}}Examples and markup{{/i}}

-
Basic
-
Default progress bar with a vertical gradient.
+
{{_i}}Basic{{/i}}
+
{{_i}}Default progress bar with a vertical gradient.{{/i}}

@@ -1132,8 +1132,8 @@

-
Striped
-
Uses a gradient to create a striped effect.
+
{{_i}}Striped{{/i}}
+
{{_i}}Uses a gradient to create a striped effect.{{/i}}

@@ -1146,8 +1146,8 @@

-
Animated
-
Takes the striped example and animates it.
+
{{_i}}Animated{{/i}}
+
{{_i}}Takes the striped example and animates it.{{/i}}

@@ -1161,27 +1161,27 @@

-
Options and browser support
+
{{_i}}Options and browser support{{/i}}

-
Additional colors
-
Progress bars utilize some of the same classes as buttons and alert messages for quick styling.
+
{{_i}}Additional colors{{/i}}
+
{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}

.info

.success

.danger

-
Alternatively, you can customize the LESS files and roll your own colors and sizes.
+
{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}

-
Behavior
-
Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
-
If you use the .active class, your .striped progress bars will animate the stripes left to right.
+
{{_i}}Behavior{{/i}}
+
{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}
+
{{_i}}If you use the .active class, your .striped progress bars will animate the stripes left to right.{{/i}}

-
Browser support
-
Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.
-
Opera does not support animations at this time.
+
{{_i}}Browser support{{/i}}
+
{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}
+
{{_i}}Opera does not support animations at this time.{{/i}}

-- cgit v1.2.3 From 3a840075ddd4c9aea61b4aed792bda94ec0c3a66 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jan 2012 15:42:16 -0800 Subject: rebuild --- docs/templates/pages/components.mustache | 2 +- docs/templates/pages/index.mustache | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index e926e8702..5282e6178 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1028,7 +1028,7 @@

{{_i}}Rewritten base class{{/i}}
-
{{_i}}With Bootstrap 2, e've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.{{/i}}
+
{{_i}}With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.{{/i}}

{{_i}}Single alert message{{/i}}

{{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.{{/i}}

diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 030a693a8..dbe30443e 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -17,7 +17,7 @@
✔ {{_i}}Built on LESS{{/i}}

✔ {{_i}}Complete styleguide docs{{/i}}

✔ {{_i}}Fully responsive design{{/i}}
-
✔ {{_i}}Small footprint (7kb gzipped){{/i}}
+
✔ {{_i}}Small footprint (10kb gzipped){{/i}}

✔ {{_i}}Support for IE7 and up{{/i}}

✔ {{_i}}Custom jQuery plugins{{/i}}

✔ {{_i}}Dozens of components{{/i}}
@@ -115,7 +115,7 @@

{{_i}}Growing library{{/i}}
-
{{_i}}Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}
+
{{_i}}Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}

-- cgit v1.2.3 From 655a96869c9ba1c678eddc961332b9dd0fccb8af Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jan 2012 15:51:28 -0800 Subject: typo with i18n --- docs/templates/pages/javascript.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index c85b9d2a2..763fe8aa1 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -646,7 +646,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { {{_i}}Name{{/i}} {{_i}}type{{/i}} - default{{/i}} + {{_i}}default{{/i}} {{_i}}description{{/i}} -- cgit v1.2.3 From 8ff621aa26dee69088b527089cdd719bce68be31 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 16:07:30 -0800 Subject: fix broken index page heading, update variables and less pages --- docs/templates/pages/index.mustache | 2 +- docs/templates/pages/less.mustache | 405 ++++++++++++++++++++---------------- 2 files changed, 222 insertions(+), 185 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 7616de4f1..899d721b0 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -76,7 +76,7 @@

- +

{{_i}}Designed for everyone, everywhere.{{/i}}

{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index d6376ae2f..8adc7874f 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -3,207 +3,244 @@

{{_i}}Using LESS with Bootstrap{{/i}}

{{_i}}Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}

- -

{{_i}}Why LESS?{{/i}}

{{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

{{_i}}What's included?{{/i}}

{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

{{_i}}Learn more{{/i}}

{{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

{{_i}}Variables{{/i}}

{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}

+ -

{{_i}}Mixins{{/i}}

{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}

{{_i}}Why LESS?{{/i}}

{{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

{{_i}}What's included?{{/i}}

{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

{{_i}}Learn more{{/i}}

{{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

{{_i}}Operations{{/i}}

{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}

{{_i}}Variables{{/i}}

{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}

{{_i}}Mixins{{/i}}

{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}

{{_i}}Operations{{/i}}

{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}

- - -

{{_i}}Hyperlinks{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}	{{_i}}Usage{{/i}}
`@linkColor`	#0069d6	{{_i}}Default link text color{{/i}}
`@linkColorHover`	`darken(@linkColor, 15)`	{{_i}}Default link text hover color{{/i}}

- -

{{_i}}Grayscale colors{{/i}}

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

`@black`	#000
`@grayDark`	`lighten(@black, 25%)`
`@gray`	`lighten(@black, 50%)`
`@grayLight`	`lighten(@black, 75%)`
`@grayLighter`	`lighten(@black, 90%)`
`@white`	#fff

+ -

{{_i}}Accent colors{{/i}}

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

`@blue`	#049CDB
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

{{_i}}Grid system{{/i}}

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

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@siteWidth`	`(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))`

{{_i}}Typography{{/i}}

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

`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18px

{{_i}}Hyperlinks{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}	{{_i}}Usage{{/i}}
`@linkColor`	#08c	{{_i}}Default link text color{{/i}}
`@linkColorHover`	`darken(@linkColor, 15%)`	{{_i}}Default link text hover color{{/i}}

+ +

{{_i}}Grayscale colors{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@black`	#000
`@grayDarker`	`#222`
`@grayDark`	`#333`
`@gray`	`#555`
`@grayLight`	`#999`
`@grayLighter`	`#eee`
`@white`	#fff

{{_i}}Accent colors{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

{{_i}}Grid system{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@siteWidth`	`(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))`

{{_i}}Typography{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18px

{{_i}}Visuals{{/i}}

+ + + + + + + + +

`@primaryButtonColor`	`@blue`

{{_i}}Visuals{{/i}}

- - - - - - - - -

`@primaryButtonColor`	`@blue`

{{_i}}Visuals{{/i}}

- - - - - - - - -

`@primaryButtonColor`	`@blue`

+ +

{{_i}}Components{{/i}}

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

{{_i}}Buttons{{/i}}
`@primaryButtonColor`	`@blue`
{{_i}}Buttons{{/i}}
`@placeholderText`	`@grayLight`
{{_i}}Navbars{{/i}}
`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
{{_i}}Buttons{{/i}}
`@placeholderText`	`@grayLight`

-- cgit v1.2.3 From 805a965f2e7373db42d99376d4dc3c1ca9ea509d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 17:14:19 -0800 Subject: finish updating form state and alert variables in less docs page --- docs/templates/pages/less.mustache | 155 +++++++++++++++++++++++-------------- 1 file changed, 98 insertions(+), 57 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 141000c7c..580fac2f6 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -1,3 +1,7 @@ +

+ Heads up! This page is still under construction and is missing plenty of documentation. Hang tight! +

@@ -225,63 +229,100 @@

{{_i}}Components{{/i}}

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

{{_i}}Buttons{{/i}}
`@primaryButtonColor`	`@blue`
{{_i}}Buttons{{/i}}
`@placeholderText`	`@grayLight`
{{_i}}Navbars{{/i}}
`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
{{_i}}Buttons{{/i}}
`@placeholderText`	`@grayLight`

Buttons

+ + + + + + + +

`@primaryButtonColor`	`@blue`

Forms

+ + + + + + + +

`@placeholderText`	`@grayLight`

Navbar

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

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`

Form states and alerts

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

`@warningText`	#f3edd2
`@warningBackground`	#c09853
`@warningBorder`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@errorBorder`	#e9c7c7
`@successText`	#468847
`@successBackground`	#dff0d8
`@successBorder`	#cfe8c4
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7
`@infoBorder`	#bfe1f2

-- cgit v1.2.3 From 26ed8202ee270ce8b103491613fb2f5053472a70 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 18:24:38 -0800 Subject: modify the scaffolding page to fix the language around preboot/grid variables --- docs/templates/pages/scaffolding.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 7c0c12e8f..a8638f273 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -157,7 +157,7 @@

{{_i}}How to customize{{/i}}

{{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the four ways documented to recompile.{{/i}}

{{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}

{{_i}}Staying responsive{{/i}}

-- cgit v1.2.3 From 9ef4171d03e048ee9458fb7a1db83ea61bf845c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 18:26:45 -0800 Subject: lighten alert on less page --- docs/templates/pages/less.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 580fac2f6..b5cff2d11 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -1,4 +1,4 @@ -

Heads up! This page is still under construction and is missing plenty of documentation. Hang tight!

-- cgit v1.2.3 From 880486089888fbba04ed12083ad038ae38494fd1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 18:45:23 -0800 Subject: fix typo on js docs --- docs/templates/pages/javascript.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 763fe8aa1..97e6da9ef 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1106,7 +1106,7 @@ $('#myCollapsible').collapse({ - {{_i}}show{{/i}}/td> + {{_i}}show{{/i}} {{_i}}This event fires immediately when the show instance method is called.{{/i}} -- cgit v1.2.3 From f70895a6059aab44c53048b0294204d2f53dfd65 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 19:01:38 -0800 Subject: remove rogue html elements --- docs/templates/pages/javascript.mustache | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 97e6da9ef..9fd431f2f 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -586,7 +586,6 @@ $('#myModal').on('hidden', function () { $('.tabs a:last').tab('show') }) </script> -

{{_i}}Events{{/i}}

@@ -693,7 +692,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Notice Individual tooltip instance options can alternatively be specified through the use of data attributes.{{/i}}

{{_i}}Markup{{/i}}

{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

{{_i}}Methods{{/i}}

@@ -793,7 +792,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { -

{{_i}}Notice Individual popover instance options can alternatively be specified through the use of data attributes.{{/i}}

{{_i}}Markup{{/i}}

{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}} @@ -1250,7 +1249,6 @@ $('.myCarousel').carousel({ {{_i}}slid{{/i}} {{_i}}This event is fired when the carousel has completed it's slide transition.{{/i}} -

-- cgit v1.2.3 From 672ba4c2fd9a42d4f178e795ebc162cce81bbc2f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 19:19:50 -0800 Subject: update the subnav on all pages --- docs/templates/pages/base-css.mustache | 16 +- docs/templates/pages/components.mustache | 263 +++++++++++++++--------------- docs/templates/pages/javascript.mustache | 30 ++-- docs/templates/pages/less.mustache | 14 +- docs/templates/pages/scaffolding.mustache | 12 +- 5 files changed, 170 insertions(+), 165 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 5552d6735..41722aa71 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -3,13 +3,15 @@

{{_i}}Base CSS{{/i}}

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

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 5282e6178..36fc84281 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1,8 +1,9 @@ - -

{{_i}}Components{{/i}}

{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

+ +

{{_i}}Components{{/i}}

{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

+ - -

- -

{{_i}}Button groups{{/i}}

{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}

{{_i}}You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.{{/i}}

+ +

{{_i}}Button groups{{/i}}

{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}

{{_i}}You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.{{/i}}

+ {{_i}}Left{{/i}} + {{_i}}Middle{{/i}} + {{_i}}Right{{/i}} +

+ -

- -

{{_i}}Example markup{{/i}}

{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}

+ +

{{_i}}Example markup{{/i}}

{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}

 <div class="btn-group">
   <a class="btn" href="#">1</a>
@@ -74,95 +76,95 @@
   </div>
 </div>

{{_i}}Checkbox and radio flavors{{/i}}

{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.{{/i}}

{{_i}}Get the javascript »{{/i}}

{{_i}}Heads up{{/i}}

{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}

{{_i}}Checkbox and radio flavors{{/i}}

{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.{{/i}}

{{_i}}Get the javascript »{{/i}}

{{_i}}Heads up{{/i}}

{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}

- -

{{_i}}Split button dropdowns{{/i}} {{_i}}Built on button groups to provide contextual menus{{/i}}

+ +

{{_i}}Split button dropdowns{{/i}}

+ + +

{{_i}}Split button dropdowns{{/i}}

- - -

{{_i}}Example markup{{/i}}

{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}

{{_i}}Example markup{{/i}}

{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}

 <div class="btn-group">
   <a class="btn" href="#">{{_i}}Action{{/i}}</a>
@@ -174,9 +176,9 @@
   </ul>
 </div>

@@ -468,11 +470,6 @@

{{_i}}Tabbable in any direction{{/i}}

{{_i}}Tabs on the bottom{{/i}}

{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 9fd431f2f..b6b16fef2 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -3,20 +3,22 @@

{{_i}}Javascript for Bootstrap{{/i}}

{{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}} -

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index b5cff2d11..ea7058fd9 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -7,12 +7,14 @@

{{_i}}Using LESS with Bootstrap{{/i}}

{{_i}}Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}

diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index a8638f273..ed80dabfc 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -3,11 +3,13 @@

{{_i}}Scaffolding{{/i}}

{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}

-- cgit v1.2.3 From 4a6d9106b8f92a85a528971c70f132c32b6c43cf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 19:36:42 -0800 Subject: fix the thumbnails more examples section --- docs/templates/pages/components.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 36fc84281..94d72a540 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -978,7 +978,7 @@

-- cgit v1.2.3 From bacb05608f2d42ef7fdb6fa25241d4268b989387 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 19:43:52 -0800 Subject: redo the form examples to enable better responsive layout --- docs/templates/pages/base-css.mustache | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 41722aa71..225e88d2b 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -827,10 +827,12 @@

{{_i}}Example forms using just form controls, no extra markup{{/i}}

{{_i}}Basic form{{/i}}

{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}

{{_i}}Search form{{/i}}

{{_i}}Reflecting default WebKit styles, just add .form-search for extra rounded search fields.{{/i}}

{{_i}}Inline form{{/i}}

{{_i}}Inputs are block level to start. For .form-inline and .form-horizontal, we use inline-block.{{/i}}

{{_i}}Transitions{{/i}} *

{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}

* {{_i}}Required for animation in plugins{{/i}}

-- cgit v1.2.3 From a5c1d1f1828c333e373cdc5da5da2f6d946ad45e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 20:45:38 -0800 Subject: adding actual images to carousel to ensure you can see things are animating; updated styles of carousel controls to work on light and dark backgrounds and use opacity for effects --- docs/templates/pages/javascript.mustache | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 401e86cbe..2ac950251 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1155,21 +1155,21 @@ $('#myCollapsible').on('hidden', function () {

{{_i}}First Thumbnail label{{/i}}

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

{{_i}}Second Thumbnail label{{/i}}

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

{{_i}}Third Thumbnail label{{/i}}

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

-- cgit v1.2.3 From 6ab56051fdf916f03efb8aa6675e50bdd1cc3155 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 23:35:34 -0800 Subject: fix up docs css for responsive and subnav, fix forms error states --- docs/templates/pages/base-css.mustache | 2 +- docs/templates/pages/less.mustache | 845 ++++++++++++++++++++------------- 2 files changed, 504 insertions(+), 343 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 225e88d2b..ba864ce9e 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -308,7 +308,7 @@ <pre class="prettyprint"> -

{{_i}}Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}

{{_i}}Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}

<div>
   <h1>{{_i}}Heading{{/i}}</h1>
   <p>{{_i}}Something right here…{{/i}}</p>
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index ea7058fd9..ecb39055b 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -1,356 +1,517 @@
-      
-        Heads up! This page is still under construction and is missing plenty of documentation. Hang tight!
-      
-
-      
-      
-        {{_i}}Using LESS with Bootstrap{{/i}}
-        {{_i}}Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}
-        
-          
-            {{_i}}Built with Less{{/i}}
-            {{_i}}Variables{{/i}}
-            {{_i}}Mixins{{/i}}
-            {{_i}}Compiling Bootstrap{{/i}}
-          
-        
-      
-
-
-
-      
-      
-        
-          {{_i}}Built with LESS{{/i}}
-        
-        
-          
-            {{_i}}Why LESS?{{/i}}
-            {{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}
-          
-          
-            {{_i}}What's included?{{/i}}
-            {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}
-          
-          
-            {{_i}}Learn more{{/i}}
-            
-            {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}
-          
-        
-        
-          
-            {{_i}}Variables{{/i}}
-            {{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}
-          
-          
-            {{_i}}Mixins{{/i}}
-            {{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}
-          
-          
-            {{_i}}Operations{{/i}}
-            {{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}
-          
-        
-      
-
-
-
-      
-      
-        
-          {{_i}}Variables from variables.less{{/i}}
-        
-
-        {{_i}}Hyperlinks{{/i}}
-        
-          
-            
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-          
-        {{_i}}Variable{{/i}} {{_i}}Value{{/i}} {{_i}}Usage{{/i}}
@linkColor #08c {{_i}}Default link text color{{/i}}
@linkColorHover darken(@linkColor, 15%) {{_i}}Default link text hover color{{/i}}
-
-        
-          
-            {{_i}}Grayscale colors{{/i}}
-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            {{_i}}Variable{{/i}} {{_i}}Value{{/i}}
@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #eee
@white #fff
-          
-          
-            {{_i}}Accent colors{{/i}}
-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            {{_i}}Variable{{/i}} {{_i}}Value{{/i}}
@blue #049cdb
@green #46a546
@red #9d261d
@yellow #ffc40d
@orange #f89406
@pink #c3325f
@purple #7a43b6
-          
-        
 
-        
-          
-            {{_i}}Grid system{{/i}}
-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            {{_i}}Variable{{/i}} {{_i}}Value{{/i}}
@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@siteWidth (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))
-          
-          
-            {{_i}}Typography{{/i}}
-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            {{_i}}Variable{{/i}} {{_i}}Value{{/i}}
@baseFontSize 13px
@baseFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif 
@baseLineHeight 18px
-          
-        
 
-
-        {{_i}}Components{{/i}}
-        
-          
-            Buttons
-            
-              
-                
-                  
-                  
-                
-              
-            @primaryButtonColor @blue
-            Forms
-            
-              
-                
-                  
-                  
-                
-              
-            @placeholderText @grayLight
-            Navbar
-            
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            @navbarHeight 40px
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
-          
-          
-            Form states and alerts
-            
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            @warningText #f3edd2
@warningBackground #c09853
@warningBorder #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@errorBorder #e9c7c7
@successText #468847
@successBackground #dff0d8
@successBorder #cfe8c4
@infoText #3a87ad
@infoBackground #d9edf7
@infoBorder #bfe1f2
+
+  Heads up! This page is still under construction and is missing plenty of documentation. Hang tight!
+
+
+
+
+  {{_i}}Using LESS with Bootstrap{{/i}}
+  {{_i}}Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}
+  
+    
+      {{_i}}Built with Less{{/i}}
+      {{_i}}Variables{{/i}}
+      {{_i}}Mixins{{/i}}
+      {{_i}}Compiling Bootstrap{{/i}}
+    
+  
+
+
+
+
+
+
+  
+    Chop Shop Customize your build of Bootstrap
+  
+
+  
+    
+      
+        
+          1. Select components
+        
+        2. Customize variables
+        3. Build and download
+      
+      
+        
+          
+            
+              Scaffolding
+               CSS reset
+               Grid system
+               Layouts
+              Base CSS
+               Headings and body
+               Code and pre
+               Labels
+               Tables
+               Forms
+               Buttons
+               Icons
+            
+            
+              Components
+               Button groups
+               Combo buttons
+               Navs, tabs, and pills
+               Navbar
+               Breadcrumbs
+               Pagination
+               Pager
+               Thumbnails
+               Alerts
+               Progress bars
+            
+            
+              JS Components
+               Tooltips
+               Popovers
+               Modals
+               Dropdowns
+               Tabs
+               Collapse
+               Carousel
+            
+            
+              Responsive
+               Max-width 480px
+               Max-width 768px
+               Max-width 1210px
+              Miscellaneous
+               Wells
+               Close icon
+               Utilities
+               Component animations
+            
           
-        

+          
+            Reset variables
+            Next: Customize variables
+                  
+        

+        
+          
+            
+              Links
+              @linkColor
+              
+              @linkColorHove
+              
+              Grid system
+              @gridColumns
+              
+              @gridColumnWidth
+              
+              @gridGutterWidth
+              
+              @siteWidth
+              
+              @fluidSidebarWidth
+              
+            

+            
+              Typography
+              @baseFontSize
+              
+              @baseFontFamily
+              
+              @baseLineHeight
+              
+              Forms
+              @primaryButtonColor
+              
+              @placeholderText
+              
+              Navbar
+              @navbarHeight
+              
+              @navbarBackground
+              
+              @navbarBackgroundHighlight
+              
+            

+            
+              Form states & alerts
+              @warningText
+              
+              @warningBackground
+              
+              @warningBorder
+              
+              @errorText
+              
+              @errorBackground
+              
+              @errorBorder
+              
+              @successText
+              
+              @successBackground
+              
+              @successBorder
+              
+              @infoText
+              
+              @infoBackground
+              
+              @infoBorder
+              
+            

+          

+          
+            Next: Build and download
+                  
+        

+        
+          And you're set!
+          We've compiled your selected CSS and customized variables and have them ready to download as a tidy ZIP file. Choose from compiled or compiled and minified CSS files.
+          Download CSS Download minified CSS
+          
+          Looking to customize your javascript? Head over to the Javascript plugins page to build your own Bootstrap JS bundle.
+        

+      

+    

+  
+
+
+
+
+
+
+
+  
+    {{_i}}Built with LESS{{/i}}
+  
+  
+    
+      {{_i}}Why LESS?{{/i}}
+      {{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}
+    
+    
+      {{_i}}What's included?{{/i}}
+      {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}
+    
+    
+      {{_i}}Learn more{{/i}}
+      
+      {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}
+    
+  
+  
+    
+      {{_i}}Variables{{/i}}
+      {{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}
+    
+    
+      {{_i}}Mixins{{/i}}
+      {{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}
+    
+    
+      {{_i}}Operations{{/i}}
+      {{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}
+    
+  
+
 
-

+ +

+ - - +

{{_i}}Hyperlinks{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}	{{_i}}Usage{{/i}}
`@linkColor`	#08c	{{_i}}Default link text color{{/i}}
`@linkColorHover`	`darken(@linkColor, 15%)`	{{_i}}Default link text hover color{{/i}}

+ +

{{_i}}Grayscale colors{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#fff

{{_i}}Accent colors{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

{{_i}}Grid system{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@siteWidth`	`(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))`

{{_i}}Typography{{/i}}

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

{{_i}}Variable{{/i}}	{{_i}}Value{{/i}}
`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18px

+ +

{{_i}}Components{{/i}}

Buttons

+ + + + + + + +

`@primaryButtonColor`	`@blue`

Forms

+ + + + + + + +

`@placeholderText`	`@grayLight`

Navbar

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

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`

Form states and alerts

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

`@warningText`	#f3edd2
`@warningBackground`	#c09853
`@warningBorder`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@errorBorder`	#e9c7c7
`@successText`	#468847
`@successBackground`	#dff0d8
`@successBorder`	#cfe8c4
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7
`@infoBorder`	#bfe1f2

+ +

+ + + + + - - + + - - + + -- cgit v1.2.3 From b0fb31be5eff9cc4d7a1b2aab70643ff4fc82618 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 23:45:48 -0800 Subject: fix js link on chop shop --- docs/templates/pages/less.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index ecb39055b..2633abdf3 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -170,7 +170,7 @@

We've compiled your selected CSS and customized variables and have them ready to download as a tidy ZIP file. Choose from compiled or compiled and minified CSS files.

Download CSS Download minified CSS

Looking to customize your javascript? Head over to the Javascript plugins page to build your own Bootstrap JS bundle.

-- cgit v1.2.3 From 64f85e037102425062a43ba17b9d5b1f4c4acba7 Mon Sep 17 00:00:00 2001 From: Jason Wieland Date: Wed, 25 Jan 2012 00:02:37 -0800 Subject: caught another old reference to 1.1.3 --- docs/templates/pages/less.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index ea7058fd9..ff52970b2 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -371,7 +371,7 @@

{{_i}}Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.{{/i}}

 <link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
-<script src="js/less-1.1.3.min.js"></script>

+<script src="js/less-1.2.1.min.js"></script>

{{_i}}Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.{{/i}}

{{_i}}What’s included{{/i}}

-- cgit v1.2.3 From b8fa6cfacf61a02ab769b9031253c7b06111fa7c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 01:22:29 -0800 Subject: move css builder and downloader to dedicated page, start to update remaining sections on LESS docs page --- docs/templates/layout.mustache | 3 + docs/templates/pages/base-css.mustache | 10 +- docs/templates/pages/components.mustache | 18 +- docs/templates/pages/download.mustache | 216 ++++++++++++++++++ docs/templates/pages/javascript.mustache | 24 +- docs/templates/pages/less.mustache | 359 +++++------------------------- docs/templates/pages/scaffolding.mustache | 6 +- 7 files changed, 303 insertions(+), 333 deletions(-) create mode 100644 docs/templates/pages/download.mustache (limited to 'docs/templates') diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 919872db2..1fec7788e 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -51,6 +51,9 @@

Using LESS

+ Download +

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index ba864ce9e..630852259 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -5,11 +5,11 @@

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

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 94d72a540..5da0e6989 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -5,15 +5,15 @@

{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache new file mode 100644 index 000000000..453bf1141 --- /dev/null +++ b/docs/templates/pages/download.mustache @@ -0,0 +1,216 @@ +

+ Heads up! This page is still under construction and is missing plenty of documentation. Hang tight! +

+ + +

{{_i}}Download and customize Bootstrap{{/i}}

{{_i}}Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}

+ + diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 2ac950251..df114841a 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -5,18 +5,18 @@

{{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}}

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 2633abdf3..76ecf70c9 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -9,177 +9,16 @@

{{_i}}Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}

- - - - -

@@ -189,7 +28,7 @@

{{_i}}Why LESS?{{/i}}

{{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

{{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

{{_i}}What's included?{{/i}}

@@ -223,7 +62,7 @@ ================================================== -->

{{_i}}Hyperlinks{{/i}}

@@ -494,85 +333,8 @@ - - - - - - - - - - - - - - - -

- -

{{_i}}Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.{{/i}}

{{_i}}Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.{{/i}}

{{_i}}How to use it{{/i}}

{{_i}}Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.{{/i}}

-<link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
-<script src="js/less-1.1.3.min.js"></script>

{{_i}}Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.{{/i}}

- -

{{_i}}What’s included{{/i}}

{{_i}}Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.{{/i}}

{{_i}}Variables{{/i}}

{{_i}}Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.{{/i}}

-// Links
-@linkColor:         #8b59c2;
-@linkColorHover:    darken(@linkColor, 10);
-
-// Grays
-@black:             #000;
-@grayDark:          lighten(@black, 25%);
-@gray:              lighten(@black, 50%);
-@grayLight:         lighten(@black, 70%);
-@grayLighter:       lighten(@black, 90%);
-@white:             #fff;
-
-// Accent Colors
-@blue:              #08b5fb;
-@green:             #46a546;
-@red:               #9d261d;
-@yellow:            #ffc40d;
-@orange:            #f89406;
-@pink:              #c3325f;
-@purple:            #7a43b6;
-
-// Baseline grid
-@basefont:          13px;
-@baseline:          18px;
-

- -

{{_i}}Commenting{{/i}}

{{_i}}Less also provides another style of commenting in addition to CSS’s normal /* ... */ syntax.{{/i}}

-// This is a comment
-/* This is also a comment */
-

{{_i}}Mixins up the wazoo{{/i}}

{{_i}}Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.{{/i}}

{{_i}}Font stacks{{/i}}

@@ -626,66 +388,55 @@ } -

{{_i}}Compiling Less{{/i}}

{{_i}}After modifying the .less files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.{{/i}}

{{_i}}Ways to compile{{/i}}

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

{{_i}}Method{{/i}}	{{_i}}Steps{{/i}}
{{_i}}Node with makefile{{/i}}	- {{_i}}Install the LESS command line compiler with npm by running the following command:{{/i}} - $ npm install less - {{_i}}Once installed just run `make` from the root of your bootstrap directory and you're all set.{{/i}} - {{_i}}Additionally, if you have watchr installed, you may run `make watch` to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}} -
{{_i}}Javascript{{/i}}	- {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the `<head>`.{{/i}} + + + + + {{_i}}Compiling Bootstrap with LESS{{/i}} + + + {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}} + + {{_i}}Tools for compiling{{/i}} + + + {{_i}}Node with makefile{{/i}} + {{_i}}Install the LESS command line compiler with npm by running the following command:{{/i}} + $ npm install less + {{_i}}Once installed just run `make` from the root of your bootstrap directory and you're all set.{{/i}} + {{_i}}Additionally, if you have watchr installed, you may run `make watch` to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}} + + + {{_i}}Command line{{/i}} + {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}} + $ lessc ./lib/bootstrap.less > bootstrap.css + {{_i}}Be sure to include `--compress` in that command if you're trying to save some bytes!{{/i}} + + + {{_i}}Javascript{{/i}} + {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the `<head>`.{{/i}} <link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script> - {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}} -
{{_i}}Command line{{/i}}	- {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}} - $ lessc ./lib/bootstrap.less > bootstrap.css - {{_i}}Be sure to include `--compress` in that command if you're trying to save some bytes!{{/i}} -
{{_i}}Unofficial Mac app{{/i}}	- {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}} - {{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}} -
Crunch	{{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}
CodeKit	{{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}
Simpless	{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

- -

\ No newline at end of file +

{{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

{{_i}}Unofficial Mac app{{/i}}

{{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}

{{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

{{_i}}More Mac apps{{/i}}

Crunch

{{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

CodeKit

{{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

Simpless

{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index ed80dabfc..981c60706 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -5,9 +5,9 @@

{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}

-- cgit v1.2.3 From bd36e2a1633ea66fee2bcfdd1123bd70f41b43f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 01:25:15 -0800 Subject: remove checkboxes from js docs page overview, they'll be on the download page instead --- docs/templates/pages/javascript.mustache | 41 ++++++++++---------------------- 1 file changed, 12 insertions(+), 29 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index df114841a..7671bc99a 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -31,25 +31,25 @@

-- cgit v1.2.3 From de4ada3b88d7514d0320540e5a298fbe878778e1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 01:45:15 -0800 Subject: spec out all mixins on less page --- docs/templates/pages/less.mustache | 356 +++++++++++++++++++++++++++++++------ 1 file changed, 303 insertions(+), 53 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index b3b9c15eb..0889592eb 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -42,11 +42,11 @@

{{_i}}Variables{{/i}}

{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}

{{_i}}Mixins{{/i}}

{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}

@@ -332,62 +332,312 @@ - - -

{{_i}}Mixins up the wazoo{{/i}}

{{_i}}Font stacks{{/i}}

+ +

About mixins

Basic mixins

A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.

-#font {
-  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  ...
-}
+  Coming soon!

{{_i}}Gradients{{/i}}

Parametric mixins

A parametric mixin is just like a basic mixin, but it also accepts optional paramaters (hence the name).

-#gradient {
-  ...
-  .vertical (@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: repeat-x;
-    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
-    background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
-    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(@startColor, @endColor); // The standard
-  }
-  ...
-}
+  Coming soon!

Easily add your own

Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.

So, go ahead and use the existing ones or feel free to add your own as you need.

Included mixins

Utilities

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

Mixin	Paramaters	Usage
`.clearfix()`
`.center-block()`
`.ie7-inline-block()`
`.size()`
`.square()`
`.opacity()`
`.reset-filter()`

Forms

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

Mixin	Paramaters	Usage
`.placeholder()`

Typography

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

Mixin	Paramaters	Usage
`#font > #family > .serif()`
`#font > #family > .sans-serif()`
`#font > #family > .monospace()`
`#font > .shorthand()`
`#font > .serif()`
`#font > .sans-serif()`
`#font > .monospace()`

Grid system

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

Mixin	Paramaters	Usage
`.fixed-container()`
`.columns()`
`.offset()`
`.gridColumn()`

CSS3 properties

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

Mixin	Paramaters	Usage
`.border-radius()`
`.border-radius-custom()`
`.box-shadow()`
`.transition()`
`.rotate()`
`.scale()`
`.translate()`
`.background-clip()`
`.background-size()`
`.box-sizing()`
`.user-select()`
`.resizable()`
`.content-columns()`

Backgrounds and gradients

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

Mixin	Paramaters	Usage
`.#translucent > .background()`
`.#translucent > .border()`
`.#gradient > .vertical()`
`.#gradient > .horizontal()`
`.#gradient > .directional()`
`.#gradient > .vertical-three-colors()`
`.#gradient > .radial()`
`.#gradient > .striped()`
`.#gradientBar()`

{{_i}}Operations{{/i}}

{{_i}}Get fancy and perform some math to generate flexible and powerful mixins like the one below.{{/i}}

-// Griditude
-@gridColumns:       16;
-@gridColumnWidth:   40px;
-@gridGutterWidth:   20px;
-@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-
-// Make some columns
-.columns(@columnSpan: 1) {
-  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
-}
-

@@ -208,7 +208,7 @@

 <div class="modal">
   <div class="modal-header">
-    <a href="#" class="close js-dismiss">×</a>
+    <a class="close" data-dismiss="modal">×</a>
     <h3>Modal header</h3>
   </div>
   <div class="modal-body">
-- 
cgit v1.2.3


From c381199968dc19a458f5e43e8b1aeebae284b7cc Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 09:57:40 -0800
Subject: fix media queries in scaffolding

---
 docs/templates/pages/scaffolding.mustache | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 981c60706..aea8002ad 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -294,7 +294,7 @@
       
         {{_i}}Use the compiled responsive version, bootstrap.reponsive.css{{/i}}
         {{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}
-        {{_i}}Compile responsive.less as a separate file and include that{{/i}}
+        {{_i}}Modify and recompile responsive.less as a separate{{/i}}
       
       {{_i}}Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}

@@ -304,7 +304,7 @@ @media (max-width: 480px) { ... } // {{_i}}Landscape phone to portrait tablet{{/i}} - @media (min-width: 480px) and (max-width: 768px) { ... } + @media (max-width: 768px) { ... } // {{_i}}Portrait tablet to landscape and desktop{{/i}} @media (min-width: 768px) and (max-width: 940px) { ... } -- cgit v1.2.3 From 9553b1e3e9457a48b6da3724c906a36f935aa526 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 10:02:52 -0800 Subject: update docs to include separate responsive css, update docs to highlight proper file name, updated makefile to build responsive separately --- docs/templates/layout.mustache | 1 + docs/templates/pages/scaffolding.mustache | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 1fec7788e..0bcfaeb63 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -14,6 +14,7 @@ + diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index aea8002ad..a89f93d8e 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -292,7 +292,7 @@

{{_i}}Use the compiled responsive version, bootstrap.reponsive.css{{/i}}
{{_i}}Use the compiled responsive version, bootstrap-reponsive.css{{/i}}
{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}
{{_i}}Modify and recompile responsive.less as a separate{{/i}}

-- cgit v1.2.3 From 1fa3eab20c827d0300cd4a4bb50e2c28e16a2872 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 10:19:29 -0800 Subject: fix location of favicon --- docs/templates/layout.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 0bcfaeb63..3435e3579 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -19,7 +19,7 @@ - + -- cgit v1.2.3 From 324ebb59900fd69411aec323a85953aec8c55bb6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 10:47:08 -0800 Subject: spec'ed out an examples overview page with links to current examples; examples still need work themselves though --- docs/templates/pages/examples.mustache | 26 ++++++++++++++++++++++++++ docs/templates/pages/index.mustache | 2 +- 2 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 docs/templates/pages/examples.mustache (limited to 'docs/templates') diff --git a/docs/templates/pages/examples.mustache b/docs/templates/pages/examples.mustache new file mode 100644 index 000000000..3c102bef2 --- /dev/null +++ b/docs/templates/pages/examples.mustache @@ -0,0 +1,26 @@ +

+ Heads up! This page is still under construction and is missing plenty of documentation. Hang tight! +

+ + +

{{_i}}Bootstrap examples{{/i}}

{{_i}}Use these examples as starting points for your work with Bootstrap. We encourage everyone to iterate on these examples and not simply use them as an end result.{{/i}}

+ + + + +

+ + +

Container app

Fluid layout

Reversed fluid layout

Hero marketing site

+ +

diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 82307eec7..c3f725a05 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -51,7 +51,7 @@

{{_i}}Built with Bootstrap.{{/i}}

{{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr.{{/i}}

{{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

-- cgit v1.2.3 From 97bad784b5b8fe4ea871a7d4d8c3f5714c26e2ee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 10:50:08 -0800 Subject: update remaining icons in docs --- docs/templates/pages/base-css.mustache | 24 ++++++++++++------------ docs/templates/pages/components.mustache | 12 ++++++------ 2 files changed, 18 insertions(+), 18 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 32df36b0f..4c7051078 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1370,20 +1370,20 @@

{{_i}}Use them in buttons, or in button groups for a toolbar style presentation.{{/i}}

- {{_i}}Refresh{{/i}} - {{_i}}Settings{{/i}} + {{_i}}Refresh{{/i}} + {{_i}}Settings{{/i}}

- - - + + +

- - - - + + + +

@@ -1391,9 +1391,9 @@
{{_i}}Or, use them in navigation.{{/i}}

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 5da0e6989..2566eb05e 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -388,13 +388,13 @@

-- 
cgit v1.2.3


From e49e49ff9557676d9018b410cea14a7f9f399733 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 10:51:26 -0800
Subject: fix mention of old vertical forms class'

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

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 4c7051078..4263bead3 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -804,7 +804,7 @@
     
       
         {{_i}}Vertical (default){{/i}}
-        .vertical-form ({{_i}}not required{{/i}})
+        .form-vertical ({{_i}}not required{{/i}})
         {{_i}}Stacked, left-aligned labels over controls{{/i}}
       
       
-- 
cgit v1.2.3


From fd3c6733a2d7b8f3afa3fc8511162e23ad1ac412 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 11:11:22 -0800
Subject: missing icon class in code example

---
 docs/templates/pages/components.mustache | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 2566eb05e..effa10762 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -402,7 +402,7 @@
   ...
   <li>
     <a href="#">
-      <i class="book"></i>
+      <i class="icon book"></i>
       {{_i}}Library{{/i}}
     </a>
   </li>
-- 
cgit v1.2.3


From 25519bacd56ee2507cdde727d85458e5e5ef7949 Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Wed, 25 Jan 2012 11:25:35 -0800
Subject: rebuild + add spy to template

---
 docs/templates/layout.mustache | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/templates')

diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 3435e3579..addcb224f 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -25,7 +25,7 @@
     
   
 
-  
+  
   
   
-- 
cgit v1.2.3


From b8511568637dfa4decb3f0475436a3dfa637a57d Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 11:26:45 -0800
Subject: change form fields back to inline-block to allow for inline-help text
 in default form markup

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

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 4263bead3..4daa98309 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -835,7 +835,7 @@
     
       
         {{_i}}Label name{{/i}}
-        
+         Associated help text!
         
            {{_i}}Check me out{{/i}}
         
-- 
cgit v1.2.3


From 58d08a2db3e2ed1b789a5290ced2f0327c9c163b Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 11:35:08 -0800
Subject: enable support for form states on select elements

---
 docs/templates/pages/base-css.mustache | 13 +++++++++++++
 1 file changed, 13 insertions(+)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 4daa98309..913eea31a 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1002,6 +1002,19 @@
             {{_i}}Woohoo!{{/i}}
           
         
+        
+          {{_i}}Select with success{{/i}}
+          
+            
+            {{_i}}Woohoo!{{/i}}
+          
+        
         
           
           
-- 
cgit v1.2.3


From 9c4a70c597a35f772bb21cb60dd7812146fc29ee Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 12:43:38 -0800
Subject: swap fieldsets for divs

---
 docs/templates/pages/base-css.mustache | 88 +++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 44 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 913eea31a..7a85d1138 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -876,14 +876,14 @@
     
       
         {{_i}}Controls Bootstrap supports{{/i}}
-        
+        
           {{_i}}Text input{{/i}}
           
             
             {{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}
           
-        
-        
+        
+        
           {{_i}}Checkbox{{/i}}
           
             
@@ -891,8 +891,8 @@
               {{_i}}Option one is this and that—be sure to include why it’s great{{/i}}
             
           
-        
-        
+

{{_i}}Select list{{/i}}

- -

{{_i}}Multi-select{{/i}}

- -

{{_i}}File input{{/i}}

- -

{{_i}}Textarea{{/i}}

- -

- +

@@ -960,19 +960,19 @@

{{_i}}Disabled input{{/i}}

- -

{{_i}}Disabled checkbox{{/i}}

@@ -980,29 +980,29 @@ {{_i}}This is a disabled checkbox{{/i}}

- -

{{_i}}Input with warning{{/i}}

{{_i}}Something may have gone wrong{{/i}}

- -

{{_i}}Input with error{{/i}}

{{_i}}Please correct the error{{/i}}

- -

{{_i}}Input with success{{/i}}

{{_i}}Woohoo!{{/i}}

- -

{{_i}}Select with success{{/i}}

{{_i}}Woohoo!{{/i}}

- -

- +

@@ -1044,7 +1044,7 @@

{{_i}}Prepended text{{/i}}

@@ -1062,8 +1062,8 @@

{{_i}}Here's some help text{{/i}}

- -

{{_i}}Appended text{{/i}}

@@ -1072,8 +1072,8 @@

{{_i}}Here's more help text{{/i}}

- -

{{_i}}Inline checkboxes{{/i}}

@@ -1086,8 +1086,8 @@ 3

- -

{{_i}}Checkboxes{{/i}}

@@ -1104,8 +1104,8 @@

{{_i}}Note: Labels surround all the options for much larger click areas and a more usable form.{{/i}}

- -

{{_i}}Radio buttons{{/i}}

@@ -1117,11 +1117,11 @@ {{_i}}Option two can is something else and selecting it will deselect option one{{/i}}

- -

- +

+ +

Build and Download +

What's included?

Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

- +

-- cgit v1.2.3 From 7ca3b98d885071bc032ca28e20452ad879cea422 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 13:56:44 -0800 Subject: docs fixes --- docs/templates/pages/download.mustache | 4 ++-- docs/templates/pages/index.mustache | 30 +++++++++++++++--------------- 2 files changed, 17 insertions(+), 17 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index 216098bad..f5964dc35 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -12,7 +12,7 @@

{{_i}}1. Select components{{/i}}

{{_i}}2. Modify variables{{/i}}

{{_i}}3. Select jQuery plugins{{/i}}

{{_i}}4. Build and download{{/i}}

{{_i}}4. Customize and download{{/i}}

@@ -231,7 +231,7 @@

- Build and Download + Customize and Download

What's included?

Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index c3f725a05..ff486bc7b 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -7,8 +7,8 @@

{{_i}}Bootstrap,
from Twitter{{/i}}

{{_i}}Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.{{/i}}

- {{_i}}Download on GitHub{{/i}} - {{_i}}Get started →{{/i}} + {{_i}}View on GitHub{{/i}} + {{_i}}Customize and Download{{/i}}

@@ -74,73 +74,73 @@

{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

{{_i}}Built for and by nerds{{/i}}

{{_i}}Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.{{/i}}

{{_i}}For all skill levels{{/i}}

{{_i}}Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}

{{_i}}Cross-everything{{/i}}

{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}

{{_i}}12-column grid{{/i}}

{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}

{{_i}}Responsive design{{/i}}

{{_i}}With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}

{{_i}}Styleguide docs{{/i}}

{{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}

{{_i}}Growing library{{/i}}

{{_i}}Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}

{{_i}}Custom jQuery plugins{{/i}}

{{_i}}What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.{{/i}}

{{_i}}Built on LESS{{/i}}

{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}

HTML5

{{_i}}Built to support new HTML5 elements and syntax.{{/i}}

CSS3

{{_i}}Progressively enhanced components for ultimate style.{{/i}}

{{_i}}Open-source{{/i}}

{{_i}}Built for and maintained by the community via GitHub.{{/i}}

{{_i}}Made at Twitter{{/i}}

{{_i}}Brought to you by an experienced engineer and designer.{{/i}}

-- cgit v1.2.3 From 7d83f45ebbadf7d100b56f944718763a6ce3e55c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 14:08:51 -0800 Subject: start filling out mixins tables --- docs/templates/pages/less.mustache | 46 +++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 23 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 0889592eb..51d2295de 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -347,7 +347,7 @@

Parametric mixins

A parametric mixin is just like a basic mixin, but it also accepts optional paramaters (hence the name).

A parametric mixin is just like a basic mixin, but it also accepts optional Parameters (hence the name).

   Coming soon!

@@ -364,45 +364,45 @@ Mixin - Paramaters + Parameters Usage .clearfix() - - + none + Add to any parent to clear floats within .center-block() - - + none + Auto center a block-level element using margin: auto .ie7-inline-block() - - + none + Use in addition to regular display: inline-block to get IE7 support .size() - - + @height: 5px, @width: 5px + Quickly set the height and width on one line .square() - - + @size: 5px + Builds on .size() to set the width and height as same value .opacity() - - + @opacity: 100 + Set, in whole numbers, the opacity percentage (e.g., "50" or "75") .reset-filter() - - + none + Resets any IE filter @@ -411,15 +411,15 @@ Mixin - Paramaters + Parameters Usage .placeholder() - - + @color: @placeholderText + Set the placeholder text color for inputs @@ -428,7 +428,7 @@ Mixin - Paramaters + Parameters Usage @@ -475,7 +475,7 @@ Mixin - Paramaters + Parameters Usage @@ -507,7 +507,7 @@ Mixin - Paramaters + Parameters Usage @@ -584,7 +584,7 @@ Mixin - Paramaters + Parameters Usage -- cgit v1.2.3 From b6b7d1343b74713a60e86401d8b625f097a7b8dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 15:03:44 -0800 Subject: finish the rest of the less page mixins docs --- docs/templates/pages/less.mustache | 217 +++++++++++++++--------------- docs/templates/pages/scaffolding.mustache | 2 +- 2 files changed, 109 insertions(+), 110 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 51d2295de..f2c266842 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -270,7 +270,7 @@

Form states and alerts

{{_i}}Form states and alerts{{/i}}

@@ -336,73 +336,77 @@ -

About mixins

{{_i}}About mixins{{/i}}

Basic mixins

A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.

{{_i}}Basic mixins{{/i}}

{{_i}}A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.{{/i}}

-  Coming soon!
+.element {
+  .clearfix();
+}

Parametric mixins

A parametric mixin is just like a basic mixin, but it also accepts optional Parameters (hence the name).

{{_i}}Parametric mixins{{/i}}

{{_i}}A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.{{/i}}

-  Coming soon!
+.element {
+  .border-radius(4px);
+}

Easily add your own

Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.

So, go ahead and use the existing ones or feel free to add your own as you need.

{{_i}}Easily add your own{{/i}}

{{_i}}Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.{{/i}}

{{_i}}So, go ahead and use the existing ones or feel free to add your own as you need.{{/i}}

Included mixins

Utilities

{{_i}}Included mixins{{/i}}

{{_i}}Utilities{{/i}}

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

Mixin	Parameters	Usage	{{_i}}Mixin{{/i}}
`.clearfix()`	none	Add to any parent to clear floats within	{{_i}}Add to any parent to clear floats within{{/i}}
`.center-block()`	none	Auto center a block-level element using `margin: auto`	{{_i}}Auto center a block-level element using `margin: auto`{{/i}}
`.ie7-inline-block()`	none	Use in addition to regular `display: inline-block` to get IE7 support	{{_i}}Use in addition to regular `display: inline-block` to get IE7 support{{/i}}
`.size()`	`@height: 5px, @width: 5px`	Quickly set the height and width on one line	{{_i}}Quickly set the height and width on one line{{/i}}
`.square()`	`@size: 5px`	Builds on `.size()` to set the width and height as same value	{{_i}}Builds on `.size()` to set the width and height as same value{{/i}}
`.opacity()`	`@opacity: 100`	Set, in whole numbers, the opacity percentage (e.g., "50" or "75")	{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}
`.reset-filter()`	none	Resets any IE filter	{{_i}}Resets any IE filter{{/i}}

@@ -410,16 +414,16 @@ - - - + + + - +

Mixin	Parameters	Usage	{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}	{{_i}}Usage{{/i}}
`.placeholder()`	`@color: @placeholderText`	Set the `placeholder` text color for inputs	{{_i}}Set the `placeholder` text color for inputs{{/i}}

@@ -427,46 +431,46 @@ - - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +

Mixin	{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}
`#font > #family > .serif()`	none	{{_i}}Make an element use a serif font stack{{/i}}
`#font > #family > .sans-serif()`	none	{{_i}}Make an element use a sans-serif font stack{{/i}}
`#font > #family > .monospace()`	none	{{_i}}Make an element use a monospace font stack{{/i}}
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	{{_i}}Easily set font size, weight, and leading{{/i}}
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	{{_i}}Set font family to serif, and control size, weight, and leading{{/i}}
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	{{_i}}Set font family to sans-serif, and control size, weight, and leading{{/i}}
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	{{_i}}Set font family to monospace, and control size, weight, and leading{{/i}}

@@ -474,31 +478,31 @@ - - - + + + - - - + + + - - + + - - + + - - + +

Mixin	{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}	{{_i}}Usage{{/i}}
`.fixed-container()`	`.container-fixed()`	none	{{_i}}Provide a fixed-width (set with `@siteWidth`) container for holding your content{{/i}}
`.columns()`	`@columns: 1`	{{_i}}Build a grid column that spans any number of columns (defaults to 1 column){{/i}}
`.offset()`	`@columns: 1`	{{_i}}Offset a grid column with left margin that spans any number of columns{{/i}}
`.gridColumn()`	none	{{_i}}Make an element float like a grid column{{/i}}

@@ -506,76 +510,71 @@ - - - + + + - - - - - - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +

Mixin	{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}
`.border-radius()`
`.border-radius-custom()`	`@radius: 5px`	{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	{{_i}}Add a drop shadow to an element{{/i}}
`.transition()`	`@transition`	{{_i}}Add CSS3 transition effect (e.g., `all .2s linear`){{/i}}
`.rotate()`	`@degrees`	{{_i}}Rotate an element n degrees{{/i}}
`.scale()`	`@ratio`	{{_i}}Scale an element to n times it's original size{{/i}}
`.translate()`	`@x: 0, @y: 0`	{{_i}}Move an element on the x and y planes{{/i}}
`.background-clip()`	`@clip`	{{_i}}Crop the backgroud of an element (useful for `border-radius`){{/i}}
`.background-size()`	`@size`	{{_i}}Control the size of background images via CSS3{{/i}}
`.box-sizing()`	`@boxmodel`	{{_i}}Change the box model for an element (e.g., `border-box` for a full-width `input`){{/i}}
`.user-select()`	`@select`	{{_i}}Control cursor selection of text on a page{{/i}}
`.resizable()`	`@direction: both`	{{_i}}Make any element resizable on the right and bottom{{/i}}
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	{{_i}}Make the content of any element use CSS3 columns{{/i}}

@@ -583,56 +582,56 @@ - - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +

Mixin	{{_i}}Mixin{{/i}}	{{_i}}Parameters{{/i}}
`.#translucent > .background()`	`@color: @white, @alpha: 1`	{{_i}}Give an element a translucent background color{{/i}}
`.#translucent > .border()`	`@color: @white, @alpha: 1`	{{_i}}Give an element a translucent border color{{/i}}
`.#gradient > .vertical()`	`@startColor, @endColor`	{{_i}}Create a cross-browser vertical background gradient{{/i}}
`.#gradient > .horizontal()`	`@startColor, @endColor`	{{_i}}Create a cross-browser horizontal background gradient{{/i}}
`.#gradient > .directional()`	`@startColor, @endColor, @deg`	{{_i}}Create a cross-browser directional background gradient{{/i}}
`.#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	{{_i}}Create a cross-browser three-color background gradient{{/i}}
`.#gradient > .radial()`	`@innerColor, @outerColor`	{{_i}}Create a cross-browser radial background gradient{{/i}}
`.#gradient > .striped()`	`@color, @angle`	{{_i}}Create a cross-browser striped background gradient{{/i}}
`.#gradientBar()`	`@primaryColor, @secondaryColor`	{{_i}}Used for buttons to assign a gradient and slightly darker border{{/i}}

diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index a89f93d8e..bc924e3ef 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -148,7 +148,7 @@ @siteWidth {{_i}}Computed sum of all columns and gutters{{/i}} - {{_i}}Counts number of columns and gutters to set width of the .fixed-container() mixin{{/i}} + {{_i}}Counts number of columns and gutters to set width of the .container-fixed() mixin{{/i}} -- cgit v1.2.3 From e877d125d7a2c673fec4e63600c2d8544c3128f6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 20:02:32 -0800 Subject: fix button group shadows, update js docs to fix alert js file link --- docs/templates/pages/components.mustache | 6 +++--- docs/templates/pages/javascript.mustache | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index effa10762..aaee36410 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -6,7 +6,7 @@ +

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index f2c266842..6478e3b2f 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -237,8 +237,8 @@ - - + +

`@primaryButtonColor`	`@blue`	`@primaryButtonBackground`	`@linkColor`

-- cgit v1.2.3 From 29f0e4c28b56e684a9be9931dcf77b418cb63ae0 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 13:01:03 -0500 Subject: Removes filters as a way to provide gradients for IE<=9 - Lets us use rounded corners in IE9 - Makes hover / active states work correctly in IE<=9 Only change for non-IE is that moving from hover -> not hovering no longer animates (was a subtle blend) due to mismatch between the bottom of the gradient and the background color. Refactor: moves the primary button background to match the others. --- docs/templates/pages/less.mustache | 5 ----- 1 file changed, 5 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 6478e3b2f..1aec06c2c 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -403,11 +403,6 @@ @opacity: 100 {{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}} - - .reset-filter() - none - {{_i}}Resets any IE filter{{/i}} -

Forms

-- cgit v1.2.3 From 34488a450081422037e84d269ddb289aa709e9fb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 10:39:07 -0800 Subject: fix tabs example on js docs page --- docs/templates/pages/javascript.mustache | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 6b2a3693d..66493dc0c 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -560,10 +560,10 @@ $('#myModal').on('hidden', function () { </ul> <div class="tab-content"> - <div class="active" id="home">...</div> - <div id="profile">...</div> - <div id="messages">...</div> - <div id="settings">...</div> + <div class="tab-pane active" id="home">...</div> + <div class="tab-pane" id="profile">...</div> + <div class="tab-pane" id="messages">...</div> + <div class="tab-pane" id="settings">...</div> </div> <script> -- cgit v1.2.3 From b8c1950cbfbb48d49f79b1e36f8c8294b19ed57d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 10:43:08 -0800 Subject: change label fo first subnav link on js docs --- docs/templates/pages/javascript.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 66493dc0c..941c6b485 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -5,7 +5,7 @@

{{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}}

- \ No newline at end of file + -- cgit v1.2.3 From a4a8ea2328f163fad43f250f6b3311fe0b670946 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 19:09:59 -0800 Subject: flip order of content on home page --- docs/templates/pages/index.mustache | 46 ++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 23 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index b045cc579..9a5421bd3 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -49,28 +49,6 @@

{{_i}}Built with Bootstrap.{{/i}}

{{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

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

- -

{{_i}}Designed for everyone, everywhere.{{/i}}

{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

@@ -147,7 +125,29 @@

+ +

{{_i}}Built with Bootstrap.{{/i}}

{{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

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

+ +

-- cgit v1.2.3 From dc2deb9a1b1995bbabee91bfd579d9b466fe78f2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 26 Jan 2012 21:48:46 -0800 Subject: moving structure around + more work on builder... --- docs/templates/pages/download.mustache | 74 +++++++++++++++++----------------- 1 file changed, 37 insertions(+), 37 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index 4707e60a9..0f997d368 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -43,24 +43,24 @@

@@ -70,9 +70,9 @@ Utilities Component animations

Responsive

- Max-width 480px - Max-width 768px - Max-width 1210px + MARK PLS FIX Max-width 480px + MARK PLS FIX Max-width 768px + MARK PLS FIX Max-width 1210px

@@ -89,68 +89,68 @@

Links

@linkColor - + @linkColorHover - +

Grid system

@gridColumns - + @gridColumnWidth - + @gridGutterWidth - + @siteWidth - + @fluidSidebarWidth - +

Typography

@baseFontSize - + @baseFontFamily - + @baseLineHeight - +

Forms

@primaryButtonColor - + @placeholderText - +

Navbar

@navbarHeight - + @navbarBackground - + @navbarBackgroundHighlight - +

Form states & alerts

@warningText - + @warningBackground - + @warningBorder - + @errorText - + @errorBackground - + @errorBorder - + @successText - + @successBackground - + @successBorder - + @infoText - + @infoBackground - + @infoBorder - +

-- cgit v1.2.3 From ed64276e5be1bbf808f2ab1451aa02522cc3aff0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 26 Jan 2012 22:05:45 -0800 Subject: move doc building into base make method + build bootstrap to doc assets --- docs/templates/layout.mustache | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 014f248d6..dbb718056 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -13,8 +13,8 @@ - - + + -- cgit v1.2.3 From aa594501bd24d51181dc3504602aa4aaefb1cb60 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 26 Jan 2012 23:16:02 -0800 Subject: change typeahead to data-source instead of data-data and add to docs --- docs/templates/pages/javascript.mustache | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 59b8a03d6..6e3ba25da 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1258,7 +1258,7 @@ $('.myCarousel').carousel({

{{_i}}Example{{/i}}

{{_i}}Start typing in the field below to show the typeahead results.{{/i}}

- +

{{_i}}Using bootstrap-typeahead.js{{/i}}

@@ -1275,6 +1275,12 @@ $('.myCarousel').carousel({ + + {{_i}}source{{/i}} + {{_i}}array{{/i}} + [ ] + {{_i}}The data source to query against.{{/i}} + {{_i}}items{{/i}} {{_i}}number{{/i}} -- cgit v1.2.3 From 942d1b459568acb9f66525f8f6316a252a199e02 Mon Sep 17 00:00:00 2001 From: Burak Tuyan Date: Fri, 27 Jan 2012 16:33:18 +0200 Subject: Updating to latest version of Glyphicons Halflings set (v.1.5) along with some icon enhancements like: - Updated the Gylphicons Halflings set to version 1.5 (30 new icons) - Optimized the sprite PNG files for minimum filesize without any quality loss - Made some fixes for horizontal alignment at the LESS/CSS level (tags, bold, arrow-up, minus, chevron-down) - Made some fixes for vertical alignment at the LESS/CSS level (chevron-down, resize-vertical, resize-horizontal) - Renamed the old "calendar" class as "list-alt" class (because now we've a real calendar icon) - Changed the "background-position" of the icon class to "14px 14px", so that a wrong class name will not be showing the glass icon and instead will show a blank icon (which is useful for just positioning the text after the icons in some cases) - Added new icons (classes) to the base-css Docs (to both HTML file and Mustache template) - Changed one of the button examples to danger style and used a white icon - Renamed the sprite image files to save a few bytes here and there (from glyphicons-halflings-sprite.png to lyphicons-halflings.png and from glyphicons-halflings-sprite-white.png to glyphicons-halflings-white.png) --- docs/templates/pages/base-css.mustache | 62 +++++++++++++++++++++++++--------- 1 file changed, 46 insertions(+), 16 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index c3d10eb08..6476669e6 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1273,10 +1273,6 @@ - - -

@@ -1284,8 +1280,12 @@ +

- + @@ -1301,10 +1301,6 @@ -

@@ -1319,7 +1315,10 @@ - +

@@ -1329,10 +1328,6 @@ -

@@ -1345,6 +1340,20 @@ + + + + + + + + + + +

@@ -1355,6 +1364,27 @@ + + + + + + + + + + + + + + + + + + + + +

@@ -1376,7 +1406,7 @@

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

{{_i}}There are over 100 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.{{/i}}

{{_i}}There are 120 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.{{/i}}

{{_i}}Use cases{{/i}}

@@ -1397,7 +1427,7 @@

{{_i}}Use them in buttons, or in button groups for a toolbar style presentation.{{/i}}

{{_i}}Refresh{{/i}} - {{_i}}Settings{{/i}} + {{_i}}Delete{{/i}}

@@ -1423,10 +1427,11 @@

{{_i}}Examples{{/i}}

{{_i}}Use them in buttons, or in button groups for a toolbar style presentation.{{/i}}

{{_i}}Refresh{{/i}} + {{_i}}Checkout{{/i}} {{_i}}Delete{{/i}}

{{_i}}Examples{{/i}}

{{_i}}Use them in buttons, or in button groups for a toolbar style presentation.{{/i}}

- {{_i}}Refresh{{/i}} - {{_i}}Checkout{{/i}} - {{_i}}Delete{{/i}} -

{{_i}}Use them in buttons - of all types and sizes.{{/i}}

- {{_i}}Refresh{{/i}} + {{_i}}Refresh{{/i}} + {{_i}}Checkout{{/i}} + {{_i}}Delete{{/i}} +

+ {{_i}}Comment{{/i}} {{_i}}Settings{{/i}} + {{_i}}More Info{{/i}}

{{_i}}Or, use them in navigation.{{/i}}

{{_i}}Use them in navigation.{{/i}}

+ +

\ No newline at end of file -- cgit v1.2.3 From 7e72eb5063470a3728d612acd2cc0368aabc8664 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 18:33:25 -0800 Subject: new tab focus style and mixin --- docs/templates/pages/less.mustache | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'docs/templates') diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 649f8f456..ad6688e1e 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -390,6 +390,11 @@ none {{_i}}Add to any parent to clear floats within{{/i}} + + .tab-focus() + none + {{_i}}Apply the Webkit focus style and round Firefox outline{{/i}} + .center-block() none -- cgit v1.2.3 From d02c6957d44761c35121cb88af727802ce4d9e5e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 19:49:56 -0800 Subject: fixing up buttons and examples of implementing icons --- docs/templates/pages/base-css.mustache | 31 ++----- docs/templates/pages/components.mustache | 153 +++++++++++++++---------------- 2 files changed, 80 insertions(+), 104 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 5b9cae472..23a6a37a2 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1412,7 +1412,7 @@

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

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

{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

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

@@ -1427,18 +1427,15 @@

{{_i}}For buttons to help convey the meaning of an action{{/i}}

{{_i}}With links to share context on a user's destination{{/i}}

{{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use .icon class with no other classes:{{/i}}

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

{{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon.{{/i}}

{{_i}}Examples{{/i}}

{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

{{_i}}Use them in buttons - of all types and sizes.{{/i}}

{{_i}}Use them in navigation.{{/i}}

{{_i}}Home{{/i}}

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index f73052e63..48de1f8bf 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -31,32 +31,29 @@

{{_i}}Button groups{{/i}}

{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}

{{_i}}You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.{{/i}}

+ -

{{_i}}Example markup{{/i}}

@@ -100,67 +97,65 @@

{{_i}}Split button dropdowns{{/i}}

- - -

+ +

{{_i}}Example markup{{/i}}

-- cgit v1.2.3 From 0255f47eb3f4967851d014a9ef6fdf49a37dc548 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 27 Jan 2012 21:36:58 -0800 Subject: add zindex option for tooltips/popovers and fix modal zindex doc example --- docs/templates/pages/javascript.mustache | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 6e3ba25da..ec711a312 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -156,7 +156,7 @@

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.

{{_i}}Popover in a modal{{/i}}

{{_i}}This button should trigger a popover on hover.{{/i}}

{{_i}}Tooltips in a modal{{/i}}

{{_i}}This link and that link should have tooltips on hover.{{/i}}

@@ -675,6 +675,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

+ + {{_i}}z-index{{/i}} + {{_i}}number{{/i}} + 1020 + The tooltips z-index value +

{{_i}}Notice Individual tooltip instance options can alternatively be specified through the use of data attributes.{{/i}}

@@ -775,6 +781,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

+ + {{_i}}z-index{{/i}} + {{_i}}number{{/i}} + 1010 + The popovers z-index value +

{{_i}}Notice Individual popover instance options can alternatively be specified through the use of data attributes.{{/i}}

-- cgit v1.2.3 From e726b231ba0c0c0effb13c9458842d64bda0e58c Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 27 Jan 2012 21:59:06 -0800 Subject: add toggle to docs for popover/tooltip --- docs/templates/pages/javascript.mustache | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index ec711a312..9113c1776 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -695,6 +695,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

.tooltip('hide')

{{_i}}Hides an elements tooltip.{{/i}}

$('#element').tooltip('hide')

.tooltip('toggle')

{{_i}}Toggles an elements tooltip.{{/i}}

$('#element').tooltip('toggle')

@@ -803,6 +806,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

.popover('hide')

{{_i}}Hides an elements popover.{{/i}}

$('#element').popover('hide')

.popover('toggle')

{{_i}}Toggles an elements popover.{{/i}}

$('#element').popover('toggle')

-- cgit v1.2.3 From 7cbb5868259ef95aacbd16812c25ac73ea76ca2d Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 27 Jan 2012 22:27:06 -0800 Subject: move the matcher and sorter into the options - encourage people to override them... --- docs/templates/pages/javascript.mustache | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 9113c1776..3c7a3b101 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1288,7 +1288,7 @@ $('.myCarousel').carousel({ {{_i}}Name{{/i}} {{_i}}type{{/i}} - {{_i}}default{{/i}} + {{_i}}default{{/i}} {{_i}}description{{/i}} @@ -1305,6 +1305,18 @@ $('.myCarousel').carousel({ 8 {{_i}}The max number of items to display in the dropdown.{{/i}} + + {{_i}}matcher{{/i}} + {{_i}}function{{/i}} + case sensitive + {{_i}}The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.{{/i}} + + + {{_i}}sorter{{/i}} + {{_i}}function{{/i}} + no sort + {{_i}}Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.{{/i}} + @@ -1313,6 +1325,9 @@ $('.myCarousel').carousel({

 <input type="text" data-provide="typeahead">

{{_i}}Methods{{/i}}

.typeahead({{_i}}options{{/i}})

{{_i}}Initializes an input with a typahead.{{/i}}

\ No newline at end of file -- cgit v1.2.3 From cb8606f2c84adb57c82dd7bd401574a2376ff952 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 22:52:45 -0800 Subject: adding wells and close icon to the docs under misc in components, with a new subnav style --- docs/templates/pages/base-css.mustache | 53 ------- docs/templates/pages/components.mustache | 229 +++++++++++++++++++++++-------- 2 files changed, 171 insertions(+), 111 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 23a6a37a2..ad27d2be8 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -323,59 +323,6 @@ - -

{{_i}}Inline labels for special attention{{/i}}

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

{{_i}}Labels{{/i}}	{{_i}}Markup{{/i}}
- {{_i}}Default{{/i}} -	- `<span class="label">{{_i}}Default{{/i}}</span>` -
- {{_i}}New{{/i}} -	- `<span class="label success">{{/_i}}New{{/i}}</span>` -
- {{_i}}Warning{{/i}} -	- `<span class="label warning">{{_i}}Warning{{/i}}</span>` -
- {{_i}}Important{{/i}} -	- `<span class="label important">{{_i}}Important{{/i}}</span>` -
- {{_i}}Info{{/i}} -	- `<span class="label info">{{_i}}Info{{/i}}</span>` -

- diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 48de1f8bf..98e7c3f3f 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -5,15 +5,27 @@

{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

@@ -862,6 +874,66 @@ + +

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

{{_i}}Labels{{/i}}	{{_i}}Markup{{/i}}
+ {{_i}}Default{{/i}} +	+ `<span class="label">{{_i}}Default{{/i}}</span>` +
+ {{_i}}New{{/i}} +	+ `<span class="label success">{{/_i}}New{{/i}}</span>` +
+ {{_i}}Warning{{/i}} +	+ `<span class="label warning">{{_i}}Warning{{/i}}</span>` +
+ {{_i}}Important{{/i}} +	+ `<span class="label important">{{_i}}Important{{/i}}</span>` +
+ {{_i}}Info{{/i}} +	+ `<span class="label info">{{_i}}Info{{/i}}</span>` +

+ + +

@@ -1103,32 +1175,32 @@ -

- +

+ -

{{_i}}Examples and markup{{/i}}

{{_i}}Basic{{/i}}

{{_i}}Default progress bar with a vertical gradient.{{/i}}

{{_i}}Examples and markup{{/i}}

{{_i}}Basic{{/i}}

{{_i}}Default progress bar with a vertical gradient.{{/i}}

 <div class="progress">
   <div class="bar"
        style="width: 60%;"></div>
 </div>

{{_i}}Striped{{/i}}

{{_i}}Uses a gradient to create a striped effect.{{/i}}

{{_i}}Striped{{/i}}

{{_i}}Uses a gradient to create a striped effect.{{/i}}

 <div class="progress info
      striped">
@@ -1136,13 +1208,13 @@
        style="width: 20%;"></div>
 </div>

{{_i}}Animated{{/i}}

{{_i}}Takes the striped example and animates it.{{/i}}

{{_i}}Animated{{/i}}

{{_i}}Takes the striped example and animates it.{{/i}}

 <div class="progress danger
      striped active">
@@ -1150,31 +1222,72 @@
        style="width: 40%;"></div>
 </div>

+ +

{{_i}}Options and browser support{{/i}}

{{_i}}Additional colors{{/i}}

{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}

.info
.success
.danger

{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}

{{_i}}Behavior{{/i}}

{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}

{{_i}}If you use the .active class, your .striped progress bars will animate the stripes left to right.{{/i}}

{{_i}}Browser support{{/i}}

{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}

{{_i}}Opera does not support animations at this time.{{/i}}

+ +

+ + + + + + +

+ +

{{_i}}Wells{{/i}}

{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

+ {{_i}}Look, I'm in a well!{{/i}} +

+<div class="well">
+  ...
+</div>
+

{{_i}}Badges{{/i}}

{{_i}}Use a badge on an element for an unread count or as a simple indicator.{{/i}}

<span class="badge">3</div>

{{_i}}Close icon{{/i}}

{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

<a class="close">&times;</a>

+ + -

{{_i}}Options and browser support{{/i}}

{{_i}}Additional colors{{/i}}

{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}

.info
.success
.danger

{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}

{{_i}}Behavior{{/i}}

{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}

{{_i}}If you use the .active class, your .striped progress bars will animate the stripes left to right.{{/i}}

{{_i}}Browser support{{/i}}

{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}

{{_i}}Opera does not support animations at this time.{{/i}}

-- cgit v1.2.3 From 08fea7587c536b7daa2c976cdb50144379ae2a62 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 23:27:33 -0800 Subject: call attention to notices in js docs more --- docs/templates/pages/javascript.mustache | 53 ++++++++++++++++++++++---------- 1 file changed, 37 insertions(+), 16 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 3c7a3b101..ee70bf21b 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -81,7 +81,7 @@

{{_i}}Collapse{{/i}}

@@ -108,6 +108,7 @@

{{_i}}Heads up!{{/i}} {{_i}}All javascript plugins require the latest version of jQuery.{{/i}}

@@ -220,7 +221,9 @@ </div> </div> -

{{_i}}Notice If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action).{{/i}}

+ {{_i}}Heads up!{{/i}} {{_i}}If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action) and include bootstrap-transition.js.{{/i}} +

Methods{{/i}}

.modal({{_i}}options{{/i}})

{{_i}}Activates your content as a modal. Accepts an optional options object.{{/i}}

@@ -374,7 +377,9 @@ $('#myModal').on('hidden', function () {

$('.dropdown-toggle').dropdown()

{{_i}}Markup{{/i}}

{{_i}}To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.{{/i}}

{{_i}}Notice For added control and flexibility, optionally specify a data-target="#fat" or href="#fat" - this allows you to target specific dropdowns.{{/i}}

+ {{_i}}Heads up!{{/i}}{{_i}} You may optionally target a specific dropdown by using data-target="#fat" or href="#fat".{{/i}} +

 <ul class="nav pills">
@@ -468,7 +473,10 @@ $('#myModal').on('hidden', function () {
           {{_i}}Markup{{/i}}
           {{_i}}To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body).{{/i}}
           <body data-spy="scroll" >...</body>
-           {{_i}}Notice Navbar anchor tags must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.{{/i}}
+          
+            {{_i}}Heads up!{{/i}}
+            {{_i}}Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.{{/i}}
+          
           {{_i}}Options{{/i}}
           
@@ -683,7 +691,10 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
              
             
             
           
-          {{_i}}Notice Individual tooltip instance options can alternatively be specified through the use of data attributes.{{/i}}
+          
+            {{_i}}Heads up!{{/i}}
+            {{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}}
+          
           {{_i}}Markup{{/i}}
           {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}
           {{_i}}Methods{{/i}}
@@ -792,7 +803,10 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
              
             
           
-          {{_i}}Notice Individual popover instance options can alternatively be specified through the use of data attributes.{{/i}}
+          
+            {{_i}}Heads up!{{/i}}
+            {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
+          
           {{_i}}Markup{{/i}}
           
           {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}}
@@ -965,19 +979,23 @@ $('#my-alert').bind('closed', function () {
           
{{_i}}Methods{{/i}}
           $().button('toggle')
           {{_i}}Toggles push state. Gives btn the look that it's been activated.{{/i}}
-          {{_i}}Notice You can enable auto toggling of a button by using the data-toggle attribute.{{/i}}
+          
+            {{_i}}Heads up!{{/i}}
+            {{_i}}You can enable auto toggling of a button by using the data-toggle attribute.{{/i}}
+          
           <button class="btn" data-toggle="button" >…</button>
           $().button('loading')
           {{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.{{/i}}
           
-           <button class="btn" data-loading-text="loading stuff..." >...</button>
-          
-            {{_i}}Notice Firefox persists the disabled state across page loads. A workaround for this is to use: autocomplete="off". More info can be found here.{{/i}}
-          
-           $().button('reset')
-           {{_i}}Resets button state - swaps text to original text.{{/i}}
-           $().button(string)
-           {{_i}}Resets button state - swaps text to any data defined text state.{{/i}}
+          <button class="btn" data-loading-text="loading stuff..." >...</button>
+          
+            {{_i}}Heads up!{{/i}}
+            {{_i}}Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".{{/i}}
+          
+          $().button('reset')
+          {{_i}}Resets button state - swaps text to original text.{{/i}}
+          $().button(string)
+          {{_i}}Resets button state - swaps text to any data defined text state.{{/i}}
 <button class="btn" data-complete-text="finished!" >...</button>
 <script>
   $('.btn').button('complete')
@@ -1081,7 +1099,10 @@ $('#my-alert').bind('closed', function () {
 </button>
 
 <div id="demo" class="collapse in"> … </div>
-         {{_i}}Notice To add accordion like group management to a collapsible control just add the additional data attribute data-parent="#selector". Refer to the demo below to see this in action.{{/i}}
+          
+            {{_i}}Heads up!{{/i}}
+            {{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}}
+          
           {{_i}}Methods{{/i}}
           .collapse({{_i}}options{{/i}})
           {{_i}}Activates your content as a collapsible element. Accepts an optional options object.{{/i}}
-- 
cgit v1.2.3


From d448e6921e6fc39e4fe7f484da004b2196517478 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 28 Jan 2012 00:23:30 -0800
Subject: rewrite the code section of the type docs

---
 docs/templates/pages/base-css.mustache | 80 ++++++++++++++++------------------
 1 file changed, 38 insertions(+), 42 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index ad27d2be8..f235d9b05 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -6,6 +6,7 @@
   

     
       {{_i}}Typography{{/i}}
+      {{_i}}Code{{/i}}
       {{_i}}Tables{{/i}}
       {{_i}}Forms{{/i}}
       {{_i}}Buttons{{/i}}
@@ -278,51 +279,46 @@

+ - - -

{{_i}}Code Inline and block{{/i}}

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

{{_i}}Element{{/i}}	{{_i}}Result{{/i}}
`<code>`	{{_i}}In a line of text like this, your wrapped code will look like this `<html>` element.{{/i}}
`<pre>`	- <div> - <h1>{{_i}}Heading{{/i}}</h1> - <p>{{_i}}Something right here…{{/i}}</p> -</div> - {{_i}}Note: Be sure to keep code within `<pre>` tags as close to the left as possible; it will render all tabs.{{/i}} -
`<pre class="prettyprint">`	- {{_i}}Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}} - <div> - <h1>{{_i}}Heading{{/i}}</h1> - <p>{{_i}}Something right here…{{/i}}</p> -</div> - <div> - <h1>{{_i}}Heading{{/i}}</h1> - <p>{{_i}}Something right here…{{/i}}</p> -</div> - {{_i}}Download google-code-prettify and view the readme for how to use.{{/i}} -

+ +

Inline

Wrap inline snippets of code with <code>.

+{{_i}}For example, <code>section</code> should be wrapped as inline.{{/i}}
+

Basic block

{{_i}}Use <pre> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}

+<pre>
+  &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
+</pre>
+

{{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

Google Prettify

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

+<pre class="prettyprint
+     linenums">
+  &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
+</pre>
+

{{_i}}Download google-code-prettify and view the readme for how to use.{{/i}}

-- cgit v1.2.3 From 873be0e4f2a7e961998a8726e9953ae5111b3d85 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 00:25:54 -0800 Subject: drop span2-4 on form examples to 1-3 --- docs/templates/pages/base-css.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index f235d9b05..23d72efd5 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1001,9 +1001,9 @@

{{_i}}Form sizes{{/i}}

+ -

{{_i}}Use the same .span* classes from the grid system for input sizes.{{/i}}

-- cgit v1.2.3 From 18d95a163b23296b7c2242a98aa1f66b3bd22a7a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 00:34:54 -0800 Subject: remove fixed width from labels table --- docs/templates/pages/components.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 98e7c3f3f..d08ea98b5 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -883,7 +883,7 @@ - + -- cgit v1.2.3 From 4737d693e00989a0f90f832a7c8f4f784df14077 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 28 Jan 2012 00:36:37 -0800 Subject: remove quick start section to simplify landing page + start rewriting application js to work ie7 --- docs/templates/pages/index.mustache | 33 --------------------------------- 1 file changed, 33 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 5eb2774ab..5fa70645a 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -147,38 +147,5 @@ -

- - -

{{_i}}Get started in no time.{{/i}}

{{_i}}Quickly start using Bootstrap within your workflow and development process.{{/i}}

{{_i}}Prostyle with Node{{/i}}

{{_i}}If you use Node, download the repo, customize Bootstrap, and run make.{{/i}}

-$ git clone git@github.com:twitter/bootstrap.git
-$ make

{{_i}}Hotlink the CSS{{/i}}

{{_i}}For the quickest and easiest start, just copy this snippet into your code to get the CSS.{{/i}}

- -

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css">

- -

{{_i}}Use LESS.js{{/i}}

{{_i}}A fan of using LESS? No problem, just link to the appropriate .less and .js files:{{/i}}

- -

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
-    <script src="/path/to/less.js"></script>

- -

- \ No newline at end of file -- cgit v1.2.3 From 967030cb532c642f076d1e1fc4e5a1e2cee18561 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 00:39:22 -0800 Subject: modal refinements in docs and general responsiveness --- docs/templates/pages/javascript.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index ee70bf21b..edafbbf0f 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -128,7 +128,7 @@

{{_i}}Static example{{/i}}

{{_i}}Below is a statically rendered modal.{{/i}}

@@ -790,7 +790,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { -- cgit v1.2.3 From d65ce1b64c0049e4fe37a79a4962d8444415ee00 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 01:34:07 -0800 Subject: updated upgrading page --- docs/templates/pages/upgrading.mustache | 271 ++++++++++++++++++++++---------- 1 file changed, 185 insertions(+), 86 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache index cc731eae1..2339b2e1c 100644 --- a/docs/templates/pages/upgrading.mustache +++ b/docs/templates/pages/upgrading.mustache @@ -1,86 +1,185 @@ - -

{{_i}}Upgrading to Bootstrap 2{{/i}}

{{_i}}Learn about significant changes and additions since v1.4 with this handy guide.{{/i}}

- - -

Rough outline

{{_i}}Docs completely overhauled{{/i}} -
- {{_i}}Responsive thanks to new grid system{{/i}}
- {{_i}}Now less marketing and more information{{/i}}
- {{_i}}Extensive use of tables to share classes and elements of most components{{/i}}
- {{_i}}Broken down into several pages for easier consumption{{/i}}
-
{{_i}}Updated grid system, now only 12 columns{{/i}} -
- {{_i}}Same great classes, but now only 12 columns{{/i}}
- {{_i}}Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more{{/i}}
-
{{_i}}New thumbnails (previously media grids){{/i}} -
- {{_i}}.media-grid class has been changed to .thumbnails{{/i}}
- {{_i}}Individual thumbnails now require .thumbnail class{{/i}}
-
{{_i}}Updated forms{{/i}} -
- {{_i}}Default form style is now stacked to use less CSS and add flexibility{{/i}}
- {{_i}}Exact same markup is required for vertical or horizontal forms—just swap the classes{{/i}}
- {{_i}}New form defaults for search, inline, vertical, and horizontal{{/i}}
-
Updated tables -
- {{_i}}Table classes made more consistent{{/i}}
- {{_i}}Removed unused table color options (too much code for such little impact){{/i}}
-
Typography -
- {{_i}}Right-aligned option for blockquotes if float: right;{{/i}}
- {{_i}}h4 elements were dropped from 16px to 14px with a default line-height of 18px{{/i}}
- {{_i}}h5 elements were dropped from 14px to 12px{{/i}}
- {{_i}}h6 elements were dropped from 13px to 11px{{/i}}
-
{{_i}}Buttons{{/i}} -
- {{_i}}Added button bar options{{/i}}
-
{{_i}}Examples{{/i}} -
- {{_i}}Fluid examples redone. .fluid-container now requires a .sidebar-left or .sidebar-right as well. Fluid sidebar element has a new class, .fluid-sidebar.{{/i}}
-
{{_i}}Dropdown menus{{/i}} -
- {{_i}}Updated the .dropdown-menu to tighten up spacing{{/i}}
- {{_i}}Now requires you to add a <span class="caret"></span> to show the dropdown arrow{{/i}}
- {{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}
-
{{_i}}Navigation{{/i}} -
- {{_i}}Tabs and pills now require the use of a new base class, .nav, on their <ul>{{/i}}
- {{_i}}New nav list component added that uses the same base class, .nav{{/i}}
- {{_i}}Vertical tabs and pills have been added—just add .stacked to the <ul><{{/i}}/li> -
- {{_i}}Pills were restyled to be less rounded by default{{/i}}
- {{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}
-

- - \ No newline at end of file + +

{{_i}}Upgrading to Bootstrap 2{{/i}}

{{_i}}Learn about significant changes and additions since v1.4 with this handy guide.{{/i}}

+ + + + +

+ +

{{_i}}Docs: major updates across the board to general structure, examples, and code snippets. Also made responsive with new media queries.{{/i}}
{{_i}}Docs: all docs pages are now powered by Mustache templates and strings are wrapped in i18n tags for translation by the Twitter Translation Center. All changes to documentation must be done here and then compiled (similar to our CSS and LESS).{{/i}}
{{_i}}Repo directory structure: removed the compiled CSS from the root in favor of a large direct download link on the docs homepage. Compiled CSS is in /docs/assets/css/.{{/i}}
{{_i}}Docs and repo: one makefile, just type make in the Terminal and get updated docs and CSS.{{/i}}

+ + + + +

+ +

{{_i}}Grid system{{/i}}

{{_i}}Updated grid system, now only 12 columns instead of 16{{/i}} +
{{_i}}Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more{{/i}}
{{_i}}Removed unused (by default) grid columns support for 17-24 columns{{/i}}

{{_i}}Responsive (media queries){{/i}}

{{_i}}Media queries added for basic support across mobile and tablet devices{{/i}} +
{{_i}}Responsive CSS is compiled separately, as bootstrap-responsive.css{{/i}}

+ + + + +

+ +

{{_i}}Typography{{/i}}

{{_i}}h4 elements were dropped from 16px to 14px with a default line-height of 18px{{/i}}
{{_i}}h5 elements were dropped from 14px to 12px{{/i}}
{{_i}}h6 elements were dropped from 13px to 11px{{/i}}
{{_i}}Right-aligned option for blockquotes if float: right;{{/i}}

{{_i}}Code{{/i}}

{{_i}}New graphical style for <code>{{/i}}
{{_i}}Google Code Prettify styles updated (based on GitHub's gists){{/i}}

{{_i}}Tables{{/i}}

{{_i}}Improved support for colspan and rowspan{{/i}}
{{_i}}Styles now restricted to new base class, .table{{/i}}
{{_i}}Table classes standardized with .table- required as a prefix{{/i}}
{{_i}}Removed unused table color options (too much code for such little impact){{/i}}
{{_i}}Dropped support for TableSorter{{/i}}

{{_i}}Buttons{{/i}}

{{_i}}IE9: removed gradients and added rounded corners{{/i}}
{{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}
{{_i}}New mixin, .buttonBackground, to set button gradients{{/i}}

{{_i}}Forms{{/i}}

{{_i}}Default form style is now vertical (stacked_ to use less CSS and add greater flexibility{{/i}}
{{_i}}Form classes standardized with .form- required as a prefix{{/i}}
{{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}
{{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the label{{/i}}
{{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}

{{_i}}Icons, by Glyphicons{{/i}}

{{_i}}New Glyphicons Halflings icon set added in sprite form, in black and white{{/i}}
{{_i}}Simple markup required for an icon in tons of contexts: <i class="icon cog"></>{{/i}}
{{_i}}Add another class, .white, for white variation of the same icon{{/i}}

+ + + + +

+ +

{{_i}}Button groups and dropdowns{{/i}}

{{_i}}Two brand new components in 2.0: button groups and button dropdowns{{/i}}
{{_i}}Dependency: button dropdowns are built on button groups, and therefore require all their styles{{/i}}
{{_i}}Button groups, .btn-group, can be grouped one level higher with a button toolbar, .btn-toolbar{{/i}}

{{_i}}Navigation{{/i}}

{{_i}}Tabs and pills now require the use of a new base class, .nav, on their <ul>{{/i}}
{{_i}}New nav list variation added that uses the same base class, .nav{{/i}}
{{_i}}Vertical tabs and pills have been added—just add .stacked to the <ul>{{/i}}
{{_i}}Pills were restyled to be less rounded by default{{/i}}
{{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}

{{_i}}Dropdown menus{{/i}}

{{_i}}Updated the .dropdown-menu to tighten up spacing{{/i}}
{{_i}}Now requires you to add a <span class="caret"></span> to show the dropdown arrow{{/i}}
{{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}

{{_i}}Labels{{/i}}

{{_i}}Label colors updated to match form state colors{{/i}}
{{_i}}Not only do they match graphically, but they are powered by the same new variables{{/i}}

{{_i}}Thumbnails{{/i}}

{{_i}}Formerly .media-grid, now just .thumbnails, we've thoroughly extended this component for more uses while maintaining overall simplicity out of the box.{{/i}}
{{_i}}Individual thumbnails now require .thumbnail class{{/i}}

{{_i}}Alerts{{/i}}

{{_i}}New base class: .alert instead of .alert-message{{/i}}
{{_i}}Class names standardized for other options, now all starting with .alert-{{/i}}
{{_i}}Redesigned base alert styles to combine the deafult alerts and block-level alerts into one{{/i}}
{{_i}}Block level alert class changed: .alert-block instead of .block-message{{/i}}

{{_i}}Progress bars{{/i}}

{{_i}}New in 2.0{{/i}}
{{_i}}Features multiple styles via classes, including striped and animated variations via CSS3{{/i}}

{{_i}}Miscellaneous components{{/i}}

{{_i}}Added documentation for the well component and the close icon (used in modals and alerts){{/i}}

+ + + + +

+ +

+ + + + +

+ +

{{_i}}Variables{{/i}}

{{_i}}Mixins{{/i}}

+ + + + +

+ +

{{_i}}New in 2.0{{/i}}

+ -- cgit v1.2.3 From 12d3c2fe74bbe2570e47a2c8d7154a3011bd0770 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 28 Jan 2012 12:08:41 -0800 Subject: fix z-index issue with modals for popovers,tooltips,and dropdowns --- docs/templates/pages/javascript.mustache | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 01b14b676..46420660a 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -683,12 +683,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

- - - - - -

{{_i}}Labels{{/i}}	{{_i}}Labels{{/i}}	{{_i}}Markup{{/i}}
{{_i}}number \| object{{/i}}	0	- {{_i}}delay showing/hiding the tooltip (ms){{/i}} + {{_i}}delay showing and hiding the tooltip (ms){{/i}} {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}} {{_i}}Object structure is: `delay: { show: 500, hide: 100 }`{{/i}}	{{_i}}number \| object{{/i}}	0	- {{_i}}delay showing/hiding the popover (ms){{/i}} + {{_i}}delay showing and hiding the popover (ms){{/i}} {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}} {{_i}}Object structure is: `delay: { show: 500, hide: 100 }`{{/i}}
{{_i}}z-index{{/i}}	{{_i}}number{{/i}}	1020	The tooltips z-index value

@@ -795,12 +789,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

- - {{_i}}z-index{{/i}} - {{_i}}number{{/i}} - 1010 - The popovers z-index value -

@@ -1021,7 +1009,7 @@ $('#my-alert').bind('closed', function () {

{{_i}}Example accordion{{/i}}

{{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}

- +

@@ -1061,7 +1049,7 @@ $('#my-alert').bind('closed', function () {

- +

{{_i}}Using bootstrap-collapse.js{{/i}}

Enable via javascript:

-- cgit v1.2.3 From 2bfda031cebcde7361797dd54badeb91d4cb98cf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 12:43:19 -0800 Subject: darken buttons, uncomment out firefox keyframes from progress bars --- docs/templates/pages/base-css.mustache | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 23d72efd5..6cbb111ac 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1063,11 +1063,11 @@ {{_i}}Radio buttons{{/i}}

- + {{_i}}Option one is this and that—be sure to include why it’s great{{/i}} - + {{_i}}Option two can is something else and selecting it will deselect option one{{/i}}

-- cgit v1.2.3 From 6935f693b3bce10f9bfe7b7e1f3c2705ff2b6ca2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 28 Jan 2012 13:16:05 -0800 Subject: typahead does case insensitive matching with simple sorter + accepts highlighter option --- docs/templates/pages/javascript.mustache | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 46420660a..cba75ac08 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1297,7 +1297,7 @@ $('.myCarousel').carousel({ {{_i}}Name{{/i}} {{_i}}type{{/i}} - {{_i}}default{{/i}} + {{_i}}default{{/i}} {{_i}}description{{/i}} @@ -1317,15 +1317,21 @@ $('.myCarousel').carousel({ {{_i}}matcher{{/i}} {{_i}}function{{/i}} - case sensitive + {{_i}}case insensitive{{/i}} {{_i}}The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.{{/i}} {{_i}}sorter{{/i}} {{_i}}function{{/i}} - no sort + {{_i}}exact match,
case sensitive,
case insensitive{{/i}} {{_i}}Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.{{/i}} + + {{_i}}highlighter{{/i}} + {{_i}}function{{/i}} + {{_i}}highlights all default matches{{/i}} + {{_i}}Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.{{/i}} + -- cgit v1.2.3 From fe6d2f2e1d181ef6e62eb02fab6a4e16e494d892 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 13:30:15 -0800 Subject: fix tabs-below typo --- docs/templates/pages/components.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index d08ea98b5..363ed1ba1 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -499,7 +499,7 @@

-<div class="tabbable tabs-bottom">
+<div class="tabbable tabs-below">
   <ul class="nav tabs">
     ...
   </ul>
-- 
cgit v1.2.3


From 23e076c1bb73c4950d473cb36218937b2607bc13 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 28 Jan 2012 15:09:23 -0800
Subject: add in a navbar button for toggling the nav items

---
 docs/templates/layout.mustache | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'docs/templates')

diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 46e3d03d6..673673dff 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -33,6 +33,11 @@
     
       
         
+          
+            
+            
+            
+          
           Bootstrap
           
             
-- 
cgit v1.2.3


From b8a683d7f250a11d349a3e5de0d75ace9d67df0c Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Sat, 28 Jan 2012 15:42:07 -0800
Subject: turn off brand hover for now + get nav toggling in mobile

---
 docs/templates/layout.mustache | 54 ++++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 26 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 673673dff..7c0ab655b 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -26,42 +26,44 @@
   
 
   
-  
-  
+
+
   
     
       
         
-          
+          
             
             
             
           
           Bootstrap
-          
-            
-              {{_i}}Overview{{/i}}
-            
-            
-              {{_i}}Scaffolding{{/i}}
-            
-            
-              {{_i}}Base CSS{{/i}}
-            
-            
-              {{_i}}Components{{/i}}
-            
-            
-              {{_i}}Javascript plugins{{/i}}
-            
-            
-              {{_i}}Using LESS{{/i}}
-            
-            
-              {{_i}}Customize{{/i}}
-            
-          
+          
+            
+              
+                {{_i}}Overview{{/i}}
+              
+              
+                {{_i}}Scaffolding{{/i}}
+              
+              
+                {{_i}}Base CSS{{/i}}
+              
+              
+                {{_i}}Components{{/i}}
+              
+              
+                {{_i}}Javascript plugins{{/i}}
+              
+              
+                {{_i}}Using LESS{{/i}}
+              
+              
+                {{_i}}Customize{{/i}}
+              
+            
+          
         
       
     
-- 
cgit v1.2.3


From 4fa931e403ec3ae2f8f7f690c6c4040365f68ba9 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 28 Jan 2012 18:11:31 -0800
Subject: fix the navbar click and a few jank responsive problems

---
 docs/templates/pages/base-css.mustache   |  2 +-
 docs/templates/pages/components.mustache | 81 +++++++++++++++++---------------
 2 files changed, 45 insertions(+), 38 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 6cbb111ac..c15fcebd3 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1425,7 +1425,7 @@
           
             
               
-              
+              
             
           
         
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 363ed1ba1..3a92953ae 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -590,40 +590,47 @@
   
     
       
+        
+          
+          
+          
+        
         {{_i}}Project name{{/i}}
-        
-          {{_i}}Home{{/i}}
-          {{_i}}Link{{/i}}
-          {{_i}}Link{{/i}}
-          {{_i}}Link{{/i}}
-          
-            {{_i}}Dropdown{{/i}} 
-            
-              {{_i}}Action{{/i}}
-              {{_i}}Another action{{/i}}
-              {{_i}}Something else here{{/i}}
-              
-              {{_i}}Separated link{{/i}}
-            
-          
-        
-        
-          
-        
-        
-          {{_i}}Link{{/i}}
-          
-          
-            {{_i}}Dropdown{{/i}} 
-            
-              {{_i}}Action{{/i}}
-              {{_i}}Another action{{/i}}
-              {{_i}}Something else here{{/i}}
-              
-              {{_i}}Separated link{{/i}}
-            
-          
-        
+        
+          
+            {{_i}}Home{{/i}}
+            {{_i}}Link{{/i}}
+            {{_i}}Link{{/i}}
+            {{_i}}Link{{/i}}
+            
+              {{_i}}Dropdown{{/i}} 
+              
+                {{_i}}Action{{/i}}
+                {{_i}}Another action{{/i}}
+                {{_i}}Something else here{{/i}}
+                
+                {{_i}}Separated link{{/i}}
+              
+            
+          
+          
+            
+          
+          
+            {{_i}}Link{{/i}}
+            
+            
+              {{_i}}Dropdown{{/i}} 
+              
+                {{_i}}Action{{/i}}
+                {{_i}}Another action{{/i}}
+                {{_i}}Something else here{{/i}}
+                
+                {{_i}}Separated link{{/i}}
+              
+            
+          
+        

       
     

   

@@ -661,7 +668,7 @@
   <input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}">
 </form>

{{_i}}Nav links{{/i}}

{{_i}}Nav items are simple to add via unordered lists.{{/i}}

@@ -691,9 +698,9 @@ </li> </ul> -

{{_i}}Get the javascript →{{/i}}

+ -- cgit v1.2.3 From 99ac6ca08ed27126d2ad1dd4d0e820205aab9c48 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:39:36 -0800 Subject: update components page to include docs for the new navbar collapse feature, re-add responsive.less to downloader --- docs/templates/pages/components.mustache | 29 ++++++++++++++++++++++++++++- docs/templates/pages/download.mustache | 6 +----- 2 files changed, 29 insertions(+), 6 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 3a92953ae..5c91431fa 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -395,7 +395,7 @@

{{_i}}List header{{/i}}
{{_i}}Home{{/i}}
{{_i}}Home{{/i}}
{{_i}}Library{{/i}}
{{_i}}Applications{{/i}}
{{_i}}Another list header{{/i}}

{{_i}}Optional responsive variation{{/i}}

{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.{{/i}}

+<div class="navbar navbar-static">
+  <div class="navbar-inner">
+    <div class="container">
+      
+      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
+      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+        <span class="i-bar"></span>
+        <span class="i-bar"></span>
+        <span class="i-bar"></span>
+      </a>
+      
+      <!-- Be sure to leave the brand out there if you want it shown -->
+      <a class="brand" href="#">{{_i}}Project name{{/i}}</a>
+
+      <!-- Everything you want hidden at 940px or less, place within here -->
+      <div class="nav-collapse">
+        <!-- .nav, .navbar-search, .navbar-form, etc -->
+      </div>
+
+    </div>
+  </div>
+</div>
+

{{_i}}Nav links{{/i}}

diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index dccc5fbb6..34f8130ac 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -63,12 +63,8 @@ {{_i}}Close icon{{/i}} {{_i}}Utilities{{/i}} {{_i}}Component animations{{/i}} - + {{_i}}Responsive layouts{{/i}}

-- cgit v1.2.3 From 5f314dcb85b011d30bbe845e00932a9a550d4e71 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 20:27:18 -0800 Subject: remove benefits from homepage html --- docs/templates/pages/index.mustache | 12 ------------ 1 file changed, 12 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 5fa70645a..4ae3b7a6f 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -10,18 +10,6 @@ {{_i}}View project on GitHub{{/i}} {{_i}}Download Bootstrap{{/i}}

{{_i}}Feature highlights{{/i}}

✔ {{_i}}Built on LESS{{/i}}
✔ {{_i}}Complete style guide docs{{/i}}
✔ {{_i}}Fully responsive design{{/i}}
✔ {{_i}}Small footprint (10kb gzipped){{/i}}
✔ {{_i}}Support for IE7 and up{{/i}}
✔ {{_i}}Custom jQuery plugins{{/i}}
✔ {{_i}}Dozens of components{{/i}}

Date: Sat, 28 Jan 2012 20:34:07 -0800 Subject: clarify and tweak media queries --- docs/templates/pages/scaffolding.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index cf672cc6e..6d5a66f8d 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -318,7 +318,7 @@ @media (min-width: 768px) and (max-width: 940px) { ... } // {{_i}}Large desktop{{/i}} - @media (min-width: 1210px) { .. } + @media (min-width: 1200px) { .. } -- cgit v1.2.3 From 59d9983ebcc889b5e5626d672311e92657bfe3e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:03:14 -0800 Subject: updates to responsive and docs for responsive navbar --- docs/templates/pages/components.mustache | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 5c91431fa..5cb914e32 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -694,6 +694,9 @@ </div> </div> +

+ {{_i}}Heads up!{{/i}} The responsive navbar requires the collapse plugin. +

-- cgit v1.2.3 From 487dbfdda4692e3212f13d5e6282d7818b4c9934 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:14:51 -0800 Subject: namespace progress bars and labels classes --- docs/templates/pages/components.mustache | 42 +++++++++++++++----------------- 1 file changed, 19 insertions(+), 23 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 5cb914e32..312863c6b 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -935,34 +935,34 @@ - {{_i}}New{{/i}} + {{_i}}New{{/i}} - <span class="label success">{{/_i}}New{{/i}}</span> + <span class="label label-success">{{/_i}}New{{/i}}</span> - {{_i}}Warning{{/i}} + {{_i}}Warning{{/i}} - <span class="label warning">{{_i}}Warning{{/i}}</span> + <span class="label label-warning">{{_i}}Warning{{/i}}</span> - {{_i}}Important{{/i}} + {{_i}}Important{{/i}} - <span class="label important">{{_i}}Important{{/i}}</span> + <span class="label label-important">{{_i}}Important{{/i}}</span> - {{_i}}Info{{/i}} + {{_i}}Info{{/i}} - <span class="label info">{{_i}}Info{{/i}}</span> + <span class="label label-info">{{_i}}Info{{/i}}</span> @@ -1235,12 +1235,12 @@

{{_i}}Striped{{/i}}

{{_i}}Uses a gradient to create a striped effect.{{/i}}

-<div class="progress info
-     striped">
+<div class="progress progress-info
+     progress-striped">
   <div class="bar"
        style="width: 20%;"></div>
 </div>
@@ -1249,12 +1249,12 @@
     
       {{_i}}Animated{{/i}}
       {{_i}}Takes the striped example and animates it.{{/i}}
-      
+      
         
       
 -<div class="progress danger
-     striped active">
+<div class="progress progress-danger
+     progress-striped active">
   <div class="bar"
        style="width: 40%;"></div>
 </div>
@@ -1266,18 +1266,18 @@
   
     
       {{_i}}Additional colors{{/i}}
-      {{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}
+      {{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}
       
-        .info
-        .success
-        .danger
+        .progress-info
+        .progress-success
+        .progress-danger
       
       {{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}
     
     
       {{_i}}Behavior{{/i}}
       {{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}
-      {{_i}}If you use the .active class, your .striped progress bars will animate the stripes left to right.{{/i}}
+      {{_i}}If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.{{/i}}
     
     
       {{_i}}Browser support{{/i}}
@@ -1324,7 +1324,3 @@
     

   

 
-
-
-
-
-- 
cgit v1.2.3


From 62f4a1571a3801c867b80c228464cc9c695f1d13 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 28 Jan 2012 22:48:25 -0800
Subject: revamped the thumbnails examples to make them work and look better at
 higher resolution

---
 docs/templates/pages/components.mustache | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 312863c6b..11874b9f3 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -985,22 +985,22 @@
       
         
           
-            
+            
           
         
         
           
-            
+            
           
         
         
           
-            
+            
           
         
         
           
-            
+            
           
         
       
@@ -1011,7 +1011,7 @@
       
         
           
-            
+            
             
               {{_i}}Thumbnail label{{/i}}
               Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
@@ -1021,7 +1021,7 @@
         
         
           
-            
+            
             
               {{_i}}Thumbnail label{{/i}}
               Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
@@ -1056,7 +1056,7 @@
 <ul class="thumbnails">
   <li class="span3">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/210x150" alt="">
+      <img src="http://placehold.it/260x180" alt="">
     </a>
   </li>
   ...
@@ -1067,7 +1067,7 @@
 <ul class="thumbnails">
   <li class="span3">
     <div class="thumbnail">
-      <img src="http://placehold.it/210x150" alt="">
+      <img src="http://placehold.it/260x180" alt="">
       <h5>{{_i}}Thumbnail label{{/i}}</h5>
       <p>{{_i}}Thumbnail caption right here...{{/i}}</p>
     </div>
@@ -1082,32 +1082,32 @@
       
         
           
-            
+            
           
         
         
           
-            
+            
           
         
         
           
-            
+            
           
         
         
           
-            
+            
           
         
         
           
-            
+            
           
         
         
           
-            
+            
           
         
       
-- 
cgit v1.2.3


From bca269299b242c55a2511e752429c07d7639f7d2 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 28 Jan 2012 23:40:52 -0800
Subject: removing required .navbar-static class, rewrote docs to reflect the
 change, and updated the upgrade docs page to include the navbar section

---
 docs/templates/pages/components.mustache | 8 ++++----
 docs/templates/pages/upgrading.mustache  | 9 +++++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 11874b9f3..75ca3eb7e 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -587,7 +587,7 @@
   
   {{_i}}Static navbar example{{/i}}
   {{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}
-  
+  
     
       
         
@@ -640,7 +640,7 @@
       {{_i}}Navbar scaffolding{{/i}}
       {{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}
 -<div class="navbar navbar-static">
+<div class="navbar">
   <div class="navbar-inner">
     <div class="container">
       ...
@@ -648,7 +648,7 @@
   </div>
 </div>
 
-      {{_i}}To make the navbar fixed, swap the .navbar-static class for .navbar-fixed-top. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}
+      {{_i}}To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}
  <div class="navbar navbar-fixed-top">
   ...
@@ -671,7 +671,7 @@
       {{_i}}Optional responsive variation{{/i}}
       {{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
 -<div class="navbar navbar-static">
+<div class="navbar">
   <div class="navbar-inner">
     <div class="container">
       
diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache
index 2339b2e1c..95587456a 100644
--- a/docs/templates/pages/upgrading.mustache
+++ b/docs/templates/pages/upgrading.mustache
@@ -114,6 +114,15 @@
     {{_i}}Pills were restyled to be less rounded by default{{/i}}
     {{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}
   

+  {{_i}}Navbar (formerly topbar){{/i}}
+  
+    {{_i}}Base class changed from .topbar to .navbar{{/i}}
+    {{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via .navbar-fixed-top (previously only supported fixed){{/i}}
+    {{_i}}Added vertical dividers to top-level nav{{/i}}
+    {{_i}}Improved support for inline forms in the navbar, which now require .navbar-form to properly scope styles to only the intended forms.{{/i}}
+    {{_i}}Navbar search form now requires use of the .navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.{{/i}}
+    {{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. See navbar docs for how to utilize.{{/i}}
+  
   {{_i}}Dropdown menus{{/i}}
   
     {{_i}}Updated the .dropdown-menu to tighten up spacing{{/i}}
-- 
cgit v1.2.3


From 15a1c0ce7988aaf715096760fa99eff7b23937f4 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 28 Jan 2012 23:58:39 -0800
Subject: add swatches to the color variables in less docs page

---
 docs/templates/pages/less.mustache | 202 +++++++++++++++++--------------------
 1 file changed, 90 insertions(+), 112 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index ad6688e1e..82b921d24 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -62,168 +62,146 @@
 ================================================== -->
 
   
-    {{_i}}Bootstrap variables {{/i}}
+    {{_i}}Bootstrap variables LESS variables, their values, and usage guidelines{{/i}}
   
 
-  {{_i}}Hyperlinks{{/i}}
-  
-    
-      
-        
-        
-        
-      
-    
-    
-      
-        
-        
-        
-      
-      
-        
-        
-        
-      
-    
-  {{_i}}Variable{{/i}} {{_i}}Value{{/i}} {{_i}}Usage{{/i}}
@linkColor #08c {{_i}}Default link text color{{/i}}
@linkColorHover darken(@linkColor, 15%) {{_i}}Default link text hover color{{/i}}
-
   
     
-      {{_i}}Grayscale colors{{/i}}
+      {{_i}}Hyperlinks{{/i}}
       
-        
+        
-            
-            
+            
+            
+            
+            
-        
+          
+            
+            
+            
+            
+          
+        
+      

           {{_i}}Variable{{/i}} {{_i}}Value{{/i}} @linkColor #08c {{_i}}Default link text color{{/i}} 
           
@linkColorHover darken(@linkColor, 15%) {{_i}}Default link text hover color{{/i}} 
+      {{_i}}Grid system{{/i}}
+      
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      @gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@siteWidth (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))
+      {{_i}}Typography{{/i}}
+      
+        
+          
+            
+            
+          
+          
+            
+            
+            
+          
+          
+            
+            
+          
+        
+      @baseFontSize 13px
@baseFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif 
@baseLineHeight 18px
+    
+    
+      {{_i}}Grayscale colors{{/i}}
+      
-            
+            
+            
+            
+            
+            
+            
+            
+            
         
           @black @black
             #000 
           
           
             @grayDarker
             #222 
           
           
             @grayDark
             #333 
           
           
             @gray
             #555 
           
           
             @grayLight
             #999 
           
           
             @grayLighter
             #eee 
           
           
             @white
             #fff 
           
         
       
-    
-    
       {{_i}}Accent colors{{/i}}
       
-        
-          
-            
-            
-          
-        
-            
+            
+            
+            
+            
+            
+            
+            
-          
-        
-      {{_i}}Variable{{/i}} {{_i}}Value{{/i}}
         
           @blue @blue
             #049cdb 
           
           
             @green
             #46a546 
           
           
             @red
             #9d261d 
           
           
             @yellow
             #ffc40d 
           
           
             @orange
             #f89406 
           
           
             @pink
             #c3325f 
           
           
             @purple
             #7a43b6
-    
-  
 
-  
-    
-      {{_i}}Grid system{{/i}}
-      
-        
-          
-            
-            
-          
-        
-        
-          
-            
-            
-          
-          
-            
-            
-          
-          
-            
-            
-          
-          
-            
-            
-          
-        
-      {{_i}}Variable{{/i}} {{_i}}Value{{/i}}
@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@siteWidth (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))
-    
-    
-      {{_i}}Typography{{/i}}
-      
-        
-          
-            
-            
-          
-        
-        
-          
-            
-            
-          
-          
-            
-            
-            
-          
-          
-            
-            
+            {{_i}}Variable{{/i}} {{_i}}Value{{/i}}
@baseFontSize 13px
@baseFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif 
@baseLineHeight 18px 
           
         
       
@@ -239,6 +217,7 @@
           
             @primaryButtonBackground
             @linkColor
+            
           
         
       
@@ -248,6 +227,7 @@
           
             @placeholderText
             @grayLight
+            
           
         
       
@@ -257,26 +237,32 @@
           
             @navbarHeight
             40px
+            
           
           
             @navbarBackground
             @grayDarker
+            
           
           
             @navbarBackgroundHighlight
             @grayDark
+            
           
           
             @navbarText
             @grayLight
+            
           
           
             @navbarLinkColor
             @grayLight
+            
           
           
             @navbarLinkColorHover
             @white
+            
           
         
       
@@ -288,50 +274,42 @@
           
             @warningText
             #f3edd2
+            
           
           
             @warningBackground
             #c09853
-          
-          
-            @warningBorder
-            #f3edd2
+            
           
           
             @errorText
             #b94a48
+            
           
           
             @errorBackground
             #f2dede
-          
-          
-            @errorBorder
-            #e9c7c7
+            
           
           
             @successText
             #468847
+            
           
           
             @successBackground
             #dff0d8
-          
-          
-            @successBorder
-            #cfe8c4
+            
           
           
             @infoText
             #3a87ad
+            
           
           
             @infoBackground
             #d9edf7
-          
-          
-            @infoBorder
-            #bfe1f2
+            
           
         
       
-- 
cgit v1.2.3


From 7bf27674523c35f8803311a964dc72a7093351c0 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 29 Jan 2012 00:07:01 -0800
Subject: remove form docs from the styles and markup, it's no longer needed

---
 docs/templates/pages/base-css.mustache | 59 ++++++++++++++++------------------
 1 file changed, 28 insertions(+), 31 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index c15fcebd3..b464084df 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -880,22 +880,20 @@
       
     
     
-      
-        {{_i}}What's included{{/i}}
-        {{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}
-        
-          {{_i}}text inputs (text, password, email, etc){{/i}}
-          {{_i}}checkbox{{/i}}
-          {{_i}}radio{{/i}}
-          {{_i}}select{{/i}}
-          {{_i}}multiple select{{/i}}
-          {{_i}}file input{{/i}}
-          {{_i}}textarea{{/i}}
-        
-        
-        {{_i}}New defaults with v2.0{{/i}}
-        {{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}
-      
+      {{_i}}What's included{{/i}}
+      {{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}
+      
+        {{_i}}text inputs (text, password, email, etc){{/i}}
+        {{_i}}checkbox{{/i}}
+        {{_i}}radio{{/i}}
+        {{_i}}select{{/i}}
+        {{_i}}multiple select{{/i}}
+        {{_i}}file input{{/i}}
+        {{_i}}textarea{{/i}}
+      
+      
+      {{_i}}New defaults with v2.0{{/i}}
+      {{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}
     
   
 
@@ -975,19 +973,17 @@
       
     
     
-      
-        {{_i}}Redesigned browser states{{/i}}
-        {{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}
-        
-        {{_i}}Form validation{{/i}}
-        {{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.{{/i}}
+      {{_i}}Redesigned browser states{{/i}}
+      {{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}
+      
+      {{_i}}Form validation{{/i}}
+      {{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.{{/i}}
  <fieldset
   class="control-group error">
   …
 </fieldset>
 
-      
     
   
 
@@ -1080,14 +1076,15 @@

{{_i}}Prepend & append inputs{{/i}}

{{_i}}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.{{/i}}

{{_i}}Checkboxes and radios{{/i}}

{{_i}}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">.{{/i}}

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

{{_i}}Prepend & append inputs{{/i}}

{{_i}}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.{{/i}}

{{_i}}Checkboxes and radios{{/i}}

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

{{_i}}Inline forms and append/prepend{{/i}}

{{_i}}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.{{/i}}

-- cgit v1.2.3 From 059ff6bcbd48f18431ed66e4b1b2a97a9567b9f7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 02:27:45 -0800 Subject: update hero example and examples overview --- docs/templates/pages/examples.mustache | 58 ++++++++++++++++++++++++++-------- 1 file changed, 44 insertions(+), 14 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/examples.mustache b/docs/templates/pages/examples.mustache index 3c102bef2..850ac0fa6 100644 --- a/docs/templates/pages/examples.mustache +++ b/docs/templates/pages/examples.mustache @@ -10,17 +10,47 @@ - - -

- - -

Container app

Fluid layout

Reversed fluid layout

Hero marketing site

- -

+ + + +
Basic marketing site
+
+
+ + + +
Fluid layout
+
+
+ + + +
Fluid layout reversed
+
+
+ + + +
Container application
+
+
+ + + +
Fullscreen
+
+
+ + + +
Simple layout
+
+

-- cgit v1.2.3 From 48529ad01fa2a60bfc9179743dcb5379e8ff944f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:06:57 -0800 Subject: last minute addition of a simple fluid grid for our fluid examples; it needs work, so we're not documenting it now --- docs/templates/pages/scaffolding.mustache | 1 - 1 file changed, 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 6d5a66f8d..239d15265 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -52,7 +52,6 @@

{{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}

-- cgit v1.2.3 From 8c763589a2058785936a33088935c50f622859de Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:09:10 -0800 Subject: update text on icons note --- docs/templates/pages/base-css.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index b464084df..2b9a459c8 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1335,7 +1335,7 @@

- {{_i}}Heads up! Icon classes are echoed via CSS :after and on hover in the docs we show a light red background color show the icon's size.{{/i}} + {{_i}}Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}

-- cgit v1.2.3 From 49d565a6da38359a776f83f31a1f1ccd658c88a7 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 29 Jan 2012 13:15:37 -0800 Subject: move building zip file into docs/makefile --- docs/templates/pages/index.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 5fa70645a..7a98afa07 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -8,7 +8,7 @@

Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

{{_i}}View project on GitHub{{/i}} - {{_i}}Download Bootstrap{{/i}} + {{_i}}Download Bootstrap{{/i}}

{{_i}}Feature highlights{{/i}}

-- cgit v1.2.3 From 278858e70698f0dcf8651cb59b13e48fe756d8bd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:25:13 -0800 Subject: fix form styles on prepend/append for consistency, update code docs with examples of the code snippets --- docs/templates/pages/base-css.mustache | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 2b9a459c8..b47bcf265 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -300,6 +300,9 @@

Basic block

{{_i}}Use <pre> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}

+<p>{{_i}}Sample text here...{{/i}}</p>
+

 <pre>
   &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
@@ -311,6 +314,9 @@
       Google Prettify
       Take the same <pre> element and add two optional classes for enhanced rendering.
 +<p>{{_i}}Sample text here...{{/i}}</p>
+
+ <pre class="prettyprint
      linenums">
   &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
-- 
cgit v1.2.3


From 9e7f5025b494927e9ffc88119b0b9426f7487a62 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 29 Jan 2012 14:07:14 -0800
Subject: update collapsible nav in navbar

---
 docs/templates/layout.mustache            | 2 +-
 docs/templates/pages/components.mustache  | 4 ++--
 docs/templates/pages/scaffolding.mustache | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 7c0ab655b..b49ec28f6 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -39,7 +39,7 @@
             
           
           Bootstrap
-          
+          
             
               
                 {{_i}}Overview{{/i}}
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 75ca3eb7e..fd7c464db 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -669,7 +669,7 @@
 </form>
 
       {{_i}}Optional responsive variation{{/i}}
-      {{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
+      {{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
  <div class="navbar">
   <div class="navbar-inner">
@@ -686,7 +686,7 @@
       <a class="brand" href="#">{{_i}}Project name{{/i}}</a>
 
       <!-- Everything you want hidden at 940px or less, place within here -->
-      <div class="nav-collapse">
+      <div class="nav-collapse collapse">
         <!-- .nav, .navbar-search, .navbar-form, etc -->
       </div>
 
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 239d15265..15c438b97 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -55,7 +55,7 @@
   
     
       {{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}
-      {{_i}}It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.{{/i}}
+      {{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.{{/i}}
     
     
 -- 
cgit v1.2.3


From 702d3b6dfe7a150deb090f70d7d9c2a2964a3eb2 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 29 Jan 2012 16:35:55 -0800
Subject: fix broken navbar collapse

---
 docs/templates/layout.mustache | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/templates')

diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index b49ec28f6..7c0ab655b 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -39,7 +39,7 @@
             
           
           Bootstrap
-          
+          
             
               
                 {{_i}}Overview{{/i}}
-- 
cgit v1.2.3


From 0301d469e8f8bd9da6d63ffb929ad48cae573afc Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 29 Jan 2012 16:54:51 -0800
Subject: remove .collapse from navbar responsive docs

---
 docs/templates/pages/components.mustache | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index fd7c464db..7fd1c1ac6 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -686,7 +686,7 @@
       <a class="brand" href="#">{{_i}}Project name{{/i}}</a>
 
       <!-- Everything you want hidden at 940px or less, place within here -->
-      <div class="nav-collapse collapse">
+      <div class="nav-collapse">
         <!-- .nav, .navbar-search, .navbar-form, etc -->
       </div>
 
-- 
cgit v1.2.3


From ae7f94eeff733584cbdc80a2d13a85f136a7744e Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 30 Jan 2012 00:39:44 -0800
Subject: overhaul grid mixins and variables, standardize fluid grid system and
 enable it across responsive layouts

---
 docs/templates/layout.mustache         |  4 ++++
 docs/templates/pages/base-css.mustache | 21 +++++++++++++++++++++
 2 files changed, 25 insertions(+)

(limited to 'docs/templates')

diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 7c0ab655b..b372820fd 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -62,6 +62,10 @@
               

                 {{_i}}Customize{{/i}}
               
+              
+              
+                {{_i}}Examples{{/i}}
+              
             
           
         
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index b47bcf265..dedc201f3 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1006,6 +1006,27 @@
               
               
               
+              
+              
+              
               {{_i}}Use the same .span* classes from the grid system for input sizes.{{/i}}
             
           
-- 
cgit v1.2.3


From dc3d2b1044afa5633291f856b451543f17ecd690 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 30 Jan 2012 00:44:27 -0800
Subject: update js docs page to clarify usage of images on carousel

---
 docs/templates/pages/javascript.mustache | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index cba75ac08..f8fdec8ea 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -1189,6 +1189,10 @@ $('#myCollapsible').on('hidden', function () {
             ‹
             ›

+ {{_i}}Heads up!{{/i}} + {{_i}}When implementing this carousel, remove the images we have provided and replace them with your own.{{/i}} +

{{_i}}Using bootstrap-carousel.js{{/i}}

{{_i}}Call via javascript:{{/i}}

-- cgit v1.2.3 From 8f448610a944efd134170f44e305ec6710bcff1a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 01:09:34 -0800 Subject: rename vertical-divider to divider-vertical, add more space around the divider --- docs/templates/layout.mustache | 2 +- docs/templates/pages/components.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index b372820fd..6923be7dc 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -59,10 +59,10 @@

{{_i}}Using LESS{{/i}}

{{_i}}Customize{{/i}}

{{_i}}Examples{{/i}}

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 7fd1c1ac6..4997b2990 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -618,7 +618,7 @@

{{_i}}Link{{/i}}

+ +

+ + + + + + +

+ +

-- cgit v1.2.3 From a29dee44aca68585b04ef5156dd4f0a50ae70db0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 08:04:48 -0800 Subject: remove all new dropdown button stuff --- docs/templates/pages/components.mustache | 29 ----------------------------- 1 file changed, 29 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index d24a4ddf3..b257cd4d1 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -163,35 +163,6 @@

{{_i}}Separated link{{/i}}

- -

- - - - - - -

- -

-- cgit v1.2.3 From 2d40b07afc62ce9d899a290ab33222fd18287190 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 08:15:28 -0800 Subject: adding warning (orange) button, fix responsive navbar problem --- docs/templates/pages/base-css.mustache | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 95de45e09..433a18c88 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1153,6 +1153,11 @@ .success {{_i}}Indicates a successful or positive action{{/i}} + + {{_i}}Warning{{/i}} + .warning + {{_i}}Indicates caution should be taken with this action{{/i}} + {{_i}}Danger{{/i}} .danger -- cgit v1.2.3 From 774904464dc8237b36be8197ca7c91d701ce4f0e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 08:58:40 -0800 Subject: fix docs: move .pull-left from search input to search form in navbar --- docs/templates/pages/components.mustache | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index b257cd4d1..214478966 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -741,8 +741,8 @@

{{_i}}Search form{{/i}}

{{_i}}Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.{{/i}}

-<form class="navbar-search">
-  <input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}">
+<form class="navbar-search pull-left">
+  <input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}">
 </form>

{{_i}}Optional responsive variation{{/i}}

-- cgit v1.2.3 From 74f2a89611b818fda662dbbbb5d978549cae14c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 10:01:02 -0800 Subject: fix wrong value in grid column width in download page --- docs/templates/pages/download.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index 1609c02b0..4cc3244f5 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -174,7 +174,7 @@ @gridColumns @gridColumnWidth - + @gridGutterWidth

{{_i}}Fluid grid system{{/i}}

-- cgit v1.2.3 From 21bebe77feb9265b06d65e1e941cf7c73c4d90c1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 20:50:51 -0800 Subject: refactor buttons.less --- docs/templates/pages/index.mustache | 263 ++++++++++++++++++------------------ 1 file changed, 130 insertions(+), 133 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index d49f95f9b..5ef0c680a 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -1,139 +1,136 @@ -

+ +

{{_i}}Bootstrap, from Twitter{{/i}}

Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

+ {{_i}}View project on GitHub{{/i}} + {{_i}}Download Bootstrap{{/i}} +

- -

{{_i}}Bootstrap, from Twitter{{/i}}

Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

- {{_i}}View project on GitHub{{/i}} - {{_i}}Download Bootstrap{{/i}} -

{{_i}}Designed for everyone, everywhere.{{/i}}

{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

{{_i}}Built for and by nerds{{/i}}

{{_i}}Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.{{/i}}

{{_i}}For all skill levels{{/i}}

{{_i}}Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}

{{_i}}Cross-everything{{/i}}

{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}

{{_i}}12-column grid{{/i}}

{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}

{{_i}}Responsive design{{/i}}

{{_i}}With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}

{{_i}}Styleguide docs{{/i}}

{{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}

{{_i}}Growing library{{/i}}

{{_i}}Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}

{{_i}}Custom jQuery plugins{{/i}}

{{_i}}What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.{{/i}}

{{_i}}Built on LESS{{/i}}

{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}

HTML5

{{_i}}Built to support new HTML5 elements and syntax.{{/i}}

CSS3

{{_i}}Progressively enhanced components for ultimate style.{{/i}}

{{_i}}Open-source{{/i}}

{{_i}}Built for and maintained by the community via GitHub.{{/i}}

{{_i}}Made at Twitter{{/i}}

{{_i}}Brought to you by an experienced engineer and designer.{{/i}}

{{_i}}Designed for everyone, everywhere.{{/i}}

{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

{{_i}}Built for and by nerds{{/i}}

{{_i}}Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.{{/i}}

{{_i}}For all skill levels{{/i}}

{{_i}}Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}

{{_i}}Cross-everything{{/i}}

{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}

{{_i}}12-column grid{{/i}}

{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}

{{_i}}Responsive design{{/i}}

{{_i}}With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}

{{_i}}Styleguide docs{{/i}}

{{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}

{{_i}}Growing library{{/i}}

{{_i}}Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}

{{_i}}Custom jQuery plugins{{/i}}

{{_i}}What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.{{/i}}

{{_i}}Built on LESS{{/i}}

{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}

HTML5

{{_i}}Built to support new HTML5 elements and syntax.{{/i}}

CSS3

{{_i}}Progressively enhanced components for ultimate style.{{/i}}

{{_i}}Open-source{{/i}}

{{_i}}Built for and maintained by the community via GitHub.{{/i}}

{{_i}}Made at Twitter{{/i}}

{{_i}}Brought to you by an experienced engineer and designer.{{/i}}

{{_i}}Built with Bootstrap.{{/i}}

{{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

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

{{_i}}Built with Bootstrap.{{/i}}

{{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

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

- -

\ No newline at end of file +

\ No newline at end of file -- cgit v1.2.3 From 0f3a073b8dca534e78c09b71999d5a2632e2245d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 21:15:57 -0800 Subject: *really* refactor the buttons and update them all over the docs --- docs/templates/pages/base-css.mustache | 68 ++++++++++++++++---------------- docs/templates/pages/components.mustache | 24 +++++------ docs/templates/pages/download.mustache | 8 ++-- docs/templates/pages/index.mustache | 4 +- docs/templates/pages/javascript.mustache | 30 +++++++------- 5 files changed, 67 insertions(+), 67 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 433a18c88..c000c9c88 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -756,11 +756,6 @@ .form-vertical ({{_i}}not required{{/i}}) {{_i}}Stacked, left-aligned labels over controls{{/i}} - - {{_i}}Horizontal{{/i}} - .form-horizontal - {{_i}}Float left, right-aligned labels on same line as controls{{/i}} - {{_i}}Inline{{/i}} .form-inline @@ -771,6 +766,11 @@ .form-search {{_i}}Extra-rounded text input for a typical search aesthetic{{/i}} + + {{_i}}Horizontal{{/i}} + .form-horizontal + {{_i}}Float left, right-aligned labels on same line as controls{{/i}} + @@ -879,7 +879,7 @@

- +

@@ -972,7 +972,7 @@

- +

@@ -1096,7 +1096,7 @@

- +

@@ -1139,28 +1139,28 @@ {{_i}}Standard gray button with gradient{{/i}} - {{_i}}Primary{{/i}} - .primary + {{_i}}Primary{{/i}} + .btn-primary {{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}} - {{_i}}Info{{/i}} - .info + {{_i}}Info{{/i}} + .btn-info {{_i}}Used as an alternate to the default styles{{/i}} - {{_i}}Success{{/i}} - .success + {{_i}}Success{{/i}} + .btn-success {{_i}}Indicates a successful or positive action{{/i}} - {{_i}}Warning{{/i}} - .warning + {{_i}}Warning{{/i}} + .btn-warning {{_i}}Indicates caution should be taken with this action{{/i}} - {{_i}}Danger{{/i}} - .danger + {{_i}}Danger{{/i}} + .btn-danger {{_i}}Indicates a dangerous or potentially negative action{{/i}} @@ -1185,24 +1185,24 @@

{{_i}}Multiple sizes{{/i}}

{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}

- {{_i}}Primary action{{/i}} - {{_i}}Action{{/i}} + {{_i}}Primary action{{/i}} + {{_i}}Action{{/i}}

{{_i}}Disabled state{{/i}}

{{_i}}For disabled buttons, use .disabled for links and :disabled for <button> elements.{{/i}}

{{_i}}For disabled buttons, use .btn-disabled for links and :disabled for <button> elements.{{/i}}

- {{_i}}Primary action{{/i}} - {{_i}}Action{{/i}} + {{_i}}Primary action{{/i}} + {{_i}}Action{{/i}}

- - + +

@@ -1415,8 +1415,8 @@

- {{_i}}User{{/i}} - + {{_i}}User{{/i}} +

{{_i}}Refresh{{/i}} - {{_i}}Checkout{{/i}} - {{_i}}Delete{{/i}} + {{_i}}Checkout{{/i}} + {{_i}}Delete{{/i}}

- {{_i}}Comment{{/i}} - {{_i}}Settings{{/i}} - {{_i}}More Info{{/i}} + {{_i}}Comment{{/i}} + {{_i}}Settings{{/i}} + {{_i}}More Info{{/i}}

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 214478966..e61d83152 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -122,7 +122,7 @@

- +

- {{_i}}Launch demo modal{{/i}} + {{_i}}Launch demo modal{{/i}}

@@ -216,7 +216,7 @@ <p>{{_i}}One fine body…{{/i}}</p> </div> <div class="modal-footer"> - <a href="#" class="btn primary">{{_i}}Save changes{{/i}}</a> + <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a> <a href="#" class="btn">{{_i}}Close{{/i}}</a> </div> </div> @@ -726,7 +726,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Example hover popover{{/i}}

{{_i}}Hover over the button to trigger the popover.{{/i}}

- {{_i}}hover for popover{{/i}} + {{_i}}hover for popover{{/i}}

{{_i}}Using bootstrap-popover.js{{/i}}

@@ -841,7 +841,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Oh snap! You got an error!{{/i}}

{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

- {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}} + {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}}

@@ -907,7 +907,7 @@ $('#my-alert').bind('closed', function () { {{_i}}Stateful{{/i}} - @@ -915,16 +915,16 @@ $('#my-alert').bind('closed', function () { {{_i}}Single toggle{{/i}} - + {{_i}}Checkbox{{/i}}

- - - + + +

@@ -932,9 +932,9 @@ $('#my-alert').bind('closed', function () { {{_i}}Radio{{/i}}

- - - + + +

@@ -1082,7 +1082,7 @@ $('#my-alert').bind('closed', function () {

{{_i}}Markup{{/i}}

{{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

-<button class="btn danger" data-toggle="collapse" data-target="#demo">
+<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
   {{_i}}simple collapsible{{/i}}
 </button>
 
-- 
cgit v1.2.3


From 31911659a200d39d8494f35f8fd71863ac1226d0 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 30 Jan 2012 21:29:50 -0800
Subject: refactor the navs to use prefixed classes, because you know,
 consistency is beast mode

---
 docs/templates/pages/base-css.mustache    |  2 +-
 docs/templates/pages/components.mustache  | 54 +++++++++++++++----------------
 docs/templates/pages/download.mustache    |  2 +-
 docs/templates/pages/javascript.mustache  |  2 +-
 docs/templates/pages/scaffolding.mustache |  2 +-
 5 files changed, 31 insertions(+), 31 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index c000c9c88..2da59f0ef 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -4,7 +4,7 @@
   {{_i}}Base CSS{{/i}}
   {{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}
   
-    
+    
       {{_i}}Typography{{/i}}
       {{_i}}Code{{/i}}
       {{_i}}Tables{{/i}}
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index e61d83152..c9f740b4a 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -4,7 +4,7 @@
   {{_i}}Components{{/i}}
   {{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}
   
-    
+    
       
         {{_i}}Buttons{{/i}} 
         
@@ -285,13 +285,13 @@
     
       {{_i}}Basic tabs{{/i}}
       {{_i}}Take a regular <ul> of links and add .tabs:{{/i}}
-      
+      
         {{_i}}Home{{/i}}
         {{_i}}Profile{{/i}}
         {{_i}}Messages{{/i}}
       
 -<ul class="nav tabs">
+<ul class="nav nav-tabs">
   <li class="active">
     <a href="#">{{_i}}Home{{/i}}</a>
   </li>
@@ -303,13 +303,13 @@
     
       {{_i}}Basic pills{{/i}}
       {{_i}}Take that same HTML, but use .pills instead:{{/i}}
-      
+      
         {{_i}}Home{{/i}}
         {{_i}}Profile{{/i}}
         {{_i}}Messages{{/i}}
       
 -<ul class="nav pills">
+<ul class="nav nav-pills">
   <li class="active">
     <a href="#">{{_i}}Home{{/i}}</a>
   </li>
@@ -328,26 +328,26 @@
     
     
       {{_i}}Stacked tabs{{/i}}
-      
+      
         {{_i}}Home{{/i}}
         {{_i}}Profile{{/i}}
         {{_i}}Messages{{/i}}
       
 -<ul class="nav tabs stacked">
+<ul class="nav nav-tabs nav-stacked">
   ...
 </ul>
 
     
     
       {{_i}}Stacked pills{{/i}}
-      
+      
         {{_i}}Home{{/i}}
         {{_i}}Profile{{/i}}
         {{_i}}Messages{{/i}}
       
 -<ul class="nav pills stacked">
+<ul class="nav nav-pills nav-stacked">
   ...
 </ul>
 
@@ -363,7 +363,7 @@
     
     
       {{_i}}Tabs with dropdowns{{/i}}
-      
+      
         {{_i}}Home{{/i}}
         {{_i}}Profile{{/i}}
         
@@ -378,7 +378,7 @@
         
       
 -<ul class="nav tabs">
+<ul class="nav nav-tabs">
   <li class="dropdown">
     <a class="dropdown-toggle"
        data-toggle="dropdown"
@@ -395,7 +395,7 @@
     
     
       {{_i}}Pills with dropdowns{{/i}}
-      
+      
         {{_i}}Home{{/i}}
         {{_i}}Profile{{/i}}
         
@@ -410,7 +410,7 @@
         
       
 -<ul class="nav pills">
+<ul class="nav nav-pills">
   <li class="dropdown">
     <a class="dropdown-toggle"
        data-toggle="dropdown"
@@ -440,7 +440,7 @@
       {{_i}}Example nav list{{/i}}
       {{_i}}Take a list of links and add class="nav list":{{/i}}
       
-        
+        
           {{_i}}List header{{/i}}
           {{_i}}Home{{/i}}
           {{_i}}Library{{/i}}
@@ -452,7 +452,7 @@
         
       
 
 -<ul class="nav list">
+<ul class="nav nav-list">
   <li class="nav-header">
     {{_i}}List header{{/i}}
   </li>
@@ -470,7 +470,7 @@
       {{_i}}Example with icons{{/i}}
       {{_i}}Same example, but with <i> tags for icons.{{/i}}
       
-        
+        
           {{_i}}List header{{/i}}
            {{_i}}Home{{/i}}
            {{_i}}Library{{/i}}
@@ -482,7 +482,7 @@
         
       
 
 -<ul class="nav list">
+<ul class="nav nav-list">
   ...
   <li>
     <a href="#">
@@ -508,7 +508,7 @@
       {{_i}}Tabbable example{{/i}}
       {{_i}}To make tabs tabbable, wrap the .tabs in another div with class .tabbable.{{/i}}
       
-        
+        
           {{_i}}Section 1{{/i}}
           {{_i}}Section 2{{/i}}
           {{_i}}Section 3{{/i}}
@@ -537,7 +537,7 @@
   {{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}
  <div class="tabbable">
-  <ul class="nav tabs">
+  <ul class="nav nav-tabs">
     <li class="active"><a href="#1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
     <li><a href="#2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
   </ul>
@@ -569,7 +569,7 @@
             {{_i}}What up girl, this is Section C.{{/i}}
           
         
-        
+        
           {{_i}}Section 1{{/i}}
           {{_i}}Section 2{{/i}}
           {{_i}}Section 3{{/i}}
@@ -577,12 +577,12 @@
       
 
  <div class="tabbable tabs-below">
-  <ul class="nav tabs">
-    ...
-  </ul>
   <div class="tab-content">
     ...
   </div>
+  <ul class="nav nav-tabs">
+    ...
+  </ul>
 </div>
 
     
@@ -590,7 +590,7 @@
       {{_i}}Tabs on the left{{/i}}
       {{_i}}Swap the class to put tabs on the left.{{/i}}
       
-        
+        
           {{_i}}Section 1{{/i}}
           {{_i}}Section 2{{/i}}
           {{_i}}Section 3{{/i}}
@@ -609,7 +609,7 @@
       
 
  <div class="tabbable tabs-left">
-  <ul class="nav tabs">
+  <ul class="nav nav-tabs">
     ...
   </ul>
   <div class="tab-content">
@@ -622,7 +622,7 @@
       {{_i}}Tabs on the right{{/i}}
       {{_i}}Swap the class to put tabs on the right.{{/i}}
       
-        
+        
           {{_i}}Section 1{{/i}}
           {{_i}}Section 2{{/i}}
           {{_i}}Section 3{{/i}}
@@ -641,7 +641,7 @@
       
 
  <div class="tabbable tabs-right">
-  <ul class="nav tabs">
+  <ul class="nav nav-tabs">
     ...
   </ul>
   <div class="tab-content">
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index 9160e895b..da91b1159 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -4,7 +4,7 @@
   {{_i}}Customize and download{{/i}}
   {{_i}}Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}
   
-    
+    
       {{_i}}1. Choose components{{/i}}
       {{_i}}2. Select jQuery plugins{{/i}}
       {{_i}}3. Customize variables{{/i}}
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 9b787fb1b..716a2b3fa 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -4,7 +4,7 @@
         {{_i}}Javascript for Bootstrap{{/i}}
         {{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}}
         

-          
+          
             {{_i}}All plugins{{/i}}
             {{_i}}Modal{{/i}}
             {{_i}}Dropdown{{/i}}
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 15c438b97..40d368c66 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -4,7 +4,7 @@
         {{_i}}Scaffolding{{/i}}
         {{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}
         
-          
+          
             {{_i}}Grid system{{/i}}
             {{_i}}Layouts{{/i}}
             {{_i}}Responsive design{{/i}}
-- 
cgit v1.2.3


From 47a68ae3aa8cad828eebe529403b46210c9d9d16 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 30 Jan 2012 22:57:00 -0800
Subject: update icons everywhere to be scoped per other components, fix broken
 elements on js docs page

---
 docs/templates/pages/base-css.mustache   | 289 ++++++++++++++++---------------
 docs/templates/pages/components.mustache |  14 +-
 docs/templates/pages/javascript.mustache |   4 +-
 3 files changed, 154 insertions(+), 153 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 2da59f0ef..31607eef9 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1227,142 +1227,142 @@
   
     
       
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       
     
     
       
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       
     
     
       
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       
     
     
       
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       
     
   
@@ -1376,17 +1376,18 @@
     
       {{_i}}Built as a sprite{{/i}}
       {{_i}}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.{{/i}}
-      {{_i}}Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit. Please consider doing the same in your projects.{{/i}}
+      {{_i}}All icons classes are prefixed with .i- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}
+      {{_i}}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.{{/i}}
     
     
       {{_i}}How to use{{/i}}
-      {{_i}}With v2.0.0, we have opted to use an <i> tag for all our icons with a base class of .icon. To use, place the following code just about anywhere:{{/i}}
+      {{_i}}With v2.0.0, we have opted to use an <i> tag for all our icons with a base class of .i. To use, place the following code just about anywhere:{{/i}}
 -<i class="icon search"></i>
+<i class="i i-search"></i>
 
       {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}
 -<i class="icon white search"></i>
+<i class="i i-search i-white"></i>
 
       {{_i}}There are 120 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.{{/i}}
     
@@ -1409,41 +1410,41 @@
     
       
         
-          
-          
-          
-          
+          
+          
+          
+          
         
         
            {{_i}}User{{/i}}
           
           
-             {{_i}}Edit{{/i}}
-             {{_i}}Delete{{/i}}
-             {{_i}}Ban{{/i}}
+             {{_i}}Edit{{/i}}
+             {{_i}}Delete{{/i}}
+             {{_i}}Ban{{/i}}
             
-             {{_i}}Make admin{{/i}}
+             {{_i}}Make admin{{/i}}
           
         
       
       
-         {{_i}}Refresh{{/i}}
-         {{_i}}Checkout{{/i}}
-         {{_i}}Delete{{/i}}
+         {{_i}}Refresh{{/i}}
+         {{_i}}Checkout{{/i}}
+         {{_i}}Delete{{/i}}
       
       
-         {{_i}}Comment{{/i}}
-         {{_i}}Settings{{/i}}
-         {{_i}}More Info{{/i}}
+         {{_i}}Comment{{/i}}
+         {{_i}}Settings{{/i}}
+         {{_i}}More Info{{/i}}
       
     
     
       
-        
-           {{_i}}Home{{/i}}
-           {{_i}}Library{{/i}}
-           {{_i}}Applications{{/i}}
-           {{_i}}Misc{{/i}}
+        
+           {{_i}}Home{{/i}}
+           {{_i}}Library{{/i}}
+           {{_i}}Applications{{/i}}
+           {{_i}}Misc{{/i}}
         
       
 
     
@@ -1453,7 +1454,7 @@
           {{_i}}Email address{{/i}}
           
             
-              
+              
               
             
           
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index c9f740b4a..2386f6a9e 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -472,13 +472,13 @@
       
         
           {{_i}}List header{{/i}}
-           {{_i}}Home{{/i}}
-           {{_i}}Library{{/i}}
-           {{_i}}Applications{{/i}}
+           {{_i}}Home{{/i}}
+           {{_i}}Library{{/i}}
+           {{_i}}Applications{{/i}}
           {{_i}}Another list header{{/i}}
-           {{_i}}Profile{{/i}}
-           {{_i}}Settings{{/i}}
-           {{_i}}Help{{/i}}
+           {{_i}}Profile{{/i}}
+           {{_i}}Settings{{/i}}
+           {{_i}}Help{{/i}}
         
       
 
 @@ -486,7 +486,7 @@
   ...
   <li>
     <a href="#">
-      <i class="icon book"></i>
+      <i class="i i-book"></i>
       {{_i}}Library{{/i}}
     </a>
   </li>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 716a2b3fa..8841b1f7b 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -336,7 +336,7 @@ $('#myModal').on('hidden', function () {
             
           
 
 
-          
+          
             {{_i}}Regular link{{/i}}
             
               {{_i}}Dropdown{{/i}} 
@@ -516,7 +516,7 @@ $('#myModal').on('hidden', function () {
         
           {{_i}}Example tabs{{/i}}
           {{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}
-          
+          
             {{_i}}Home{{/i}}
             {{_i}}Profile{{/i}}
             
-- 
cgit v1.2.3


From 61b47e91b800e022f1736da772eb23aa9077f2f1 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 30 Jan 2012 23:10:29 -0800
Subject: update layout docs

---
 docs/templates/pages/scaffolding.mustache | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 40d368c66..d192709c3 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -202,22 +202,22 @@
     

     
       {{_i}}Fluid layout{{/i}}
-      {{_i}}<div class="fluid-container"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}
+      {{_i}}<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}
       
         
         
       
 -<body>
-  <div class="fluid-container sidebar-left">
-    <div class="fluid-sidebar">
-      ...
+<div class="container-fluid">
+  <div class="row-fluid">
+    <div class="span2">
+      <!--{{_i}}Sidebar content{{/i}}-->
     </div>
-    <div class="fluid-content">
-      ...
+    <div class="span10">
+      <!--{{_i}}Body content{{/i}}-->
     </div>
   </div>
-</body>
+</div>
 
     

   

-- 
cgit v1.2.3


From d533310bd2fa157edb076f9047af8f1cff0fca05 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 30 Jan 2012 23:24:35 -0800
Subject: once more, overhaul the icons and use the css regex selector on our
 icons

---
 docs/templates/pages/base-css.mustache   | 280 +++++++++++++++----------------
 docs/templates/pages/components.mustache |  14 +-
 2 files changed, 147 insertions(+), 147 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 31607eef9..7b174d604 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1227,142 +1227,142 @@
   
     
       
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       
     
     
       
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       
     
     
       
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       
     
     
       
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       
     
   
@@ -1381,13 +1381,13 @@
     
     
       {{_i}}How to use{{/i}}
-      {{_i}}With v2.0.0, we have opted to use an <i> tag for all our icons with a base class of .i. To use, place the following code just about anywhere:{{/i}}
+      {{_i}}With v2.0.0, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}
 -<i class="i i-search"></i>
+<i class="i-search"></i>
 
       {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}
 -<i class="i i-search i-white"></i>
+<i class="i-search i-white"></i>
 
       {{_i}}There are 120 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.{{/i}}
     
@@ -1410,40 +1410,40 @@
     
       
         
-          
-          
-          
-          
+          
+          
+          
+          
         
         
            {{_i}}User{{/i}}
           
           
-             {{_i}}Edit{{/i}}
-             {{_i}}Delete{{/i}}
-             {{_i}}Ban{{/i}}
+             {{_i}}Edit{{/i}}
+             {{_i}}Delete{{/i}}
+             {{_i}}Ban{{/i}}
             
              {{_i}}Make admin{{/i}}
           
         
       
       
-         {{_i}}Refresh{{/i}}
-         {{_i}}Checkout{{/i}}
-         {{_i}}Delete{{/i}}
+         {{_i}}Refresh{{/i}}
+         {{_i}}Checkout{{/i}}
+         {{_i}}Delete{{/i}}
       
       
-         {{_i}}Comment{{/i}}
-         {{_i}}Settings{{/i}}
-         {{_i}}More Info{{/i}}
+         {{_i}}Comment{{/i}}
+         {{_i}}Settings{{/i}}
+         {{_i}}More Info{{/i}}
       
     
     
       
         
-           {{_i}}Home{{/i}}
-           {{_i}}Library{{/i}}
-           {{_i}}Applications{{/i}}
+           {{_i}}Home{{/i}}
+           {{_i}}Library{{/i}}
+           {{_i}}Applications{{/i}}
            {{_i}}Misc{{/i}}
         
       
 
@@ -1454,7 +1454,7 @@
           {{_i}}Email address{{/i}}
           
             
-              
+              
               
             
           
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 2386f6a9e..69ee4c16a 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -472,13 +472,13 @@
       
         
           {{_i}}List header{{/i}}
-           {{_i}}Home{{/i}}
-           {{_i}}Library{{/i}}
-           {{_i}}Applications{{/i}}
+           {{_i}}Home{{/i}}
+           {{_i}}Library{{/i}}
+           {{_i}}Applications{{/i}}
           {{_i}}Another list header{{/i}}
-           {{_i}}Profile{{/i}}
-           {{_i}}Settings{{/i}}
-           {{_i}}Help{{/i}}
+           {{_i}}Profile{{/i}}
+           {{_i}}Settings{{/i}}
+           {{_i}}Help{{/i}}
         
       
 
 @@ -486,7 +486,7 @@
   ...
   <li>
     <a href="#">
-      <i class="i i-book"></i>
+      <i class="i-book"></i>
       {{_i}}Library{{/i}}
     </a>
   </li>
-- 
cgit v1.2.3


From d633dbb44e40f402c85d4339bb3ac0e7069915eb Mon Sep 17 00:00:00 2001
From: nkryptic 
Date: Tue, 31 Jan 2012 02:54:10 -0500
Subject: add nav- prefix to rest of docs

---
 docs/templates/pages/components.mustache | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 69ee4c16a..4bf6c5d48 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -284,7 +284,7 @@
     
     
       {{_i}}Basic tabs{{/i}}
-      {{_i}}Take a regular <ul> of links and add .tabs:{{/i}}
+      {{_i}}Take a regular <ul> of links and add .nav-tabs:{{/i}}
       
         {{_i}}Home{{/i}}
         {{_i}}Profile{{/i}}
@@ -302,7 +302,7 @@
     
     
       {{_i}}Basic pills{{/i}}
-      {{_i}}Take that same HTML, but use .pills instead:{{/i}}
+      {{_i}}Take that same HTML, but use .nav-pills instead:{{/i}}
       
         {{_i}}Home{{/i}}
         {{_i}}Profile{{/i}}
@@ -324,7 +324,7 @@
   
     
       {{_i}}How to stack 'em{{/i}}
-      {{_i}}As tabs and pills are horizontal by default, just add a second class, .stacked, to make them appear vertically stacked.{{/i}}
+      {{_i}}As tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.{{/i}}
     
     
       {{_i}}Stacked tabs{{/i}}
@@ -438,7 +438,7 @@
     
     
       {{_i}}Example nav list{{/i}}
-      {{_i}}Take a list of links and add class="nav list":{{/i}}
+      {{_i}}Take a list of links and add class="nav nav-list":{{/i}}
       
         
           {{_i}}List header{{/i}}
@@ -506,7 +506,7 @@
     
     
       {{_i}}Tabbable example{{/i}}
-      {{_i}}To make tabs tabbable, wrap the .tabs in another div with class .tabbable.{{/i}}
+      {{_i}}To make tabs tabbable, wrap the .nav-tabs in another div with class .tabbable.{{/i}}
       
         
           {{_i}}Section 1{{/i}}
-- 
cgit v1.2.3


From b7713b83fa25f4b28869fe846b04baac00ca781b Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 31 Jan 2012 00:11:19 -0800
Subject: chance icon class

---
 docs/templates/layout.mustache            |   6 +-
 docs/templates/pages/base-css.mustache    | 282 +++++++++++++++---------------
 docs/templates/pages/components.mustache  |  28 +--
 docs/templates/pages/scaffolding.mustache |  10 +-
 4 files changed, 163 insertions(+), 163 deletions(-)

(limited to 'docs/templates')

diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 6923be7dc..77f584cd1 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -34,9 +34,9 @@
       
         
           
-            
-            
-            
+            
+            
+            
           
           Bootstrap
           
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 7b174d604..4d9533522 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -855,7 +855,7 @@
             
           
           
-            {{_i}}Multi-select{{/i}}
+            {{_i}}Multicon-select{{/i}}
             
               
             
           
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 69ee4c16a..d26abba7b 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -472,13 +472,13 @@
       
         
           {{_i}}List header{{/i}}
-           {{_i}}Home{{/i}}
-           {{_i}}Library{{/i}}
-           {{_i}}Applications{{/i}}
+           {{_i}}Home{{/i}}
+           {{_i}}Library{{/i}}
+           {{_i}}Applications{{/i}}
           {{_i}}Another list header{{/i}}
-           {{_i}}Profile{{/i}}
-           {{_i}}Settings{{/i}}
-           {{_i}}Help{{/i}}
+           {{_i}}Profile{{/i}}
+           {{_i}}Settings{{/i}}
+           {{_i}}Help{{/i}}
         
       
 
 @@ -486,7 +486,7 @@
   ...
   <li>
     <a href="#">
-      <i class="i-book"></i>
+      <i class="icon-book"></i>
       {{_i}}Library{{/i}}
     </a>
   </li>
@@ -668,9 +668,9 @@
     
       
         
-          
-          
-          
+          
+          
+          
         
         {{_i}}Project name{{/i}}
         
@@ -754,9 +754,9 @@
       
       <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-        <span class="i-bar"></span>
-        <span class="i-bar"></span>
-        <span class="i-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
       </a>
       
       <!-- Be sure to leave the brand out there if you want it shown -->
@@ -870,7 +870,7 @@
     {{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}
   
 
-  {{_i}}Multi-page pagination{{/i}}
+  {{_i}}Multicon-page pagination{{/i}}
   
     
       {{_i}}When to use{{/i}}
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index d192709c3..bfbd879d5 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -189,8 +189,8 @@
     
       {{_i}}Fixed layout{{/i}}
       {{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.{{/i}}
-      
-        
+      
+        
       
  <body>
@@ -203,9 +203,9 @@
     
       {{_i}}Fluid layout{{/i}}
       {{_i}}<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}
-      
-        
-        
+      
+        
+        
       
  <div class="container-fluid">
-- 
cgit v1.2.3


From a6253f0937a5d1f0bd18655729bff03bd5373f17 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 31 Jan 2012 00:15:43 -0800
Subject: fix disabled button docs

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

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 4d9533522..34ac69cd7 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1197,8 +1197,8 @@
       {{_i}}Disabled state{{/i}}
       {{_i}}For disabled buttons, use .btn-disabled for links and :disabled for <button> elements.{{/i}}
       
-        {{_i}}Primary action{{/i}}
-        {{_i}}Action{{/i}}
+        {{_i}}Primary action{{/i}}
+        {{_i}}Action{{/i}}
       
       
         
-- 
cgit v1.2.3


From d70ba6c5e66b27acfc46121bf2293773451a339e Mon Sep 17 00:00:00 2001
From: nkryptic 
Date: Tue, 31 Jan 2012 03:54:07 -0500
Subject: add form help-* documentation

---
 docs/templates/pages/base-css.mustache | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'docs/templates')

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 34ac69cd7..cc0b2a1ea 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1079,7 +1079,7 @@
                 
                 {{_i}}Option three can—yes, you guessed it—also be checked and included in form results{{/i}}
               
-              
{{_i}}Note: Labels surround all the options for much larger click areas and a more usable form.{{/i}}
+              {{_i}}Note: Labels surround all the options for much larger click areas and a more usable form.{{/i}}
             
           
           
@@ -1112,6 +1112,9 @@
       
       {{_i}}Inline forms and append/prepend{{/i}}
       {{_i}}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.{{/i}}
+      
+      {{_i}}Form help text{{/i}}
+      {{_i}}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.{{/i}}
     
   

 
-- 
cgit v1.2.3

Name	type	default	description	{{_i}}Name{{/i}}	{{_i}}type{{/i}}	{{_i}}default{{/i}}	{{_i}}description{{/i}}
parent	selector	{{_i}}parent{{/i}}	{{_i}}selector{{/i}}	false	If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)	{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior){{/i}}
toggle	boolean	{{_i}}toggle{{/i}}	{{_i}}boolean{{/i}}	true	Toggles the collapsible element on invocation	{{_i}}Toggles the collapsible element on invocation{{/i}}

Event	Description	{{_i}}Event{{/i}}	{{_i}}Description{{/i}}
show	This event fires immediately when the `show` instance method is called.	{{_i}}show{{/i}}/td> +	{{_i}}This event fires immediately when the `show` instance method is called.{{/i}}
shown	This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).	{{_i}}shown{{/i}}	{{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}
hide	{{_i}}hide{{/i}}	- This event is fired immediately when the `hide` method has been called. + {{_i}}This event is fired immediately when the `hide` method has been called.{{/i}}
hidden	This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).	{{_i}}hidden{{/i}}	{{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}

Event	Description	{{_i}}Event{{/i}}	{{_i}}Description{{/i}}
slide	This event fires immediately when the `slide` instance method is invoked.	{{_i}}slide{{/i}}	{{_i}}This event fires immediately when the `slide` instance method is invoked.{{/i}}
slid	This event is fired when the carousel has completed it's slide transition.	{{_i}}slid{{/i}}	{{_i}}This event is fired when the carousel has completed it's slide transition.{{/i}}

Element	Usage	Optional	{{_i}}Element{{/i}}	{{_i}}Usage{{/i}}	{{_i}}Optional{{/i}}
- For emphasizing a snippet of text with important + {{_i}}For emphasizing a snippet of text with important{{/i}}	- None + {{_i}}None{{/i}}
- For emphasizing a snippet of text with stress + {{_i}}For emphasizing a snippet of text with stress{{/i}}	- None + {{_i}}None{{/i}}
- Wraps abbreviations and acronyms to show the expanded version on hover + {{_i}}Wraps abbreviations and acronyms to show the expanded version on hover{{/i}}	- Include optional `title` for expanded text + {{_i}}Include optional `title` for expanded text{{/i}}
- For contact information for its nearest ancestor or the entire body of work + {{_i}}For contact information for its nearest ancestor or the entire body of work{{/i}}	- Preserve formatting by ending all lines with `<br>` + {{_i}}Preserve formatting by ending all lines with `<br>`{{/i}}

Element	Usage	Optional	{{_i}}Element{{/i}}	{{_i}}Usage{{/i}}	{{_i}}Optional{{/i}}
- Block-level element for quoting content from another source + {{_i}}Block-level element for quoting content from another source{{/i}}	- Add `cite` attribute for source URL - Use `.pull-left` and `.pull-right` classes for floated options + {{_i}}Add `cite` attribute for source URL{{/i}} + {{_i}}Use `.pull-left` and `.pull-right` classes for floated options{{/i}}
- Optional element for adding a user-facing citation, typically an author with title of work + {{_i}}Optional element for adding a user-facing citation, typically an author with title of work{{/i}}	- Place the `<cite>` around the title or name of source + {{_i}}Place the `<cite>` around the title or name of source{{/i}}

Labels	Markup	{{_i}}Labels{{/i}}	{{_i}}Markup{{/i}}
- Default + {{_i}}Default{{/i}}	- `<span class="label">Default</span>` + `<span class="label">{{_i}}Default{{/i}}</span>`
- New + {{_i}}New{{/i}}	- `<span class="label success">New</span>` + `<span class="label success">{{/_i}}New{{/i}}</span>`
- Warning + {{_i}}Warning{{/i}}	- `<span class="label warning">Warning</span>` + `<span class="label warning">{{_i}}Warning{{/i}}</span>`
- Important + {{_i}}Important{{/i}}	- `<span class="label important">Important</span>` + `<span class="label important">{{_i}}Important{{/i}}</span>`
- Notice + {{_i}}Notice{{/i}}	- `<span class="label notice">Notice</span>` + `<span class="label notice">{{_i}}Notice{{/i}}</span>`

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

Method	Steps	{{_i}}Method{{/i}}
Node with makefile	{{_i}}Node with makefile{{/i}}	- Install the LESS command line compiler with npm by running the following command: + {{_i}}Install the LESS command line compiler with npm by running the following command:{{/i}} $ npm install less - Once installed just run `make` from the root of your bootstrap directory and you're all set. - Additionally, if you have watchr installed, you may run `make watch` to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method). + {{_i}}Once installed just run `make` from the root of your bootstrap directory and you're all set.{{/i}} + {{_i}}Additionally, if you have watchr installed, you may run `make watch` to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}
Javascript	{{_i}}Javascript{{/i}}	- Download the latest Less.js and include the path to it (and Bootstrap) in the `<head>`. + {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the `<head>`.{{/i}} <link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script> - To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage. + {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}
Command line	{{_i}}Command line{{/i}}	- Install the LESS command line tool via Node and run the following command: + {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}} $ lessc ./lib/bootstrap.less > bootstrap.css - Be sure to include `--compress` in that command if you're trying to save some bytes! + {{_i}}Be sure to include `--compress` in that command if you're trying to save some bytes!{{/i}}
Unofficial Mac app	{{_i}}Unofficial Mac app{{/i}}	- The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. - If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in. + {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}} + {{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}
Crunch	Crunch is a great looking LESS editor and compiler built on Adobe Air.	{{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}
CodeKit	Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.	{{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}
Simpless	Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.	{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

Variable	Default value	Description	{{_i}}Variable{{/i}}	{{_i}}Default value{{/i}}
`@gridColumns`	12	Number of columns	{{_i}}Number of columns{{/i}}
`@gridColumnWidth`	60px	Width of each column	{{_i}}Width of each column{{/i}}
`@gridGutterWidth`	20px	Negative space between columns	{{_i}}Negative space between columns{{/i}}
`@siteWidth`	Computed sum of all columns and gutters	Counts number of columns and gutters to set width of the `.fixed-container()` mixin	{{_i}}Computed sum of all columns and gutters{{/i}}	{{_i}}Counts number of columns and gutters to set width of the `.fixed-container()` mixin{{/i}}

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

Headings & body copy

Typographic scale

Example body text

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Emphasis, address, and abbreviation

Using emphasis

Example addresses

Example abbreviations

Blockquotes

Example blockquotes

Lists

Unordered

Unstyled

Ordered

Description

Code Inline and block

Inline labels for special attention

Tables For, you guessed it, tabular data

Table markup

Table options

Example tables

1. Default table styles

2. Striped table

3. Bordered table

4. Condensed table

5. Striped table w/ TableSorter.js

Forms

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

Search form

Inline form

Horizontal forms

What's included

New defaults with v2.0

Redesigned browser states

Form validation

Prepend & append inputs

Checkboxes and radios

Buttons

Buttons for actions

For anchors and forms

Multiple sizes

Disabled state

Icons Graciously provided by Glyphicons

Built as a sprite

How to use

Use cases

Examples

Button groups Join buttons for more toolbar-like functionality

Button groups

Example markup

Checkbox and radio flavors

Heads up

Split button dropdowns Built on button groups to provide contextual menus

Split button dropdowns

Example markup

Nav, tabs, and pills Highly customizable list-style navigation

Lightweight defaults Same markup, different classes

Powerful base class

Why tabs and pills

Basic tabs

Basic pills

Stackable Make tabs or pills vertical

How to stack 'em

Stacked tabs

Stacked pills

Dropdowns For advanced nav components

Rich menus made easy

Tabs with dropdowns

Pills with dropdowns