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.

+ +

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