From e66096368988300cce1b42c7788db6ffeec3acf8 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 31 Jul 2013 16:46:21 -0700 Subject: use separate `form-group`s in horiz form example for greater generality; fixes #8925 --- css.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index d17bfcb34..e917cb40e 100644 --- a/css.html +++ b/css.html @@ -1302,11 +1302,19 @@ For example, <section> should be wrapped as inline.
+
+ +
+
+
+
+
+
@@ -1323,11 +1331,19 @@ For example, <section> should be wrapped as inline.
+
+ +
+
+
+
+
+
-- cgit v1.2.3 From 1583dd55e9f05275ee054884720dce2be8e2f07a Mon Sep 17 00:00:00 2001 From: Jeff Tickle Date: Thu, 1 Aug 2013 11:49:16 -0400 Subject: Added classes for lg-pull, lg-push, lg-offset, sm-pull, sm-push, sm-offset --- css.html | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index d17bfcb34..bc8836bfb 100644 --- a/css.html +++ b/css.html @@ -299,31 +299,31 @@ base_url: "../"

Offsetting columns

-

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

+

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

4
-
4 offset 4
+
4 offset 4
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
6 offset 3
+
6 offset 3
{% highlight html %}
...
-
...
+
...
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
...
+
...
{% endhighlight %} @@ -360,16 +360,16 @@ base_url: "../" {% endhighlight %}

Column ordering

-

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

+

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

-
9
-
3
+
9
+
3
{% highlight html %}
-
9
-
3
+
9
+
3
{% endhighlight %} -- cgit v1.2.3 From 9546fc9cf004d38f7aa4d2b64e8ab6bc65920718 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 1 Aug 2013 17:05:23 -0700 Subject: fix typo in CSS docs; fixes #8992 "from" => "form" --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index d17bfcb34..102ab3811 100644 --- a/css.html +++ b/css.html @@ -1536,7 +1536,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

Validation states

-

Bootstrap includes validation styles for error, warning, and success states on from controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles. +

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

-- cgit v1.2.3 From cfacd228ebd7f52faa2dd85a20c3d2534094ee5b Mon Sep 17 00:00:00 2001 From: Adam Woodbeck Date: Fri, 2 Aug 2013 16:30:13 -0400 Subject: Added ".col-sm-*" to the grid example per the description above the example. --- css.html | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 102ab3811..3cc9c162b 100644 --- a/css.html +++ b/css.html @@ -263,32 +263,32 @@ base_url: "../"

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

-
.col-12 .col-lg-8
-
.col-6 .col-lg-4
+
.col-12 .col-sm-8 .col-lg-8
+
.col-6 .col-sm-4 .col-lg-4
-
.col-6 .col-lg-4
-
.col-6 .col-lg-4
-
.col-6 .col-lg-4
+
.col-6 .col-sm-4 .col-lg-4
+
.col-6 .col-sm-4 .col-lg-4
+
.col-6 .col-sm-4 .col-lg-4
-
.col-6 .col-lg-6
-
.col-6 .col-lg-6
+
.col-6 .col-sm-6 .col-lg-6
+
.col-6 .col-sm-6 .col-lg-6
{% highlight html %}
-
.col-12 .col-lg-8
-
.col-6 .col-lg-4
+
.col-12 .col-sm-8 .col-lg-8
+
.col-6 .col-sm-4 .col-lg-4
-
.col-6 .col-lg-4
-
.col-6 .col-lg-4
-
.col-6 .col-lg-4
+
.col-6 .col-sm-4 .col-lg-4
+
.col-6 .col-sm-4 .col-lg-4
+
.col-6 .col-sm-4 .col-lg-4
-
.col-6 .col-lg-6
-
.col-6 .col-lg-6
+
.col-6 .col-sm-6 .col-lg-6
+
.col-6 .col-sm-6 .col-lg-6
{% endhighlight %} -- cgit v1.2.3 From 602e0c0ba04449e5b84c0490e3a22cb7b82f7131 Mon Sep 17 00:00:00 2001 From: ChrisRiddell Date: Sat, 3 Aug 2013 17:48:15 +0930 Subject: fix Horizontal form docs --- css.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 15682d97b..3254f84b2 100644 --- a/css.html +++ b/css.html @@ -1305,7 +1305,7 @@ For example, <section> should be wrapped as inline.
-
+
-
+
@@ -1334,7 +1334,7 @@ For example, <section> should be wrapped as inline.
-
+
-
+
-- cgit v1.2.3 From 23ef8c0c209844dd8b92d2a5ac82daffa7bd2914 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 3 Aug 2013 21:39:57 -0700 Subject: Greater standardization of sizing terminology In class names: * large => lg * small => sm * mini => xs ("Extra small") In screen size categories: * Tiny => Extra small --- css.html | 76 ++++++++++++++++++++++++++++++++-------------------------------- 1 file changed, 38 insertions(+), 38 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 3254f84b2..38433ee5a 100644 --- a/css.html +++ b/css.html @@ -69,7 +69,7 @@ base_url: "../"

