mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Clean component examples CSS (#28872)
* Remove unused classes/styles and use utilities instead of specific styles * Use `getElementById` instead of `querySelector`
This commit is contained in:
Shohei Yoshida
XhmikosR
parent
1c510ddaec
commit
543ff4e3e5
5 changed files with 19 additions and 89 deletions
|
|
@ -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 >}}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue