API Utilidad rehegua

API utilidad rehegua haꞌehína peteĩ tembipuru Sass rehegua oñemboheko hag̃ua umi clase utilidad rehegua.

Ko páhinape

Umi purupyrã Bootstrap rehegua oñemboheko ñande API purupyrã ndive ha ikatu ojepuru oñemoambue térã oñembotuichave hag̃ua ñande mboajepyréva mboajepyréva mboajepyréva Sass rupive. Ore API utilidad rehegua oñemopyenda peteĩ serie Sass mapa ha función rehegua omoheñói hag̃ua familia clase rehegua oguerekóva opáichagua opción. Ndereikuaáiramo Sass mapakuéra, emoñe’ẽ yvate umi Sass docs oficial -pe eñepyrũ hag̃ua.

Pe $utilitiesmapa oguereko opaite ore utilidad ha upéi oñembojoaju ne $utilitiesmapa personalizado ndive, oĩramo. Pe mapa utilidad rehegua oguereko peteĩ lista clave reheve umi utilidad aty omoneĩva ko’ã opción:

Ambue ojeporavokuaáva	Hesegua	Valor por defecto rehegua	Techaukaha
`property`	Apopeteĩrã	– Ñemby .	Mbaꞌekuaarã réra, kóva ikatu peteĩ vore térã peteĩ vore ñemohendaha (techapyrã, acolchado horizontal térã margen).
`values`	Apopeteĩrã	– Ñemby .	Lista de valores, térã peteĩ mapa ndereipotáiramo mboꞌepy réra peteĩchaite valor ndive. Ojeporúramo `null`clave mapa ramo, noñembyatýi.
`class`	Poravokuaa	mba'evegua	Mbo’esyry oñembohekopyréva réra. Noñemeꞌeiramo ha `property`haꞌeramo peteĩ vore vore rehegua, `class`ojejapóta por defecto peteĩha elemento `property`matriz rehegua.
`css-var`	Poravokuaa	`false`	Boolean omoheñói hag̃ua CSS mbaꞌekuaarã CSS rembiapoukapy rangue.
`local-vars`	Poravokuaa	mba'evegua	Mapa umi mbaꞌekuaarã CSS pegua rehegua ojejapo hag̃ua CSS reglakuéra ári.
`state`	Poravokuaa	mba'evegua	Lista de variantes seudo-clase rehegua (techapyrã, `:hover`térã `:focus`) ojejapo hag̃ua.
`responsive`	Poravokuaa	`false`	Booleano ohechaukáva oñemboheko vaꞌerãpa umi clase ombohováiva.
`rfs`	Poravokuaa	`false`	Boolean ikatu hag̃uáicha ojejapo jey escalado líquido rehegua RFS ndive .
`print`	Poravokuaa	`false`	Boolean ohechaukáva tekotevẽpa ojejapo umi clase impresión rehegua.
`rtl`	Poravokuaa	`true`	Boolean ohechaukáva oñeñongatuvaꞌerãpa utilidad RTL-pe.

API omyesakã

Opaite mbaꞌekuaarã utilidad rehegua oñembojoapy $utilitiesmbaꞌekuaarãme ñande _utilities.scsskuatiahaipyre ryepýpe. Káda grupo de servicios públicos ojehecha peteĩ mba’e kóicha:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Mba’épa osẽ ko’ã mba’e:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Imba'éva

Pe propertyclave oñeikotevẽva oñemohendava’erã oimeraẽva utilidad-pe g̃uarã, ha oguerekova’erã peteĩ CSS mba’ekuaarã añetegua. Ko mbaꞌekuaarã ojepuru utilidad oñembohekopyréva rembiaporã ryrúpe. Ojehejáramo pe classclave, oservi avei clase réra por defecto ramo. Ñapensamína pe text-decorationutilidad rehe:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

Osẽ: .

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

Umi mba’ekuaarã

Eipuru valuesclave emombeꞌu hag̃ua mbaꞌe valor ojeꞌevaꞌekuépe g̃uarãpa propertyojepuruvaꞌerã umi mboꞌepy réra ha tembiapoukapy oñembohekopyrévape. Ikatu peteĩ lista térã mapa (oñemohenda umi utilidad-pe térã peteĩ Sass variable-pe).

Peteĩ lista ramo, umi text-decorationutilidad ndive guáicha :

values: none underline line-through

Mapa ramo, umi opacityutilidad ndive guáicha :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

Peteĩ Sass mbaꞌekuaarãicha omoĩva lista térã mapa, ñande positionutilidad -peguáicha :

values: $position-values

Mbo'ehakoty

Eipuru classopción emoambue hag̃ua mbo’esyry ñepyrũrã ojeporúva CSS oñembohekopyrévape. Techapyrã, oñemoambue hag̃ua guive .opacity-*a .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Osẽ: .

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

Umi mba’ekuaarã CSS mba’ekuaarã

Emohenda css-varopción booleano-pe trueha API omoheñóita CSS mbaꞌekuaarã local selector oñemeꞌevaꞌekuépe g̃uarã umi property: valuetembiapoukapy jepivegua rangue. Ñapensamína ñande .text-opacity-*utilidad rehe:

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

