From 3c880e681d49ade20f1b9fcbfb573172d24b3b89 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 13:30:33 -0700 Subject: finish up second pass through docs nav, headings, organization, naming, etc (another run through at #9710) --- css.html | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 305d9f78c..ad48dcb09 100644 --- a/css.html +++ b/css.html @@ -15,7 +15,7 @@ base_url: "../"

Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.

-

HTML5 doctype required

+

HTML5 doctype

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

{% highlight html %} @@ -51,10 +51,10 @@ base_url: "../"

These styles can be found within scaffolding.less.

-

Normalize reset

+

Normalize

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

-

Centering with container

+

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.

{% highlight html %}
@@ -249,7 +249,7 @@ base_url: "../"
{% endhighlight %} -

Example: Combining mobile with desktop

+

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

@@ -287,7 +287,7 @@ base_url: "../"
{% endhighlight %} -

Example: Mobile, tablet, and desktop

+

Example: Mobile, tablet, desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

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

Optional classes

-

Add any of the following classes to the .table base class.

- -

Striped

+

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

@@ -1108,7 +1105,8 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Bordered

+ +

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

@@ -1152,7 +1150,8 @@ For example, <section> should be wrapped as inline.
{% endhighlight %} -

Hover rows

+ +

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

@@ -1192,7 +1191,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Condensed

+

Condensed table

Add .table-condensed to make tables more compact by cutting cell padding in half.

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

Contextual table classes

+

Contextual classes

Use contextual classes to color table rows or individual cells.

@@ -1406,7 +1405,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Inline form

+

Inline form

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

Requires custom widths

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

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.

@@ -1513,7 +1513,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Supported form controls

+

Supported controls

Examples of standard form controls supported in an example form layout.

Inputs

@@ -1647,8 +1647,8 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Static text in horizontal forms

-

When you need to place regular, static text next to a form label within a horizontal form, use the .form-control-static class on a <p>.

+

Static control

+

When you need to place plain text next to a form label within a horizontal form, use the .form-control-static class on a <p>.

@@ -1681,7 +1681,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Form control states

+

Form states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

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

Buttons

-

Button options

+

Options

Use any of the available button classes to quickly create a styled button.

@@ -1907,7 +1907,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Button sizes

+

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

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

-

Using multiple tags

+

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Link -- cgit v1.2.3 From 2a4bd786edd2c03d576f9300d322b1e45cc14d3b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 14:09:35 -0700 Subject: more accurate grid classes in examples --- css.html | 150 +++++++++++++++++++++++++++++++-------------------------------- 1 file changed, 75 insertions(+), 75 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index ad48dcb09..b8403fa6f 100644 --- a/css.html +++ b/css.html @@ -192,60 +192,60 @@ base_url: "../"

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.

-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
-
8
-
4
+
.col-md-8
+
.col-md-4
-
4
-
4
-
4
+
.col-md-4
+
.col-md-4
+
.col-md-4
-
6
-
6
+
.col-md-6
+
.col-md-6
{% highlight html %}
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
+
.col-md-1
-
8
-
4
+
.col-md-8
+
.col-md-4
-
4
-
4
-
4
+
.col-md-4
+
.col-md-4
+
.col-md-4
-
6
-
6
+
.col-md-6
+
.col-md-6
{% endhighlight %} @@ -253,37 +253,37 @@ base_url: "../"

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

-
8
-
4
+
.col-xs-12 col-md-8
+
.col-xs-6 .col-md-4
-
4
-
4
-
4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
-
6
-
6
+
.col-xs-6
+
.col-xs-6
{% highlight html %}
-
8
-
4
+
.col-xs-12 col-md-8
+
.col-xs-6 .col-md-4
-
4
-
4
-
4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
-
6
-
6
+
.col-xs-6
+
.col-xs-6
{% endhighlight %} @@ -348,28 +348,28 @@ base_url: "../"

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

-
4
-
4 offset 4
-
+
.col-md-4
+
.col-md-4 .col-md-offset-4
+
-
3 offset 3
-
3 offset 3
-
+
.col-md-3 .col-md-offset-3
+
.col-md-3 .col-md-offset-3
+
-
6 offset 3
-
+
.col-md-6 .col-md-offset-3
+
{% highlight html %}
-
...
-
...
+
.col-md-4
+
.col-md-4 .col-md-offset-4
-
3 offset 3
-
3 offset 3
+
.col-md-3 .col-md-offset-3
+
.col-md-3 .col-md-offset-3
-
...
+
.col-md-6 .col-md-offset-3
{% endhighlight %} @@ -378,13 +378,13 @@ base_url: "../"

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.

- Level 1: 9 columns + Level 1: .col-md-9
- Level 2: 6 columns + Level 2: .col-md-6
- Level 2: 6 columns + Level 2: .col-md-6
@@ -392,13 +392,13 @@ base_url: "../" {% highlight html %}
- Level 1: 9 columns + Level 1: .col-md-9
- Level 2: 6 columns + Level 2: .col-md-6
- Level 2: 6 columns + Level 2: .col-md-6
@@ -408,14 +408,14 @@ base_url: "../"

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

-
9
-
3
+
.col-md-9 .col-md-push-3
+
.col-md-3 .col-md-pull-9
{% highlight html %}
-
9
-
3
+
.col-md-9 .col-md-push-3
+
.col-md-3 .col-md-pull-9
{% endhighlight %} -- cgit v1.2.3 From 6fe1264a8088bf627fc61d639e59acc65126c41c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 14:11:05 -0700 Subject: mo betta heading examples labels --- css.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index b8403fa6f..64b7b1d5e 100644 --- a/css.html +++ b/css.html @@ -607,27 +607,27 @@ base_url: "../"
- + - + - + - + - + - + -- cgit v1.2.3 From 903e92a3272420de058b2fdf8d301e4d06e3188c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 14:15:14 -0700 Subject: Update helper classes to reflect changes and mention mixins --- css.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 64b7b1d5e..dd576df06 100644 --- a/css.html +++ b/css.html @@ -2070,29 +2070,29 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

.pull-left

-

Float an element left

+

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

{% highlight html %}
...
{% endhighlight %} {% highlight css %} .pull-left { - float: left; + float: left !important; } {% endhighlight %}

.pull-right

-

Float an element right

+

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

{% highlight html %}
...
{% endhighlight %} {% highlight css %} .pull-right { - float: right; + float: right !important; } {% endhighlight %}

.clearfix

-

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

+

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

{% highlight html %}
...
{% endhighlight %} -- cgit v1.2.3

Bootstrap heading

h1. Bootstrap heading

 Semibold 38px

Bootstrap heading

h2. Bootstrap heading

 Semibold 32px

Bootstrap heading

h3. Bootstrap heading

 Semibold 24px

Bootstrap heading

h4. Bootstrap heading

 Semibold 18px
Bootstrap heading
h5. Bootstrap heading
 Semibold 14px
Bootstrap heading
h6. Bootstrap heading
 Semibold 12px