With the launch of Bootstrap 3, icons have been moved to a separate repository. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.

- Visit Glyphicons for Bootstrap or download from GitHub + Visit Glyphicons for Bootstrap or download from GitHub

@@ -91,7 +91,7 @@ base_url: "../" - Tiny devices + Extra small devices Phones (<768px) @@ -1585,35 +1585,35 @@ For example, <section> should be wrapped as inline.

Control sizing

-

Set heights using classes like .input-large, and set widths using grid column classes like .col-lg-*.

+

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Height sizing

Create larger or smaller form controls that match button sizes.

- + - + - + - +
{% highlight html %} - + - + - + - + {% endhighlight %}

Column sizing

@@ -1701,54 +1701,54 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

Button sizes

-

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

+

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

- - + +

- - + +

- - + +

{% highlight html %}

- - + +

- - + +

- - + +

{% endhighlight %}

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

- - + +
{% highlight html %} - - + + {% endhighlight %} @@ -1758,12 +1758,12 @@ For example, <section> should be wrapped as inline.

Button element

Add the disabled attribute to <button> buttons.

- - + +

{% highlight html %} - - + + {% endhighlight %}
@@ -1774,12 +1774,12 @@ For example, <section> should be wrapped as inline.

Anchor element

Add the .disabled class to <a> buttons.

- Primary link - Link + Primary link + Link

{% highlight html %} -Primary link -Link +Primary link +Link {% endhighlight %}

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. -- cgit v1.2.3 From cabcd36019cb7000c537bcd8292d4905239685f7 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 3 Aug 2013 21:59:30 -0700 Subject: add missing ref to .btn-xs in button sizes docs --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 38433ee5a..86cd4771d 100644 --- a/css.html +++ b/css.html @@ -1701,7 +1701,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

Button sizes

-

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

+

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

-- cgit v1.2.3 From 9c14fe604465bb031fa768dcdcbba46fb01033f1 Mon Sep 17 00:00:00 2001 From: Elvis Ratzlaff Date: Mon, 5 Aug 2013 02:19:14 -0400 Subject: Update documentation on offset for small medium and large devices. "Grid options" --- css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 86cd4771d..d30ee91b6 100644 --- a/css.html +++ b/css.html @@ -148,8 +148,8 @@ base_url: "../" Offsets - N/A - Yes + N/A + Yes Column ordering -- cgit v1.2.3 From 7a98af5ec82f230dfab774b213f401f47bd9e953 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Aug 2013 08:01:33 -0700 Subject: typo --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index d30ee91b6..870be8bd8 100644 --- a/css.html +++ b/css.html @@ -34,7 +34,7 @@ base_url: "../"

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

{% highlight html %} -Reponsive image +Responsive image {% endhighlight %} -- cgit v1.2.3 From 6af693d1602d9e4c052c23215ac3130580bfcb17 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Aug 2013 09:10:52 -0700 Subject: Fixes #8770: mobile-first (stacked by default) horizontal dls --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 870be8bd8..81fe3e8ee 100644 --- a/css.html +++ b/css.html @@ -807,7 +807,7 @@ base_url: "../" {% endhighlight %}

Horizontal description

-

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

+

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

