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.

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