Gurasa gurasa

Nuna wurin shafin na yanzu a cikin tsarin kewayawa wanda ke ƙara masu rarraba ta atomatik ta CSS.

A wannan shafi

Misali

Yi amfani da jeri da aka ba da oda ko ba a ba da oda ba tare da abubuwan lissafin da aka haɗe don ƙirƙirar ɓawon burodi mai ƙarancin salo. Yi amfani da kayan aikin mu don ƙara ƙarin salo kamar yadda ake so.

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

Masu rarrabawa

Ana ƙara masu rarraba ta atomatik a cikin CSS ta hanyar ::beforeda content. Ana iya canza su ta hanyar gyara kayan al'ada na CSS na gida --bs-breadcrumb-divider, ko ta hanyar $breadcrumb-dividerSass m - da $breadcrumb-divider-flippedtakwaransa na RTL, idan an buƙata. Mun saba zuwa canjin Sass ɗin mu, wanda aka saita azaman koma baya ga kayan al'ada. Ta wannan hanyar, kuna samun mai rarraba duniya wanda zaku iya sokewa ba tare da sake tattara CSS a kowane lokaci ba.

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

Lokacin yin gyare-gyare ta hanyar Sass, ana buƙatar aikin ƙididdiga don samar da ƙididdiga a kusa da kirtani. Misali, ta amfani >da azaman mai rarrabawa, zaku iya amfani da wannan:

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

Hakanan yana yiwuwa a yi amfani da gunkin SVG da aka saka . Aiwatar da shi ta hanyar kaddarorin mu na al'ada na CSS, ko amfani da madaidaicin 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");

Hakanan zaka iya cire saitin mai raba --bs-breadcrumb-divider: '';(marasa kirtani a cikin kaddarorin al'ada na CSS suna ƙidaya azaman ƙima), ko saita canjin Sass zuwa $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;

Dama

Tun da gurasar burodi ta ba da kewayawa, yana da kyau a ƙara lakabi mai ma'ana kamar aria-label="breadcrumb"bayyana nau'in kewayawa da aka bayar a cikin <nav>kashi, da kuma amfani da aria-current="page"abu na ƙarshe na saitin don nuna cewa yana wakiltar shafin na yanzu.

Don ƙarin bayani, duba Ayyukan Rubuce-rubucen WAI-ARIA don tsarin biredi .

Sass

Masu canji

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