Description lists
-- cgit v1.2.3 From ea17069f6e5755d74a14496cdf56887857f08d57 Mon Sep 17 00:00:00 2001 From: Chris Seaton Date: Mon, 5 Aug 2013 18:48:51 +0100 Subject: Update css.html .help-block talks about being 'longer', but with .help-inline gone, it's not longer than anything and the comparison is confusing. --- css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 81fe3e8ee..096b9e505 100644 --- a/css.html +++ b/css.html @@ -1649,10 +1649,10 @@ For example, <section> should be wrapped as inline.

Block level help text for form controls.

- A longer block of help text that breaks onto a new line and may extend beyond one line. + A block of help text that breaks onto a new line and may extend beyond one line.
{% highlight html %} -A longer block of help text that breaks onto a new line and may extend beyond one line. +A block of help text that breaks onto a new line and may extend beyond one line. {% endhighlight %}
-- cgit v1.2.3 From e23906facaa63fcc97bddbd0895c301699c9e942 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Aug 2013 12:17:09 -0700 Subject: Fixes #8150: add `.static-form-control` for vertical alignment of static form text - Also fixes the vertical alignment of labels in horizontal layouts on account of the recent button and input padding changes - Also changes the vertical alignment of the checkboxes and radios in horizontal forms --- css.html | 40 +++++++++++++++++++++++++++++++++++----- 1 file changed, 35 insertions(+), 5 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 096b9e505..b175cf800 100644 --- a/css.html +++ b/css.html @@ -1257,10 +1257,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Optional layouts

-

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

- -

Inline form

+

Inline form

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

Requires custom widths

@@ -1289,7 +1286,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Horizontal form

+

Horizontal form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

@@ -1485,6 +1482,39 @@ For example, <section> should be wrapped as inline. {% endhighlight %} +

Static text in horizontal forms

+

When you need to place regular, static text next to a form label within a horizontal form, use the .form-control-static class on a <p>.

+ +
+ +
+

email@example.com

+
+
+
+ +
+ +
+
+ +{% highlight html %} +
+
+ +
+

email@example.com

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

Form control states

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

-- cgit v1.2.3 From 844df9e0011c0dff5900bcbed3f1146564c0103c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Aug 2013 14:45:00 -0700 Subject: Fixes #8732: unfucks disabled fieldset form example with form groups --- css.html | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index b175cf800..d34009eef 100644 --- a/css.html +++ b/css.html @@ -1550,12 +1550,18 @@ For example, <section> should be wrapped as inline.

While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

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

Offsetting columns

-

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

+

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

-
4
-
4 offset 4
+
4
+
4 offset 4
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
6 offset 3
+
6 offset 3
{% highlight html %}
-
...
-
...
+
...
+
...
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
...
+
...
{% endhighlight %}

Nesting columns

-

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

+

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* 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
@@ -345,13 +346,13 @@ base_url: "../"
{% highlight html %}
-
+
Level 1: 9 columns
-
+
Level 2: 6 columns
-
+
Level 2: 6 columns
@@ -360,16 +361,16 @@ base_url: "../" {% endhighlight %}

Column ordering

-

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

+

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

-
9
-
3
+
9
+
3
{% highlight html %}
-
9
-
3
+
9
+
3
{% endhighlight %} @@ -2014,6 +2015,27 @@ For example, <section> should be wrapped as inline.
+ + + + + + + + + + + + + + + + + @@ -2031,6 +2061,7 @@ For example, <section> should be wrapped as inline. + @@ -2038,10 +2069,21 @@ For example, <section> should be wrapped as inline. + + + + + + + + + + + @@ -2049,6 +2091,7 @@ For example, <section> should be wrapped as inline. + @@ -2056,6 +2099,7 @@ For example, <section> should be wrapped as inline. + @@ -2094,35 +2138,43 @@ For example, <section> should be wrapped as inline.

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

Visible on...

Green checkmarks indicate the element is visible in your current viewport.

-
    -
  • +
    +
    + + ✔ Visible on x-small +
    +
    ✔ Visible on small -
    • -
  • + +
    Medium ✔ Visible on medium -
    • -
  • + +
    ✔ Visible on large -
    • -
