From 8368cfd523fab964ebd3132e29332b4680cedba5 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Wed, 24 Aug 2011 19:55:11 -0700 Subject: add opera to browser support --- docs/assets/img/browsers.png | Bin 18286 -> 21274 bytes docs/index.html | 3 ++- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/assets/img/browsers.png b/docs/assets/img/browsers.png index e2e1f700f..1598f9896 100644 Binary files a/docs/assets/img/browsers.png and b/docs/assets/img/browsers.png differ diff --git a/docs/index.html b/docs/index.html index 1669e6123..503be111b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -118,12 +118,13 @@

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.

- Tested and supported in Chrome, Safari, Internet Explorer, and Firefox + Tested and supported in Chrome, Safari, Internet Explorer, and Firefox
-- cgit v1.2.3 From 50f484eed6e9161cb7e50531b0fa3f16ada549e0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 02:00:07 -0700 Subject: big update to change the alerts, normal and block level, to have simpler css and new colors independent of the base color scheme --- docs/assets/css/docs.css | 3 +++ docs/index.html | 56 +++++++++++++++++++++++++----------------------- 2 files changed, 32 insertions(+), 27 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b7d241994..8334d3f12 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -13,6 +13,9 @@ body { section { padding-top: 60px; } +section > .row { + margin-bottom: 10px; +} #masthead, #footer { background-color: #049cd9; background-repeat: no-repeat; diff --git a/docs/index.html b/docs/index.html index 503be111b..ebaa5a6f3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1069,22 +1069,23 @@

Basic alerts

+

div.alert

One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

-
+
×

Oh snap! Change this and that and try again.

-
+
×

Holy gaucamole! Best check yo self, you’re not looking too good.

-
+
×

Well done! You successfully read this alert message.

-
+
×

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

@@ -1094,28 +1095,37 @@

Block messages

+

div.alert.alert-block

For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

-
+
×

Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

-

Take this action Or do this

+
+ Take this action Or do this +
-
+
×

Holy gaucamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

-

Take this action Or do this

+
+ Take this action Or do this +
-
+
×

Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

-

Take this action Or do this

+
+ Take this action Or do this +
-
+
×

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

-

Take this action Or do this

+
+ Take this action Or do this +
@@ -1234,7 +1244,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita

What’s included

Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.

-

Color variables

+

Variables

Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.

 // Links
@@ -1258,8 +1268,9 @@ Lorem ipsum dolar sit amet illo error ipsum verita
 @pink:              #c3325f;
 @purple:            #7a43b6;
 
-// Baseline
-@baseline:          20px;
+// Baseline grid
+@basefont:          13px;
+@baseline:          18px;

Commenting

@@ -1311,8 +1322,6 @@ Lorem ipsum dolar sit amet illo error ipsum verita background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 - -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); // IE8+ - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7 background-image: linear-gradient(left, @startColor, @endColor); // Le standard } .vertical (@startColor: #555, @endColor: #333) { @@ -1324,14 +1333,12 @@ Lorem ipsum dolar sit amet illo error ipsum verita background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10 - -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+ - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7 background-image: linear-gradient(@startColor, @endColor); // The standard } .directional (@startColor: #555, @endColor: #333, @deg: 45deg) { ... } - .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { + .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { ... } } @@ -1344,6 +1351,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita @gridColumns: 16; @gridColumnWidth: 40px; @gridGutterWidth: 20px; +@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Grid System .container { @@ -1352,16 +1360,10 @@ Lorem ipsum dolar sit amet illo error ipsum verita .clearfix(); } .columns(@columnSpan: 1) { - display: inline; - float: left; width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); - margin-left: @gridGutterWidth; - &:first-child { - margin-left: 0; - } } .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important; + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; }
-- cgit v1.2.3 From 0e9d7c1c4d9552dda438d6eb5d2f175a99fd4501 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 25 Aug 2011 13:31:46 -0700 Subject: update alert and button styling aproach --- docs/index.html | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'docs') diff --git a/docs/index.html b/docs/index.html index ebaa5a6f3..02dd26e0c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -859,13 +859,17 @@

Buttons

As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

-

All buttons default to a light gray style, but a blue .primary class and a red .danger class is available. Plus, rolling your own styles is easy peasy.

+

All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class. Plus, rolling your own styles is easy peasy.

Example buttons

Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

-    + + + + +

Alternate sizes

Fancy larger or smaller buttons? Have at it!

@@ -1077,15 +1081,15 @@ ×

Oh snap! Change this and that and try again.

-
+
×

Holy gaucamole! Best check yo self, you’re not looking too good.

-
+
×

Well done! You successfully read this alert message.

-
+
×

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

