From efd3b0c1711a443e5ad97c6278addadfe2cedc5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Apr 2013 23:59:51 -0700 Subject: Back to two grid classes, .col and .col-lg-* --- docs/docs.html | 306 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 153 insertions(+), 153 deletions(-) (limited to 'docs/docs.html') diff --git a/docs/docs.html b/docs/docs.html index e62e44661..3ea2d84f7 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -20,22 +20,22 @@ title: Bootstrap Documentation

There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

-
+

Compiled CSS and JS

The fastest way to get started: get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.

Download Bootstrap

-
+

Latest source code

Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.

Download Bootstrap source

-
+

Clone or fork via GitHub

Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.

GitHub repository

-
+

Bower

Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using Bower.

{% highlight bash %}$ bower install bootstrap{% endhighlight %} @@ -110,63 +110,63 @@ title: Bootstrap Documentation

Examples

-
+

Starter template

A barebones HTML page with Bootstrap's CSS and JavaScript included.

-
+

Basic grid layouts

Simple grid layouts to familiarize you with using the Bootstrap grid system.

-
+

Basic marketing site

Features a jumbotron for primary message and three supporting elements.

-
+

Narrow marketing

Slim, lightweight marketing template for small projects or teams.

-
+

Justified nav

Marketing page with equal-width navigation links in a modified navbar.

-
+

Sign in

Barebones sign in form with custom, larger form controls and a flexible layout.

-
+

Sticky footer

Pin a fixed-height footer to the bottom of the user's viewport.

-
+

Sticky footer w/ navbar

Add a fixed navbar to the default sticky footer template.

-
+
@@ -174,21 +174,21 @@ title: Bootstrap Documentation

An interactive riff on the basic marketing site featuring a prominent carousel.

-
+

Navbar

Basic template for showcasing how the navbar works.

-
+

Static top navbar

Basic template for showcasing the static navbar variation.

-
+
@@ -338,81 +338,81 @@ title: Bootstrap Documentation

On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-span-* elements within a .row. As this is a 12-column grid, each .col-span-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.

-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
-
4
-
4
-
4
+
4
+
4
+
4
-
6
-
6
+
6
+
6
{% highlight html linenos %}
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
-
4
-
4
-
4
+
4
+
4
+
4
-
6
-
6
+
6
+
6
{% endhighlight %}

Offsetting columns

-

Move columns to the right using .col-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-offset-4 moves .col-span-4 over four columns.

+

Move columns to the right using .col-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-offset-4 moves .col col-lg-4 over four columns.

-
4
-
4 offset 4
+
4
+
4 offset 4
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
6 offset 3
+
6 offset 3
{% highlight html linenos %}
-
...
-
...
+
...
+
...
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
...
+
...
{% endhighlight %} @@ -420,13 +420,13 @@ title: Bootstrap Documentation

Nesting columns

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

-
+
Level 1: 9 columns
-
+
Level 2: 6 columns
-
+
Level 2: 6 columns
@@ -434,13 +434,13 @@ title: Bootstrap Documentation
{% highlight html linenos %}
-
+
Level 1: 9 columns
-
+
Level 2: 6 columns
-
+
Level 2: 6 columns
@@ -451,29 +451,29 @@ title: Bootstrap Documentation

Column ordering

Easily change the order of our built-in grid columns with .col-push-* and .col-pull-* modifier classes.

-
9
-
3
+
9
+
3
{% highlight html linenos %}
-
9
-
3
+
9
+
3
{% endhighlight %}

Small device grid

-

Use the small device grid classes, like .col-small-span-6, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.

+

Use the small device grid classes, like .col-sm-6, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.

-
4 cols, 6 small cols
-
4 cols, 6 small cols
-
4 cols, 12 small cols
+
4 cols, 6 small cols
+
4 cols, 6 small cols
+
4 cols, 12 small cols
{% highlight html linenos %}
-
4 cols, 6 small cols
-
4 cols, 6 small cols
-
4 cols, 12 small cols
+
4 cols, 6 small cols
+
4 cols, 6 small cols
+
4 cols, 12 small cols
{% endhighlight %} @@ -1186,8 +1186,8 @@ For example, <section> should be wrapped as inline.

Use contextual classes to color table rows.

- - + + @@ -1316,8 +1316,8 @@ For example, <section> should be wrapped as inline.

Inline form

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

- - + +
-
+
@

-
+
.00

-
+
$ .00
{% highlight html linenos %} -
+
@
-
+
.00
-
+
$ .00 @@ -1715,33 +1715,33 @@ For example, <section> should be wrapped as inline.

Optional sizes

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

-
+
@

-
+
@

-
+
@
{% highlight html linenos %} -
+
@
-
+
@
-
+
@
@@ -1750,14 +1750,14 @@ For example, <section> should be wrapped as inline.

Buttons instead of text

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

-
+

-
+
@@ -1765,14 +1765,14 @@ For example, <section> should be wrapped as inline.
{% highlight html linenos %} -
+
-
+
@@ -1783,7 +1783,7 @@ For example, <section> should be wrapped as inline.

Button dropdowns

-
+
    @@ -1797,7 +1797,7 @@ For example, <section> should be wrapped as inline.

-
+
@@ -1812,7 +1812,7 @@ For example, <section> should be wrapped as inline.
{% highlight html linenos %} -
+
    @@ -1826,7 +1826,7 @@ For example, <section> should be wrapped as inline.
-
+
@@ -1843,7 +1843,7 @@ For example, <section> should be wrapped as inline.

Segmented dropdown groups

-
+
@@ -1880,14 +1880,14 @@ For example, <section> should be wrapped as inline.
{% highlight html linenos %} -
+
-
+
@@ -1914,27 +1914,27 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

Column sizing

-

Use .col-span-1 to .col-span-12 for setting widths on inputs that match Bootstrap's grid system.

+

Use .col col-lg-1 to .col col-lg-12 for setting widths on inputs that match Bootstrap's grid system.

- - - - + + + - - @@ -1944,16 +1944,16 @@ For example, <section> should be wrapped as inline.
{% highlight html linenos %} - - - - + + + - ... - ... {% endhighlight %} @@ -1961,27 +1961,27 @@ For example, <section> should be wrapped as inline.

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

-
- +
+
-
- +
+
-
- +
+
{% highlight html linenos %}
-
- +
+
-
- +
+
-
- +
+
{% endhighlight %} @@ -2679,7 +2679,7 @@ For example, <section> should be wrapped as inline.
- +
@@ -2690,7 +2690,7 @@ For example, <section> should be wrapped as inline.
- +
@@ -3646,7 +3646,7 @@ body {
- +
  • Link
    • @@ -3724,7 +3724,7 @@ body {
- +
  • Link
    • @@ -4115,22 +4115,22 @@ body {

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

    -
    +
    -
    +
    -
    +
    -
    +
    @@ -4139,7 +4139,7 @@ body {
    {% highlight html linenos %}
    -
    +
    @@ -4152,7 +4152,7 @@ body {

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

    -
    +
    @@ -4162,7 +4162,7 @@ body {
    -
    +
    @@ -4172,7 +4172,7 @@ body {
    -
    +
    @@ -4186,7 +4186,7 @@ body {
    {% highlight html linenos %}
    -
    +
    @@ -6542,7 +6542,7 @@ $('.carousel').carousel({

    Example

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

    - +
    {% highlight html linenos %} -- cgit v1.2.3