diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 5ebb752be7..97e43f22cd 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -784,107 +784,98 @@ pre code { margin-left: -15px; } -[class*="col-span-"], -[class*="col-small-"] { +.col { position: relative; + float: left; + width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } -[class*="col-small-"] { - float: left; -} - -.col-small-span-12 { +.col-sm-12 { width: 100%; } -.col-small-span-11 { +.col-sm-11 { width: 91.66666666666666%; } -.col-small-span-10 { +.col-sm-10 { width: 83.33333333333334%; } -.col-small-span-9 { +.col-sm-9 { width: 75%; } -.col-small-span-8 { +.col-sm-8 { width: 66.66666666666666%; } -.col-small-span-7 { +.col-sm-7 { width: 58.333333333333336%; } -.col-small-span-6 { +.col-sm-6 { width: 50%; } -.col-small-span-5 { +.col-sm-5 { width: 41.66666666666667%; } -.col-small-span-4 { +.col-sm-4 { width: 33.33333333333333%; } -.col-small-span-3 { +.col-sm-3 { width: 25%; } -.col-small-span-2 { +.col-sm-2 { width: 16.666666666666664%; } -.col-small-span-1 { +.col-sm-1 { width: 8.333333333333332%; } @media screen and (min-width: 768px) { - .container { - max-width: 728px; - } - [class*="col-span-"] { - float: left; - } - .col-span-12 { + .col-lg-12 { width: 100%; } - .col-span-11 { + .col-lg-11 { width: 91.66666666666666%; } - .col-span-10 { + .col-lg-10 { width: 83.33333333333334%; } - .col-span-9 { + .col-lg-9 { width: 75%; } - .col-span-8 { + .col-lg-8 { width: 66.66666666666666%; } - .col-span-7 { + .col-lg-7 { width: 58.333333333333336%; } - .col-span-6 { + .col-lg-6 { width: 50%; } - .col-span-5 { + .col-lg-5 { width: 41.66666666666667%; } - .col-span-4 { + .col-lg-4 { width: 33.33333333333333%; } - .col-span-3 { + .col-lg-3 { width: 25%; } - .col-span-2 { + .col-lg-2 { width: 16.666666666666664%; } - .col-span-1 { + .col-lg-1 { width: 8.333333333333332%; } .col-offset-12 { @@ -997,6 +988,12 @@ pre code { } } +@media screen and (min-width: 768px) { + .container { + max-width: 728px; + } +} + @media screen and (min-width: 992px) { .container { max-width: 940px; @@ -1009,9 +1006,9 @@ pre code { } } -[class*="col-span-"].pull-right { +/*[class*="col-span-"].pull-right { float: right; -} +}*/ table { max-width: 100%; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ff605b21e9..74c604e78d 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -124,13 +124,13 @@ section > ul li { .show-grid { margin-bottom: 15px; } -.show-grid [class*="col-span-"] { +.show-grid .col { padding-top: 10px; padding-bottom: 10px; background-color: #eee; border: 1px solid #ddd; } -.show-grid [class*="col-span-"]:hover { +.show-grid .col:hover { background-color: #ddd; } diff --git a/docs/docs.html b/docs/docs.html index c405293ea7..b134416cc5 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.
- +
@@ -3626,7 +3626,7 @@ body {
- +
  • Link
    • @@ -3703,7 +3703,7 @@ body {
- +
  • Link
    • @@ -4093,22 +4093,22 @@ body {

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

    -
    +
    -
    +
    -
    +
    -
    +
    @@ -4117,7 +4117,7 @@ body {
    {% highlight html linenos %}
    -
    +
    @@ -4130,7 +4130,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.

    -
    +
    @@ -4140,7 +4140,7 @@ body {
    -
    +
    @@ -4150,7 +4150,7 @@ body {
    -
    +
    @@ -4164,7 +4164,7 @@ body {
    {% highlight html linenos %}
    -
    +
    @@ -6520,7 +6520,7 @@ $('.carousel').carousel({

    Example

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

    - +
    {% highlight html linenos %} diff --git a/less/grid.less b/less/grid.less index 3ac727bc7d..70c3049680 100644 --- a/less/grid.less +++ b/less/grid.less @@ -12,29 +12,35 @@ .row { .make-row(); } -[class*="col-span-"], -[class*="col-small-"] { + + +// Common styles for small and large grid columns +.col { position: relative; + // Float and set width: 100%; for easy stacking on mobile devices + float: left; + width: 100%; + // Prevent columns from collapsing when empty min-height: 1px; + // Inner gutter via padding padding-left: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2); } -[class*="col-small-"] { - float: left; +// Generate small grid classes first +.generate-grid-columns(@grid-columns); + +// Then generate the larger grid classes via media query +@media screen and (min-width: 768px) { + .generate-large-grid-columns(@grid-columns); } -.generate-small-grid-columns(@grid-columns); + // Responsive: Tablets and up @media screen and (min-width: @screen-tablet) { .container { max-width: 728px; } - // Generate the grid columns and offsets - [class*="col-span-"] { - float: left; - } - .generate-grid-columns(@grid-columns); } // Responsive: Desktops and up @@ -52,6 +58,6 @@ } // Reset utility classes due to specificity -[class*="col-span-"].pull-right { +/*[class*="col-span-"].pull-right { float: right; -} +}*/ diff --git a/less/mixins.less b/less/mixins.less index f33b1ec6bc..eb8775975b 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -412,13 +412,12 @@ // Generate the columns .make-column(@columns) { @media (min-width: @grid-float-breakpoint) { - float: left; // Calculate width based on number of columns available width: percentage((@columns / @grid-columns)); } // Prevent columns from collapsing when empty min-height: 1px; - // Set inner padding as gutters instead of margin + // Inner gutter via padding padding-left: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2); } @@ -451,15 +450,40 @@ -// The Grid +// Small grid columns .generate-grid-columns(@grid-columns) { - // Default columns - .col-span-X (@index) when (@index > 0) { - .col-span-@{index} { .col-span-(@index); } - .col-span-X((@index - 1)); + .col-sm-X (@index) when (@index > 0) { + .col-sm-@{index} { .col-sm-(@index); } + .col-sm-X((@index - 1)); + } + .col-sm-X (0) {} + + // Generate columns + .col-sm-X(@grid-columns); + + // Apply the styles + .col-sm-(@columns) { + width: percentage((@columns / @grid-columns)); + } +} + +// Large grid columns +.generate-large-grid-columns(@grid-columns) { + + .col-lg-X (@index) when (@index > 0) { + .col-lg-@{index} { .col-lg-(@index); } + .col-lg-X((@index - 1)); + } + .col-lg-X (0) {} + + // Generate the columns + .col-lg-X(@grid-columns); + + // Apply the styles + .col-lg-(@columns) { + width: percentage((@columns / @grid-columns)); } - .col-span-X(0) {} // Offsets (gaps between columns) .col-offset-X (@index) when (@index > 0) { @@ -483,9 +507,6 @@ .col-pull-X (0) {} // Apply the styles - .col-span-(@columns) { - width: percentage((@columns / @grid-columns)); - } .col-offset-(@columns) { margin-left: percentage((@columns / @grid-columns)); } @@ -497,30 +518,11 @@ } // Generate .spanX and .offsetX - .col-span-X(@grid-columns); .col-offset-X(@grid-columns); .col-push-X(@grid-columns); .col-pull-X(@grid-columns); } -// Small device grid -.generate-small-grid-columns(@grid-columns) { - - // Deterimine the classes - .col-small-span-X (@index) when (@index > 0) { - .col-small-span-@{index} { .col-small-span-(@index); } - .col-small-span-X((@index - 1)); - } - .col-small-span-X(0) {} - - // Specify widths - .col-small-span-(@columns) { - width: percentage((@columns / @grid-columns)); - } - - // Generate the CSS - .col-small-span-X(@grid-columns); -} // Framework mixins