+ +

Hidden on...

Here, green checkmarks indicate the element is hidden in your current viewport.

-
    -
  • +
    +
    + Extra small + +
    +
    Small -
    • -
  • + +
    Medium ✔ Hidden on medium -
    • -
  • + +
    Large -
    • -
+ + -- cgit v1.2.3 From efe62a7ef4b52229403253f8d7fd39d2d96ac875 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 00:36:22 -0700 Subject: rename and refactor a smidge to add medium grid mixins --- css.html | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 77 insertions(+), 12 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 984400bee..04843a198 100644 --- a/css.html +++ b/css.html @@ -421,39 +421,104 @@ base_url: "../" } } -// Generate the column offsets -.make-column-offset(@columns) { - @media (min-width: @grid-float-breakpoint) { +// Generate the small columns +.make-sm-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available + @media (min-width: @screen-small) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} + +// Generate the small column offsets +.make-sm-column-offset(@columns) { + @media (min-width: @screen-small) { margin-left: percentage((@columns / @grid-columns)); } } -.make-column-push(@columns) { - @media (min-width: @grid-float-breakpoint) { +.make-sm-column-push(@columns) { + @media (min-width: @screen-small) { left: percentage((@columns / @grid-columns)); } } -.make-column-pull(@columns) { - @media (min-width: @grid-float-breakpoint) { +.make-sm-column-pull(@columns) { + @media (min-width: @screen-small) { right: percentage((@columns / @grid-columns)); } } -// Generate the small columns -.make-small-column(@columns; @gutter: @grid-gutter-width) { +// Generate the medium columns +.make-md-column(@columns; @gutter: @grid-gutter-width) { position: relative; - float: left; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); - @max-width: (@grid-float-breakpoint - 1); // Calculate width based on number of columns available - @media (max-width: @max-width) { + @media (min-width: @screen-medium) { + float: left; width: percentage((@columns / @grid-columns)); } } + +// Generate the large column offsets +.make-md-column-offset(@columns) { + @media (min-width: @screen-medium) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-md-column-push(@columns) { + @media (min-width: @screen-medium) { + left: percentage((@columns / @grid-columns)); + } +} +.make-md-column-pull(@columns) { + @media (min-width: @screen-medium) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the large columns +.make-lg-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available + @media (min-width: @screen-large) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} + +// Generate the large column offsets +.make-lg-column-offset(@columns) { + @media (min-width: @screen-large) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-push(@columns) { + @media (min-width: @screen-large) { + left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-pull(@columns) { + @media (min-width: @screen-large) { + right: percentage((@columns / @grid-columns)); + } +} {% endhighlight %}

Example usage

-- cgit v1.2.3 From aefed0ada9791338be11dd5318b24f17f517d51a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 00:48:36 -0700 Subject: fixes #9317: document media queries --- css.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 04843a198..fa738f09e 100644 --- a/css.html +++ b/css.html @@ -83,6 +83,29 @@ base_url: "../"

Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

+

Media queries

+

We use the following media queries to create our the key breakpoints in our grid system.

+{% highlight css %} +/* Extra small devices (phones, up to 480px) */ +/* No media query since this is the default in Bootstrap */ + +/* Small devices (tablets, 768px and up) */ +@media (min-width: @screen-tablet) { ... } + +/* Medium devices (tablets, 992px and up) */ +@media (min-width: @screen-desktop) { ... } + +/* Large devices (large desktops, 1200px and up) */ +@media (min-width: @screen-large-desktop) { ... } +{% endhighlight %} +

We ocassionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

+{% highlight css %} +@media (max-width: @screen-phone-max) { ... } +@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... } +@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { ... } +@media (min-width: @screen-large-desktop) { ... } +{% endhighlight %} +

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

-- cgit v1.2.3 From 8dd45053ce70227f9a18531f7a110cc05c41c15e Mon Sep 17 00:00:00 2001 From: Bas Bosman Date: Mon, 12 Aug 2013 17:55:25 +0200 Subject: Add missing aria-hidden attribs to close buttons --- css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index fa738f09e..ee15c30e9 100644 --- a/css.html +++ b/css.html @@ -2032,10 +2032,10 @@ For example, <section> should be wrapped as inline.

