From bb50e33a3068cd0e25f3411b59d66d3bd6751e66 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 6 Oct 2013 16:17:32 -0700 Subject: fix #10961 --- css.html | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index b34cb4b92..cc232af37 100644 --- a/css.html +++ b/css.html @@ -424,7 +424,7 @@ base_url: "../" // Then clear the floated columns .clearfix(); - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } @@ -462,7 +462,7 @@ base_url: "../" padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -470,17 +470,17 @@ base_url: "../" // Generate the small column offsets .make-sm-column-offset(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { right: percentage((@columns / @grid-columns)); } } @@ -495,7 +495,7 @@ base_url: "../" padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -503,17 +503,17 @@ base_url: "../" // Generate the medium column offsets .make-md-column-offset(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-md-column-push(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { left: percentage((@columns / @grid-columns)); } } .make-md-column-pull(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { right: percentage((@columns / @grid-columns)); } } @@ -528,7 +528,7 @@ base_url: "../" padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -536,17 +536,17 @@ base_url: "../" // Generate the large column offsets .make-lg-column-offset(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-lg-column-push(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { left: percentage((@columns / @grid-columns)); } } .make-lg-column-pull(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { right: percentage((@columns / @grid-columns)); } } -- cgit v1.2.3 From a8afb4668802aaba50ca90e5862d91a750d90dc6 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 6 Oct 2013 20:18:03 -0700 Subject: document .h1 thru .h6; fixes part of #10102 --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index b34cb4b92..b808e0b9b 100644 --- a/css.html +++ b/css.html @@ -587,7 +587,7 @@ base_url: "../"

Headings

-

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

+

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

-- cgit v1.2.3 From 969cb04acbdd1b5835acc203675c10ec2ba98c2c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 7 Oct 2013 15:00:46 -0500 Subject: Fixes #10126: Update responsive test cases to properly highlight hidden class examples --- css.html | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 904fdaab4..69f1c4c50 100644 --- a/css.html +++ b/css.html @@ -2570,52 +2570,52 @@ For example, <section> should be wrapped as inline.

Hidden on...

-

Here, green checkmarks indicate the element is hidden in your current viewport.

+

Here, green checkmarks also indicate the element is hidden in your current viewport.

- Extra small - + + ✔ Hidden on x-small
- Small - + + ✔ Hidden on small
- Medium - ✔ Hidden on medium + Medium + ✔ Hidden on medium
- Large - + + ✔ Hidden on large
- Extra small and small - + + ✔ Hidden on x-small and small
- Medium and large - + + ✔ Hidden on medium and large
- Extra small and medium - + + ✔ Hidden on x-small and medium
- Small and large - + + ✔ Hidden on small and large
- Extra small and large - + + ✔ Hidden on x-small and large
- Small and medium - + + ✔ Hidden on small and medium
-- cgit v1.2.3 From 12fa502e67df45d27e151fd51b5a497489232626 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 15:23:58 -0700 Subject: Document caret /cc #10102 --- css.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 69f1c4c50..d884c765e 100644 --- a/css.html +++ b/css.html @@ -72,6 +72,13 @@ base_url: "../"

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

+

How it works

+

Grid systems are great for building easy to use and maintain web pages. In the most basic implementation, you create rows of columns to house your content. Bootstrap's grid system enables this in two ways: predefined CSS classes and LESS mixins. In both cases, the following guidelines apply.

+
    +
  • Create a .row to house your columns. No content should be placed directly within a row, only in columns.
    • +
  • Each column is created by specifying the number of available grid columns you'd like to span. By default, we have 12 columns. For an even layout, you'd create two columns, each spanning six columns.
    • +
+

Media queries

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

{% highlight css %} @@ -2258,6 +2265,16 @@ For example, <section> should be wrapped as inline. {% endhighlight %} +

Carets

+

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

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

Quick floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

{% highlight html %} -- cgit v1.2.3 From be1f0b07f3b8d0b78a7e07f624f111c02789c2b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 16:02:56 -0700 Subject: mention .small in docs /cc #10102 --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index d884c765e..f6eb86c53 100644 --- a/css.html +++ b/css.html @@ -634,7 +634,7 @@ base_url: "../"
h6. Bootstrap heading
{% endhighlight %} -

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

