From db7b8362fdb39d2664a57b051ee3a795a3a555fd Mon Sep 17 00:00:00 2001 From: Bass Jobsen Date: Mon, 11 Jan 2016 09:47:36 +0100 Subject: remove link to the pager component see https://github.com/twbs/bootstrap/pull/18782 --- docs/components/pagination.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/pagination.md b/docs/components/pagination.md index 9804da83f..ed5bcd543 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -4,7 +4,7 @@ title: Pagination group: components --- -Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pager). +Provide pagination links for your site or app with the multi-page pagination component. ## Contents -- cgit v1.2.3 From 5e9b365b2533d245bc992caaad2beca4bc3d701e Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 13 Jan 2016 15:57:22 -0800 Subject: List group docs: rm unnecessary

from Markdown source [skip sauce] --- docs/components/list-group.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 5dbcca2d5..c2fa96463 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -12,7 +12,7 @@ List groups are a flexible and powerful component for displaying not only simple {:toc} ## Basic example -

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.

+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. {% example html %} +
Dapibus ac facilisis in Cras sit amet nibh libero -- cgit v1.2.3 From 5cde72fae3b5c3c0eb42870b81ed0c519ce7732f Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 13 Jan 2016 18:12:15 -0800 Subject: Remove near-duplicate contextual list group example [skip sauce] --- docs/components/list-group.md | 7 ------- 1 file changed, 7 deletions(-) (limited to 'docs/components') diff --git a/docs/components/list-group.md b/docs/components/list-group.md index c2fa96463..0d3254984 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -96,13 +96,6 @@ Add `.disabled` to a `.list-group-item` to gray it out to appear disabled. Use contextual classes to style list items, default or linked. Also includes `.active` state. {% example html %} -
    -
  • Dapibus ac facilisis in
    • -
  • Cras sit amet nibh libero
    • -
  • Porta ac consectetur ac
    • -
  • Vestibulum at eros
    • -
-
Dapibus ac facilisis in Cras sit amet nibh libero -- cgit v1.2.3 From 740ffb8ed4c8f22674322476bd22ae46e060359a Mon Sep 17 00:00:00 2001 From: Raphael Ackermann Date: Thu, 14 Jan 2016 09:59:40 +0100 Subject: typo: from controls --> form controls --- docs/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index ce0124f1a..58fd41ac0 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -84,7 +84,7 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a ` {% endexample %} -Below is a complete list of the specific from controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group. +Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group. -- cgit v1.2.3 From 8e00f623b3d689219994ea04e1fd7d5afc9f3cbc Mon Sep 17 00:00:00 2001 From: Quy Date: Fri, 15 Jan 2016 09:49:56 -0800 Subject: Use mixin syntax --- docs/components/utilities.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 1a8ceb361..00bc96721 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -254,7 +254,7 @@ The `.invisible` class can be used to toggle only the visibility of an element, // Usage as a mixin .element { - .invisible(); + @include invisible; } {% endhighlight %} -- cgit v1.2.3 From 955e0405ea04e8bce3fa8395cd5e1c4030c4947a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 17 Jan 2016 18:55:24 -0800 Subject: fuck around with card borders and more --- docs/components/card.md | 83 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) (limited to 'docs/components') diff --git a/docs/components/card.md b/docs/components/card.md index 159fa42be..28db0e3fa 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -211,6 +211,89 @@ Add an optional header and/or footer within a card. {% endexample %} +## Heading nav + +- Custom card nav (full width) +- Tabs +- Pills +- Alignment: + - left + - center + - right + +{% example html %} +
+
+ +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+{% endexample %} + + + +Or, use Bootstrap's nav pills or tabs to a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment. + +{% example html %} +
+
+ +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+{% endexample %} + +{% example html %} +
+
+ +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+{% endexample %} + ## Image caps Similar to headers and footers, cards include top and bottom image caps. -- cgit v1.2.3 From 497d28843e9e714089759ed192dd95d146930f04 Mon Sep 17 00:00:00 2001 From: Abdullah Alrasheed Date: Sun, 24 Jan 2016 13:31:27 +0800 Subject: DOCS - Fix a link in popover for v4 --- docs/components/popovers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/popovers.md b/docs/components/popovers.md index 9621bb7d8..727189083 100644 --- a/docs/components/popovers.md +++ b/docs/components/popovers.md @@ -268,7 +268,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap - +
offsets string '0 0'Offset of the popover relative to its target. For more information refer to Tether's offset docs.Offset of the popover relative to its target. For more information refer to Tether's offset docs.
-- cgit v1.2.3 From 6384789f952c297356a94aded5900d199d09ae87 Mon Sep 17 00:00:00 2001 From: cndpzc Date: Thu, 28 Jan 2016 15:44:56 +0800 Subject: Fix typo in forms.md Closes #19049 --- docs/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index 58fd41ac0..e6439ae25 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -271,7 +271,7 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o ### Inline forms -Use the `.form-inline` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently: +Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently: - Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`. - Controls receive `width: auto` to override the Bootstrap default `width: 100%`. -- cgit v1.2.3 From b4a2b993958c61becd96f4adff505a245ab0be44 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 3 Feb 2016 20:43:12 -0800 Subject: Dump the type margin overrides in alerts for utils, document that particular example, sidesteps part of #18884 --- docs/components/alerts.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'docs/components') diff --git a/docs/components/alerts.md b/docs/components/alerts.md index e27109768..c269c3d8f 100644 --- a/docs/components/alerts.md +++ b/docs/components/alerts.md @@ -49,6 +49,19 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
{% endexample %} +### Additional content + +Alerts can also contain additional HTML elements like headings and paragraphs. + +{% example html %} + +{% endexample %} + + ### Dismissing Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: -- cgit v1.2.3 From b75a0ca9791a9ee816c8046bc83046073e231284 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 3 Feb 2016 20:52:33 -0800 Subject: fuck that other class, let's just get tabs and pills in there --- docs/components/card.md | 37 ++----------------------------------- 1 file changed, 2 insertions(+), 35 deletions(-) (limited to 'docs/components') diff --git a/docs/components/card.md b/docs/components/card.md index 28db0e3fa..53580d667 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -211,42 +211,9 @@ Add an optional header and/or footer within a card.
{% endexample %} -## Heading nav +## Header nav -- Custom card nav (full width) -- Tabs -- Pills -- Alignment: - - left - - center - - right - -{% example html %} -
-
- -
-
-