Osẽ: .

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }

Umi mba’e’oka CSS tendápegua

Eipuru local-varsopción emombeꞌu hag̃ua peteĩ mapa Sass omoheñóitava umi mbaꞌekuaarã CSS local rehegua pe clase utilidad rehegua reglamento ryepýpe. Eñatendéke ikatuha oikotevẽ tembiapo ambuéva oje’u hag̃ua umi CSS mba’e’oka tendápegua umi CSS rembiapoukapy oñembohekopyrévape. Por ehémplo, ñapensamína ñande .bg-*utilidadkuérare:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

Osẽ: .

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

Estado-kuéra rehegua

Eipuru stateopción emoheñói hag̃ua variación seudo-clase rehegua. Techapyrã seudo-clase haꞌehína :hoverha :focus. Oñemeꞌe jave peteĩ lista estado rehegua, ojejapo mboꞌepy réra upe seudo-clase-pe g̃uarã. Techapyrã, emoambue hag̃ua opacidad hover-pe, emoĩve state: hoverha rehupytýta .opacity-hover:hovernde CSS oñembohekopyrévape.

¿Reikotevẽ heta pseudo-clase? Eipuru peteĩ lista ojepeꞌavaꞌekue espacio-pe umi estado rehegua: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Osẽ: .

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

Ombohováiva

Emoĩ responsiveboolean emoheñói hag̃ua tembipururã ombohováiva (techapyrã, .opacity-md-25) opaite punto de ruptura rupi .

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Osẽ: .

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

Impresión rehegua

Ombohapévo printopción omoheñóita avei clase utilidad impresión-pe g̃uarã, ojeporúva @media print { ... }consulta medio ryepýpe añoite.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Osẽ: .

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

Importancia rehegua

Opaite utilidad omoheñóiva API oike !importantoasegura hag̃ua omboyke componente ha clase modificador oñehaꞌarõháicha. Ikatu emoambue ko ñemboheko globalmente pe $enable-important-utilitiesmba’e’oka ndive (oñemoĩva’ekue ñepyrũrãme true).

Oipurúvo API

Ko’áĝa reikuaa porãma mba’éichapa omba’apo API purupyrã rehegua, eikuaa mba’éichapa ikatu emoĩ ne mbo’esyry jeporupyre ha emoambue ore purupyrã tee.

Oñemboyke umi utilidad rehegua

Embogue umi utilidad oĩmava eipurúvo peteĩchagua clave. Techapyrã, reipotáramo ambue clase utilidad desbordamiento ombohováiva, ikatu rejapo kóva:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Oñemoĩve umi utilidad

Umi purupyrã pyahu ikatu oñembojoapy $utilitiesmapa por defecto-pe peteĩ map-merge. Ejesareko ore Sass rembiapokue oñeikotevẽva ha _utilities.scssojegueru raẽ, upéi eipuru pe map-mergeemoĩ hag̃ua ne purupyrã ambuéva. Techapyrã, ko’ápe ojehechauka mba’éichapa ikatu ñamoĩ peteĩ cursorutilidad ombohováiva mbohapy valor reheve.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

Omoambue umi utilidad

Omoambue umi utilidad oĩmava $utilitiesmapa por defecto-pe map-getha umi map-mergefunción ndive. Pe techapyrã iguýpe, ñamoĩ hína peteĩ valor adicional umi widthutilidad-pe. Eñepyrũ peteĩ ñepyrũrã reheve map-mergeha upéi emombe’u mba’e utilidad-pa remoambuese. Upégui, egueru "width"mapa anidado ndive map-geteike ha emoambue hag̃ua utilidad opción ha valor-kuéra.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

Omboguata ombohováiva

Ikatu emboguata mbo’esyry ombohováiva peteĩ tembipuru’i aty oĩmavape g̃uarã nombohováiva ko’áĝaite ñepyrũrãme. Techapyrã, ikatu haguãicha umi borderclase ombohovái:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

Kóva ko ága omoheñóita variación ombohováiva .borderha .border-0petettet punto de ruptura rehegua. Nde CSS remoheñóiva ojehecháta péicha:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

Embohéra jey umi utilidad

Ofalta umi utilidad v4, térã ojepokuaa ambue convención de nombramiento rehe? Pe API purupyrã rehegua ikatu ojepuru oñemboyke hag̃ua classpeteĩ mbaꞌeporã oñemeꞌevaꞌekue osẽva—techapyrã, oñembohéra jey .ms-*hag̃ua tembipururã tujaitépe .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

Ojepe’a umi utilidad

Eipe’a oimeraẽva umi tembipuru’i ñepyrũrã emohenda rupi pe aty clave null. Techapyrã, eipeꞌa hag̃ua opaite ñane widthutilidad, ejapo peteĩ $utilities map-mergeha emoĩve "width": nullhyepýpe.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

Ojepe’a utilidad RTL-pe

Oĩ káso borde rehegua hasýva RTL estilo , haꞌeháicha línea ruptura árabe-pe. Péicha umi utilidad ikatu ojeity RTL osëvagui omohendávo rtlopción false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Osẽ: .

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Kóva ndosẽi mba’eve RTL-pe, aguyje directiva control RTLCSSremove -pe .