From 1802cedbc11d9468705e9289297616f785e33a8d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 31 Jan 2014 13:12:31 -0800 Subject: Use scss option instead of css for better highlighting --- docs/css.html | 76 +++++++++++++++++++++++++++++------------------------------ 1 file changed, 38 insertions(+), 38 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 0f2d79c27..b4eaabe9b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -89,7 +89,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Media queries

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

-{% highlight css %} +{% highlight scss %} /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ @@ -103,7 +103,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e @media (min-width: @screen-lg-min) { ... } {% endhighlight %}

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

-{% highlight css %} +{% highlight scss %} @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @@ -449,7 +449,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Variables

Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

-{% highlight css %} +{% highlight scss %} @grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px; @@ -457,7 +457,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

-{% highlight css %} +{% highlight scss %} // Creates a wrapper for a series of columns .make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns @@ -593,7 +593,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.

-{% highlight css %} +{% highlight scss %} .wrapper { .make-row(); } @@ -2433,7 +2433,7 @@ For example, <section> should be wrapped as inline.
...
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Classes .pull-left { float: left !important; @@ -2462,7 +2462,7 @@ For example, <section> should be wrapped as inline. {% highlight html %}
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Classes .center-block { display: block; @@ -2483,7 +2483,7 @@ For example, <section> should be wrapped as inline.
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Mixin itself .clearfix() { &:before, @@ -2511,7 +2511,7 @@ For example, <section> should be wrapped as inline.
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Classes .show { display: block !important; @@ -2539,7 +2539,7 @@ For example, <section> should be wrapped as inline. {% highlight html %} Skip to main content {% endhighlight %} -{% highlight css %} +{% highlight scss %} // Usage as a Mixin .skip-navigation { .sr-only(); @@ -2552,7 +2552,7 @@ For example, <section> should be wrapped as inline. {% highlight html %}

Custom heading

{% endhighlight %} - {% highlight css %} + {% highlight scss %} // Usage as a Mixin .heading { .text-hide(); @@ -2821,7 +2821,7 @@ For example, <section> should be wrapped as inline.
-{% highlight css %} +{% highlight scss %} @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @@ -2838,7 +2838,7 @@ For example, <section> should be wrapped as inline.
-{% highlight css %} +{% highlight scss %} @brand-primary: #428bca; @brand-success: #5cb85c; @brand-info: #5bc0de; @@ -2847,7 +2847,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

Use any of these color variables as they are or reassign them to more meaningful variables for your project.

-{% highlight css %} +{% highlight scss %} // Use as-is .masthead { background-color: @brand-primary; @@ -2862,7 +2862,7 @@ For example, <section> should be wrapped as inline.

Scaffolding

A handful of variables for quickly customizing key elements of your site's skeleton.

-{% highlight css %} +{% highlight scss %} // Scaffolding @body-bg: #fff; @text-color: @black-50; @@ -2870,7 +2870,7 @@ For example, <section> should be wrapped as inline.

Easily style your links with the right color with only one value.

-{% highlight css %} +{% highlight scss %} // Variables @link-color: @brand-primary; @link-color-hover: darken(@link-color, 15%); @@ -2890,7 +2890,7 @@ a {

Typography

Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.

-{% highlight css %} +{% highlight scss %} @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @@ -2918,14 +2918,14 @@ a {

Icons

Two quick variables for customizing the location and filename of your icons.

-{% highlight css %} +{% highlight scss %} @icon-font-path: "../fonts/"; @icon-font-name: "glyphicons-halflings-regular"; {% endhighlight %}

Components

Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.

-{% highlight css %} +{% highlight scss %} @padding-base-vertical: 6px; @padding-base-horizontal: 12px; @@ -2959,7 +2959,7 @@ a {

Box-sizing

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

-{% highlight css %} +{% highlight scss %} .box-sizing(@box-model) { -webkit-box-sizing: @box-model; // Safari <= 5 -moz-box-sizing: @box-model; // Firefox <= 19 @@ -2969,7 +2969,7 @@ a {

Rounded corners

Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.

-{% highlight css %} +{% highlight scss %} .border-top-radius(@radius) { border-top-right-radius: @radius; border-top-left-radius: @radius; @@ -2992,7 +2992,7 @@ a {

If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.

The mixin is deprecated as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.

-{% highlight css %} +{% highlight scss %} .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; @@ -3001,7 +3001,7 @@ a {

Transitions

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

-{% highlight css %} +{% highlight scss %} .transition(@transition) { -webkit-transition: @transition; transition: @transition; @@ -3028,7 +3028,7 @@ a {

Transformations

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

-{% highlight css %} +{% highlight scss %} .rotate(@degrees) { -webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees); // IE9 only @@ -3084,7 +3084,7 @@ a {

Animations

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

-{% highlight css %} +{% highlight scss %} .animation(@animation) { -webkit-animation: @animation; animation: @animation; @@ -3117,7 +3117,7 @@ a {

Opacity

Set the opacity for all browsers and provide a filter fallback for IE8.

-{% highlight css %} +{% highlight scss %} .opacity(@opacity) { opacity: @opacity; // IE8 filter @@ -3128,7 +3128,7 @@ a {

Placeholder text

Provide context for form controls within each field.

-{% highlight css %} +{% highlight scss %} .placeholder(@color: @input-color-placeholder) { &:-moz-placeholder { color: @color; } // Firefox 4-18 &::-moz-placeholder { color: @color; } // Firefox 19+ @@ -3139,7 +3139,7 @@ a {

Columns

Generate columns via CSS within a single element.

-{% highlight css %} +{% highlight scss %} .content-columns(@width; @count; @gap) { -webkit-column-width: @width; -moz-column-width: @width; @@ -3155,21 +3155,21 @@ a {

Gradients

Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.

-{% highlight css %} +{% highlight scss %} #gradient > .vertical(#333; #000); #gradient > .horizontal(#333; #000); #gradient > .radial(#333; #000); {% endhighlight %}

You can also specify the angle of a standard two-color, linear gradient:

-{% highlight css %} +{% highlight scss %} #gradient > .directional(#333; #000; 45deg); {% 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 css %} +{% highlight scss %} #gradient > .striped(#333; #000; 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 css %} +{% highlight scss %} #gradient > .vertical-three-colors(#777; #333; .25; #000); #gradient > .horizontal-three-colors(#777; #333; .25; #000); {% endhighlight %} @@ -3181,7 +3181,7 @@ a {

Clearfix

Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallager.

-{% highlight css %} +{% highlight scss %} // Mixin .clearfix() { &:before, @@ -3202,7 +3202,7 @@ a {

Horizontal centering

Quickly center any element within its parent. Requires width or max-width to be set.

-{% highlight css %} +{% highlight scss %} // Mixin .center-block() { display: block; @@ -3219,7 +3219,7 @@ a {

Sizing helpers

Specify the dimensions of an object more easily.

-{% highlight css %} +{% highlight scss %} // Mixins .size(@width; @height) { width: @width; @@ -3236,7 +3236,7 @@ a {

Resizable textareas

Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).

-{% highlight css %} +{% highlight scss %} .resizable(@direction: both) { // Options: horizontal, vertical, both resize: @direction; @@ -3247,7 +3247,7 @@ a {

Truncating text

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

-{% highlight css %} +{% highlight scss %} // Mixin .text-truncate() { overflow: hidden; @@ -3265,7 +3265,7 @@ a {

Retina images

Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

-{% highlight css %} +{% highlight scss %} .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}"); -- cgit v1.2.3 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 d6f25e13ec4389fcb94ef16cd13eacf4d5aa173b Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 1 Feb 2014 00:26:46 -0800 Subject: mv .img-responsive docs from Overview to Images section --- docs/css.html | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index b4eaabe9b..2a2d50097 100644 --- a/docs/css.html +++ b/docs/css.html @@ -31,12 +31,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

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

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 %} -Responsive image {% endhighlight %} @@ -2337,6 +2331,13 @@ For example, <section> should be wrapped as inline.

Images

+

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 %} +Responsive image +{% endhighlight %} + +

Image shapes

Add classes to an <img> element to easily style images in any project.

Cross-browser compatibility

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

Responsive images

-

Looking for how to make images more responsive? Check out the responsive images section up top.

-
-- 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