+

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

-- cgit v1.2.3 From 49f177fe6034c00242705a2f02b29758aaf96879 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 17:12:04 -0700 Subject: finish grid docs intro for now; needs work though --- css.html | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index f6eb86c53..f8b801ea7 100644 --- a/css.html +++ b/css.html @@ -72,12 +72,15 @@ base_url: "../"

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

-

How it works

-

Grid systems are great for building easy to use and maintain web pages. In the most basic implementation, you create rows of columns to house your content. Bootstrap's grid system enables this in two ways: predefined CSS classes and LESS mixins. In both cases, the following guidelines apply.

+

Introduction

+

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

    -
  • Create a .row to house your columns. No content should be placed directly within a row, only in columns.
    • -
  • Each column is created by specifying the number of available grid columns you'd like to span. By default, we have 12 columns. For an even layout, you'd create two columns, each spanning six columns.
    • +
  • Use rows to create horizontal groups of columns.
    • +
  • Content should be placed within columns, and only columns may be immediate children of rows.
    • +
  • 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.
    • +
  • 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.
+

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

Media queries

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

-- cgit v1.2.3 From 727a91de1cdf5cbc4f25528e073480332a5940c5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 17:25:27 -0700 Subject: another grid .row mention --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index f8b801ea7..e0828c6ff 100644 --- a/css.html +++ b/css.html @@ -185,7 +185,7 @@ base_url: "../"

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.

+

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.

.col-md-1
-- cgit v1.2.3 From 2d1fa8cb5bdb61043b1abad5497ce2c74764106e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 18:54:15 -0700 Subject: mention .invisible in docs per #10102 --- css.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index e0828c6ff..653ede7cc 100644 --- a/css.html +++ b/css.html @@ -2357,7 +2357,8 @@ For example, <section> should be wrapped as inline.

Showing and hiding content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

-

.hide is also available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

+

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

+

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

{% highlight html %}
...
@@ -2371,6 +2372,9 @@ For example, <section> should be wrapped as inline. display: none !important; visibility: hidden !important; } +.invisible { + visibility: hidden; +} // Usage as mixins .element { -- cgit v1.2.3 From ed12d41caed288b47f1f225115503d3086d69e6a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 19:10:17 -0700 Subject: add docs example for #10938 to show responsive column clearing in grid --- css.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 653ede7cc..63cd74b1d 100644 --- a/css.html +++ b/css.html @@ -314,6 +314,22 @@ base_url: "../"

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

+
+
+
+ .col-xs-6 .col-sm-3 +
+ Resize your viewport or check it out on your phone for an example. +
+
.col-xs-6 .col-sm-3
+ + +
+ +
.col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
+
+
{% highlight html %}
.col-xs-6 .col-sm-3
-- cgit v1.2.3 From bf4c7148513920f25a5c086fdf2091d06683f2ce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 19:12:23 -0700 Subject: follow up to #10102, cc @cvrebert --- css.html | 1 + 1 file changed, 1 insertion(+) (limited to 'css.html') diff --git a/css.html b/css.html index 63cd74b1d..e7c4debc8 100644 --- a/css.html +++ b/css.html @@ -721,6 +721,7 @@ base_url: "../"

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

+

You may alternatively use an inline element with .small in place of any <small>

This line of text is meant to be treated as fine print.

-- cgit v1.2.3 From 950453db43f02d7d8dc653427f77317639cf0874 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 19:31:39 -0700 Subject: mention rows must be in containers in grid docs --- css.html | 1 + 1 file changed, 1 insertion(+) (limited to 'css.html') diff --git a/css.html b/css.html index e7c4debc8..9a5e56cf9 100644 --- a/css.html +++ b/css.html @@ -75,6 +75,7 @@ base_url: "../"

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

    +
  • Rows must be placed within a .container for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • 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.
    • -- cgit v1.2.3 From f660bd42052949124a2c3342dadcdb12fd979f02 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 19:36:39 -0700 Subject: clarify more grid stuff, specifically 100% fluid designs; fixes #10711 --- css.html | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 9a5e56cf9..12032c497 100644 --- a/css.html +++ b/css.html @@ -79,10 +79,16 @@ base_url: "../"
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • 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.

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 css %} -- cgit v1.2.3 From 96a19c18fbef89a4f4ae261ae78e7fc26e9d2dd8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Oct 2013 14:47:27 -0700 Subject: copy change, add to buttons anchor section --- css.html | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 12032c497..1eea9152b 100644 --- a/css.html +++ b/css.html @@ -2216,6 +2216,10 @@ For example, <section> should be wrapped as inline.

