diff options
| -rw-r--r-- | site/content/docs/4.3/components/navbar.md | 20 | ||||
| -rw-r--r-- | site/content/docs/4.3/components/navs.md | 12 | ||||
| -rw-r--r-- | site/content/docs/4.3/components/progress.md | 2 | ||||
| -rw-r--r-- | site/static/docs/4.3/assets/js/src/application.js | 2 | ||||
| -rw-r--r-- | site/static/docs/4.3/assets/scss/_component-examples.scss | 72 |
5 files changed, 19 insertions, 89 deletions
diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md index 2861be667..9d3dd57a7 100644 --- a/site/content/docs/4.3/components/navbar.md +++ b/site/content/docs/4.3/components/navbar.md @@ -543,17 +543,15 @@ With a toggler on the left and brand name on the right: Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done! {{< example >}} -<div class="pos-f-t"> - <div class="collapse" id="navbarToggleExternalContent"> - <div class="bg-dark p-4"> - <h5 class="text-white h4">Collapsed content</h5> - <span class="text-muted">Toggleable via the navbar brand.</span> - </div> +<div class="collapse" id="navbarToggleExternalContent"> + <div class="bg-dark p-4"> + <h5 class="text-white h4">Collapsed content</h5> + <span class="text-muted">Toggleable via the navbar brand.</span> </div> - <nav class="navbar navbar-dark bg-dark"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - </nav> </div> +<nav class="navbar navbar-dark bg-dark"> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> +</nav> {{< /example >}} diff --git a/site/content/docs/4.3/components/navs.md b/site/content/docs/4.3/components/navs.md index 078f4f8e7..5281fcdaf 100644 --- a/site/content/docs/4.3/components/navs.md +++ b/site/content/docs/4.3/components/navs.md @@ -309,8 +309,8 @@ Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility I Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies. -<div class="bd-example bd-example-tabs"> - <ul class="nav nav-tabs" id="myTab" role="tablist"> +<div class="bd-example"> + <ul class="nav nav-tabs mb-3" 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-selected="true">Home</a> </li> @@ -355,9 +355,9 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, To help fit your needs, this works with `<ul>`-based markup, as shown above, or with any arbitrary "roll your own" markup. Note that if you're using `<nav>`, you shouldn't add `role="tablist"` directly to it, as this would override the element's native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `<div>`) and wrap the `<nav>` around it. -<div class="bd-example bd-example-tabs"> +<div class="bd-example"> <nav> - <div class="nav nav-tabs" id="nav-tab" role="tablist"> + <div class="nav nav-tabs mb-3" 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="nav-home" aria-selected="true">Home</a> <a class="nav-item 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-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> @@ -393,7 +393,7 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or The tabs plugin also works with pills. -<div class="bd-example bd-example-tabs"> +<div class="bd-example"> <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-selected="true">Home</a> @@ -439,7 +439,7 @@ The tabs plugin also works with pills. And with vertical pills. -<div class="bd-example bd-example-tabs"> +<div class="bd-example"> <div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> diff --git a/site/content/docs/4.3/components/progress.md b/site/content/docs/4.3/components/progress.md index f5b6fe136..c41aea4ac 100644 --- a/site/content/docs/4.3/components/progress.md +++ b/site/content/docs/4.3/components/progress.md @@ -127,7 +127,7 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> - <button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false" autocomplete="off"> + <button type="button" class="btn btn-secondary mt-3" data-toggle="button" id="btnToggleAnimatedProgress" aria-pressed="false" autocomplete="off"> Toggle animation </button> </div> diff --git a/site/static/docs/4.3/assets/js/src/application.js b/site/static/docs/4.3/assets/js/src/application.js index dfbced413..201eb48b3 100644 --- a/site/static/docs/4.3/assets/js/src/application.js +++ b/site/static/docs/4.3/assets/js/src/application.js @@ -83,7 +83,7 @@ } // Activate animated progress bar - var btnToggleAnimatedProgress = document.querySelector('.bd-toggle-animated-progress') + var btnToggleAnimatedProgress = document.getElementById('btnToggleAnimatedProgress') if (btnToggleAnimatedProgress) { btnToggleAnimatedProgress.addEventListener('click', function () { btnToggleAnimatedProgress.parentNode diff --git a/site/static/docs/4.3/assets/scss/_component-examples.scss b/site/static/docs/4.3/assets/scss/_component-examples.scss index 62ebf6953..8b7a3bab8 100644 --- a/site/static/docs/4.3/assets/scss/_component-examples.scss +++ b/site/static/docs/4.3/assets/scss/_component-examples.scss @@ -18,13 +18,6 @@ .row + .row { margin-top: 1rem; } - - .flex-items-top, - .flex-items-middle, - .flex-items-bottom { - min-height: 6rem; - background-color: rgba(255, 0, 0, .1); - } } .bd-example-row-flex-cols .row { @@ -138,19 +131,6 @@ margin-top: 2rem; } - .pos-f-t { - position: relative; - margin: -1rem; - - @include media-breakpoint-up(sm) { - margin: -1.5rem; - } - } - - .custom-file-input:lang(es) ~ .custom-file-label::after { - content: "Elegir"; - } - > .form-control { + .form-control { margin-top: .5rem; @@ -160,12 +140,11 @@ > .nav + .nav, > .alert + .alert, > .navbar + .navbar, - > .progress + .progress, - > .progress + .btn { + > .progress + .progress { margin-top: 1rem; } - > .dropdown-menu:first-child { + > .dropdown-menu { position: static; display: block; } @@ -173,10 +152,6 @@ > .form-group:last-child { margin-bottom: 0; } - - > .close { - float: none; - } } // Typography @@ -202,11 +177,6 @@ } } -// Contextual background colors -.bd-example-bg-classes p { - padding: 1rem; -} - // Images .bd-example { > svg + svg, @@ -227,18 +197,6 @@ } } -// Forms -.bd-example-control-sizing select, -.bd-example-control-sizing input[type="text"] + input[type="text"] { - margin-top: .5rem; -} -.bd-example-form .input-group { - margin-bottom: .5rem; -} -.bd-example > textarea.form-control { - resize: vertical; -} - // List groups .bd-example > .list-group { max-width: 400px; @@ -310,37 +268,11 @@ } } -// Example tabbable tabs -.bd-example-tabs .nav-tabs { - margin-bottom: 1rem; -} - -// Popovers -.bd-example-popover-static { - padding-bottom: 1.5rem; - background-color: #f9f9f9; - - .popover { - position: relative; - display: block; - float: left; - width: 260px; - margin: 1.25rem; - } -} - // Tooltips .tooltip-demo a { white-space: nowrap; } -.bd-example-tooltip-static .tooltip { - position: relative; - display: inline-block; - margin: 10px 20px; - opacity: 1; -} - // Scrollspy demo on fixed height div .scrollspy-example { position: relative; |