Close icon

Use the generic close icon for dismissing content like modals and alerts.

-

+

{% highlight html %} - + {% endhighlight %}

.pull-left

-- cgit v1.2.3 From f662dff6e9c52770511e5f674579a27eeac85549 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 11:07:23 -0700 Subject: fixes #9382: inline forms now require use of .form-group for proper alignment of all form controls --- css.html | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index ee15c30e9..190f8f237 100644 --- a/css.html +++ b/css.html @@ -1394,10 +1394,14 @@ For example, <section> should be wrapped as inline.

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

- - - - +
+ + +
+
+ + +
- + @@ -1291,7 +1291,7 @@ For example, <section> should be wrapped as inline. - + @@ -1315,7 +1315,7 @@ For example, <section> should be wrapped as inline. - + @@ -1325,11 +1325,18 @@ For example, <section> should be wrapped as inline.
+ Extra small devices + Phones (<768px) + + Small devices + Tablets (>768px) + + Medium devices + Desktops (>992px) + + Large devices + Desktops (>1200px) +
.visible-xsVisible
.visible-sm Visible
.visible-md Visible
.visible-lg Visible
.hidden-xsVisibleVisible Visible
.hidden-smVisible Visible Visible
.hidden-md VisibleVisible Visible
.hidden-lg Visible VisibleVisible
s instead of s --- css.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 1e73737f3..f035ff616 100644 --- a/css.html +++ b/css.html @@ -585,27 +585,27 @@ base_url: "../" - + - + - + - + - + - + -- cgit v1.2.3 From a13fe0a4a04c5712cb77bed6d508c89c9bcbb18b Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 12 Aug 2013 16:59:50 -0700 Subject: use unique IDs in Forms examples in docs --- css.html | 64 ++++++++++++++++++++++++++++++++-------------------------------- 1 file changed, 32 insertions(+), 32 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index f035ff616..8b3cc0c50 100644 --- a/css.html +++ b/css.html @@ -1335,12 +1335,12 @@ For example, <section> should be wrapped as inline.
Legend
- - + +
- - + +
@@ -1360,12 +1360,12 @@ For example, <section> should be wrapped as inline.
Legend
- - + +
- - + +
@@ -1395,12 +1395,12 @@ For example, <section> should be wrapped as inline.
- - + +
- - + +
- + -- cgit v1.2.3 From 84b1ef504871155685e91ea166f9a3548cdc9cb7 Mon Sep 17 00:00:00 2001 From: saiwang Date: Wed, 14 Aug 2013 02:23:44 +0800 Subject: fix mixin code example --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 66bdd6df3..7a8759817 100644 --- a/css.html +++ b/css.html @@ -2075,7 +2075,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} {% highlight css %} // Mixin -.clearfix { +.clearfix() { &:before, &:after { content: " "; -- cgit v1.2.3 From a380e80cd7830b285c98c16e3782d297739695ce Mon Sep 17 00:00:00 2001 From: Matthew Leffler Date: Tue, 13 Aug 2013 17:56:12 -0600 Subject: Typo --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 7a8759817..43ed2d9a8 100644 --- a/css.html +++ b/css.html @@ -146,7 +146,7 @@ base_url: "../" - + -- cgit v1.2.3 From 1800edc07c8a4334e938d50e780f22ad0ab55474 Mon Sep 17 00:00:00 2001 From: Pedro Pereira Date: Wed, 14 Aug 2013 17:02:57 +0800 Subject: CSS Grid old classes in use --- css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 43ed2d9a8..0ad11fae2 100644 --- a/css.html +++ b/css.html @@ -296,8 +296,8 @@ base_url: "../"
.col-xs-6 .col-sm-4 .col-md-4
-
.col-xs-6 .col-sm-6 .col-md-6
-
.col-xs-6 .col-sm-6 .col-md-6
+
.col-xs-6 .col-sm-6 .col-md-6
+
.col-xs-6 .col-sm-6 .col-md-6
{% highlight html %} -- cgit v1.2.3 From fb6bd757df2a066d0effab5a1eafca05ffe8e50e Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Wed, 14 Aug 2013 22:08:17 +0200 Subject: add information on how to disable mobile zoom to the docs --- css.html | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 0ad11fae2..1a74e3b7b 100644 --- a/css.html +++ b/css.html @@ -29,6 +29,10 @@ base_url: "../"

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

