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.

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>

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.

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>

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.

Amfani da saka SVG

Shigar da SVG kamar yadda bayanan URI ke buƙata don guje wa URL ɗin wasu haruffa, musamman <, >da #. Shi ya sa $breadcrumb-dividerake wucewa ta hanyar escape-svg()aikin mu na Sass . Lokacin amfani da kayan al'ada na CSS, kuna buƙatar URL ku guje wa SVG da kanku. Karanta bayanin Kevin Weber akan CodePen don cikakkun bayanai kan abin da za ku tsere.

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>");

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

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;

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 ARIA Jagoran Ayyukan Marubuciya .

CSS

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, gurasa yanzu yana amfani da masu canjin CSS na gida .breadcrumbdon haɓaka keɓancewa na ainihi. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$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};

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;