Link functionality not impacted

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

+
+

Context-specific usage

+

While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

+

Button tags

-- cgit v1.2.3 From 54cd0f8c2f1aaadefd8447f9ff4cd9bb04fe4e72 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 23 Oct 2013 23:41:17 -0700 Subject: rm dummy 'src' attributes of s & squelch validator warning; fixes #11216 --- css.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 1eea9152b..3542f87c0 100644 --- a/css.html +++ b/css.html @@ -2260,9 +2260,9 @@ For example, <section> should be wrapped as inline.

Keep in mind that Internet Explorer 8 lacks support for rounded corners.

- A generic square placeholder image with rounded corners - A generic square placeholder image where only the portion within the circle circumscribed about said square is visible - A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera + A generic square placeholder image with rounded corners + A generic square placeholder image where only the portion within the circle circumscribed about said square is visible + A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
{% highlight html %} ... -- cgit v1.2.3 From eae1af1d27e585e33dbd2f59d27eaaeda029a3e2 Mon Sep 17 00:00:00 2001 From: Ore Landau Date: Mon, 4 Nov 2013 12:33:43 +0200 Subject: Fixed links Links to same-page anchors were treated as external links. --- css.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 3542f87c0..495092e12 100644 --- a/css.html +++ b/css.html @@ -320,7 +320,7 @@ base_url: "../" {% endhighlight %}

Responsive column resets

-

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

+

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

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

Responsive images

-

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

+

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

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

Showing and hiding content

-

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

+

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

{% highlight html %} -- cgit v1.2.3 From 0da3901ed5a6d498af8b7c76b61d004a003f716b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Fri, 8 Nov 2013 10:30:15 +0100 Subject: Add missing `.small` styles and docs --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 495092e12..c703d1603 100644 --- a/css.html +++ b/css.html @@ -871,7 +871,7 @@ base_url: "../"

Style and content changes for simple variations on a standard <blockquote>.

Naming a source

-

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

+

Add <small> tag or .small class for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-- cgit v1.2.3 From bf62a6241ac6c3d0de4c76d6048b679a7473c20f Mon Sep 17 00:00:00 2001 From: Rakhat Jabagin Date: Thu, 21 Nov 2013 12:03:06 +0600 Subject: add role form for horizontal form example --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 495092e12..054354258 100644 --- a/css.html +++ b/css.html @@ -1617,7 +1617,7 @@ 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.

-
+
-- cgit v1.2.3 From dd05c0e0a729a5601b4eec2bc2116a343b7ccbed Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Dec 2013 13:51:17 -0800 Subject: fixes #11508: mention in docs that inline forms only work at 768px and up --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 692ae38ae..f1679c703 100644 --- a/css.html +++ b/css.html @@ -1567,7 +1567,7 @@ For example, <section> should be wrapped as inline.

Inline form

-

Add .form-inline for left-aligned and inline-block controls for a compact layout.

+

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Requires custom widths

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

-- cgit v1.2.3 From 7a9d9f7dc485bcd624c1e49c99029c9d2d410e11 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 3 Dec 2013 11:22:52 -0800 Subject: account for #11050 in the docs --- css.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index f1679c703..41e785702 100644 --- a/css.html +++ b/css.html @@ -178,13 +178,11 @@ base_url: "../"
- - + - - +
OffsetsN/AYesYes
Column orderingN/AYesYes
-- cgit v1.2.3 From 66f9c7d6d5de97965a119f6d5f4ad1704e8f789d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 4 Dec 2013 21:10:13 -0800 Subject: Fixes #11436: mention in docs that .container isn't nestable; update docs to mention width, not max-width --- css.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 41e785702..ee9d3ec71 100644 --- a/css.html +++ b/css.html @@ -54,7 +54,8 @@ base_url: "../"

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

