From 813467ddaf9d007a2a14273db80435faba401222 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 1 Feb 2014 00:11:23 -0800 Subject: rm callout about creating .container-fluid-alikes now that .container-fluid has been added --- docs/css.html | 5 ----- 1 file changed, 5 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index b4eaabe9b..1dc9c1da5 100644 --- a/docs/css.html +++ b/docs/css.html @@ -82,11 +82,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Look to the examples for applying these principles to your code.

-
-

Grids and full-width layouts

-

Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows.

-
-

Media queries

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

{% highlight scss %} -- cgit v1.2.3 From 6db1a3f9097c0375350ce133548de70a87572e59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Fri, 7 Feb 2014 13:40:32 +0100 Subject: Fix .text-truncate() typo --- docs/css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 1c2c85170..f5e6596f3 100644 --- a/docs/css.html +++ b/docs/css.html @@ -3240,7 +3240,7 @@ a {

Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.

{% highlight scss %} // Mixin -.text-truncate() { +.text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -3250,7 +3250,7 @@ a { .branch-name { display: inline-block; max-width: 200px; - .text-truncate(); + .text-overflow(); } {% endhighlight %} -- cgit v1.2.3 From 13b4e7a1a8b9be8793c59e3c1da4016ad0974b56 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Feb 2014 17:19:45 -0800 Subject: Mention limitation of form validation feedback icons with input groups --- docs/css.html | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index f5e6596f3..6651215f5 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1977,6 +1977,10 @@ For example, <section> should be wrapped as inline.

With optional icons

You can also add optional feedback icons with the addition of an extra class and the right icon.

+
+

Icons and input groups

+

When using the feedback icons, be aware that manual positioning may be required for input groups with an add-on on the right. Adjust the right: 0; to an appropriate pixel value depending on the width of your addon.

+
-- cgit v1.2.3 From dabb5041a43dd2a50d126c5ab11ae34462ce58a8 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 14 Feb 2014 17:05:59 -0800 Subject: Document caveats of `pointer-events: none` usage in btn.disabled Refs #10049 Source for compatibility info: http://caniuse.com/#feat=pointer-events --- docs/css.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 6651215f5..750b84a35 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1886,8 +1886,8 @@ For example, <section> should be wrapped as inline.

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

-

Link functionality of <a> not impacted

-

This class will only change the appearance of <a class="btn btn-default"> buttons, not their functionality. Use custom JavaScript to disable links here.

+

Caveat about link functionality of <a>

+

Our styles use pointer-events: none to try to disable the link functionality of <a class="btn btn-*"> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

@@ -2292,8 +2292,8 @@ For example, <section> should be wrapped as inline. We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

-

Link functionality not impacted

-

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

+

Link functionality caveat

+

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

Context-specific usage

-- cgit v1.2.3 From 72565b69c24d0e58484544af0b220b9746589376 Mon Sep 17 00:00:00 2001 From: Daniel Niccoli Date: Fri, 21 Feb 2014 16:32:24 +0100 Subject: Clarify the use of .has-feedback --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 750b84a35..0adaf9662 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1976,7 +1976,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

With optional icons

-

You can also add optional feedback icons with the addition of an extra class and the right icon.

+

You can also add optional feedback icons with the addition of .has-feedback and the right icon.

Icons and input groups

When using the feedback icons, be aware that manual positioning may be required for input groups with an add-on on the right. Adjust the right: 0; to an appropriate pixel value depending on the width of your addon.

-- cgit v1.2.3 From f542fcc627557feb9ad7fb7998971d57da9fe794 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 21 Feb 2014 15:03:16 -0800 Subject: Fixes #12810: Document .container-fluid in the CSS overview docs --- docs/css.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 750b84a35..4197f8dcb 100644 --- a/docs/css.html +++ b/docs/css.html @@ -46,12 +46,18 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.

Containers

-

Easily center a page's contents by wrapping its contents in a .container. Containers set width at various media query breakpoints to match our grid system.

-

Note that, due to padding and fixed widths, containers are not nestable by default.

+

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

+

Use .container for a responsive fixed width container.

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

Use .container-fluid for a full width container, spanning the entire width of your viewport.

+{% highlight html %} +
+ ... +
{% endhighlight %}
-- cgit v1.2.3 From a083f0deb77dd479a7690a4ab90f73f7f7f375cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Feb 2014 14:19:00 -0800 Subject: Fixes #12808: Correct grid column values listed in Grid Options --- docs/css.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 32204c4f4..de995e16b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -157,9 +157,9 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e Column width Auto - 60px - 78px - 95px + ~62px + ~81px + ~97px Gutter width -- cgit v1.2.3 From a6fb770ebee4394d8b946636a738e3829cc59b28 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 24 Feb 2014 15:10:46 -0800 Subject: move grid classes cascade explanation into main grid docs section --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index de995e16b..e1af6985e 100644 --- a/docs/css.html +++ b/docs/css.html @@ -79,6 +79,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
    • +
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

    • Look to the examples for applying these principles to your code.

    @@ -180,7 +181,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
    -

    Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

    Example: Stacked-to-horizontal

    Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

    -- cgit v1.2.3 From 559b90f944fe9cfd463c1be3f89cf5d7cf7f8cb4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 3 Mar 2014 23:50:04 -0800 Subject: Rename RTL files and add some basic docs --- docs/css.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index e1af6985e..8baf8f42d 100644 --- a/docs/css.html +++ b/docs/css.html @@ -3345,3 +3345,28 @@ a { Bootstrap for Sass

    + + + + +
    +

    RTL

    +

    As of Bootstrap 3.2, a right-to-left version of Bootstrap ships as part of the repository. It's powered by Twitter's CSS Flip project and is generated via our Gruntfile.

    + +

    How to use

    +

    Bootstrap is by default a left-to-right project. For right-to-left projects, you'll need to set your language and replace the default Bootstrap CSS with an RTL version. First, set your language and text direction:

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

    Then, include the right-to-left CSS file in place of the default Bootstrap CSS:

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

    Alternatively, you may use the minified RTL file, bootstrap-rtl.min.css.

    + +

    CSS Flip

    +

    CSS Flip is a project for converting left-to-right CSS files into right-to-left CSS files. We use it in our Gruntfile to automate the generation of Bootstrap's RTL CSS files.

    +
    -- cgit v1.2.3 From a0ac99efbf201f03106f392bce7045d8563064d9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Mar 2014 14:48:52 -0800 Subject: docs for #12873 --- docs/css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 8baf8f42d..614b74050 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1984,8 +1984,8 @@ For example, <section> should be wrapped as inline.

    With optional icons

    You can also add optional feedback icons with the addition of .has-feedback and the right icon.

    -

    Icons and input groups

    -

    When using the feedback icons, be aware that manual positioning may be required for input groups with an add-on on the right. Adjust the right: 0; to an appropriate pixel value depending on the width of your addon.

    +

    Icons, labels, and input groups

    +

    Manual positioning of feedback icons is required for input groups with an add-on on the right and inputs without a label. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon. For labels, adjust the topvalue.

    -- cgit v1.2.3 From e418377b119cbe8604370adcc17ab3de76b2a415 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Mar 2014 15:16:38 -0800 Subject: Fixes #12697: Document readonly inputs --- docs/css.html | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 614b74050..9af1eeffc 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1878,7 +1878,7 @@ For example, <section> should be wrapped as inline.

    Disabled inputs

    -

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

    +

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

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

    Readonly inputs

    +

    Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

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

    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.

    -- cgit v1.2.3 From af5a2197183754629a8ff09c23b043c3c9711a1f Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 5 Mar 2014 14:17:20 -0800 Subject: fix #12936 --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 9af1eeffc..bbfb515aa 100644 --- a/docs/css.html +++ b/docs/css.html @@ -3179,7 +3179,7 @@ a { {% endhighlight %}

    If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.

    {% highlight scss %} -#gradient > .striped(#333; #000; 45deg); +#gradient > .striped(#333; 45deg); {% endhighlight %}

    Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:

    {% highlight scss %} -- cgit v1.2.3 From 705ff7f2275ca823f71ca8dfba27a3b68119a2a4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 6 Mar 2014 23:18:13 -0800 Subject: Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs --- docs/css.html | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 3f9fd2061..bbfb515aa 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2570,22 +2570,6 @@ For example, <section> should be wrapped as inline. .heading { .text-hide(); } -{% endhighlight %} - - -

    Embeds responsive

    -

    Allows browsers to determine videos or slideshow dimensions based on the width of their containing block to create an intrinsic ratio that will properly scale on any device.

    -

    Rules are directly apply to <iframe>, <embed> and <object> elements, optionally use of an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

    -{% highlight html %} - -
    - -
    - - -
    - -
    {% endhighlight %}
    -- cgit v1.2.3 From cb7eb674accd24b6b73f26ef23cf4a301b6ebfaf Mon Sep 17 00:00:00 2001 From: Bas Bosman Date: Sat, 22 Feb 2014 11:17:58 +0100 Subject: Add autoprefixer --- docs/css.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index bbfb515aa..9cd635cd7 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2972,6 +2972,7 @@ a {

    Box-sizing

    Reset your components' box model with a single mixin. For context, see this helpful article from Mozilla.

    +

    The mixin is deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

    {% highlight scss %} .box-sizing(@box-model) { -webkit-box-sizing: @box-model; // Safari <= 5 @@ -3014,6 +3015,7 @@ a {

    Transitions

    Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

    +

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    {% highlight scss %} .transition(@transition) { -webkit-transition: @transition; @@ -3041,6 +3043,7 @@ a {

    Transformations

    Rotate, scale, translate (move), or skew any object.

    +

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    {% highlight scss %} .rotate(@degrees) { -webkit-transform: rotate(@degrees); @@ -3097,6 +3100,7 @@ a {

    Animations

    A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.

    +

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    {% highlight scss %} .animation(@animation) { -webkit-animation: @animation; @@ -3143,8 +3147,7 @@ a {

    Provide context for form controls within each field.

    {% highlight scss %} .placeholder(@color: @input-color-placeholder) { - &:-moz-placeholder { color: @color; } // Firefox 4-18 - &::-moz-placeholder { color: @color; } // Firefox 19+ + &::-moz-placeholder { color: @color; } // Firefox &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome } -- cgit v1.2.3 From d1d5d9041365c92b5e5577d2133a26fe509223e8 Mon Sep 17 00:00:00 2001 From: mrmrs Date: Fri, 7 Mar 2014 00:10:46 -0800 Subject: Fixes #12748 --- docs/css.html | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 67 insertions(+), 3 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 9cd635cd7..6d14fbb0d 100644 --- a/docs/css.html +++ b/docs/css.html @@ -718,9 +718,54 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

    Built with Less

    The typographic scale is based on two Less variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

    + +

    Inline text elements

    +

    Marked text

    +

    For indicating blocks of text that have been deleted use the <mark> tag.

    +
    +

    You can use the mark tag to highlight text.

    +
    +{% highlight html %} +This line of text is meant to be treated as deleted text. +{% endhighlight %} + + +

    Deleted text

    +

    For indicating blocks of text that have been deleted use the <del> tag.

    +
    +

    This line of text is meant to be treated as deleted text.

    +
    +{% highlight html %} +This line of text is meant to be treated as deleted text. +{% endhighlight %} + +

    Strikethrough text

    +

    For indicating blocks of text that are no longer relevant use the <s> tag.

    +
    +

    This line of text is meant to be treated as no longer accurate.

    +
    +{% highlight html %} +This line of text is meant to be treated as no longer accurate. +{% endhighlight %} + +

    Inserted text

    +

    For indicating additions to the document use the <ins> tag.

    +
    +

    This line of text is meant to be treated as an addition to the document.

    +
    +{% highlight html %} +This line of text is meant to be treated as an addition to the document. +{% endhighlight %} + +

    Underlined text

    +

    To underline text use the <u> tag.

    +
    +

    This line of text is will render as underlined

    +
    +{% highlight html %} +This line of text is will render as underlined +{% endhighlight %} - -

    Emphasis

    Make use of HTML's default emphasis tags with lightweight styles.

    Small text

    @@ -757,7 +802,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

    Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

    -

    Alignment classes

    +

    Alignment classes

    Easily realign text to components with text alignment classes.

    Left aligned text.

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

    You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

    +

    Variables

    +

    For indicating variables use the <var> tag.

    +
    +

    y = mx + b

    + +
    +{% highlight html %} +y = mx + b +{% endhighlight %} + +

    Sample output

    +

    For indicating blocks sample output from a program use the <samp> tag.

    +
    +

    This text is meant to be treated as sample output from a computer program.

    +
    +{% highlight html %} +This text is meant to be treated as sample output from a computer program. +{% endhighlight %}
    +
    -- cgit v1.2.3 From acdc053ee3f17ce10088b146d7b154e609240d3c Mon Sep 17 00:00:00 2001 From: Bas Bosman Date: Fri, 7 Mar 2014 11:20:31 +0100 Subject: Add transition-timing-function mixin to docs --- docs/css.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 6d14fbb0d..fea9711eb 100644 --- a/docs/css.html +++ b/docs/css.html @@ -3078,7 +3078,7 @@ a { {% endhighlight %}

    Transitions

    -

    Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

    +

    Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    {% highlight scss %} .transition(@transition) { @@ -3097,6 +3097,10 @@ a { -webkit-transition-duration: @transition-duration; transition-duration: @transition-duration; } +.transition-timing-function(@timing-function) { + -webkit-transition-timing-function: @timing-function; + transition-timing-function: @timing-function; +} .transition-transform(@transition) { -webkit-transition: -webkit-transform @transition; -moz-transition: -moz-transform @transition; -- cgit v1.2.3