From 3b4b9a7fe58082cde1545167e511a4acc6d5a0fb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 7 Feb 2014 01:16:34 -0800 Subject: Fixes #12614: Add progress bar example with visible label --- docs/components.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 264e9c763..45c7d2e4b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2261,6 +2261,23 @@ body { padding-bottom: 70px; } 60% Complete +{% endhighlight %} + +

With label

+

Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.

+
+
+
+ 60% +
+
+
+{% highlight html %} +
+
+ 60% Complete +
+
{% endhighlight %}

Contextual alternatives

-- cgit v1.2.3 From 4f9cdefab7dc8b569eb5f630264559f230ff4df4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 7 Feb 2014 01:31:42 -0800 Subject: consistency --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 45c7d2e4b..efa8a0519 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2275,7 +2275,7 @@ body { padding-bottom: 70px; } {% highlight html %}
- 60% Complete + 60%
{% endhighlight %} -- cgit v1.2.3 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.

+
+
+ + Cras justo odio + + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros +
+
+{% 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