aboutsummaryrefslogtreecommitdiff
path: root/docs/_includes/components
diff options
context:
space:
mode:
Diffstat (limited to 'docs/_includes/components')
-rw-r--r--docs/_includes/components/alerts.html12
-rw-r--r--docs/_includes/components/badges.html6
-rw-r--r--docs/_includes/components/button-dropdowns.html8
-rw-r--r--docs/_includes/components/button-groups.html4
-rw-r--r--docs/_includes/components/dropdowns.html8
-rw-r--r--docs/_includes/components/glyphicons.html14
-rw-r--r--docs/_includes/components/input-groups.html4
-rw-r--r--docs/_includes/components/labels.html5
-rw-r--r--docs/_includes/components/navbar.html62
-rw-r--r--docs/_includes/components/navs.html36
-rw-r--r--docs/_includes/components/panels.html1
-rw-r--r--docs/_includes/components/progress-bars.html46
-rw-r--r--docs/_includes/components/responsive-embed.html2
-rw-r--r--docs/_includes/components/thumbnails.html8
14 files changed, 133 insertions, 83 deletions
diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html
index 063c52cd5..749ecc2b4 100644
--- a/docs/_includes/components/alerts.html
+++ b/docs/_includes/components/alerts.html
@@ -32,17 +32,17 @@
<div class="alert alert-danger" role="alert">...</div>
{% endhighlight %}
- <h2 id="alerts-dismissable">Dismissable alerts</h2>
- <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
+ <h2 id="alerts-dismissible">Dismissible alerts</h2>
+ <p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
<div class="bs-example">
- <div class="alert alert-warning alert-dismissable" role="alert">
- <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+ <div class="alert alert-warning alert-dismissible" role="alert">
+ <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</div>
{% highlight html %}
-<div class="alert alert-warning alert-dismissable" role="alert">
- <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+<div class="alert alert-warning alert-dismissible" role="alert">
+ <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
{% endhighlight %}
diff --git a/docs/_includes/components/badges.html b/docs/_includes/components/badges.html
index daa0636cb..95aea2e40 100644
--- a/docs/_includes/components/badges.html
+++ b/docs/_includes/components/badges.html
@@ -21,13 +21,13 @@
<h4>Adapts to active nav states</h4>
<p>Built-in styles are included for placing badges in active states in pill navigations.</p>
<div class="bs-example">
- <ul class="nav nav-pills">
+ <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br>
- <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
+ <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
@@ -48,7 +48,7 @@
</button>
</div>
{% highlight html %}
-<ul class="nav nav-pills nav-stacked">
+<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html
index d4ae0450f..165e0777e 100644
--- a/docs/_includes/components/button-dropdowns.html
+++ b/docs/_includes/components/button-dropdowns.html
@@ -246,7 +246,7 @@
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu" role="menu">
...
</ul>
</div>
@@ -256,7 +256,7 @@
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu" role="menu">
...
</ul>
</div>
@@ -266,7 +266,7 @@
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button <span class="caret"></span>
</button>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu" role="menu">
...
</ul>
</div>
@@ -313,7 +313,7 @@
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu" role="menu">
<!-- Dropdown menu links -->
</ul>
</div>
diff --git a/docs/_includes/components/button-groups.html b/docs/_includes/components/button-groups.html
index b2f700528..018d66ed5 100644
--- a/docs/_includes/components/button-groups.html
+++ b/docs/_includes/components/button-groups.html
@@ -121,7 +121,7 @@
Dropdown
<span class="caret"></span>
</button>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu" role="menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
@@ -194,7 +194,7 @@
</div>
<div class="bs-callout bs-callout-warning">
<h4>IE8 and borders</h4>
- <p>Internet Explorer 8 doesn't render borders in on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
+ <p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
<p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
</div>
diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html
index 6e44c45ba..4889c64f2 100644
--- a/docs/_includes/components/dropdowns.html
+++ b/docs/_includes/components/dropdowns.html
@@ -7,7 +7,7 @@
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<div class="bs-example">
<div class="dropdown clearfix">
- <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
@@ -22,7 +22,7 @@
</div><!-- /example -->
{% highlight html %}
<div class="dropdown">
- <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
@@ -56,7 +56,7 @@
<p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bs-example">
<div class="dropdown clearfix">
- <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
@@ -85,7 +85,7 @@
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-example">
<div class="dropdown clearfix">
- <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu3" data-toggle="dropdown">
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
diff --git a/docs/_includes/components/glyphicons.html b/docs/_includes/components/glyphicons.html
index 6900e0dfa..e87434137 100644
--- a/docs/_includes/components/glyphicons.html
+++ b/docs/_includes/components/glyphicons.html
@@ -21,6 +21,20 @@
<h4>Don't mix with other components</h4>
<p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code>&lt;span&gt;</code> and apply the icon classes to the <code>&lt;span&gt;</code>.</p>
</div>
+ <div class="bs-callout bs-callout-danger">
+ <h4>Only for use on empty elements</h4>
+ <p>Icon classes should only be used on elements that contain no text content and have no child elements.</p>
+ </div>
+ <div class="bs-callout bs-callout-info">
+ <h4>Changing the icon font location</h4>
+ <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
+ <ul>
+ <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li>
+ <li>Utilize the <a href="http://lesscss.org/usage/#command-line-usage-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
+ <li>Change the <code>url()</code> paths in the compiled CSS.</li>
+ </ul>
+ <p>Use whatever option best suits your specific development setup.</p>
+ </div>
{% highlight html %}
<span class="glyphicon glyphicon-search"></span>
{% endhighlight %}
diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html
index e7ea9c064..4cfddad08 100644
--- a/docs/_includes/components/input-groups.html
+++ b/docs/_includes/components/input-groups.html
@@ -221,7 +221,7 @@
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -237,7 +237,7 @@
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
- <ul class="dropdown-menu dropdown-menu-right">
+ <ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
diff --git a/docs/_includes/components/labels.html b/docs/_includes/components/labels.html
index bc2d5f9a2..05cf2fe81 100644
--- a/docs/_includes/components/labels.html
+++ b/docs/_includes/components/labels.html
@@ -32,4 +32,9 @@
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
{% endhighlight %}
+
+ <div class="bs-callout bs-callout-info">
+ <h4>Have tons of labels?</h4>
+ <p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
+ </div>
</div>
diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html
index ab78e5853..2bacc282d 100644
--- a/docs/_includes/components/navbar.html
+++ b/docs/_includes/components/navbar.html
@@ -17,13 +17,17 @@
<h4>Requires JavaScript</h4>
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
</div>
+ <div class="bs-callout bs-callout-info">
+ <h4>Changing the collapsed mobile navbar breakpoint</h4>
+ <p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
+ </div>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -38,7 +42,7 @@
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -59,7 +63,7 @@
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -78,7 +82,7 @@
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -93,8 +97,8 @@
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+ <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -114,8 +118,8 @@
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+ <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -140,6 +144,32 @@
</div>
+ <h2 id="navbar-brand-image">Brand image</h2>
+ <p>Replace the navbar brand with your own image by swapping the text for an <code>&lt;img&gt;</code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
+ <div class="bs-example">
+ <nav class="navbar navbar-default" role="navigation">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <a class="navbar-brand" href="#">
+ <img alt="Brand" height="20" src="data:image/png;base64,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">
+ </a>
+ </div>
+ </div>
+ </nav>
+ </div>
+{% highlight html %}
+<nav class="navbar navbar-default" role="navigation">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <a class="navbar-brand" href="#">
+ <img alt="Brand" src="...">
+ </a>
+ </div>
+ </div>
+</nav>
+{% endhighlight %}
+
+
<h2 id="navbar-forms">Forms</h2>
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
@@ -147,7 +177,7 @@
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -192,7 +222,7 @@
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -221,7 +251,7 @@
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -246,7 +276,7 @@
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -282,7 +312,7 @@
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -326,7 +356,7 @@ body { padding-top: 70px; }
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -371,7 +401,7 @@ body { padding-bottom: 70px; }
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -407,7 +437,7 @@ body { padding-bottom: 70px; }
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html
index 9cad335d0..5fcb1490c 100644
--- a/docs/_includes/components/navs.html
+++ b/docs/_includes/components/navs.html
@@ -6,14 +6,14 @@
<h2 id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-example">
- <ul class="nav nav-tabs">
+ <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
@@ -27,14 +27,14 @@
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example">
- <ul class="nav nav-pills">
+ <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-pills">
+<ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
@@ -42,14 +42,14 @@
{% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-example">
- <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
+ <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-pills nav-stacked">
+<ul class="nav nav-pills nav-stacked" role="tablist">
...
</ul>
{% endhighlight %}
@@ -62,23 +62,23 @@
<p>As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
</div>
<div class="bs-example">
- <ul class="nav nav-tabs nav-justified">
+ <ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<br>
- <ul class="nav nav-pills nav-justified">
+ <ul class="nav nav-pills nav-justified" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-tabs nav-justified">
+<ul class="nav nav-tabs nav-justified" role="tablist">
...
</ul>
-<ul class="nav nav-pills nav-justified">
+<ul class="nav nav-pills nav-justified" role="tablist">
...
</ul>
{% endhighlight %}
@@ -93,14 +93,14 @@
</div>
<div class="bs-example">
- <ul class="nav nav-pills">
+ <ul class="nav nav-pills" role="tablist">
<li><a href="#">Clickable link</a></li>
<li><a href="#">Clickable link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-pills">
+<ul class="nav nav-pills" role="tablist">
...
<li class="disabled"><a href="#">Disabled link</a></li>
...
@@ -113,7 +113,7 @@
<h3>Tabs with dropdowns</h3>
<div class="bs-example">
- <ul class="nav nav-tabs">
+ <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
@@ -131,13 +131,13 @@
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs" role="tablist">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu" role="menu">
...
</ul>
</li>
@@ -147,7 +147,7 @@
<h3>Pills with dropdowns</h3>
<div class="bs-example">
- <ul class="nav nav-pills">
+ <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
@@ -165,13 +165,13 @@
</ul>
</div><!-- /example -->
{% highlight html %}
-<ul class="nav nav-pills">
+<ul class="nav nav-pills" role="tablist">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu" role="menu">
...
</ul>
</li>
diff --git a/docs/_includes/components/panels.html b/docs/_includes/components/panels.html
index b00cd0f72..acf32c51c 100644
--- a/docs/_includes/components/panels.html
+++ b/docs/_includes/components/panels.html
@@ -22,6 +22,7 @@
<h3 id="panels-heading">Panel with heading</h3>
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
+ <p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
<div class="bs-example">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html
index a78e2c881..d57c3fa7d 100644
--- a/docs/_includes/components/progress-bars.html
+++ b/docs/_includes/components/progress-bars.html
@@ -120,60 +120,60 @@
<h3 id="progress-striped">Striped</h3>
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-example">
- <div class="progress progress-striped" >
- <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+ <div class="progress">
+ <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
- <div class="progress progress-striped">
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+ <div class="progress">
+ <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
- <div class="progress progress-striped">
- <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+ <div class="progress">
+ <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
- <div class="progress progress-striped">
- <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+ <div class="progress">
+ <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
{% highlight html %}
-<div class="progress progress-striped">
- <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+<div class="progress">
+ <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
-<div class="progress progress-striped">
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+<div class="progress">
+ <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
-<div class="progress progress-striped">
- <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+<div class="progress">
+ <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
-<div class="progress progress-striped">
- <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+<div class="progress">
+ <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
{% endhighlight %}
<h3 id="progress-animated">Animated</h3>
- <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
+ <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
<div class="bs-example">
- <div class="progress progress-striped active">
- <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
</div>
</div>
{% highlight html %}
-<div class="progress progress-striped active">
- <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
+<div class="progress">
+ <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
@@ -186,7 +186,7 @@
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
- <div class="progress-bar progress-bar-warning" style="width: 20%">
+ <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
@@ -199,7 +199,7 @@
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
- <div class="progress-bar progress-bar-warning" style="width: 20%">
+ <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
diff --git a/docs/_includes/components/responsive-embed.html b/docs/_includes/components/responsive-embed.html
index bf65599d7..c9e0f5807 100644
--- a/docs/_includes/components/responsive-embed.html
+++ b/docs/_includes/components/responsive-embed.html
@@ -2,7 +2,7 @@
<h1 id="responsive-embed" class="page-header">Responsive embed</h1>
<p>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.</p>
- <p>Rules are directly apply to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code> and <code>&lt;object&gt;</code> elements, optionally use of an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
+ <p>Rules are directly applied to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code>, and <code>&lt;object&gt;</code> elements; optionally use an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
<p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code>&lt;iframe&gt;</code>s as we override that for you.</p>
<div class="bs-example">
<div class="embed-responsive embed-responsive-16by9">
diff --git a/docs/_includes/components/thumbnails.html b/docs/_includes/components/thumbnails.html
index ecc53882f..3b6dfce43 100644
--- a/docs/_includes/components/thumbnails.html
+++ b/docs/_includes/components/thumbnails.html
@@ -46,7 +46,7 @@
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
- <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
+ <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -56,7 +56,7 @@
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
- <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
+ <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -66,7 +66,7 @@
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
- <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
+ <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -80,7 +80,7 @@
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
- <img data-src="holder.js/300x200" alt="...">
+ <img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 15:29:57 +0000