From 70fa8ef4b04eeacc64d25477f4c5391b9385d4fb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Jul 2013 21:28:44 -0700 Subject: Responsivey docs table for grid section --- css.html | 102 ++++++++++++++++++++++++++++++++------------------------------- 1 file changed, 52 insertions(+), 50 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 0c41d4af0..35148bcab 100644 --- a/css.html +++ b/css.html @@ -78,56 +78,58 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Grid options

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Tiny grid - Phones (<480px) - - Small grid - Tablets (<768px) - - Medium-large grid - Destkops (>768px) -
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Class prefix.col-.col-sm-.col-lg-
# of columns12
NestableYes
OffsetsN/AYes
Column orderingN/AYes
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tiny grid + Phones (<480px) + + Small grid + Tablets (<768px) + + Medium-large grid + Destkops (>768px) +
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Class prefix.col-.col-sm-.col-lg-
# of columns12
NestableYes
OffsetsN/AYes
Column orderingN/AYes
+

Example: Stacked-to-horizontal

Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.

-- cgit v1.2.3 From 572174652e905b1cefba10bb623b27d1c5f5e38a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Jul 2013 21:31:00 -0700 Subject: another responsivey table --- css.html | 78 +++++++++++++++++++++++++++++++++------------------------------- 1 file changed, 40 insertions(+), 38 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 35148bcab..e4378434a 100644 --- a/css.html +++ b/css.html @@ -1053,44 +1053,46 @@ For example, <section> should be wrapped as inline.

Contextual table classes

Use contextual classes to color table rows or individual cells.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
- .success - Indicates a successful or positive action
- .danger - Indicates a dangerous or potentially negative action
- .warning - Indicates a warning that might need attention
- .active - Applies the hover color to a particular row or cell
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassDescription
+ .success + Indicates a successful or positive action
+ .danger + Indicates a dangerous or potentially negative action
+ .warning + Indicates a warning that might need attention
+ .active + Applies the hover color to a particular row or cell
+
-- cgit v1.2.3 From 2967cc1d60a6b557395549511368aceb18c7b139 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Jul 2013 21:35:56 -0700 Subject: mo tables mo responsive or whatever the hell that means --- css.html | 46 ++++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index e4378434a..d2e552e9a 100644 --- a/css.html +++ b/css.html @@ -2086,7 +2086,7 @@ For example, <section> should be wrapped as inline.

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Responsive classes

-
@@ -2138,27 +2138,29 @@ For example, <section> should be wrapped as inline.

Print classes

-
- - - - - - - - - - - - - - - - - - - -
ClassBrowserPrint
.visible-printVisible
.hidden-printVisible
+
+ + + + + + + + + + + + + + + + + + + + +
ClassBrowserPrint
.visible-printVisible
.hidden-printVisible
+

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning display: none; or display: block;. Use with inline and table elements is currently not supported.

-- cgit v1.2.3 From 85591d82ddeae95f7b89a76d1bcfa9c98fb1f3ea Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Jul 2013 21:40:58 -0700 Subject: derp --- css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index d2e552e9a..15e4082d5 100644 --- a/css.html +++ b/css.html @@ -2086,7 +2086,7 @@ For example, <section> should be wrapped as inline.

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Responsive classes

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

Print classes

-
+
-- cgit v1.2.3 From 5bed9f4635495cfd2f710cbdb631689dfa1d0d87 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Jul 2013 21:52:23 -0700 Subject: simpler forms docs structure --- css.html | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 15e4082d5..9aa5c6ca4 100644 --- a/css.html +++ b/css.html @@ -1532,11 +1532,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} - -

Extending form controls

-

Adding on top of existing browser controls, Bootstrap includes other useful form components.

- -

Input groups

+

Input groups

Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .add-on to prepend or append elements to an <input>.

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

Optional sizes

+

Optional sizes

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

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

Buttons instead of text

+

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.

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

Button dropdowns

+

Button dropdowns

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

Segmented dropdown groups

+

Segmented dropdown groups

@@ -1766,10 +1762,10 @@ For example, <section> should be wrapped as inline.
{% endhighlight %} -

Control sizing

+

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .col-lg-* classes.

-

Relative sizing

+

Relative sizing

Create larger or smaller form controls that match button sizes.

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

Column sizing

+

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

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

Help text

+

Help text

Block level help text for form controls.

-- cgit v1.2.3 From 44a4e7121534a4aeb74ac260e17ee536457449f9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Jul 2013 22:03:52 -0700 Subject: Fix clipped dropdowns in input groups section of docs --- css.html | 281 ++++++++++++++++++++++++++++++++++----------------------------- 1 file changed, 152 insertions(+), 129 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 9aa5c6ca4..9e7da28f9 100644 --- a/css.html +++ b/css.html @@ -1545,34 +1545,34 @@ For example, <section> should be wrapped as inline.
-
+
@

-
+
.00

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

Optional sizes

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

-
+
@

-
+
@

-
+
@
{% highlight html %} -
+
@
-
+
@
-
+
@
@@ -1617,144 +1617,167 @@ 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.

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

Button dropdowns

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

Segmented dropdown groups

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