Containers

-

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

+

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.

{% highlight html %}
... -- cgit v1.2.3 From fe58357df182b52f5905f432a3b2629c717656f1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 11:56:35 -0800 Subject: Fixes #10884: Adds .info variant to contextual table classes --- css.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index ee9d3ec71..c120e3be3 100644 --- a/css.html +++ b/css.html @@ -1327,6 +1327,12 @@ For example, <section> should be wrapped as inline. Indicates a dangerous or potentially negative action + + + .info + + Indicates a neutral informative change or action +
@@ -1383,6 +1389,18 @@ For example, <section> should be wrapped as inline. Column content Column content + + 8 + Column content + Column content + Column content + + + 9 + Column content + Column content + Column content +
@@ -1392,6 +1410,7 @@ For example, <section> should be wrapped as inline. ... ... ... +... @@ -1399,6 +1418,7 @@ For example, <section> should be wrapped as inline. ... ... ... + ... {% endhighlight %} -- cgit v1.2.3 From b1215d1b2ecd6cd3898af19ce43cc647e2ec854a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 12:18:13 -0800 Subject: Fixes #11193: Add kbd element styles to indicate user input via keyboard --- css.html | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index c120e3be3..561ffe448 100644 --- a/css.html +++ b/css.html @@ -1047,7 +1047,7 @@ base_url: "../"

Code

-

Inline

+

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline. @@ -1056,7 +1056,16 @@ base_url: "../" For example, <section> should be wrapped as inline. {% endhighlight %} -

Basic block

+

User input

+

Use the <kbd> to indicate input that is typically entered via keyboard.

+
+ To switch directories, type cd followed the name of the directory. +
+{% highlight html %} + To switch directories, type cd followed the name of the directory. +{% endhighlight %} + +

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
-- cgit v1.2.3 From 6273604601c58284f49b38ae4e52533b9689437c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 20:52:51 -0800 Subject: Add .container-fluid variation for full-width containers and layouts /cc #10711 #9862 --- css.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 561ffe448..321042a77 100644 --- a/css.html +++ b/css.html @@ -76,7 +76,7 @@ base_url: "../"

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

    -
  • Rows must be placed within a .container for proper alignment and padding.
    • +
  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • 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.
    • @@ -249,6 +249,16 @@ base_url: "../"
    .col-md-6
    .col-md-6
+{% endhighlight %} + +

Example: Fluid container

+

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

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

Example: Mobile and desktop

-- cgit v1.2.3 From a3a2525124cacae7c94a9280066cbe6eb6524059 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 Dec 2013 10:52:47 -0800 Subject: Fixes #11837: grid containers are fixed width now, no longer max-width --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 321042a77..9f22ec10d 100644 --- a/css.html +++ b/css.html @@ -145,7 +145,7 @@ base_url: "../" Collapsed to start, horizontal above breakpoints - Max container width + Container width None (auto) 750px 970px -- cgit v1.2.3 From f1869771bc8b8e8a6c7a98385ec58e0bf0d2d98e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Dec 2013 14:18:43 -0800 Subject: Fixes #10505: Document more of LESS vars and mixins --- css.html | 460 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 460 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 9f22ec10d..83e0a7093 100644 --- a/css.html +++ b/css.html @@ -2710,3 +2710,463 @@ For example, <section> should be wrapped as inline.
+ + + + +
+
+

Using LESS

+
+

Bootstrap's CSS is built on LESS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Thosing looking to use the source LESS files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.

+ +

Grid variables and mixins are covered within the Grid system section.

+ + +

Variables

+

Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.

+ +

Colors

+

Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.

