From ee5c7d7ece59f33108725979557d6b33850736ba Mon Sep 17 00:00:00 2001 From: Ben Word Date: Mon, 4 Mar 2013 13:03:05 -0600 Subject: [PATCH 001/241] Remove -webkit-backface-visibility on skew mixin Ref #5319 - This rule is causing pixelated edges on iOS. Removing it makes everything smooth across all OS's, browsers, and devices. --- less/mixins.less | 1 - 1 file changed, 1 deletion(-) diff --git a/less/mixins.less b/less/mixins.less index 67e2ed689a..740e4c1367 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -212,7 +212,6 @@ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885 -o-transform: skew(@x, @y); transform: skew(@x, @y); - -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319 } .translate3d(@x, @y, @z) { -webkit-transform: translate3d(@x, @y, @z); From 1c7fe5d887d853ca95a2b7399ddd59c9b401568d Mon Sep 17 00:00:00 2001 From: Waynn Lue Date: Wed, 6 Mar 2013 22:01:21 -0800 Subject: [PATCH 002/241] fix pluralization since "a" is in front --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c97e8b81ee..463bfca781 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -9,7 +9,7 @@ Looking to contribute something to Bootstrap? **Here's how you can help.** We only accept issues that are bug reports or feature requests. Bugs must be isolated and reproducible problems that we can fix within the Bootstrap core. Please read the following guidelines before opening any issue. 1. **Search for existing issues.** We get a lot of duplicate issues, and you'd help us out a lot by first checking if someone else has reported the same issue. Moreover, the issue may have already been resolved with a fix available. -2. **Create an isolated and reproducible test case.** Be sure the problem exists in Bootstrap's code with a [reduced test cases](http://css-tricks.com/reduced-test-cases/) that should be included in each bug report. +2. **Create an isolated and reproducible test case.** Be sure the problem exists in Bootstrap's code with a [reduced test case](http://css-tricks.com/reduced-test-cases/) that should be included in each bug report. 3. **Include a live example.** Make use of jsFiddle or jsBin to share your isolated test cases. 4. **Share as much information as possible.** Include operating system and version, browser and version, version of Bootstrap, customized or vanilla build, etc. where appropriate. Also include steps to reproduce the bug. From 812b99263f08d2306219ed6fcbe1685be17d6a10 Mon Sep 17 00:00:00 2001 From: pickypg Date: Fri, 15 Mar 2013 02:54:24 -0300 Subject: [PATCH 003/241] Fix dropdown (and therefore typeahead) wrap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I have recently been experimenting with a lot of Typeahead controls, and I ran into a situation where my Typeahead was too wide for my screen, particularly on mobile devices, and it was not wrapping as I had expected it to do. http://jsfiddle.net/Mtxkn/3/ Changing the CSS for `.dropdown-menu > li > a` to `white-space: normal` causes it to wrap in every scenario that I have seen, whereas leaving it as `nowrap` never does what I want when the text is too long for a given row. It's possible that this has ramifications for other dropdown menus, but honestly I expect that even those would prefer to wrap than to extend the screen horizontally.  If that is not the case, then it would work to change the typeahead version of this only: ```css .typeahead > li > a {     white-space: normal; } ``` --- less/dropdowns.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/dropdowns.less b/less/dropdowns.less index bbfe3fd3e3..e30144527a 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -79,7 +79,7 @@ font-weight: normal; line-height: @baseLineHeight; color: @dropdownLinkColor; - white-space: nowrap; + white-space: normal; } } From cae90f30107773c7144278cd9517fdb8d69412e5 Mon Sep 17 00:00:00 2001 From: Simon Boudrias Date: Sun, 17 Mar 2013 17:22:26 -0300 Subject: [PATCH 004/241] Remove `text-rendering` --- less/type.less | 1 - 1 file changed, 1 deletion(-) diff --git a/less/type.less b/less/type.less index 337138ac8e..54f5778c4b 100644 --- a/less/type.less +++ b/less/type.less @@ -62,7 +62,6 @@ h1, h2, h3, h4, h5, h6 { font-weight: @headingsFontWeight; line-height: @baseLineHeight; color: @headingsColor; - text-rendering: optimizelegibility; // Fix the character spacing for headings small { font-weight: normal; line-height: 1; From f8b9e428f0bc2533dfb6e0bb56fbb54e731e1f24 Mon Sep 17 00:00:00 2001 From: Thomas McDonald Date: Sat, 23 Mar 2013 19:21:37 +0000 Subject: [PATCH 005/241] Give horizontal-three-colors a horizontal filter gradient Previously the filter had GradientType=0, which would render a vertical gradient rather than the horizontal one implied by name --- less/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/mixins.less b/less/mixins.less index 458e58cc98..48bcd6e184 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -283,7 +283,7 @@ background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback } .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { From 5b298a2aaf5286564b1dc614bb439eb19edf2c25 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 26 Mar 2013 23:54:17 -0700 Subject: [PATCH 006/241] docs fixes with new .bs-docs-container; fixing some lingering grid classes --- docs/assets/css/docs.css | 14 +++++++++++++- docs/components.html | 2 +- docs/css.html | 2 +- docs/customize.html | 2 +- docs/getting-started.html | 32 ++++++++++++++++---------------- docs/index.html | 2 +- docs/javascript.html | 2 +- 7 files changed, 34 insertions(+), 22 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f3d7c156e3..76a45b45e6 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -14,6 +14,11 @@ body { /* We add the padding to the body for >768px only */ } +.bs-docs-container { + padding-left: 15px; + padding-right: 15px; +} + /* */ .bs-docs-footer { padding-left: 15px; @@ -486,7 +491,8 @@ section > ul li { .bs-docs-footer { text-align: center; - padding: 30px 0; + padding-top: 30px; + padding-bottom: 30px; margin-top: 100px; border-top: 1px solid #e5e5e5; } @@ -610,6 +616,12 @@ input.focused { padding-top: 50px; /* Default height of navbar */ } + /* Undo custom padding */ + .bs-docs-container { + padding-left: 0; + padding-right: 0; + } + /* Tweak display of docs jumbotrons */ .masthead { padding-top: 100px; diff --git a/docs/components.html b/docs/components.html index 5e17a6a3e4..06cbe37206 100644 --- a/docs/components.html +++ b/docs/components.html @@ -14,7 +14,7 @@ title: Components -
+
diff --git a/docs/css.html b/docs/css.html index 874e00ed04..226b55d6db 100644 --- a/docs/css.html +++ b/docs/css.html @@ -13,7 +13,7 @@ title: CSS -
+
diff --git a/docs/customize.html b/docs/customize.html index 544f41310b..f4e01b3406 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -14,7 +14,7 @@ title: Customize and download -
+
diff --git a/docs/getting-started.html b/docs/getting-started.html index 79b31d25df..5717bfbaa5 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -14,7 +14,7 @@ description: Overview of the project, its contents, and how to get started with -
+
@@ -42,17 +42,17 @@ description: Overview of the project, its contents, and how to get started with

Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.

-
+

Compiled

Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

Download Bootstrap

-
+

Source

Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.

Download Bootstrap source

-
+

Bower

Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using Bower.

