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.

Boggaan

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.

<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.

<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.

<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='currentColor'/%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,%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='currentColor'/%3E%3C/svg%3E");

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;.

<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.

Wixii macluumaad dheeraad ah, ka eeg WAI-ARIA Hababka Qorista ee qaabka rootida .

Sass

Kala duwanaansho

$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;