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 From 2b37d2b5333c0b10d5be53865a1a153d5ac4a4b5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Aug 2013 14:22:51 -0700 Subject: Update and document use of `small` in headings --- css.html | 60 +++++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 47 insertions(+), 13 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 01b1aa2e1..e77acb66b 100644 --- a/css.html +++ b/css.html @@ -588,46 +588,80 @@ base_url: "../"

Headings

All HTML headings, <h1> through <h6> are available.

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

h1. Bootstrap heading

Semibold 36pxSemibold 36px

h2. Bootstrap heading

Semibold 30pxSemibold 30px

h3. Bootstrap heading

Semibold 24pxSemibold 24px

h4. Bootstrap heading

Semibold 18pxSemibold 18px
h5. Bootstrap heading
Semibold 14pxSemibold 14px
h6. Bootstrap heading
Semibold 12pxSemibold 12px
{% highlight html %} -

...

-

...

-

...

-

...

-
...
-
...
+

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+
h5. Bootstrap heading
+
h6. Bootstrap heading
{% endhighlight %} +

Also included with headings is an autoscaling <small> element. Use it for smaller, gray secondary text in any heading.

+
+ + + + + + + + + + + + + + + + + + + + + +

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
+
+{% highlight html %} +

h1. Bootstrap heading Secondary text

+

h2. Bootstrap heading Secondary text

+

h3. Bootstrap heading Secondary text

+

h4. Bootstrap heading Secondary text

+
h5. Bootstrap heading Secondary text
+
h6. Bootstrap heading Secondary text
+{% endhighlight %} + +

Body copy

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

-- cgit v1.2.3 From df56ecbdcb31d1bf30470ab4c58a7a1224c2c8a8 Mon Sep 17 00:00:00 2001 From: wangsai Date: Sat, 24 Aug 2013 11:39:34 +0800 Subject: fix form --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index e77acb66b..6947da064 100644 --- a/css.html +++ b/css.html @@ -1828,7 +1828,7 @@ For example, <section> should be wrapped as inline.
-
+
{% highlight html %} -- cgit v1.2.3 From 7a7149d2eef386912e497907e1b2322ee98c0234 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Aug 2013 22:00:54 -0700 Subject: Rearrange helper classes docs section; add subnav list items to docs side nav --- css.html | 57 +++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 35 insertions(+), 22 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 6947da064..3e639bf3b 100644 --- a/css.html +++ b/css.html @@ -2213,7 +2213,8 @@ For example, <section> should be wrapped as inline.

Helper classes

-

Close icon

+ +

Close icon

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

@@ -2222,43 +2223,45 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

.pull-left

-

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

+ +

Quick floats

+

Float an element to the left or right with a class. Classes can also be used as mixins.

{% highlight html %}
...
+
...
{% endhighlight %} {% highlight css %} +// Classes .pull-left { 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.

-{% highlight html %} -
...
-{% endhighlight %} -{% highlight css %} .pull-right { float: right !important; } + +// Usage as mixins +.element { + .pull-left(); +} +.another-element { + .pull-right(); +} {% endhighlight %} +

Not for use in navbars

-

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

+

To align components in navbars with utility classes, use .navbar-left or .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.

+ +

Clearfix

+

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

{% highlight html %} +
...
{% endhighlight %} {% highlight css %} -// Mixin +// Mixin itself .clearfix() { &:before, &:after { @@ -2270,19 +2273,29 @@ For example, <section> should be wrapped as inline. } } -// Usage +// Usage as a Mixin .element { .clearfix(); } {% endhighlight %} -

.sr-only

-

Hide an element to all users except screen readers. Necessary for following accessibility best practices.

+ +

Screen reader content

+

Hide an element to all users except screen readers with .sr-only. Necessary for following accessibility best practices. Can also be used as a mixin.

{% highlight html %} Skip to content {% endhighlight %} +{% highlight css %} +// Usage as a Mixin +.skip-navigation { + .sr-only(); +} +{% endhighlight %} +
+ +
-- cgit v1.2.3 From e25ca1e7a9ce7beaf5227b920913ec10a74a300e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Aug 2013 22:01:42 -0700 Subject: Document .hide-text and .text-hide --- css.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 3e639bf3b..36bf1bf52 100644 --- a/css.html +++ b/css.html @@ -2292,6 +2292,18 @@ For example, <section> should be wrapped as inline. } {% endhighlight %} + +

Image replacement

+

Utilize the .hide-text mixin or .text-hide class to help replace an element's text content with a background image.

+{% highlight html %} +

Custom heading

+{% endhighlight %} + {% highlight css %} +// Usage as a Mixin +.heading { + .hide-text(); +} +{% endhighlight %}
-- cgit v1.2.3 From 6de67c0ab60bc94931def838de2e66764d4838ea Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Aug 2013 22:11:41 -0700 Subject: Deprecate .hide-text mixin for .text-hide as mixin and class --- css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 36bf1bf52..0d3fc11ef 100644 --- a/css.html +++ b/css.html @@ -2294,14 +2294,14 @@ For example, <section> should be wrapped as inline.

Image replacement

-

Utilize the .hide-text mixin or .text-hide class to help replace an element's text content with a background image.

+

Utilize the .text-hide class or mixin to help replace an element's text content with a background image.

{% highlight html %}

Custom heading

{% endhighlight %} {% highlight css %} // Usage as a Mixin .heading { - .hide-text(); + .text-hide(); } {% endhighlight %}
-- cgit v1.2.3