From 424dd8bc118b36c9173dbdc05661086c8566fd17 Mon Sep 17 00:00:00 2001 From: Thomas Park Date: Mon, 19 Aug 2013 20:05:19 -0400 Subject: update bootstrap to 3.0.0 final --- bower_components/bootstrap/css.html | 390 +++++++++++++++++++++++++----------- 1 file changed, 269 insertions(+), 121 deletions(-) (limited to 'bower_components/bootstrap/css.html') diff --git a/bower_components/bootstrap/css.html b/bower_components/bootstrap/css.html index ad48dcb0..f976d229 100755 --- a/bower_components/bootstrap/css.html +++ b/bower_components/bootstrap/css.html @@ -65,27 +65,13 @@ base_url: "../" - -
-
-

Glyphicons

-
-

With the launch of Bootstrap 3, icons have been moved to a separate repository. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.

-

- Visit Glyphicons for Bootstrap or download from GitHub -

-
- - -

Grid system

-

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.

+

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.

Media queries

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

@@ -112,8 +98,8 @@ base_url: "../"

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

-
- +
+
@@ -144,9 +130,9 @@ base_url: "../" - - - + + + @@ -192,60 +178,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 +239,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 +334,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 +364,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 +378,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 +394,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 %} @@ -607,27 +593,27 @@ base_url: "../"
Max container width None (auto)720px940px1140px750px970px1170px
Class prefix
- - + + - - + + - + - + - + - + @@ -920,7 +906,7 @@ base_url: "../" {% endhighlight %}

Inline

-

Place all list items on a single line with inline-block and some light padding.

+

Place all list items on a single line with display: inline-block; and some light padding.

  • Lorem ipsum
    • @@ -1231,11 +1217,10 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

    Contextual classes

    Use contextual classes to color table rows or individual cells.

    -
    -

Bootstrap heading

Semibold 38px

h1. Bootstrap heading

Semibold 36px

Bootstrap heading

Semibold 32px

h2. Bootstrap heading

Semibold 30px

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
+
+
@@ -1346,6 +1331,108 @@ For example, <section> should be wrapped as inline. {% endhighlight %} + +

Responsive tables

+

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
+
+
+{% highlight html %} +
+ + ... +
+
+{% endhighlight %} + @@ -2070,29 +2157,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 %} @@ -2129,9 +2216,12 @@ For example, <section> should be wrapped as inline.

Responsive utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

+

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.

-

Responsive classes

-
+ +

Available classes

+

Use a single or combination of the available classes for toggling content across viewport breakpoints.

+
@@ -2217,8 +2307,10 @@ For example, <section> should be wrapped as inline.
-

Print classes

-
+ +

Print classes

+

Similar to the regular responsive classes, use these for toggling content for print.

+
@@ -2242,12 +2334,11 @@ For example, <section> should be wrapped as inline.
-

When to use

-

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning display: none; or display: block;. Use with inline and table elements is currently not supported.

-

Test case

+

Test cases

Resize your browser or load on different devices to test the responsive utility classes.

-

Visible on...

+ +

Visible on...

Green checkmarks indicate the element is visible in your current viewport.

@@ -2268,7 +2359,36 @@ For example, <section> should be wrapped as inline. ✔ Visible on large
-

Hidden on...

+
+
+ + ✔ Visible on x-small and small +
+
+ + ✔ Visible on medium and large +
+
+
+ + ✔ Visible on x-small and medium +
+
+ + ✔ Visible on small and large +
+
+
+ + ✔ Visible on x-small and large +
+
+ + ✔ Visible on small and medium +
+
+ +

Hidden on...

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

@@ -2289,5 +2409,33 @@ For example, <section> should be wrapped as inline.
+
+
+ Extra small and small + +
+
+ Medium and large + +
+
+
+ Extra small and medium + +
+
+ Small and large + +
+
+
+ Extra small and large + +
+
+ Small and medium + +
+
-- cgit v1.2.3