{% highlight html %} +{% endhighlight %} +

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag.

+{% highlight html %} + {% endhighlight %}

Responsive images

-- cgit v1.2.3 From a3b279c556560079a84c25a631ebcec8fcefe38e Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Wed, 14 Aug 2013 23:26:34 +0200 Subject: improve the "zoom disabled" documentation --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 1a74e3b7b..45fc5d646 100644 --- a/css.html +++ b/css.html @@ -30,7 +30,7 @@ base_url: "../" {% highlight html %} {% endhighlight %} -

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag.

+

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This way, your mobile users will only be able to scroll, and it will result in your app feeling a bit more like the rest of the applications that you could find on the device.

{% highlight html %} {% endhighlight %} -- cgit v1.2.3 From fb71f402456b27b66184acbd341e8119188c3c20 Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Wed, 14 Aug 2013 23:51:26 +0200 Subject: tweak note about zoom disabled on mobile --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 45fc5d646..045be7876 100644 --- a/css.html +++ b/css.html @@ -30,7 +30,7 @@ base_url: "../" {% highlight html %} {% endhighlight %} -

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This way, your mobile users will only be able to scroll, and it will result in your app feeling a bit more like the rest of the applications that you could find on the device.

+

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall we don't recommend this on every site, so use caution!

{% highlight html %} {% endhighlight %} -- cgit v1.2.3 From 70b0fb445ee373811ea952a0936493c4f574fba2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 14 Aug 2013 22:57:59 -0700 Subject: fixes #9523: more accurate grid table breakpoint numbers --- css.html | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 045be7876..b4da415c1 100644 --- a/css.html +++ b/css.html @@ -123,7 +123,7 @@ base_url: "../" - + -- cgit v1.2.3 From 6e26f846cdb96060afb0530f1d34fdfc2a11f83d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 14 Aug 2013 23:11:38 -0700 Subject: fix #9454: add grid docs about responsive column clearing --- css.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index b4da415c1..a2cfd5f74 100644 --- a/css.html +++ b/css.html @@ -326,6 +326,21 @@ base_url: "../"

More grid examples

+

Responsive column clearing

+

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

+{% highlight html %} +
+
.col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
+ + +
+ +
.col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
+
+{% endhighlight %} +

Offsetting columns

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

-- cgit v1.2.3 From c84d34b5f1ae6908c5a0b524c17b81103b831f35 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 14 Aug 2013 23:31:21 -0700 Subject: fix inaccurate comment in media query docs --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index a2cfd5f74..3379fabf8 100644 --- a/css.html +++ b/css.html @@ -96,7 +96,7 @@ base_url: "../" /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-tablet) { ... } -/* Medium devices (tablets, 992px and up) */ +/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-desktop) { ... } /* Large devices (large desktops, 1200px and up) */ -- cgit v1.2.3 From f058a6a3ea6196af859303ff4611fd9807842f7d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 14 Aug 2013 23:52:57 -0700 Subject: fixes #9522 --- css.html | 2 ++ 1 file changed, 2 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index a2cfd5f74..cc46e6ceb 100644 --- a/css.html +++ b/css.html @@ -2254,6 +2254,7 @@ For example, <section> should be wrapped as inline. ✔ Visible on small
+
Medium ✔ Visible on medium @@ -2274,6 +2275,7 @@ For example, <section> should be wrapped as inline. Small
+
Medium ✔ Hidden on medium -- cgit v1.2.3 From 16191226034c93eabd6c35ee040e20d09cbf7da4 Mon Sep 17 00:00:00 2001 From: Bas Bosman Date: Thu, 15 Aug 2013 11:40:39 +0200 Subject: Doc fixes related to #9523 --- css.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 1ac0268f9..51c62f5fa 100644 --- a/css.html +++ b/css.html @@ -127,11 +127,11 @@ base_url: "../"
@@ -2142,11 +2142,11 @@ For example, <section> should be wrapped as inline. -- cgit v1.2.3 From 6b612ae3fe92f7a96d5d656e5e0c630f85acda0a Mon Sep 17 00:00:00 2001 From: Christian Date: Thu, 15 Aug 2013 21:57:24 +0900 Subject: Update css.html I know the form code are only examples, but it'd be good to encourage usage of the proper input type for the email inputs by changing the type from "text" to "email". --- css.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 1ac0268f9..67dfed94c 100644 --- a/css.html +++ b/css.html @@ -1355,7 +1355,7 @@ For example, <section> should be wrapped as inline. Legend
- +
@@ -1380,7 +1380,7 @@ For example, <section> should be wrapped as inline. Legend
- +
@@ -1415,7 +1415,7 @@ For example, <section> should be wrapped as inline.
- +
@@ -1432,7 +1432,7 @@ For example, <section> should be wrapped as inline.
- +
@@ -1453,7 +1453,7 @@ For example, <section> should be wrapped as inline.
- +
@@ -1482,7 +1482,7 @@ For example, <section> should be wrapped as inline.
- +
-- cgit v1.2.3 From 209d3af30188a6b426f0cf84d81b367b2f056e1b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 11:31:26 -0700 Subject: Fixes #9617: consistent variation order, add .label-primary --- css.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 50fc95f98..b9d80c678 100644 --- a/css.html +++ b/css.html @@ -721,18 +721,18 @@ base_url: "../"

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