Special title treatment

-

With supporting text below as a natural lead-in to additional content.

- Go somewhere -
-
-{% endexample %} - - - -Or, use Bootstrap's nav pills or tabs to a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment. +Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment. {% example html %}
-- cgit v1.2.3 From c59dbe56fe07cadf4ad09659d65d7090a07f2fbb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 15:40:25 -0800 Subject: Drop .center-block for .m-x-auto - Both classes do about the same thing, but with different names - Clarifies docs for .m-x-auto requiring a fixed width block element for it to work - Add missing heading for clearfix section in docs (unrelated) --- docs/components/utilities.md | 35 +++++++++++++---------------------- 1 file changed, 13 insertions(+), 22 deletions(-) (limited to 'docs/components') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 00bc96721..e59869fcd 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -60,8 +60,19 @@ Here are some representative examples of these classes: } {% endhighlight %} -Additionally, Bootstrap also includes an `.m-x-auto` class which sets the horizontal margins to `auto`. +Additionally, Bootstrap also includes an `.m-x-auto` class for centering fixed-width block level content by setting the horizontal margins to `auto`. +
+
+ Centered element +
+
+ +{% highlight html %} +
+ Centered element +
+{% endhighlight %} ## Text alignment @@ -191,27 +202,7 @@ Two similar non-responsive mixins (`pull-left` and `pull-right`) are also availa } {% endhighlight %} -## Center content - -Set an element to `display: block;` and center via `margin`. Available as a mixin and class. - -{% example html %} -
Centered block
-{% endexample %} - -{% highlight scss %} -// Class -.center-block { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Usage as a mixin -.element { - @include center-block; -} -{% endhighlight %} +## Clearfix Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin. -- cgit v1.2.3 From 365db6e3a8fd9c1bac75cf170948c946e2ed7678 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 18:16:37 -0800 Subject: clarify some docs for form validation including quick mention for customizing or disabling icons --- docs/components/forms.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index e6439ae25..fed3ba399 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -634,7 +634,12 @@ Block help text—for below inputs or for longer lines of help text—can be eas ## Validation -Bootstrap includes validation styles for danger, warning, and success states on form controls. To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles. +Bootstrap includes validation styles for danger, warning, and success states on form controls. + +- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles. +- Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state. +- You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling. +- Icons can also be disabled entirely by changing the variables to `non` or commenting out the source Sass. {% comment %} {% callout warning %} -- cgit v1.2.3 From b8ff763d6232d4a61858739b43f509366ffd1500 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 18:34:52 -0800 Subject: Tweak disabled button docs to help out #17231 --- docs/components/buttons.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/buttons.md b/docs/components/buttons.md index e3a4b26a8..9ec1c23f1 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -116,7 +116,11 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `Button {% endexample %} -As `` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it. In addition, include the `aria-disabled="true"` attribute, to indicate the state of the element to assistive technologies. +Disabled buttons using the `` element behave a bit different: + +- ``s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled. +- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. For browsers that support that proper, you won't see the disabled cursor at all. +- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies. {% example html %} Primary link -- cgit v1.2.3 From cbda7e3862306a2ec3bced93f250be9378b99c99 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 19:50:00 -0800 Subject: Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process --- docs/components/list-group.md | 60 +++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 30 deletions(-) (limited to 'docs/components') diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 0d3254984..c3d466d5f 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -45,13 +45,13 @@ Add labels to any list group item to show unread counts, activity, etc. {% endexample %} -## Linked items +## Disabled items -Linkify list group items by using anchor tags instead of list items (that also means a parent `
` instead of an `
{% endexample %} -## Disabled items - -Add `.disabled` to a `.list-group-item` to gray it out to appear disabled. - {% example html %}
- + + + + +
{% endexample %} @@ -97,10 +97,10 @@ Use contextual classes to style list items, default or linked. Also includes `.a {% example html %}
- Dapibus ac facilisis in - Cras sit amet nibh libero - Porta ac consectetur ac - Vestibulum at eros + Dapibus ac facilisis in + Cras sit amet nibh libero + Porta ac consectetur ac + Vestibulum at eros
{% endexample %} @@ -110,16 +110,16 @@ Add nearly any HTML within, even for linked list groups like the one below. {% example html %}
- -

List group item heading

+ +
List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

 - -

List group item heading

+ +
List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

 - -

List group item heading

+ +
List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
-- cgit v1.2.3 From 6c2b0d2b76ba0b9667fc439592aa2976fd573702 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 20:18:48 -0800 Subject: Updat modal sizing - Switch from width to max-width for all widths to avoid scaling outside viewport bounds - Rejigger the media queries for a more logical breakpoint for the large and small modal sizes - Avoids changing the width of the default modal (nullifying #17794 and fixing #17581) --- docs/components/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/modal.md b/docs/components/modal.md index e8627fe68..a8b1b4850 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -181,7 +181,7 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr ## Optional sizes -Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. +Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These size kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
-- cgit v1.2.3