| Current Path : /var/www/html/12park/vendor/twbs/bootstrap/site/src/components/home/ |
Linux ift1.ift-informatik.de 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 |
| Current File : /var/www/html/12park/vendor/twbs/bootstrap/site/src/components/home/ComponentUtilities.astro |
---
import { getVersionedDocsPath } from '@libs/path'
import Code from '@shortcodes/Code.astro'
---
<section class="pb-md-5 mb-5">
<div class="col-lg-8 mb-5">
<div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
</div>
<svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#plus"></use></svg>
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility API</h2>
<p class="lead fw-normal">
New in Bootstrap 5, our utilities are now generated by our <a href={getVersionedDocsPath('utilities/api')}
>Utility API</a
>. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to
add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them
custom names.
</p>
</div>
<div class="row gx-md-5">
<div class="col-lg-6">
<h3 class="fw-semibold">Quickly customize components</h3>
<p>
Apply any of our included utility classes to our components to customize their appearance, like the navigation
example below. There are hundreds of classes available—from <a href={getVersionedDocsPath('utilities/position')}
>positioning</a
> and <a href={getVersionedDocsPath('utilities/sizing')}>sizing</a> to <a
href={getVersionedDocsPath('utilities/colors')}>colors</a
> and <a href={getVersionedDocsPath('utilities/shadows')}>effects</a>. Mix them with CSS variable overrides for
even more control.
</p>
<div class="p-4 border rounded-3 mb-4">
<ul class="nav nav-pills mb-4" id="pillNav" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
type="button"
role="tab"
aria-selected="true">Home</button
>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
type="button"
role="tab"
aria-selected="false">Profile</button
>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
type="button"
role="tab"
aria-selected="false">Contact</button
>
</li>
</ul>
<ul
class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm"
id="pillNav2"
role="tablist"
style="--bs-nav-link-color: rgba(255, 255, 255, .75); --bs-nav-link-hover-color: #fff; --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);"
>
<li class="nav-item" role="presentation">
<button
class="nav-link active rounded-5"
id="home-tab2"
data-bs-toggle="tab"
type="button"
role="tab"
aria-selected="true">Home</button
>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link rounded-5"
id="profile-tab2"
data-bs-toggle="tab"
type="button"
role="tab"
aria-selected="false">Profile</button
>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link rounded-5"
id="contact-tab2"
data-bs-toggle="tab"
type="button"
role="tab"
aria-selected="false">Contact</button
>
</li>
</ul>
</div>
<Code
code={`<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
<li class="nav-item" role="presentation">
<button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
</li>
</ul>`}
lang="html"
/>
<p class="d-flex mb-md-0">
<a href={getVersionedDocsPath('examples/#snippets')} class="icon-link icon-link-hover fw-semibold">
Explore customized components
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</div>
<div class="col-lg-6">
<h3 class="fw-semibold">Create and extend utilities</h3>
<p>
Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any
project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.
</p>
<Code
code={`@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);`}
lang="scss"
/>
<p class="d-flex mb-md-0">
<a href={getVersionedDocsPath('utilities/api/')} class="icon-link icon-link-hover fw-semibold mb-3">
Explore the utility API
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</div>
</div>
</section>