Burburka rootiga

Tilmaan bogga hadda meesha uu ku yaallo ee ku dhex jirta kala sareynta hagaha oo si toos ah ugu dara kala soocida CSS.

Boggan

Tusaale

Isticmaal liis la dalbaday ama aan la dalban oo leh shay liiska ku xidhan si aad u abuurto jajab rooti habaysan oo yar. Isticmaal utility our si aad ugu darto qaabab dheeraad ah sida la doonayo.

html

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Qaybiyayaal

Qaybiyayaashu si toos ah ayaa loogu daraa CSS iyada oo loo marayo ::beforeiyo content. Waxa lagu beddeli karaa iyada oo wax laga beddelayo hantida CSS ee maxaliga ah --bs-breadcrumb-divider, ama iyada oo loo marayo $breadcrumb-dividerdoorsoomaha Sass - iyo $breadcrumb-divider-flippeddhiggeeda RTL, haddii loo baahdo. Waxa aanu ku beddelanay doorsoomahayaga Sass, kaas oo loo dejiyay dib-u-dhac ku yimi hantidii caadiga ahayd. Sidan, waxaad ku helaysaa qaybiye caalami ah oo aad burin karto adiga oo aan dib u ururin CSS wakhti kasta.

html

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

Marka wax laga beddelayo iyada oo loo marayo Sass, shaqada xigashada ayaa loo baahan yahay si ay u abuurto oraahyada ku wareegsan xargaha. Tusaale ahaan, adoo isticmaalaya >sida qaybiyaha, waxaad isticmaali kartaa tan:

$breadcrumb-divider: quote(">");

Waxa kale oo suurtogal ah in la isticmaalo astaanta SVG ee ku-xidhan . Ku dalbso hantidayada gaarka ah ee CSS, ama isticmaal doorsoomiyaha Sass.

Isticmaalka SVG-ga ku-xidhan

Soo gelida SVG sida xogta URI waxay u baahan tahay si URL looga baxsado dhowr xaraf, gaar ahaan <, >iyo #. Taasi waa sababta $breadcrumb-dividerdoorsoomuhu u dhex maro shaqadayada escape-svg()Sass . Markaad isticmaalayso hantida gaarka ah ee CSS, waxaad u baahan tahay inaad URL ka baxsato SVG adiga keligaa. Akhri sharraxaadda Kevin Weber ee CodePen si aad u hesho macluumaad faahfaahsan oo ku saabsan waxa la baxsan karo.

html

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

Waxa kale oo aad ka saari kartaa goobta qaybiyaha --bs-breadcrumb-divider: '';(xadhkaha madhan ee guryaha gaarka ah ee CSS waxa loo tiriyaa qiime ahaan), ama u dejin kartaa doorsoomaha Sass $breadcrumb-divider: none;.

html

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: none;

Helitaanka

Mar haddii roodhidu ay bixiso hagitaan, waa fikrad wanaagsan in lagu daro calaamad macno leh sida aria-label="breadcrumb"sifaynta nooca navigation ee lagu bixiyay <nav>curiyaha, iyo sidoo kale in lagu dabaqo aria-current="page"shayga ugu dambeeya ee set si uu u muujiyo in uu matalo bogga hadda jira.

Macluumaad intaas ka badan, eeg ARIA Hagaha Dhaqamada Qorista Hannaanka rootida .

CSS

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka doorsoomayaasha CSS ee Bootstrap, rootiga ayaa hadda adeegsada doorsoomayaasha CSS-ta maxalliga ah .breadcrumbsi loo hagaajiyo habeynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

Doorsoomayaasha Sass

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;