From 0886fee10328d5712055c87047b8040d0e64a356 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 19 Aug 2013 15:12:25 -0700 Subject: quick fix for docs mention --- css.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index f976d229b..6463f11fd 100644 --- a/css.html +++ b/css.html @@ -80,20 +80,20 @@ base_url: "../" /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ -@media (min-width: @screen-tablet) { ... } +@media (min-width: @screen-sm) { ... } /* Medium devices (desktops, 992px and up) */ -@media (min-width: @screen-desktop) { ... } +@media (min-width: @screen-md) { ... } /* Large devices (large desktops, 1200px and up) */ -@media (min-width: @screen-large-desktop) { ... } +@media (min-width: @screen-lg) { ... } {% endhighlight %}

We occasionally 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) { ... } +@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... } +@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... } +@media (min-width: @screen-lg) { ... } {% endhighlight %}

Grid options

-- cgit v1.2.3 From bc2e97756fcd00747fdc42ee2d58566a70378907 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Aug 2013 15:12:55 -0700 Subject: Always wrap form examples in .bs-example; add some missing role='form' --- css.html | 432 ++++++++++++++++++++++++++++++++++----------------------------- 1 file changed, 232 insertions(+), 200 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index c686190ec..3ea6a84c7 100644 --- a/css.html +++ b/css.html @@ -1446,27 +1446,29 @@ 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.

-
-
- - -
-
- - -
-
- - -

Example block-level help text here.

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

Example block-level help text here.

+
+
+ +
+ +
+
{% highlight html %}
@@ -1502,22 +1504,24 @@ For example, <section> should be wrapped as inline.

Always add labels

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.

- -
- - -
-
- - -
-
- -
- -
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+
{% highlight html %}
@@ -1540,34 +1544,36 @@ For example, <section> should be wrapped as inline.

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.

- -
- -
- +
+ +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
-
-
- +
+
+
+ +
-
-
-
- +
+
+ +
-
- + +
{% highlight html %}
@@ -1609,18 +1615,22 @@ For example, <section> should be wrapped as inline.

Type declaration required

Inputs will only be fully styled if their type is properly declared.

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

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

-
- -
+
+
+ +
+
{% highlight html %} {% endhighlight %} @@ -1628,27 +1638,29 @@ For example, <section> should be wrapped as inline.

Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)

-
-
- -
-
-
- -
-
- -
-
+
+
+
+ +
+
+
+ +
+
+ +
+
+
{% highlight html %}
- + +
{% highlight html %}
@@ -1773,18 +1791,22 @@ For example, <section> should be wrapped as inline.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

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

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

- - - +
+
+ +
+
{% highlight html %} {% endhighlight %} @@ -1802,26 +1824,28 @@ 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.

-
-
-
- - -
-
- - -
-
- -
- -
-
+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+
+
{% highlight html %}
@@ -1848,20 +1872,22 @@ For example, <section> should be wrapped as inline.

Validation states

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.

- -
- - -
-
- - -
-
- - -
- +
+
+
+ + +
+
+ + +
+
+ + +
+
+
{% highlight html %}
@@ -1883,23 +1909,25 @@ For example, <section> should be wrapped as inline.

Height sizing

Create larger or smaller form controls that match button sizes.

-
-
- - - - - - - -
-
+
+
+
+ + + + + + + +
+
+
{% highlight html %} @@ -1912,19 +1940,21 @@ For example, <section> should be wrapped as inline.

Column sizing

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

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

Help text

Block level help text for form controls.

-
- - A 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 block of help text that breaks onto a new line and may extend beyond one line. {% endhighlight %} -- cgit v1.2.3 From 354e2ee4f90d8a561ac7c04f35249ca30fdd1e50 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 22 Aug 2013 12:26:04 -0700 Subject: add cross-reference to .navbar-left/right in .pull-left/right docs --- css.html | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index d705ca549..8aae2488d 100644 --- a/css.html +++ b/css.html @@ -2166,6 +2166,10 @@ For example, <section> should be wrapped as inline. float: left !important; } {% endhighlight %} +
+

Not for use in navbars

+

To left-align components in navbars, use .navbar-left instead. See the navbar docs for details.

+

.pull-right

Float an element right with a class. Can also be used as a mixin.

@@ -2177,6 +2181,10 @@ For example, <section> should be wrapped as inline. float: right !important; } {% endhighlight %} +
+

Not for use in navbars

+

To right-align components in navbars, use .navbar-right instead. See the navbar docs for details.

+

.clearfix

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

-- cgit v1.2.3 From 4912f960f47c8b0008ca6bcfecb629d4a3ee148a Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 23 Aug 2013 10:18:39 -0700 Subject: fix #10070 by resyncing fieldset disabled live example & example code --- css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 8aae2488d..d4c19a91c 100644 --- a/css.html +++ b/css.html @@ -1802,7 +1802,7 @@ 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.

-
+
@@ -1823,7 +1823,7 @@ For example, <section> should be wrapped as inline.
{% highlight html %} -
+
-- cgit v1.2.3