+
+
+
+
+
+
+
+
+
+{% highlight css %} +@gray-darker: lighten(#000, 13.5%); // #222 +@gray-dark: lighten(#000, 20%); // #333 +@gray: lighten(#000, 33.5%); // #555 +@gray-light: lighten(#000, 60%); // #999 +@gray-lighter: lighten(#000, 93.5%); // #eee +{% endhighlight %} + +
+
+
+
+
+
+
+
+
+{% highlight css %} +@brand-primary: #428bca; +@brand-success: #5cb85c; +@brand-warning: #f0ad4e; +@brand-danger: #d9534f; +@brand-info: #5bc0de; +{% endhighlight %} + +

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

+{% highlight css %} +// Use as-is +.masthead { + background-color: @brand-primary; +} + +// Reassigned variables in LESS +@alert-message-background: @brand-info; +.alert { + background-color: @alert-message-background; +} +{% endhighlight %} + +

Scaffolding

+

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

+{% highlight css %} +// Scaffolding +@body-background: #fff; +@text-color: @black-50; +{% endhighlight %} + + +

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

+{% highlight css %} +// Variables +@link-color: @brand-primary; +@link-color-hover: darken(@link-color, 15%); + +// Usage +a { + color: @link-color; + text-decoration: none; + + &:hover { + color: @link-color-hover; + text-decoration: underline; + } +} +{% endhighlight %} +

Note that the @link-color-hover uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

+ +

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 as well.

+{% highlight css %} +@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; +@font-family-base: @font-family-sans-serif; + +@font-size-base: 14px; +@font-size-large: ceil((@font-size-base * 1.25)); // ~18px +@font-size-small: ceil((@font-size-base * 0.85)); // ~12px + +@font-size-h1: floor((@font-size-base * 2.6)); // ~36px +@font-size-h2: floor((@font-size-base * 2.15)); // ~30px +@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px +@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px +@font-size-h5: @font-size-base; +@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px + +@line-height-base: 1.428571429; // 20/14 +@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px + +@headings-font-family: inherit; +@headings-font-weight: 500; +@headings-line-height: 1.1; +@headings-color: inherit; +{% endhighlight %} + +

Icons

+

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

+{% highlight css %} +@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 %} +@padding-base-vertical: 6px; +@padding-base-horizontal: 12px; + +@padding-large-vertical: 10px; +@padding-large-horizontal: 16px; + +@padding-small-vertical: 5px; +@padding-small-horizontal: 10px; + +@padding-xs-vertical: 1px; +@padding-xs-horizontal: 5px; + +@line-height-large: 1.33; +@line-height-small: 1.5; + +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; + +@component-active-color: #fff; +@component-active-bg: @brand-primary; + +@caret-width-base: 4px; +@caret-width-large: 5px; +{% endhighlight %}} + + +

Vendor mixins

+

Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixs in your compiled CSS.

+ + +

Box-sizing

+

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

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

Rounded corners

+

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

+{% highlight css %} +.border-top-radius(@radius) { + border-top-right-radius: @radius; + border-top-left-radius: @radius; +} +.border-right-radius(@radius) { + border-bottom-right-radius: @radius; + border-top-right-radius: @radius; +} +.border-bottom-radius(@radius) { + border-bottom-right-radius: @radius; + border-bottom-left-radius: @radius; +} +.border-left-radius(@radius) { + border-bottom-left-radius: @radius; + border-top-left-radius: @radius; +} +{% endhighlight %} + +

Box (Drop) shadows

+

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

+

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

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

Transitions

+

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

+{% highlight css %} +.transition(@transition) { + -webkit-transition: @transition; + transition: @transition; +} +.transition-property(@transition-property) { + -webkit-transition-property: @transition-property; + transition-property: @transition-property; +} +.transition-delay(@transition-delay) { + -webkit-transition-delay: @transition-delay; + transition-delay: @transition-delay; +} +.transition-duration(@transition-duration) { + -webkit-transition-duration: @transition-duration; + transition-duration: @transition-duration; +} +.transition-transform(@transition) { + -webkit-transition: -webkit-transform @transition; + -moz-transition: -moz-transform @transition; + -o-transition: -o-transform @transition; + transition: transform @transition; +} +{% endhighlight %} + +

Transformations

+

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