-- cgit v1.2.3 From ce615d016a8ac380dae871358cfc7e745b5e20c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 22:41:45 -0700 Subject: merged in my pending changes from 1.2-wip branch, resolve diffs as best as i could, update docs and alerts to use original classes, updated docs to include smaller section for layouts --- docs/assets/css/docs.css | 4 +- docs/index.html | 121 ++++++++++++++++++++++------------------------- 2 files changed, 58 insertions(+), 67 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 8334d3f12..67a34280b 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -171,7 +171,7 @@ div.mini-layout div { div.mini-layout div.mini-layout-body { background-color: #dceaf4; margin: 0 auto; - width: 450px; + width: 340px; height: 340px; } div.mini-layout.fluid div.mini-layout-sidebar, @@ -185,7 +185,7 @@ div.mini-layout.fluid div.mini-layout-sidebar { height: 340px; } div.mini-layout.fluid div.mini-layout-body { - width: 400px; + width: 300px; margin-left: 10px; } /* Topbar special styles diff --git a/docs/index.html b/docs/index.html index 02dd26e0c..136a0dbcd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -94,7 +94,7 @@

Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.

Bootstrap on GitHub »

-
+
@@ -137,7 +137,7 @@
  • Example page template (more to come soon)
    • -
    +
    @@ -167,7 +167,7 @@ </div>
    -
    +
    1
    1
    @@ -185,7 +185,7 @@
    1
    1
    1
    -
    +
    2
    2
    @@ -195,7 +195,7 @@
    2
    2
    2
    -
    +
    3
    3
    @@ -203,45 +203,45 @@
    3
    3
    1
    -
    +
    4
    4
    4
    4
    -
    +
    4
    6
    6
    -
    +
    8
    8
    -
    +
    5
    11
    -
    +
    16
    -
    +

    Offsetting columns

    4
    8 offset 4
    -
    +
    4 offset 4
    4 offset 4
    -
    +
    5 offset 3
    5 offset 3
    -
    +
    10 offset 6
    -
    + @@ -253,13 +253,10 @@

    Layouts Basic templates to create webpages

    -
    -
    +

    Fixed layout

    -

    A basic 940px wide, centered container layout for just about any site or page.

    -
    -
    +

    The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div.container>.

    @@ -270,16 +267,10 @@ </div> </body> -
    -
    - - -
    -
    +
    +

    Fluid layout

    -

    A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar. Great for apps.

    -
    -
    +

    An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.

    @@ -296,8 +287,8 @@ </div> </body> -
    -
    +
    +
    @@ -360,7 +351,7 @@

    Abbreviations

    For abbreviations and acronyms, use the <abbr> tag (<acronym> is deprecated in HTML5). Put the shorthand form within the tag and set a title for the complete name.

    - +
    @@ -380,7 +371,7 @@ Dr. Julius Hibbert
    - +

    Lists

    @@ -449,7 +440,7 @@
    Etiam porta sem malesuada magna mollis euismod.
    - + @@ -595,7 +586,7 @@ ... </table> - + @@ -616,15 +607,15 @@
    Example form legend
    - +
    - +
    - @@ -634,9 +625,9 @@
    - +
    - @@ -784,7 +775,7 @@
    - +
    @@ -798,15 +789,15 @@
    Example form legend
    - +
    - +
    - @@ -853,7 +844,7 @@
    - +
    @@ -893,7 +884,7 @@  
    - + @@ -993,7 +984,7 @@ </ul> - +
    @@ -1057,7 +1048,7 @@ </div>
    - + @@ -1077,24 +1068,24 @@

    One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

    -
    +
    × -

    Oh snap! Change this and that and try again.

    +

    Holy gaucamole! Best check yo self, you’re not looking too good.

    -
    +
    × -

    Holy gaucamole! Best check yo self, you’re not looking too good.

    +

    Oh snap! Change this and that and try again.

    -
    +
    ×

    Well done! You successfully read this alert message.

    -
    +
    ×

    Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

    -
    +
    @@ -1103,28 +1094,28 @@

    For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

    -
    +
    × -

    Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

    +

    Holy gaucamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    Take this action Or do this
    -
    +
    × -

    Holy gaucamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    +

    Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

    Take this action Or do this
    -
    +
    ×

    Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

    Take this action Or do this
    -
    +
    ×

    Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

    @@ -1132,7 +1123,7 @@
    -
    +
    @@ -1165,7 +1156,7 @@
    -
    +
    @@ -1198,7 +1189,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita
    - +
    @@ -1222,7 +1213,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita
    - + -- cgit v1.2.3 From 0758f64045645849b21164149428719a005da1cb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 22:52:21 -0700 Subject: updated classnames in the docs for the alerts, updated colors on error and info alerts/buttons --- docs/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs') diff --git a/docs/index.html b/docs/index.html index 136a0dbcd..68ae4cf94 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1064,7 +1064,7 @@

    Basic alerts

    -

    div.alert

    +

    div.alert-message

    One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

    @@ -1090,7 +1090,7 @@

    Block messages

    -

    div.alert.alert-block

    +

    div.alert-message.block-message

    For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

    -- cgit v1.2.3 From dd4bb95c2db5db9bb6727147002d916cb86756e6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 23:10:18 -0700 Subject: updated docs for b/i tags based on issue #62 --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/index.html b/docs/index.html index 68ae4cf94..e0c980b8b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -338,7 +338,7 @@

    Emphasis tags (<strong> and <em>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <strong> for importance and <em> for stress emphasis.

    Emphasis in a paragraph

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

    -

    Note: It's still okay to use <b> and <i> tags in HTML5, but they don't come with inherent styles anymore. <b> is meant to highlight words or phrases without conveying additional importance, while <i> is mostly for voice, technical terms, etc.

    +

    Note: It's still okay to use <b> and <i> tags in HTML5 and they don't have to be styled bold and italic, respectively (although if there is a more semantic element, use it). <b> is meant to highlight words or phrases without conveying additional importance, while <i> is mostly for voice, technical terms, etc.

    Addresses

    The <address> element is used for contact information for its nearest ancestor, or the entire body of work. Here’s how it looks:

    -- cgit v1.2.3 From c715584428752c885193b8e72d1b3156eb770aa7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 23:18:15 -0700 Subject: pull table class from docs again --- docs/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs') diff --git a/docs/index.html b/docs/index.html index e0c980b8b..2cf2415c1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -503,7 +503,7 @@ 
    -<table class="common-table">
+<table>
   ...
 </table>

    Example: Zebra-striped

    @@ -540,7 +540,7 @@

    Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.

    -<table class="common-table zebra-striped">
+<table class="zebra-striped">
 ...
 </table>

    Example: Zebra-striped w/ TableSorter.js

    @@ -582,7 +582,7 @@ $("table#sortTableExample").tablesorter({ sortList: [[1,0]] }); }); </script> -<table class="common-table zebra-striped"> +<table class="zebra-striped"> ... </table>
    -- cgit v1.2.3 From 74a18b341c8e071437de9e1e8ba5e1e56531b93c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 23:25:21 -0700 Subject: updated le docs to include note about topbar and padding on box (issue #86) and add snippet about @basefont and @baseline to type section --- docs/index.html | 51 +++++++++++++++++++++++++++------------------------ 1 file changed, 27 insertions(+), 24 deletions(-) (limited to 'docs') diff --git a/docs/index.html b/docs/index.html index 2cf2415c1..20591cc24 100644 --- a/docs/index.html +++ b/docs/index.html @@ -65,7 +65,7 @@ It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

    Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

    -
    +
    @@ -303,8 +303,10 @@
    -

    Headings and copy

    +

    Headings & copy

    A standard typographic hierarchy for structuring your webpages.

    +

    The entire typographic grid is based on two Less variables in our preboot.less file: @basefont and @baseline. The first is the base font-size used throughout and the second is the base line-height.

    +

    We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.

    h1. Heading 1

    @@ -611,7 +613,7 @@
    -
    +
    @@ -623,7 +625,7 @@
    -
    +
    @@ -635,26 +637,26 @@
    -
    +
    Some Value Here
    -
    +
    -
    +
    Small snippet of help text
    -
    +
    Example form legend @@ -666,7 +668,7 @@ - +
    @@ -675,7 +677,7 @@
    - +
    @@ -684,13 +686,13 @@
    - +
    -
    +
    Example form legend @@ -727,7 +729,7 @@ Note: Labels surround all the options for much larger click areas and a more usable form. - +
    @@ -740,7 +742,7 @@ All times are shown as Pacific Standard Time (GMT -08:00).
    - +
    @@ -749,7 +751,7 @@ Block of help text to describe the field above if need be.
    -
    +
    @@ -768,7 +770,7 @@
    -
    +
     
    @@ -793,7 +795,7 @@
    - +
    @@ -805,7 +807,7 @@
    -
    +
    Example form legend @@ -815,7 +817,7 @@ Small snippet of help text - +
    @@ -837,7 +839,7 @@ Note: Labels surround all the options for much larger click areas and a more usable form.
    -
    +
      @@ -923,9 +925,9 @@
    - - - + + +
    @@ -941,6 +943,7 @@

    As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done.

    +

    Note: When using the topbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your body.


    @@ -1366,7 +1369,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita - +