Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove incorrect role="tabpanel" from navs docs #22401

Merged
merged 3 commits into from
Apr 9, 2017
Merged

Remove incorrect role="tabpanel" from navs docs #22401

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
50d178e
Remove incorrect role="tabpanel" from navs docs
patrickhlauke Apr 9, 2017
41abd1c
Merge branch 'v4-dev' into v4-dev-docs-navs-js-tabpanel-fix
patrickhlauke Apr 9, 2017
ba306d9
Merge branch 'v4-dev' into v4-dev-docs-navs-js-tabpanel-fix
patrickhlauke Apr 9, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions docs/components/navs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin

Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.

<div class="bd-example bd-example-tabs" role="tabpanel">
<div class="bd-example bd-example-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
Expand Down Expand Up @@ -357,7 +357,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled

To help fit your needs, this works with `<ul>`-based markup, as shown above, as well as `<nav>`-based markup shown below.

<div class="bd-example bd-example-tabs" role="tabpanel">
<div class="bd-example bd-example-tabs">
<nav class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="profile">Profile</a>
Expand Down Expand Up @@ -411,7 +411,7 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as

The tabs plugin also works with pills.

<div class="bd-example bd-example-tabs" role="tabpanel">
<div class="bd-example bd-example-tabs">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
Expand Down Expand Up @@ -469,7 +469,7 @@ The tabs plugin also works with pills.

And with vertical pills.

<div class="bd-example bd-example-tabs" role="tabpanel">
<div class="bd-example bd-example-tabs">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
Expand Down Expand Up @@ -517,7 +517,6 @@ And with vertical pills.

You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`.

<div role="tabpanel">
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
Expand All @@ -543,7 +542,6 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
{% endhighlight %}
</div>

### Via JavaScript

Expand Down