-

Etiam porta sem malesuada magna mollis euismod.

-

Donec ullamcorper nulla non metus auctor fringilla.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

+

Etiam porta sem malesuada magna mollis euismod.

+

Donec ullamcorper nulla non metus auctor fringilla.

{% highlight html %}

...

...

-

...

-

...

...

...

+

...

+

...

{% endhighlight %} -- cgit v1.2.3 From 49e95f2bcfd71e12b0c3d45c6019482288cbebd9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 11:47:45 -0700 Subject: add clearfix mention to another grid example and clear up examples --- css.html | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index b9d80c678..d9d86fa71 100644 --- a/css.html +++ b/css.html @@ -291,36 +291,32 @@ base_url: "../"

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

-
.col-xs-12 .col-sm-8 .col-md-8
-
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-12 .col-sm-6 .col-md-8
+
.col-xs-6 .col-sm-6 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
+ +
.col-xs-6 .col-sm-4 .col-md-4
-
-
.col-xs-6 .col-sm-6 .col-md-6
-
.col-xs-6 .col-sm-6 .col-md-6
-
{% highlight html %}
-
.col-xs-12 .col-sm-8 .col-md-8
-
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-12 .col-sm-6 .col-md-8
+
.col-xs-6 .col-sm-6 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
+ +
.col-xs-6 .col-sm-4 .col-md-4
-
-
.col-xs-6 .col-sm-6 .col-md-6
-
.col-xs-6 .col-sm-6 .col-md-6
-
{% endhighlight %} -
+

Need more examples?

We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.

More grid examples

-- cgit v1.2.3 From 33edb95b9862ef0c0edea73ca931fcbbeb1b5b6d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 12:35:22 -0700 Subject: drop legend from docs example per #9626 --- css.html | 82 ++++++++++++++++++++++++++++++---------------------------------- 1 file changed, 38 insertions(+), 44 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index d9d86fa71..32d4a0970 100644 --- a/css.html +++ b/css.html @@ -1347,53 +1347,47 @@ For example, <section> should be wrapped as inline.

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

-
- Legend -
- - -
-
- - -
-
- - -

Example block-level help text here.

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

Example block-level help text here.

+
+
+ +
+ {% highlight html %}
-
- Legend -
- - -
-
- - -
-
- - -

Example block-level help text here.

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

Example block-level help text here.

+
+
+ +
+ {% endhighlight %} -- cgit v1.2.3 From 8211b12c0fcb5890305a3768b769cbe754c8b1b8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 13:00:34 -0700 Subject: improve table classes' snippets and ordering --- css.html | 37 ++++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 15 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 32d4a0970..f784f0f7e 100644 --- a/css.html +++ b/css.html @@ -1226,7 +1226,7 @@ For example, <section> should be wrapped as inline. -

