From 24de9b099438c09236b2066333744e3995cd88ab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Mar 2014 16:55:15 -0800 Subject: Fixes #12848: Account for and document progress bars at 0-3% --- docs/components.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index efa8a0519..5780c4a31 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2280,6 +2280,34 @@ body { padding-bottom: 70px; } {% endhighlight %} +

Low percentages

+

Progress bars representing low single digit percentages, as well as 0%, include a min-width: 20px; for legibility.

+
+
+
+ 0% +
+
+
+
+ 2% +
+
+
+{% highlight html %} +
+
+ 0% +
+
+
+
+ 2% +
+
+{% endhighlight %} + +

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

-- cgit v1.2.3 From 0c9308a3b29be6d56c582dce33092164be7997b4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 6 Mar 2014 21:40:22 -0800 Subject: Rewrite the disabled list group items to simplify styles --- docs/components.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 5780c4a31..cb3ca9f14 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2648,6 +2648,31 @@ body { padding-bottom: 70px; } Porta ac consectetur ac Vestibulum at eros
+{% endhighlight %} + +

Disabled items

+

Add .disabled to a .list-group-item to gray it out to appear disabled.

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

Contextual classes

-- cgit v1.2.3 From 705ff7f2275ca823f71ca8dfba27a3b68119a2a4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 6 Mar 2014 23:18:13 -0800 Subject: Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs --- docs/components.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index cb3ca9f14..f70ceedc3 100644 --- a/docs/components.html +++ b/docs/components.html @@ -3025,6 +3025,34 @@ body { padding-bottom: 70px; } + +
+

Responsive embed

+ +

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

+

Rules are directly apply to <iframe>, <embed> and <object> elements, optionally use of an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

+

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.

+
+
+ +
+
+{% highlight html %} + +
+ +
+ + +
+ +
+{% endhighlight %} +
+ + +
-- cgit v1.2.3 From ce634a0ba7ceb5f9da21b74aa084d31e2274e0f1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Mar 2014 14:49:52 -0700 Subject: Document shitty situation of multiple .navbar-right classes in #12951 --- docs/components.html | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f70ceedc3..ad145604f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1535,6 +1535,11 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,

Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

+
+

Right aligning multiple components

+

Navbars currently have a limitation with multiple .navbar-right classes. To properly space content, we use negative margin on the last .navbar-right element. When there are multiple elements using that class, these margins don't work as intended.

+

We'll revisit this when we can rewrite that component in v4.

+
-- cgit v1.2.3 From 15d44940387f716ec5d2efee12bc9d9a7530ae56 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Mar 2014 15:32:36 -0700 Subject: Moves IE8 justified button border mention to docs section, not the browser bugs page /cc @cvrebert --- docs/components.html | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index ad145604f..7b8b35088 100644 --- a/docs/components.html +++ b/docs/components.html @@ -370,6 +370,11 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,

Handling borders

Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However, margin doesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

+
+

IE8 and borders

+

Internet Explorer 8 doesn't render borders in on buttons in a justified button group, whether it's on <a> or <button> elements. To get around that, wrap each button in another .btn-group.

+

See #12476 for more information.

+

With <a> elements

Just wrap a series of .btns in .btn-group.btn-group-justified.

-- cgit v1.2.3