mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-30 23:36:47 +02:00
Docs: replace CSS by utilities in examples (#35699)
* Drop .opacity-50 and .opacity-75 redefinition in examples * Drop unused .card-img-right from blog example CSS files * Use line-height utilities when possible * Use rounded-* utilities in examples * Replace .nav-underline by .nav-scroller and use it in examples.html default * Use .mb-1 for .blog-post-title * Remove unused CSS rule and use .fw-* utilities for carousels examples * Use utilities for cheatsheet examples * Extract some CSS to utilities for .nav-masthead .nav-link in cover example * Dashboard group of minor modifications * Dropdowns example: refactoring * Dropdowns example refactoring: fix linting by removing selector by id * Features example refactoring * Headers example refactoring * List groups example refactoring * Sidebars example refactoring * Sign-in example refactoring * Starter template refactoring * Fix RTL examples Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Julien Déramond
GitHub
@@ -27,7 +27,6 @@ body {
|
||||
margin-top: .125rem;
|
||||
margin-left: .3125rem;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bd-aside a:hover,
|
||||
@@ -45,7 +44,6 @@ body {
|
||||
padding: .25rem .5rem;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.bd-aside .btn:hover,
|
||||
@@ -77,10 +75,7 @@ body {
|
||||
|
||||
/* Examples */
|
||||
.scrollspy-example {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
margin-top: .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[id="modal"] .bd-example .btn,
|
||||
|
||||
@@ -27,7 +27,6 @@ body {
|
||||
margin-top: .125rem;
|
||||
margin-right: .3125rem;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bd-aside a:hover,
|
||||
@@ -45,7 +44,6 @@ body {
|
||||
padding: .25rem .5rem;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.bd-aside .btn:hover,
|
||||
@@ -74,10 +72,7 @@ body {
|
||||
|
||||
/* Examples */
|
||||
.scrollspy-example {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
margin-top: .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[id="modal"] .bd-example .btn,
|
||||
|
||||
@@ -22,48 +22,48 @@ body_class: "bg-light"
|
||||
<nav class="small" id="toc">
|
||||
<ul class="list-unstyled">
|
||||
<li class="my-2">
|
||||
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
|
||||
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
|
||||
<ul class="list-unstyled ps-3 collapse" id="contents-collapse">
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#typography">Typography</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#images">Images</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#tables">Tables</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#figures">Figures</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">Typography</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">Images</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tables">Tables</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#figures">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
|
||||
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
|
||||
<ul class="list-unstyled ps-3 collapse" id="forms-collapse">
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#overview">Overview</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">Disabled forms</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#sizing">Sizing</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#input-group">Input group</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">Floating labels</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#validation">Validation</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">Overview</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">Disabled forms</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#sizing">Sizing</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#input-group">Input group</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#floating-labels">Floating labels</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#validation">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
|
||||
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
|
||||
<ul class="list-unstyled ps-3 collapse" id="components-collapse">
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#accordion">Accordion</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#alerts">Alerts</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#badge">Badge</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">Breadcrumb</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#buttons">Buttons</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#button-group">Button group</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#card">Card</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#carousel">Carousel</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">Dropdowns</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#list-group">List group</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#modal">Modal</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#navs">Navs</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#navbar">Navbar</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#pagination">Pagination</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#popovers">Popovers</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#progress">Progress</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">Scrollspy</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#spinners">Spinners</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#toasts">Toasts</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#tooltips">Tooltips</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">Accordion</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">Alerts</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#badge">Badge</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#breadcrumb">Breadcrumb</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#buttons">Buttons</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#button-group">Button group</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#card">Card</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#carousel">Carousel</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#dropdowns">Dropdowns</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#list-group">List group</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#modal">Modal</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navs">Navs</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navbar">Navbar</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#pagination">Pagination</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#popovers">Popovers</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#progress">Progress</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#scrollspy">Scrollspy</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#spinners">Spinners</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#toasts">Toasts</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tooltips">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -1438,7 +1438,7 @@ body_class: "bg-light"
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto" tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
|
||||
Reference in New Issue
Block a user