Contextual table classes

+

Contextual table classes

Use contextual classes to color table rows or individual cells.

Bootstrap heading

Bootstrap heading

 Semibold 38px

Bootstrap heading

Bootstrap heading

 Semibold 32px

Bootstrap heading

Bootstrap heading

 Semibold 24px

Bootstrap heading

Bootstrap heading

 Semibold 18px
Bootstrap heading
Bootstrap heading
 Semibold 16px
Bootstrap heading
Bootstrap heading
 Semibold 12px
Bootstrap heading
Semibold 16pxSemibold 14px
Bootstrap heading
Class prefix.col-xs.col-xs- .col-sm- .col-md- .col-lg- Small devices - Tablets (>768px) + Tablets (≥768px) Medium devices @@ -2123,7 +2123,7 @@ For example, <section> should be wrapped as inline. Small devices - Tablets (>768px) + Tablets (≥768px) Medium devices @@ -2135,15 +2135,7 @@ For example, <section> should be wrapped as inline.
.visible-xs Visible Medium devices - Desktops (>992px) + Desktops (≥992px) Large devices - Desktops (>1200px) + Desktops (≥1200px)
Medium devices - Desktops (>992px) + Desktops (≥992px) Large devices - Desktops (>1200px) + Desktops (≥1200px)
@@ -1243,15 +1243,15 @@ For example, <section> should be wrapped as inline. - + - + - +
- .success + .active Indicates a successful or positive actionApplies the hover color to a particular row or cell
- .danger + .success Indicates a dangerous or potentially negative actionIndicates a successful or positive action
@@ -1261,9 +1261,9 @@ For example, <section> should be wrapped as inline.
- .active + .danger Applies the hover color to a particular row or cellIndicates a dangerous or potentially negative action
@@ -1279,7 +1279,7 @@ For example, <section> should be wrapped as inline.
1 Column content Column contentColumn content Column content
3 Column content Column contentColumn content Column content
7 Column content Column content
{% highlight html %} - - 1 - Column content - Column content - Column content + +... +... +... +... + + + + ... + ... + ... + ... {% endhighlight %} -- cgit v1.2.3 From e3c6a1fc4ffceb7cbcb1885aaa6e96515d0b872a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 14:35:15 -0700 Subject: form control state ordering --- css.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index f784f0f7e..64751da93 100644 --- a/css.html +++ b/css.html @@ -1755,6 +1755,10 @@ For example, <section> should be wrapped as inline.

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

+
+ + +
@@ -1763,12 +1767,12 @@ For example, <section> should be wrapped as inline.
-
- - -
{% highlight html %} +
+ + +
@@ -1777,10 +1781,6 @@ For example, <section> should be wrapped as inline.
-
- - -
{% endhighlight %} -- cgit v1.2.3 From c4b59fc1caab59fdc0220d8ad1a8b0df00c7fa56 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 20:43:55 -0700 Subject: fixes #9663: third part, document the resets --- css.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 64751da93..2b2ffc234 100644 --- a/css.html +++ b/css.html @@ -322,7 +322,7 @@ base_url: "../"

More grid examples

-

Responsive column clearing

+

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

{% highlight html %}
@@ -336,6 +336,19 @@ base_url: "../"
.col-xs-6 .col-sm-3
{% endhighlight %} +

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.

+{% highlight html %} +
+
.col-sm-5 .col-md-6
+
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
+
+ +
+
.col-sm-6 .col-md-5 .col-lg-6
+
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
+
+{% endhighlight %} +

Offsetting columns

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

-- cgit v1.2.3 From e04590babb90c0ca009e7fbcf3bd8de26680eb3f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 21:39:40 -0700 Subject: remove grid examples callout --- css.html | 6 ------ 1 file changed, 6 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 2b2ffc234..305d9f78c 100644 --- a/css.html +++ b/css.html @@ -316,12 +316,6 @@ base_url: "../"
{% endhighlight %} -
-

Need more examples?

-

We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.

-

More grid examples

-
-

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

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