{% highlight bash %}bower install bootstrap{% endhighlight %} @@ -179,56 +179,56 @@ description: Overview of the project, its contents, and how to get started with

Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

-
+

Starter template

A barebones HTML document with all the Bootstrap CSS and JavaScript included.

-
+

Basic marketing site

Featuring a hero unit for a primary message and three supporting elements.

-
+

Narrow marketing

Slim, lightweight marketing template for small projects or teams.

-
+

Justified nav

Marketing page with equal-width navigation links in a modified navbar.

-
+

Sign in

Barebones sign in form with custom, larger form controls and a flexible layout.

-
+

Sticky footer

Pin a fixed-height footer to the bottom of the user's viewport.

-
+

Sticky footer w/ navbar

Add a fixed navbar to the default sticky footer template.

-
+
@@ -237,28 +237,28 @@ description: Overview of the project, its contents, and how to get started with
-
+

Navbar

Basic template for showcasing how the navbar works.

-
+

Static top navbar

Basic template for showcasing the static navbar variation.

-
+

Fixed top navbar

Basic template for showcasing the fixed navbar variation.

-
+
diff --git a/docs/index.html b/docs/index.html index 17afe11c43..d2aece152b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -22,7 +22,7 @@ title: Bootstrap
-
+
diff --git a/docs/javascript.html b/docs/javascript.html index 8e65c61d54..e64908672b 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -12,7 +12,7 @@ title: JavaScript plugins
-
+
From f0f33eb9a3a25ae2f0032f630ff84c58cb0ca431 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Mar 2013 15:42:11 -0700 Subject: [PATCH 007/241] Refactor .list-inline and .list-unstyled * Instead of shared and separate CSS, isolate by class for easier mixin-ability * .list-unstyled is now used as a mixin in .list-inline --- docs/assets/css/bootstrap.css | 6 +++++- less/type.less | 18 ++++++++++-------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 5632d3aadd..50d2070015 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -546,7 +546,11 @@ li { line-height: 20px; } -.list-unstyled, +.list-unstyled { + margin-left: 0; + list-style: none; +} + .list-inline { margin-left: 0; list-style: none; diff --git a/less/type.less b/less/type.less index 193078c72c..60ad793e90 100644 --- a/less/type.less +++ b/less/type.less @@ -126,18 +126,20 @@ li { } // List options + // Unstyled keeps list items block level, just removes list-style -.list-unstyled, -// Inline turns list items into inline-block -.list-inline { +.list-unstyled { margin-left: 0; list-style: none; } -// Single-line list items -.list-inline > li { - display: inline-block; - padding-left: 5px; - padding-right: 5px; +// Inline turns list items into inline-block +.list-inline { + .list-unstyled(); + > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } } // Description Lists From 6696ff5d927fd2d584ddc226521b89fc8b9882eb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Mar 2013 15:54:17 -0700 Subject: [PATCH 008/241] clarify docs on unstyled lists --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/css.html b/docs/css.html index 226b55d6db..f3ab7a00ae 100644 --- a/docs/css.html +++ b/docs/css.html @@ -576,7 +576,7 @@ title: CSS {% endhighlight %}

Unstyled

-

Remove the default list-style and left padding on list items (immediate children only).

+

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • From fe414d8566f647e65dc20bc7505630ce798e5445 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Mar 2013 23:33:45 -0700 Subject: [PATCH 009/241] turn docs navbar into left navbar --- docs/_includes/navbar.html | 20 ++++++++++---------- docs/assets/css/bootstrap.css | 20 ++++++++++++++++++++ docs/assets/css/docs.css | 35 ++++++++++++++++++++++++++++++----- docs/assets/js/application.js | 5 +++++ less/navbar.less | 21 +++++++++++++++++++++ 5 files changed, 86 insertions(+), 15 deletions(-) diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index dcbb235567..5e6c5ae635 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -1,32 +1,32 @@ -
{% endhighlight %} -

Sub menus on dropdowns

+

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

@@ -2708,13 +2708,13 @@ For example, <section> should be wrapped as inline. -
+

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

-

Single button group

+

Basic button group

Wrap a series of buttons with .btn in .btn-group.

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

Multiple button groups

+

Multiple button groups

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

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

Vertical button groups

+

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

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

Justified button groups

+

Justified button groups

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

@@ -2796,14 +2796,14 @@ For example, <section> should be wrapped as inline. -
+

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. Requires the Bootstrap dropdown plugin.

-

Single or split button

-

Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.

+

Single button dropdowns

+

Turn a button into dropdown toggle with some basic markup changes.

@@ -2857,7 +2857,26 @@ For example, <section> should be wrapped as inline.
+
+{% highlight html linenos %} + + +{% endhighlight %} +

Split button dropdowns

+

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

+
@@ -2917,20 +2936,6 @@ For example, <section> should be wrapped as inline.
{% highlight html linenos %} - - -
@@ -2947,7 +2952,7 @@ For example, <section> should be wrapped as inline.
{% endhighlight %} -

Works with all button sizes

+

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

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

Dropup buttons

+

Dropup buttons

Trigger dropdown menus above elements by adding .dropup to the parent.

From 9336a827c6396c2142be8de38615cd4d14c6685e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Mar 2013 13:11:15 -0700 Subject: [PATCH 036/241] fix submenu docs height given border-box --- docs/assets/css/docs.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index c61a4a4f88..6b576de2ad 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -400,7 +400,7 @@ section > ul li { margin-bottom: 5px; } .bs-docs-example-submenu { - min-height: 180px; + min-height: 230px; } .bs-docs-example-submenu > .pull-left + .pull-left { margin-left: 20px; From e9dd1826be4e41c2464c95d9fbf62c8fd311b689 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Mar 2013 13:12:03 -0700 Subject: [PATCH 037/241] fix brok btn-dropdowns links --- docs/docs.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs.html b/docs/docs.html index 9fd1205623..7e33954812 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -2802,7 +2802,7 @@ For example, <section> should be wrapped as inline.

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. Requires the Bootstrap dropdown plugin.

-

Single button dropdowns

+

Single button dropdowns

Turn a button into dropdown toggle with some basic markup changes.

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

Split button dropdowns

+

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

From 171c7feae23227ac6c51b365614b63b266574232 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Mar 2013 13:14:04 -0700 Subject: [PATCH 038/241] navs nav links --- docs/_includes/docs-nav.html | 12 ++++++++---- docs/docs.html | 16 ++++++++-------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html index 99ef5116cb..ae5e58e1de 100644 --- a/docs/_includes/docs-nav.html +++ b/docs/_includes/docs-nav.html @@ -103,11 +103,15 @@
  • - Navs + Navs
  • diff --git a/docs/docs.html b/docs/docs.html index 7e33954812..6648092e2e 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -3072,14 +3072,14 @@ For example, <section> should be wrapped as inline. -
  • Media object
  • +
  • Panels
  • Wells
  • diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 4f034974a9..b86a16a788 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -383,12 +383,12 @@ a.text-warning:focus { color: #a47e3c; } -.text-error { +.text-danger { color: #b94a48; } -a.text-error:hover, -a.text-error:focus { +a.text-danger:hover, +a.text-danger:focus { color: #953b39; } @@ -1119,9 +1119,9 @@ table th[class*="col-span-"] { border-color: #d6e9c6; } -.table > tbody > tr > td.error, -.table > tbody > tr > th.error, -.table > tbody > tr.error > td { +.table > tbody > tr > td.danger, +.table > tbody > tr > th.danger, +.table > tbody > tr.danger > td { background-color: #f2dede; border-color: #eed3d7; } @@ -1140,9 +1140,9 @@ table th[class*="col-span-"] { border-color: #c9e2b3; } -.table-hover > tbody > tr > td.error:hover, -.table-hover > tbody > tr > th.error:hover, -.table-hover > tbody > tr.error:hover > td { +.table-hover > tbody > tr > td.danger:hover, +.table-hover > tbody > tr > th.danger:hover, +.table-hover > tbody > tr.danger:hover > td { background-color: #ebcccc; border-color: #e6c1c7; } @@ -2944,6 +2944,68 @@ fieldset[disabled] .btn-link:focus { z-index: 1051; } +.panel { + padding: 15px; + margin-bottom: 20px; + background-color: #ffffff; + border: 1px solid #dddddd; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); +} + +.panel-heading { + padding: 10px 15px; + margin: -15px -15px 15px; + font-size: 16px; + font-size: 1.6rem; + font-weight: 500; + background-color: #f5f5f5; + border-bottom: 1px solid #dddddd; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} + +.panel-success { + border-color: #d6e9c6; +} + +.panel-success .panel-heading { + color: #468847; + background-color: #dff0d8; + border-color: #d6e9c6; +} + +.panel-warning { + border-color: #fbeed5; +} + +.panel-warning .panel-heading { + color: #c09853; + background-color: #fcf8e3; + border-color: #fbeed5; +} + +.panel-danger { + border-color: #eed3d7; +} + +.panel-danger .panel-heading { + color: #b94a48; + background-color: #f2dede; + border-color: #eed3d7; +} + +.panel-info { + border-color: #bce8f1; +} + +.panel-info .panel-heading { + color: #3a87ad; + background-color: #d9edf7; + border-color: #bce8f1; +} + .well { min-height: 20px; padding: 19px; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6b576de2ad..181a3a734e 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -309,7 +309,9 @@ section > ul li { .bs-docs-example > textarea:last-child, .bs-docs-example > .table:last-child, .bs-docs-example > .jumbotron:last-child, -.bs-docs-example > .alert:last-child { +.bs-docs-example > .alert:last-child, +.bs-docs-example > .panel:last-child, +.bs-docs-example > .well:last-child { margin-bottom: 0; } diff --git a/docs/docs.html b/docs/docs.html index 4b26296585..00af4ed0cf 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -4369,6 +4369,75 @@ For example, <section> should be wrapped as inline. + +
    + +

    While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

    + +

    Basic panel

    +

    By default, all the .panel does is apply some basic border and padding to contain some content.

    +
    +
    + Basic panel example +
    +
    +{% highlight html linenos %} +
    + Basic panel example +
    +{% endhighlight %} + +

    Panel with heading

    +

    Easily add a heading to your panel with .panel-heading. Use it on a <div> or any heading element (e.g., <h3>).

    +
    +
    +
    Panel heading
    + Panel content +
    +
    +{% highlight html linenos %} +
    +
    Panel heading
    + Panel content +
    +{% endhighlight %} + +

    Contextual alternatives

    +

    Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

    +
    +
    +
    Panel heading
    + Panel content +
    +
    +
    Panel heading
    + Panel content +
    +
    +
    Panel heading
    + Panel content +
    +
    +
    Panel heading
    + Panel content +
    +
    +{% highlight html linenos %} +
    ...
    +
    ...
    +
    ...
    +
    ...
    +{% endhighlight %} + +
    + + + + +
    diff --git a/less/alerts.less b/less/alerts.less index 7f627fadf7..20e0a8b5d0 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -58,15 +58,15 @@ } .alert-danger, .alert-error { - background-color: @state-error-background; - border-color: @state-error-border; - color: @state-error-text; + background-color: @state-danger-background; + border-color: @state-danger-border; + color: @state-danger-text; hr { - border-top-color: darken(@state-error-border, 5%); + border-top-color: darken(@state-danger-border, 5%); } > a, > p > a { - color: darken(@state-error-text, 10%); + color: darken(@state-danger-text, 10%); } } .alert-info { diff --git a/less/bootstrap.less b/less/bootstrap.less index 461f9eceac..c887fcef6f 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -30,6 +30,7 @@ @import "component-animations.less"; @import "glyphicons.less"; @import "dropdowns.less"; +@import "panels.less"; @import "wells.less"; @import "close.less"; diff --git a/less/forms.less b/less/forms.less index ddbd196375..583d1e30f9 100644 --- a/less/forms.less +++ b/less/forms.less @@ -311,7 +311,7 @@ input[type="checkbox"] { } // Error .has-error { - .formFieldState(@state-error-text, @state-error-text, @state-error-background); + .formFieldState(@state-danger-text, @state-danger-text, @state-danger-background); } // Success .has-success { diff --git a/less/panels.less b/less/panels.less new file mode 100644 index 0000000000..43e5199223 --- /dev/null +++ b/less/panels.less @@ -0,0 +1,60 @@ +// +// Panels +// -------------------------------------------------- + + +// Base class +.panel { + padding: 15px; + margin-bottom: 20px; + background-color: @panel-bg; + border: 1px solid @panel-border; + border-radius: @panel-border-radius; + .box-shadow(0 1px 1px rgba(0,0,0,.05)); +} + +// Optional heading +.panel-heading { + margin: -15px -15px 15px; + padding: 10px 15px; + .font-size(16); + font-weight: 500; + background-color: @panel-heading-bg; + border-bottom: 1px solid @panel-border; + border-top-left-radius: (@panel-border-radius - 1); + border-top-right-radius: (@panel-border-radius - 1); +} + +// Contextual variations +.panel-success { + border-color: @panel-success-border; + .panel-heading { + color: @panel-success-text; + background-color: @panel-success-heading-bg; + border-color: @panel-success-border; + } +} +.panel-warning { + border-color: @panel-warning-border; + .panel-heading { + color: @panel-warning-text; + background-color: @panel-warning-heading-bg; + border-color: @panel-warning-border; + } +} +.panel-danger { + border-color: @panel-danger-border; + .panel-heading { + color: @panel-danger-text; + background-color: @panel-danger-heading-bg; + border-color: @panel-danger-border; + } +} +.panel-info { + border-color: @panel-info-border; + .panel-heading { + color: @panel-info-text; + background-color: @panel-info-heading-bg; + border-color: @panel-info-border; + } +} diff --git a/less/tables.less b/less/tables.less index f70d46396d..196eff709f 100644 --- a/less/tables.less +++ b/less/tables.less @@ -200,11 +200,11 @@ table th[class*="col-span-"] { background-color: @state-success-background; border-color: @state-success-border; } - > td.error, - > th.error, - &.error > td { - background-color: @state-error-background; - border-color: @state-error-border; + > td.danger, + > th.danger, + &.danger > td { + background-color: @state-danger-background; + border-color: @state-danger-border; } > td.warning, > th.warning, @@ -222,11 +222,11 @@ table th[class*="col-span-"] { background-color: darken(@state-success-background, 5%); border-color: darken(@state-success-border, 5%); } - > td.error:hover, - > th.error:hover, - &.error:hover > td { - background-color: darken(@state-error-background, 5%); - border-color: darken(@state-error-border, 5%); + > td.danger:hover, + > th.danger:hover, + &.danger:hover > td { + background-color: darken(@state-danger-background, 5%); + border-color: darken(@state-danger-border, 5%); } > td.warning:hover, > th.warning:hover, diff --git a/less/type.less b/less/type.less index c2f7b07351..a8a1c2dec4 100644 --- a/less/type.less +++ b/less/type.less @@ -36,9 +36,9 @@ a.text-muted:focus { color: darken(@grayLight, 10%); } a.text-warning:hover, a.text-warning:focus { color: darken(@state-warning-text, 10%); } -.text-error { color: @state-error-text; } -a.text-error:hover, -a.text-error:focus { color: darken(@state-error-text, 10%); } +.text-danger { color: @state-danger-text; } +a.text-danger:hover, +a.text-danger:focus { color: darken(@state-danger-text, 10%); } .text-success { color: @state-success-text; } a.text-success:hover, diff --git a/less/variables.less b/less/variables.less index 45495a9e1a..c4b85d80e1 100644 --- a/less/variables.less +++ b/less/variables.less @@ -240,9 +240,9 @@ @state-warning-background: #fcf8e3; @state-warning-border: darken(spin(@state-warning-background, -10), 3%); -@state-error-text: #b94a48; -@state-error-background: #f2dede; -@state-error-border: darken(spin(@state-error-background, -10), 3%); +@state-danger-text: #b94a48; +@state-danger-background: #f2dede; +@state-danger-border: darken(spin(@state-danger-background, -10), 3%); @state-success-text: #468847; @state-success-background: #dff0d8; @@ -280,7 +280,6 @@ // Modals // ------------------------- - @modal-inner-padding: 20px; @@ -294,6 +293,35 @@ @progress-bar-info-bg: @brand-info; +// Panels +// ------------------------- +@panel-bg: #fff; +@panel-border: #ddd; +@panel-border-radius: @border-radius-base; +@panel-heading-bg: #f5f5f5; + +@panel-success-text: @state-success-text; +@panel-success-border: @state-success-border; +@panel-success-heading-bg: @state-success-background; + +@panel-warning-text: @state-warning-text; +@panel-warning-border: @state-warning-border; +@panel-warning-heading-bg: @state-warning-background; + +@panel-danger-text: @state-danger-text; +@panel-danger-border: @state-danger-border; +@panel-danger-heading-bg: @state-danger-background; + +@panel-info-text: @state-info-text; +@panel-info-border: @state-info-border; +@panel-info-heading-bg: @state-info-background; + + +// Wells +// ------------------------- +@well-background: #f5f5f5; + + // Miscellaneous // ------------------------- @@ -303,9 +331,6 @@ // Horizontal forms & lists @component-offset-horizontal: 180px; -// Wells -@well-background: #f5f5f5; - // Grid system From 731903a17597f9095f9c26d969da8e04f50568ed Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Mar 2013 14:16:30 -0700 Subject: [PATCH 042/241] panels subnav and links --- docs/_includes/docs-nav.html | 9 ++++++++- docs/docs.html | 6 +++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html index 649cad06a3..4a91214a38 100644 --- a/docs/_includes/docs-nav.html +++ b/docs/_includes/docs-nav.html @@ -163,7 +163,14 @@
  • Media object
  • -
  • Panels
  • +
  • + Panels + +
  • Wells
  • diff --git a/docs/docs.html b/docs/docs.html index 00af4ed0cf..7603d2ccc3 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -4377,7 +4377,7 @@ For example, <section> should be wrapped as inline.

    While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

    -

    Basic panel

    +

    Basic panel

    By default, all the .panel does is apply some basic border and padding to contain some content.

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

    Panel with heading

    +

    Panel with heading

    Easily add a heading to your panel with .panel-heading. Use it on a <div> or any heading element (e.g., <h3>).

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

    Contextual alternatives

    +

    Contextual alternatives

    Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

    From 2a9604fdd297fee6661561d1ccf7922b4d599641 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Mar 2013 16:07:50 -0700 Subject: [PATCH 043/241] add list group component --- docs/_includes/docs-nav.html | 13 +++ docs/assets/css/bootstrap.css | 91 ++++++++++++++++ docs/assets/css/docs.css | 5 + docs/docs.html | 191 ++++++++++++++++++++++++++++++++++ less/bootstrap.less | 1 + less/list-group.less | 94 +++++++++++++++++ less/panels.less | 18 ++++ less/variables.less | 11 ++ 8 files changed, 424 insertions(+) create mode 100644 less/list-group.less diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html index 4a91214a38..652b845cd8 100644 --- a/docs/_includes/docs-nav.html +++ b/docs/_includes/docs-nav.html @@ -163,12 +163,25 @@
  • Media object
  • +
  • + List group + +
  • Panels
  • Wells
  • diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b86a16a788..fcbc5d5808 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2944,6 +2944,80 @@ fieldset[disabled] .btn-link:focus { z-index: 1051; } +.list-group { + margin: 0 0 20px; + background-color: #ffffff; +} + +.list-group-item { + position: relative; + display: block; + padding: 10px 30px 10px 15px; + margin-bottom: -1px; + border: 1px solid #dddddd; +} + +.list-group-item:first-child { + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} + +.list-group-item:last-child { + margin-bottom: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} + +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} + +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} + +a.list-group-item .list-group-item-heading { + color: #333; +} + +a.list-group-item .list-group-item-text { + color: #555; +} + +a.list-group-item:hover, +a.list-group-item:focus { + text-decoration: none; + background-color: #f5f5f5; +} + +a.list-group-item.active { + z-index: 2; + color: #ffffff; + background-color: #428bca; + border-color: #428bca; +} + +a.list-group-item.active .list-group-item-heading, +a.list-group-item.active .list-group-item-text { + color: inherit; +} + +.list-group-item > .badge, +.list-group-item > .glyphicon-chevron-right { + float: right; + margin-right: -15px; +} + +.list-group-item > .glyphicon-chevron-right { + margin-right: -15px; +} + +.list-group-item > .glyphicon + .badge { + margin-right: 5px; +} + .panel { padding: 15px; margin-bottom: 20px; @@ -3006,6 +3080,23 @@ fieldset[disabled] .btn-link:focus { border-color: #bce8f1; } +.list-group-flush { + margin: 15px -15px -15px; +} + +.list-group-flush .list-group-item { + border-width: 1px 0; +} + +.list-group-flush .list-group-item:first-child { + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +.list-group-flush .list-group-item:last-child { + border-bottom: 0; +} + .well { min-height: 20px; padding: 19px; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 181a3a734e..e1fd6a2b45 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -311,6 +311,7 @@ section > ul li { .bs-docs-example > .jumbotron:last-child, .bs-docs-example > .alert:last-child, .bs-docs-example > .panel:last-child, +.bs-docs-example > .list-group:last-child, .bs-docs-example > .well:last-child { margin-bottom: 0; } @@ -339,6 +340,10 @@ section > ul li { margin: 0; } +/* List groups */ +.bs-docs-example > .list-group { + max-width: 400px; +} /* Navbar examples */ .bs-navbar-top-example, diff --git a/docs/docs.html b/docs/docs.html index 7603d2ccc3..844a467d2b 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -4369,6 +4369,172 @@ For example, <section> should be wrapped as inline. + +
    + +

    List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

    + +

    Basic list group

    +

    The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

    +
    +
      +
    • Cras justo odio
    • +
    • Dapibus ac facilisis in
    • +
    • Morbi leo risus
    • +
    • Porta ac consectetur ac
    • +
    • Vestibulum at eros
    • +
    +
    +{% highlight html linenos %} +
      +
    • Cras justo odio
    • +
    • Dapibus ac facilisis in
    • +
    • Morbi leo risus
    • +
    • Porta ac consectetur ac
    • +
    • Vestibulum at eros
    • +
    +{% endhighlight %} + +

    With chevrons

    +

    Adding Glyphicon chevrons are automatically moved to the right.

    +
    +
      +
    • + + Cras justo odio +
    • +
    • + + Dapibus ac facilisis in +
    • +
    • + + Morbi leo risus +
    • +
    +
    +{% highlight html linenos %} +
      +
    • + + Cras justo odio +
    • +
    +{% endhighlight %} + +

    With badges

    +

    Add the badges component to any list group item and it will automatically be positioned on the right.

    +
    +
      +
    • + 14 + Cras justo odio +
    • +
    • + 2 + Dapibus ac facilisis in +
    • +
    • + 1 + Morbi leo risus +
    • +
    +
    +{% highlight html linenos %} +
      +
    • + 14 + Cras justo odio +
    • +
    +{% endhighlight %} + +

    With badges and chevrons

    +

    Why not both?

    +
    +
      +
    • + + 14 + Cras justo odio +
    • +
    • + + 2 + Dapibus ac facilisis in +
    • +
    • + + 1 + Morbi leo risus +
    • +
    +
    +{% highlight html linenos %} +
      +
    • + + 14 + Cras justo odio +
    • +
    +{% endhighlight %} + +

    Linked list group

    +

    Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>. No need for individual parents around each element.

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

    Custom content

    +

    Add nearly any HTML within, even for linked list groups like the one below.

    + +{% highlight html linenos %} + +{% endhighlight %} +
    + + + +
    @@ -4430,6 +4596,31 @@ For example, <section> should be wrapped as inline.
    ...
    ...
    ...
    +{% endhighlight %} + +

    With list groups

    +

    Easily include full-width list groups within any panel.

    +
    +
    + +
    Panel heading
    +

    Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

    + + +
      +
    • Cras justo odio
    • +
    • Dapibus ac facilisis in
    • +
    • Morbi leo risus
    • +
    • Porta ac consectetur ac
    • +
    • Vestibulum at eros
    • +
    +
    +
    +{% highlight html linenos %} +
    +
    Panel heading
    + Panel content +
    {% endhighlight %}
    diff --git a/less/bootstrap.less b/less/bootstrap.less index c887fcef6f..c73c85c385 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -30,6 +30,7 @@ @import "component-animations.less"; @import "glyphicons.less"; @import "dropdowns.less"; +@import "list-group.less"; @import "panels.less"; @import "wells.less"; @import "close.less"; diff --git a/less/list-group.less b/less/list-group.less new file mode 100644 index 0000000000..23ddb0d47e --- /dev/null +++ b/less/list-group.less @@ -0,0 +1,94 @@ +// +// List groups +// -------------------------------------------------- + +// Base class +// +// Easily usable on
      ,
        , or
        . +.list-group { + // No need to set list-style: none; since .list-group-item is block level + margin: 0 0 20px; // reset all margins because ul and ol + background-color: @list-group-bg; +} + +// Individual list items +// ------------------------- + +.list-group-item { + position: relative; + display: block; + padding: 10px 30px 10px 15px; + // Place the border on the list items and negative margin up for better styling + margin-bottom: -1px; + border: 1px solid @list-group-border; +} +// Round the first and last items +.list-group-item:first-child { + .border-top-radius(@border-radius-base); +} +.list-group-item:last-child { + margin-bottom: 0; + .border-bottom-radius(@border-radius-base); +} + + +// Custom content options +// ------------------------- + +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} + +// Linked list items +// ------------------------- + +// Custom content within linked items +a.list-group-item { + .list-group-item-heading { + color: #333; + } + .list-group-item-text { + color: #555; + } +} + +// Hover state +a.list-group-item:hover, +a.list-group-item:focus { + text-decoration: none; + background-color: @list-group-hover-bg; +} + +// Active class on item itself, not parent +a.list-group-item.active { + z-index: 2; // Place active items above their siblings for proper border styling + color: @list-group-active-text; + background-color: @list-group-active-bg; + border-color: @list-group-active-border; + + // Force color to inherit for custom content + .list-group-item-heading, + .list-group-item-text { + color: inherit; + } +} + +// Chevrons and badges within list items +// ------------------------- + +.list-group-item > .badge, +.list-group-item > .glyphicon-chevron-right { + float: right; + margin-right: -15px; +} +.list-group-item > .glyphicon-chevron-right { + margin-right: -15px; +} +.list-group-item > .glyphicon + .badge { + margin-right: 5px; +} diff --git a/less/panels.less b/less/panels.less index 43e5199223..6c9dd6df37 100644 --- a/less/panels.less +++ b/less/panels.less @@ -58,3 +58,21 @@ border-color: @panel-info-border; } } + +// List groups in panels +.list-group-flush { + margin: 15px -15px -15px; + + .list-group-item { + border-width: 1px 0; + + // Remove border radius for top one + &:first-child { + .border-top-radius(0); + } + // But keep it for the last one + &:last-child { + border-bottom: 0; + } + } +} diff --git a/less/variables.less b/less/variables.less index c4b85d80e1..054d2d69e3 100644 --- a/less/variables.less +++ b/less/variables.less @@ -293,6 +293,17 @@ @progress-bar-info-bg: @brand-info; +// List group +// ------------------------- +@list-group-bg: #fff; +@list-group-border: #ddd; +@list-group-border-radius: @border-radius-base; + +@list-group-hover-bg: #f5f5f5; +@list-group-active-text: #fff; +@list-group-active-bg: @link-color; +@list-group-active-border: @list-group-active-bg; + // Panels // ------------------------- @panel-bg: #fff; From 1683669eaa75555e1454105460ed6b7bcaca9f11 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Mar 2013 16:56:49 -0700 Subject: [PATCH 044/241] Remove .nav-list given new .list-group --- docs/_includes/docs-nav.html | 1 - docs/assets/css/bootstrap.css | 26 +------------------------- docs/docs.html | 29 ++++++----------------------- less/badges.less | 2 +- less/navs.less | 24 ------------------------ 5 files changed, 8 insertions(+), 74 deletions(-) diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html index 652b845cd8..1eccba357a 100644 --- a/docs/_includes/docs-nav.html +++ b/docs/_includes/docs-nav.html @@ -107,7 +107,6 @@
        diff --git a/less/badges.less b/less/badges.less index 4f1e71edae..9cbb0f23a0 100644 --- a/less/badges.less +++ b/less/badges.less @@ -48,7 +48,7 @@ a.badge { } // Account for counters in navs -.nav-list > .active > a > .badge, +a.list-group-item.active > .badge, .nav-pills > .active > a > .badge { color: @link-color; background-color: #fff; diff --git a/less/navs.less b/less/navs.less index be165e4344..ed41b8cb47 100644 --- a/less/navs.less +++ b/less/navs.less @@ -117,30 +117,6 @@ text-align: center; } -// Lists -// ------------------------- - -.nav-list > li > a { - margin-bottom: -1px; // pull up the following link for a 1px border between - border: 1px solid #e5e5e5; -} -.nav-list > li:first-child > a { - border-top-left-radius: @border-radius-base; - border-top-right-radius: @border-radius-base; -} -.nav-list > li:last-child > a { - border-bottom-left-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; -} -.nav-list > .active > a, -.nav-list > .active > a:hover, -.nav-list > .active > a:focus { - z-index: 2; // Bring active item forward so border sits on top of next element - color: #fff; - background-color: @link-color; - border-color: @link-color; -} - // Nav states and addons From 6edd5f291aba8f66816fe2ca1dfb61daeaab0efe Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Mar 2013 17:00:11 -0700 Subject: [PATCH 045/241] not quite #fff on .list-group-item-text --- docs/assets/css/bootstrap.css | 7 +++++-- less/list-group.less | 6 ++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 8e5a3dbc50..dadd158451 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2999,11 +2999,14 @@ a.list-group-item.active { border-color: #428bca; } -a.list-group-item.active .list-group-item-heading, -a.list-group-item.active .list-group-item-text { +a.list-group-item.active .list-group-item-heading { color: inherit; } +a.list-group-item.active .list-group-item-text { + color: #e1edf7; +} + .list-group-item > .badge, .list-group-item > .glyphicon-chevron-right { float: right; diff --git a/less/list-group.less b/less/list-group.less index 23ddb0d47e..d37027d507 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -72,10 +72,12 @@ a.list-group-item.active { border-color: @list-group-active-border; // Force color to inherit for custom content - .list-group-item-heading, - .list-group-item-text { + .list-group-item-heading { color: inherit; } + .list-group-item-text { + color: lighten(@list-group-active-bg, 40%); + } } // Chevrons and badges within list items From e560c41ed107cbaf00baf5082ffb18ac015afa4d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Mar 2013 17:00:43 -0700 Subject: [PATCH 046/241] simpler nav links --- docs/_includes/docs-nav.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html index 1eccba357a..e87bea2b73 100644 --- a/docs/_includes/docs-nav.html +++ b/docs/_includes/docs-nav.html @@ -166,9 +166,9 @@ List group
    {% highlight html linenos %} -
    +
    +
    +
    @@ -368,7 +347,7 @@ body {
    - +

    First featurette headling. It'll blow your mind.

    Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

    @@ -376,7 +355,7 @@ body {
    - +

    Oh yeah, it's that good. See for yourself.

    Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

    @@ -384,7 +363,7 @@ body {
    - +

    And lastly, this one. Checkmate.

    Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

    From c69310153e5eec18f67df1df60c38ed807a75637 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 31 Mar 2013 19:26:40 -0700 Subject: [PATCH 078/241] Fixes #7438: remove max-height from justified nav tabs with some CSS wankery --- docs/assets/css/bootstrap.css | 18 +++++++++++++++++- less/navs.less | 17 +++++++++++++++-- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f359629952..c59d1aae74 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3250,7 +3250,7 @@ button.close { } .nav-justified { - max-height: 40px; + width: 100%; } .nav-justified > li { @@ -3260,6 +3260,22 @@ button.close { text-align: center; } +.nav-justified.nav-tabs { + border-bottom: 0; +} + +.nav-justified.nav-tabs > li > a { + border-bottom: 1px solid #ddd; +} + +.nav-justified.nav-tabs > .active > a { + border-bottom-color: #ffffff; +} + +.nav-justified > li > a { + margin-right: 0; +} + .nav > .disabled > a { color: #999999; } diff --git a/less/navs.less b/less/navs.less index 88641229cf..ff65f85337 100644 --- a/less/navs.less +++ b/less/navs.less @@ -107,8 +107,7 @@ // ------------------------- .nav-justified { - // Negative margin doesn't work, so we hack it - max-height: 40px; + width: 100%; } .nav-justified > li { float: none; @@ -116,6 +115,20 @@ width: 1%; text-align: center; } +// Move borders to anchors instead of bottom of list +.nav-justified.nav-tabs { + border-bottom: 0; + > li > a { + border-bottom: 1px solid #ddd; + } + > .active > a { + border-bottom-color: @body-bg; + } +} +// Override margin from .nav-tabs +.nav-justified > li > a { + margin-right: 0; +} From 0fbfa167e1e6ab8321f32fd050b655e8ccc8e467 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 31 Mar 2013 19:55:05 -0700 Subject: [PATCH 079/241] fix text class in docs --- docs/docs.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs.html b/docs/docs.html index ecdeb64b77..88f272c15c 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -567,13 +567,13 @@ title: Bootstrap Documentation

    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

    Etiam porta sem malesuada magna mollis euismod.

    -

    Donec ullamcorper nulla non metus auctor fringilla.

    +

    Donec ullamcorper nulla non metus auctor fringilla.

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

    {% highlight html linenos %}

    ...

    ...

    -

    ...

    +

    ...

    ...

    {% endhighlight %} From 2f8deea95ac246455a11511963ded2b63e963922 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 31 Mar 2013 22:22:52 -0700 Subject: [PATCH 080/241] add .panel-primary --- docs/assets/css/bootstrap.css | 10 ++++++++++ docs/docs.html | 5 +++++ less/panels.less | 8 ++++++++ less/variables.less | 4 ++++ 4 files changed, 27 insertions(+) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c59d1aae74..76b5ec31df 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3033,6 +3033,16 @@ a.list-group-item.active .list-group-item-text { border-top-left-radius: 3px; } +.panel-primary { + border-color: #428bca; +} + +.panel-primary .panel-heading { + color: #ffffff; + background-color: #428bca; + border-color: #428bca; +} + .panel-success { border-color: #d6e9c6; } diff --git a/docs/docs.html b/docs/docs.html index 88f272c15c..94826ffde8 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -4578,6 +4578,10 @@ For example, <section> should be wrapped as inline.

    Contextual alternatives

    Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

    +
    +
    Panel heading
    + Panel content +
    Panel heading
    Panel content @@ -4596,6 +4600,7 @@ For example, <section> should be wrapped as inline.
    {% highlight html linenos %} +
    ...
    ...
    ...
    ...
    diff --git a/less/panels.less b/less/panels.less index a74feccaf3..fe13a278fa 100644 --- a/less/panels.less +++ b/less/panels.less @@ -26,6 +26,14 @@ } // Contextual variations +.panel-primary { + border-color: @panel-primary-border; + .panel-heading { + color: @panel-primary-text; + background-color: @panel-primary-heading-bg; + border-color: @panel-primary-border; + } +} .panel-success { border-color: @panel-success-border; .panel-heading { diff --git a/less/variables.less b/less/variables.less index 99f8bfb693..57a08f3b23 100644 --- a/less/variables.less +++ b/less/variables.less @@ -304,6 +304,10 @@ @panel-border-radius: @border-radius-base; @panel-heading-bg: #f5f5f5; +@panel-primary-text: #fff; +@panel-primary-border: @brand-primary; +@panel-primary-heading-bg: @brand-primary; + @panel-success-text: @state-success-text; @panel-success-border: @state-success-border; @panel-success-heading-bg: @state-success-bg; From d8b3e48e1450bc0c49548c6cbd1139f7910b1c00 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 31 Mar 2013 22:58:01 -0700 Subject: [PATCH 081/241] add proper markup to list group in panels section --- docs/docs.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/docs.html b/docs/docs.html index 94826ffde8..ad944f6303 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -4627,8 +4627,18 @@ For example, <section> should be wrapped as inline.
    {% highlight html linenos %}
    +
    Panel heading
    - Panel content +

    ...

    + + +
      +
    • Cras justo odio
    • +
    • Dapibus ac facilisis in
    • +
    • Morbi leo risus
    • +
    • Porta ac consectetur ac
    • +
    • Vestibulum at eros
    • +
    {% endhighlight %} From 9df6dc81b57cb710c1e623c4e06c39954fc82280 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 1 Apr 2013 00:02:51 -0700 Subject: [PATCH 082/241] bring in customizing bootstrap section from old gist --- docs/_includes/docs-nav.html | 1 + docs/docs.html | 75 ++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+) diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html index e87bea2b73..f4caabc5c6 100644 --- a/docs/_includes/docs-nav.html +++ b/docs/_includes/docs-nav.html @@ -6,6 +6,7 @@
  • Getting started
  • What's included
  • Templates and examples
  • +
  • Customizing Bootstrap
  • CSS
  • diff --git a/docs/docs.html b/docs/docs.html index ad944f6303..4460506d3b 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -191,6 +191,81 @@ title: Bootstrap Documentation +
    + +

    Customizing Bootstrap is best accomplished when you treat it as another dependency in your development stack. Doing so ensures future upgrades are as easy as possible while also exposing you to the intricacies of the framework.

    +

    Side note: While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source Less code to your own classes via mixins. For the time being, neither options are documented here.

    + +

    Bootstrap as a dependency

    +

    The best way to become familiar with Bootstrap's CSS, ensure straightforward updates, and provide flexible options to minimize code bloat, we recommend you get started by including a vanilla version of Bootstrap.

    + +

    Get your templates ready

    +

    Download the latest master release and snag the compiled (bootstrap.css) or minified (bootstrap.min.css) versions. As documented above, include one of them in your <head> along with a separate blank CSS file for your own modifications. Alternatively you may use one of the example templates for a quicker start.

    + +

    Compiled or minified?

    +

    Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.

    + +

    From there, include whatever Bootstrap components and content you need to get you going. It's best to have a rough idea in mind of modifications to make and content to include, so be sure to spend a brief amount of time on that before moving on.

    + +

    Customizing components

    +

    Here comes the good part: customizing Bootstrap's components to suite your own needs. There are varying degrees to this, but the two most common are light customizations and complete visual overhauls. Luckily, there are plenty of examples of both of those.

    +

    We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the Twitter Translation Center (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, .btn-ttc.

    +

    Instead of using the provided Bootstrap buttons, which only require just one class to start, .btn, we'll add our own modifier class, .btn-ttc. This will give us a slightly custom look with minimal effort.

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

    In the custom stylesheet, add the following CSS:

    + +{% highlight css linenos %} +/* Custom button +-------------------------------------------------- */ + +/* Override base .btn styles */ +/* Apply text and background changes to three key states: default, hover, and active (click). */ +.btn-ttc, +.btn-ttc:hover, +.btn-ttc:active { + color: white; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #007da7; +} + +/* Apply the custom-colored gradients */ +/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */ +.btn-ttc { + background-repeat: repeat-x; + background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%); + ... +} + +/* Set the hover state */ +/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */ +.btn-ttc:hover { + background-position: 0 -15px; +} +{% endhighlight %} + +

    Customizing Bootstrap components takes time, but should be straightforward. Look to the source code often and duplicate the selectors you need for your modifications. Placing them after the Bootstrap source makes for easy overriding without complication. To recap, here's the basic workflow:

    +
      +
    • For each element you want to customize, find its code in the compiled Bootstrap CSS. Copy and paste the selector for a component as-is. For instance, to customize the navbar background, just snag .navbar.
    • +
    • Add all your custom CSS in a separate stylesheet using the selectors you just copied from the Bootstrap source. No need for prefacing with additional classes or using !important here.
    • +
    • Rinse and repeat until you're happy with your customizations.
    • +
    +

    Going beyond light customizations and into visual overhauls is just as easy as the above custom button. For a site like Karma, which use Bootstrap as a reset of sorts with heavy modifications, more extensive work is involved, but well worth it in the end.

    + +

    Removing potential bloat

    +

    Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where bandwidth becomes more of a financial issue. We encourage folks to remove whatever is unused with our Customizer.

    +

    **img**

    +

    Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.

    + +
    + + + +

    CSS

    From 7bee10a5ef240cd6dc738998b8ff64dd75df3804 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 1 Apr 2013 00:11:47 -0700 Subject: [PATCH 083/241] oops, restore customizer --- docs/customize.html | 358 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 358 insertions(+) create mode 100644 docs/customize.html diff --git a/docs/customize.html b/docs/customize.html new file mode 100644 index 0000000000..61a789b1a5 --- /dev/null +++ b/docs/customize.html @@ -0,0 +1,358 @@ +--- +layout: default +title: Customize and download +--- + + + +
    + + +
    +
    + +
    +
    +

    Scaffolding

    + + + + + +

    Base CSS

    + + + + + + + +
    +
    +

    Components

    + + + + + + + + + + + +

    JS Components

    + + + + + + +
    +
    +

    Miscellaneous

    + + + + +

    Responsive

    + + + + + +
    +
    +
    + +
    + +
    +
    + + + + + + + +
    +
    + + + + + + +
    +
    +

    Heads up!

    +

    All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.

    +
    +
    +
    + + +
    + +
    +
    +

    Scaffolding

    + + + + + +

    Links

    + + + + + +

    Grid system

    + + + + + + + + + + + + + + + +
    +
    + +

    Typography

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

    Tables

    + + + + + + + + + +

    Forms

    + + + + + + + + + + + + + + + + + +
    +
    + +

    Form states & alerts

    + + + + + + + + + + + + + + + + + +

    Navbar

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

    Dropdowns

    + + + + + + + + + + +
    +
    +
    + +
    + +
    + Customize and Download +

    What's included?

    +

    Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

    +
    +
    +
    + + +
    From 19d5e616685cc0ad72c216e04a69758bf0ed67bf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 1 Apr 2013 00:34:58 -0700 Subject: [PATCH 084/241] clearer separation with section headers; simpler customizing copy --- docs/assets/css/docs.css | 14 ++++++++++++-- docs/docs.html | 29 +++++++++++++++-------------- 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b5f565cd38..fc653277e8 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -48,6 +48,16 @@ body { bottom: 15px; } +/* Side notes for calling out things */ +.bs-docs-sidenote { + margin: 20px 0; + padding: 15px 30px 15px 15px; + background-color: #fcf2f2; + border-left: 5px solid #df7c7b; +} +.bs-docs-sidenote p:last-child { + margin-bottom: 0; +} /* Sections @@ -75,13 +85,13 @@ section > ul li { .bs-docs-section-header { padding-top: 60px; - color: #8a8a8a; + color: #b94a48; + border-bottom: 5px solid #b94a48; } .bs-docs-section-header h1 { font-size: 80px; font-size: 8rem; line-height: 1; - color: #b94a48; } /* Base class */ diff --git a/docs/docs.html b/docs/docs.html index 4460506d3b..1af0f367b2 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -195,22 +195,19 @@ title: Bootstrap Documentation -

    Customizing Bootstrap is best accomplished when you treat it as another dependency in your development stack. Doing so ensures future upgrades are as easy as possible while also exposing you to the intricacies of the framework.

    -

    Side note: While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source Less code to your own classes via mixins. For the time being, neither options are documented here.

    +

    Customizing Bootstrap is best accomplished when you treat it as another dependency in your development stack. Doing so ensures future upgrades are as easy as possible while also familiarizing yourself to the intricacies of the framework.

    -

    Bootstrap as a dependency

    -

    The best way to become familiar with Bootstrap's CSS, ensure straightforward updates, and provide flexible options to minimize code bloat, we recommend you get started by including a vanilla version of Bootstrap.

    +

    Once you've downloaded and included Bootstrap's CSS into your templates, you can move on to customizing the included components. To do so, create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.

    -

    Get your templates ready

    -

    Download the latest master release and snag the compiled (bootstrap.css) or minified (bootstrap.min.css) versions. As documented above, include one of them in your <head> along with a separate blank CSS file for your own modifications. Alternatively you may use one of the example templates for a quicker start.

    +
    +

    Compiled or minified?

    +

    Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.

    +
    -

    Compiled or minified?

    -

    Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.

    - -

    From there, include whatever Bootstrap components and content you need to get you going. It's best to have a rough idea in mind of modifications to make and content to include, so be sure to spend a brief amount of time on that before moving on.

    +

    From there, include whatever Bootstrap components and HTML content you need to get your template setup. It's best to have a rough idea in mind of modifications to make and content to include, so be sure to spend a brief amount of time on that before moving on.

    Customizing components

    -

    Here comes the good part: customizing Bootstrap's components to suite your own needs. There are varying degrees to this, but the two most common are light customizations and complete visual overhauls. Luckily, there are plenty of examples of both of those.

    +

    There are varying degrees to customizing components, but most fall into two camps: light customizations and complete visual overhauls. Luckily, there are plenty of examples of both.

    We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the Twitter Translation Center (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, .btn-ttc.

    Instead of using the provided Bootstrap buttons, which only require just one class to start, .btn, we'll add our own modifier class, .btn-ttc. This will give us a slightly custom look with minimal effort.

    {% highlight html linenos %} @@ -248,16 +245,20 @@ title: Bootstrap Documentation } {% endhighlight %} -

    Customizing Bootstrap components takes time, but should be straightforward. Look to the source code often and duplicate the selectors you need for your modifications. Placing them after the Bootstrap source makes for easy overriding without complication. To recap, here's the basic workflow:

    +

    Customizing Bootstrap components takes time, but should be straightforward. Look to the source code often and duplicate the selectors you need for your modifications. Placing them after the Bootstrap source makes for easy overriding without complication. To recap, here's the basic workflow:

    • For each element you want to customize, find its code in the compiled Bootstrap CSS. Copy and paste the selector for a component as-is. For instance, to customize the navbar background, just snag .navbar.
    • Add all your custom CSS in a separate stylesheet using the selectors you just copied from the Bootstrap source. No need for prefacing with additional classes or using !important here.
    • Rinse and repeat until you're happy with your customizations.
    -

    Going beyond light customizations and into visual overhauls is just as easy as the above custom button. For a site like Karma, which use Bootstrap as a reset of sorts with heavy modifications, more extensive work is involved, but well worth it in the end.

    +

    Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like Karma, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.

    + +
    +

    Side note: While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source Less code to your own classes via mixins. For the time being, neither options are documented here.

    +

    Removing potential bloat

    -

    Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where bandwidth becomes more of a financial issue. We encourage folks to remove whatever is unused with our Customizer.

    +

    Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where bandwidth literally becomes a financial issue. We encourage folks to remove whatever is unused with our Customizer.

    **img**

    Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.

    From e183dd46a20daa725fe5ad7acb5313d7b20db6f1 Mon Sep 17 00:00:00 2001 From: Robert Burns Date: Mon, 1 Apr 2013 09:27:49 -0400 Subject: [PATCH 085/241] Update carousel-caption btn styles --- docs/examples/carousel.html | 2 -- less/carousel.less | 3 +++ 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html index 0c50c7a145..e97d895c2a 100644 --- a/docs/examples/carousel.html +++ b/docs/examples/carousel.html @@ -91,8 +91,6 @@ body { .carousel-caption .lead { margin: 0; line-height: 1.25; - color: #fff; - text-shadow: 0 1px 1px rgba(0,0,0,.4); } .carousel-caption .btn { margin-top: 10px; diff --git a/less/carousel.less b/less/carousel.less index 7c75a519b6..9816200f45 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -163,6 +163,9 @@ padding-bottom: 20px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); + & .btn { + text-shadow: none; // No shadow for button elements in carousel-caption + } } From 1816483baa9de59dc1ea0cec67fcbd00b28c6b79 Mon Sep 17 00:00:00 2001 From: Robert Burns Date: Mon, 1 Apr 2013 09:29:43 -0400 Subject: [PATCH 086/241] Add carousel indicators to example --- docs/examples/carousel.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html index e97d895c2a..925314922b 100644 --- a/docs/examples/carousel.html +++ b/docs/examples/carousel.html @@ -273,6 +273,12 @@ body { From e6d6fcffb0491534201e23867fffdc53b4568fab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 1 Apr 2013 12:09:49 -0700 Subject: [PATCH 090/241] button for navbar toggle --- docs/docs.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/docs.html b/docs/docs.html index d27c6e2238..a8f55d9486 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -3506,11 +3506,11 @@ For example, <section> should be wrapped as inline.

    Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

    -

    Use the sticky footer with a fixed navbar if need be, too.

    +

    Use the sticky footer with a fixed navbar if need be, too.

    From e0bce6af123fc3d935a34aae87d0787e7e54e07f Mon Sep 17 00:00:00 2001 From: Fabien Date: Tue, 2 Apr 2013 13:30:13 +0200 Subject: [PATCH 098/241] Replace png img by holder.js in carousel example --- docs/examples/carousel.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html index be75a5cc36..538a440da1 100644 --- a/docs/examples/carousel.html +++ b/docs/examples/carousel.html @@ -245,7 +245,7 @@ body {