Bullae

Utere Bootstrap more stylorum conjunctionum pro actionibus in formis, alternis, ac magis subsidio multiplicium magnitudinum, civitatum et plurium.

In hac pagina

Exempla

Bootstrap plures stylos bullam praedefinitam comprehendit, unaquaeque inserviens suo semantico proposito, cum paucis extra- jectis pro more dominio.

html

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Deferre significatio technologiae adiuvandae

Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (exempli gratia textus visibilis), vel per medium includi alterum, sicut textus additus occultus cum .visually-hiddengenere.

Inactivare textu involuti

Si textum bullam involvere non vis, .text-nowrapgenus globuli addere potes. $btn-white-space: nowrapIn Sass, textum inactivare pro singulis bullis involuere potes .

Button tags

Classes ad elementum .btnadhibendum . Tamen his generibus vel elementis <button>uti potes (quamvis nonnulli navigatores paulum diversam translationem adhibere possunt).<a><input>

Cum per conjunctionem classes in <a>elementis quae in-pagina functionitatis felis (velut contenta cadens) adhibentur, potius quam cum novis paginis vel sectionibus in pagina pagina coniungantur, hi nexus dare debent ut role="button"suum propositum apte deferat ad technologias adiuvandas sicut tegumentum legentium.

Link

html

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Adumbratio bullarum

Felis eget, at non tersos inferunt colores? Repone defaltam determinativam classes cum .btn-outline-*ones ut omnes imagines background et colores in aliqua conjunctione removeant.

html

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Nonnulli styli globuli levi colore antico relativo utuntur et tantum in background obscuro adhiberi debent ut satis antithesis habeantur.

Magnitudines

Fac maiorem vel minorem globulis? Add .btn-lgor .btn-smfor additional sizes.

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Etiam volvemus tuam consuetudinem cum CSS variabilium inspectione:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

Disabled statum

Fac tesserae otiosae spectant addendo disabledattributum booleanum cuivis <button>elementi. Bullae debiles pointer-events: noneapplicaverunt ad impediendos Civitates activae et active a excitato.

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

Debilitatum bullarum utens <a>elementum conversari paulum differt:

<a>s non sustinent disabledattributum, ideo genus addere debes .disabledut debilis visibiliter appareat.
Quaedam styli amici futuri comprehenduntur ut omnes pointer-eventsglobulis ancoris inactivandi.
Bullae debiles utentes <a>includunt aria-disabled="true"attributum ad designandum statum elementi ad technologias adiuvandas.
Bullae utens <a> debilitatum non includit hrefattributum.

Prima pagina Link

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Link functionality caveat

Ad causas operiendas ubi hrefattributum in vinculo debili servare debeas, .disabledusus classium ut nexum functionis s pointer-events: noneinactivare conetur . <a>Nota hanc possessionem CSS nondum pro HTML normatum esse, sed omnes recentiores navigatores eam confirmant. Praeterea, etiam in navigatoribus qui pointer-events: noneadiuvant, navigatio claviaturae serpit, id significat quod claviaturae usores et usores technologiarum adiuvantium adhuc has nexus movere poterunt. Ita tutus esse, praeter aria-disabled="true", etiam tabindex="-1"attributum in his nexus includunt ne umbilicum claviaturae recipiant, et usu JavaScript ad functionem suam omnino disable utantur.

Prima pagina Link

html

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Obstructionum bullarum

Facere acervos dociles plenae latitudinis, "bullarum clauorum" similes illis in Bootstrap 4 cum commisto ostentationis et gap utilitatis nostrae. Utendo utilitates loco globuli specificorum generum, multo maiorem potestatem habemus in rationibus spatii, noctis et agendi ratiocinandi.

html

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Variationem responsivam hic creamus, incipiendo a globulis perpendiculis reclinatis usque ad mdpunctum ruptum, ubi genus .d-md-blockreponit , utilitatem .d-gridita destruens . gap-2Sede navigatrum tuum ut eas mutes videas.

html

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Potes accommodare latitudinem globuli clausorum tuorum cum classibus columnarum eget latitudinem. Exempli gratia, pro dimidia latitudine "obstructionum puga" utere .col-6. Centrum horizontaliter .mx-autoquoque.

html

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Additae utilitates adhiberi possunt ad noctis globulis componendis cum horizontalibus. Praecedente responsivo exemplo cepimus et addimus aliquas utilitates flexas et utilitatem marginis in globulis ad ius globulis alignum cum iam non reclinant.

html

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Button plugin

Plugin puga permittit ut simplices in/off globulis toggle creas.

Visu, hae globuli toggle identificantur cum globulis toggle reprimentibus . Aliter tamen per technologias adiuvantes referuntur: schedae toggles a lectoribus ductis ut "repressa"/ "non sedata" annuntiabuntur (quia, quamvis aspectus eorum, fundamentaliter adhuc checkboxes sunt), cum hae globuli toggle quasi nuntientur. "button"/" button pressed." Electio inter hos duos aditus pendet a genere toggle quam creas, et utrum toggle sen non faciet sensum utentibus nuntiantibus ut reprehendo vel ut ipsum felis.

Toggle civitatibus

Add data-bs-toggle="button"to toggle a re activepublica puga. Si puga pyga prae-toggling es, necesse est .activegenus manuale addere et aria-pressed="true" curare ut technologiae adiutrices apte deferatur.

html

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

Toggle link Active toggle link Debilitatum toggle link

html

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Methodi

Exempli globum creare potes cum conditore pyga, exempli gratia:

const bsButton = new bootstrap.Button('#myButton')

Methodus	Descriptio
`dispose`	Praesent nec elementum felis. (Recondita removet data in dom elementum)
`getInstance`	Ratio static, quae te permittit ut instantia bullam coniunctam ad elementum dom, eo uti potes: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Statica methodus quae instantia bullam refert ad elementum DOM adiunctum vel novum creare in casu non initialized erat. Hoc uti potes: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Toggles re publica dis. Dat speciem globuli quam in actum reducitur.

Exempli gratia, omnia bullarum toggle

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Variabilium

Additur in v5.2.0

Cum pars Bootstrap evolutae CSS variabiles accedunt, globuli nunc CSS variabiles locales utuntur .btnin consectetur real-time css. Valores variabilium pro CSS per Sass positae sunt, ergo etiam adhuc Sass customization adiuvatur.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Unumquodque .btn-*genus determinatum congruentem CSS variabilium efficit ut normas CSS augeat cum nostris button-variant(), button-outline-variant(), et button-size()mixins.

Exemplum est hic construendi genus modificationis consuetudinis .btn-*sicut facimus in globulis singularibus nostris docs, transponendo Bootstrap CSS variabiles cum mixtura propriarum CSS et Sass variabilium.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Sass variables

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Sass mixins

Sunt tria mixins pro globulis: globulis ac globulis adumbratio varians mixins (utraque subnixa $theme-colors), plus globuli mixin magnitudine.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Sass ora sagi alterius

Button variantes (pro globulis regularibus et adumbratim) suis singulis mixinis utuntur cum $theme-colorstabula nostra ad generandum classes determinatas in scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}