+{% highlight css %} +.rotate(@degrees) { + -webkit-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); // IE9 only + transform: rotate(@degrees); +} +.scale(@ratio; @ratio-y...) { + -webkit-transform: scale(@ratio, @ratio-y); + -ms-transform: scale(@ratio, @ratio-y); // IE9 only + transform: scale(@ratio, @ratio-y); +} +.translate(@x; @y) { + -webkit-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); // IE9 only + transform: translate(@x, @y); +} +.skew(@x; @y) { + -webkit-transform: skew(@x, @y); + -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ + transform: skew(@x, @y); +} +.translate3d(@x; @y; @z) { + -webkit-transform: translate3d(@x, @y, @z); + transform: translate3d(@x, @y, @z); +} + +.rotateX(@degrees) { + -webkit-transform: rotateX(@degrees); + -ms-transform: rotateX(@degrees); // IE9 only + transform: rotateX(@degrees); +} +.rotateY(@degrees) { + -webkit-transform: rotateY(@degrees); + -ms-transform: rotateY(@degrees); // IE9 only + transform: rotateY(@degrees); +} +.perspective(@perspective) { + -webkit-perspective: @perspective; + -moz-perspective: @perspective; + perspective: @perspective; +} +.perspective-origin(@perspective) { + -webkit-perspective-origin: @perspective; + -moz-perspective-origin: @perspective; + perspective-origin: @perspective; +} +.transform-origin(@origin) { + -webkit-transform-origin: @origin; + -moz-transform-origin: @origin; + -ms-transform-origin: @origin; // IE9 only + transform-origin: @origin; +} +{% endhighlight %} + +

Opacity

+

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

+{% highlight css %} +.opacity(@opacity) { + opacity: @opacity; + // IE8 filter + @opacity-ie: (@opacity * 100); + filter: ~"alpha(opacity=@{opacity-ie})"; +} +{% endhighlight %} + +

Placeholder text

+

Provide context for form controls within each field.

+{% highlight css %} +.placeholder(@color: @input-color-placeholder) { + &:-moz-placeholder { color: @color; } // Firefox 4-18 + &::-moz-placeholder { color: @color; } // Firefox 19+ + &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ + &::-webkit-input-placeholder { color: @color; } // Safari and Chrome +} +{% endhighlight %} + +

Columns

+

Generate columns via CSS within a single element.

+{% highlight css %} +.content-columns(@width; @count; @gap) { + -webkit-column-width: @width; + -moz-column-width: @width; + column-width: @width; + -webkit-column-count: @count; + -moz-column-count: @count; + column-count: @count; + -webkit-column-gap: @gap; + -moz-column-gap: @gap; + column-gap: @gap; +} +{% endhighlight %} + +

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 %} +#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 %} +#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 %} +#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 %} +#gradient > .vertical-three-colors(#777; #333; .25; #000); +#gradient > .horizontal-three-colors(#777; #333; .25; #000); +{% endhighlight %} +

Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using .reset-filter() mixin alignside background-image: none;.

+ + +

Utility mixins

+

Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.

+ +

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 %} +// Mixin +.clearfix() { + &:before, + &:after { + content: " "; + display: table; + } + &:after { + clear: both; + } +} + +// Usage +.container { + .clearfix(); +} +{% endhighlight %} + +

Horizontal centering

+

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

+{% highlight css %} +// Mixin +.center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Usage +.container { + width: 940px; + .center-block(); +} +{% endhighlight %} + +

Sizing helpers

+

Specify the dimensions of an object more easily.

+{% highlight css %} +// Mixins +.size(@width; @height) { + width: @width; + height: @height; +} +.square(@size) { + .size(@size; @size); +} + +// Usage +.image { .size(400px; 300px); } +.avatar { .square(48px); } +{% endhighlight %} + +

Resizable textareas

+

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

+{% highlight css %} +.resizable(@direction: both) { + // Options: horizontal, vertical, both + resize: @direction; + // Safari fix + overflow: auto; +} +{% endhighlight %} + +

Truncating text

+

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

+{% highlight css %} +// Mixin +.text-truncate() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// Usage +.branch-name { + display: inline-block; + max-width: 200px; + .text-truncate(); +} +{% endhighlight %} + +

Retina images

+

Specify two image paths and the @1x image dimensions, and Preboot 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 %} +.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { + background-image: url("@{file-1x}"); + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: url("@{file-2x}"); + background-size: @width-1x @height-1x; + } +} + +// Usage +.jumbotron { + .retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px); +} +{% endhighlight %} +
-- cgit v1.2.3