diff options
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/5.0/components/carousel.md | 22 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/collapse.md | 12 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/list-group.md | 36 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/modal.md | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/navs.md | 72 | ||||
| -rw-r--r-- | site/content/docs/5.0/migration.md | 1 |
6 files changed, 73 insertions, 72 deletions
diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 935779238..e131b502b 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -22,7 +22,7 @@ Please be aware that nested carousels are not supported, and carousels are gener Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. -**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the id of the `.carousel` element. +**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute that matches the id of the `.carousel` element. ### Slides only @@ -61,11 +61,11 @@ Adding in the previous and next controls: {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> + <a href="#" class="carousel-control-prev" data-target="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> + <a href="#" class="carousel-control-next" data-target="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -94,11 +94,11 @@ You can also add the indicators to the carousel, alongside the controls, too. {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> + <a href="#" class="carousel-control-prev" data-target="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> + <a href="#" class="carousel-control-next" data-target="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -139,11 +139,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a </div> </div> </div> - <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> + <a href="#" class="carousel-control-prev" data-target="#carouselExampleCaptions" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> + <a href="#" class="carousel-control-next" data-target="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -167,11 +167,11 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev"> + <a href="#" class="carousel-control-prev" data-target="#carouselExampleFade" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next"> + <a href="#" class="carousel-control-next" data-target="#carouselExampleFade" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -195,11 +195,11 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev"> + <a href="#" class="carousel-control-prev" data-target="#carouselExampleInterval" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next"> + <a href="#" class="carousel-control-next" data-target="#carouselExampleInterval" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index a182ab230..7f5e82157 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -22,12 +22,12 @@ Click the buttons below to show and hide another element via class changes: - `.collapsing` is applied during transitions - `.collapse.show` shows content -You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required. +You can use any element with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required. {{< example >}} <p> - <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> - Link with href + <a href="#" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> + Link with data-target </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target @@ -42,12 +42,12 @@ You can use a link with the `href` attribute, or a button with the `data-target` ## Multiple targets -A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-target` attribute. -Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-target` attribute +Any element can show and hide multiple elements by referencing them with a selector in its `data-target` attribute. +Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `data-target` attribute {{< example >}} <p> - <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> + <a href="#" class="btn btn-primary" data-toggle="collapse" data-target="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index a82bdddf7..73d64eebf 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -263,10 +263,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> - <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a> - <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a> - <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a> - <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a> + <a href="#" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" data-target="#list-home" role="tab" aria-controls="list-home">Home</a> + <a href="#" class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" data-target="#list-profile" role="tab" aria-controls="list-profile">Profile</a> + <a href="#" class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" data-target="#list-messages" role="tab" aria-controls="list-messages">Messages</a> + <a href="#" class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" data-target="#list-settings" role="tab" aria-controls="list-settings">Settings</a> </div> </div> <div class="col-8"> @@ -292,10 +292,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> - <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> - <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> - <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> - <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a> + <a href="#" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" data-target="#list-home" role="tab" aria-controls="home">Home</a> + <a href="#" class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" data-target="#list-profile" role="tab" aria-controls="profile">Profile</a> + <a href="#" class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" data-target="#list-messages" role="tab" aria-controls="messages">Messages</a> + <a href="#" class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" data-target="#list-settings" role="tab" aria-controls="settings">Settings</a> </div> </div> <div class="col-8"> @@ -317,10 +317,10 @@ You can activate a list group navigation without writing any JavaScript by simpl {{< highlight html >}} <!-- List group --> <div class="list-group" id="myList" role="tablist"> - <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a> + <a href="#" class="list-group-item list-group-item-action active" data-toggle="list" data-target="#home" role="tab">Home</a> + <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#profile" role="tab">Profile</a> + <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#messages" role="tab">Messages</a> + <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#settings" role="tab">Settings</a> </div> <!-- Tab panes --> @@ -352,7 +352,7 @@ triggerTabList.forEach(function (triggerEl) { You can activate individual list item in several ways: {{< highlight js >}} -var triggerEl = document.querySelector('#myTab a[href="#profile"]') +var triggerEl = document.querySelector('#myTab a[data-target="#profile"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name var triggerFirstTabEl = document.querySelector('#myTab li:first-child a') @@ -376,14 +376,14 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane #### constructor -Activates a list item element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. +Activates a list item element and content container. Tab should have either a `data-target` targeting a container node in the DOM. {{< highlight html >}} <div class="list-group" id="myList" role="tablist"> - <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a> + <a href="#" class="list-group-item list-group-item-action active" data-toggle="list" data-target="#home" role="tab">Home</a> + <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#profile" role="tab">Profile</a> + <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#messages" role="tab">Messages</a> + <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#settings" role="tab">Settings</a> </div> <div class="tab-content"> diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 19d0aae37..5f64b3c83 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -849,7 +849,7 @@ The modal plugin toggles your hidden content on demand, via data attributes or J ### Via data attributes -Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` to target a specific modal to toggle. +Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` to target a specific modal to toggle. {{< highlight html >}} <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> diff --git a/site/content/docs/5.0/components/navs.md b/site/content/docs/5.0/components/navs.md index a52a11adc..ac2edc1e8 100644 --- a/site/content/docs/5.0/components/navs.md +++ b/site/content/docs/5.0/components/navs.md @@ -314,13 +314,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, <div class="bd-example"> <ul class="nav nav-tabs mb-3" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <a href="#" class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <a href="#" class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> + <a href="#" class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> @@ -339,13 +339,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, {{< highlight html >}} <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <a href="#" class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <a href="#" class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> + <a href="#" class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> @@ -360,9 +360,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or <div class="bd-example"> <nav> <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> - <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <a href="#" class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> + <a href="#" class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a href="#" class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> @@ -381,9 +381,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or {{< highlight html >}} <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> - <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <a href="#" class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> + <a href="#" class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a href="#" class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> @@ -398,13 +398,13 @@ The tabs plugin also works with pills. <div class="bd-example"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> + <a href="#" class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> + <a href="#" class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> + <a href="#" class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> @@ -423,13 +423,13 @@ The tabs plugin also works with pills. {{< highlight html >}} <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> + <a href="#" class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> + <a href="#" class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> + <a href="#" class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> @@ -445,10 +445,10 @@ And with vertical pills. <div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> - <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> - <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> - <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> + <a href="#" class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> + <a href="#" class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> + <a href="#" class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> + <a href="#" class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> </div> <div class="col-9"> @@ -474,10 +474,10 @@ And with vertical pills. <div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> - <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> - <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> - <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> + <a href="#" class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> + <a href="#" class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> + <a href="#" class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> + <a href="#" class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> </div> <div class="col-9"> @@ -499,16 +499,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp <!-- Nav tabs --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <a href="#" class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <a href="#" class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> + <a href="#" class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> + <a href="#" class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> @@ -540,7 +540,7 @@ triggerTabList.forEach(function (triggerEl) { You can activate individual tabs in several ways: {{< highlight js >}} -var triggerEl = document.querySelector('#myTab a[href="#profile"]') +var triggerEl = document.querySelector('#myTab a[data-target="#profile"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name var triggerFirstTabEl = document.querySelector('#myTab li:first-child a') @@ -568,21 +568,21 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a #### constructor -Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. +Activates a tab element and content container. Tab should have either a `data-target` targeting a container node in the DOM. {{< highlight html >}} <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <a href="#" class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <a href="#" class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> + <a href="#" class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> + <a href="#" class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index a366abb93..b870f9b59 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -57,6 +57,7 @@ Changes to our source and compiled JavaScript files. - Dropped jQuery dependency and rewrote plugins to be in regular JavaScript. - Removed underscore from public static methods like `_getInstance()` → `getInstance()`. +- Drop the use of `href` attributes to target element, except for our Scrollspy. ## Color system |