Briwsion Bara

Nodwch leoliad y dudalen gyfredol o fewn hierarchaeth llywio sy'n ychwanegu gwahanyddion yn awtomatig trwy CSS.

Ar y dudalen hon

Enghraifft

Defnyddiwch restr drefnus neu ddi-drefn gydag eitemau rhestr cysylltiedig i greu briwsion bara â'r steil lleiaf posibl. Defnyddiwch ein cyfleustodau i ychwanegu arddulliau ychwanegol fel y dymunir.

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>

Rhanwyr

Mae rhanwyr yn cael eu hychwanegu'n awtomatig yn CSS trwy ::beforea content. Gellir eu newid trwy addasu eiddo arfer CSS lleol --bs-breadcrumb-divider, neu drwy'r $breadcrumb-dividernewidyn Sass - ac $breadcrumb-divider-flippedar gyfer ei gymar RTL, os oes angen. Rydym yn rhagosod i'n newidyn Sass, sy'n cael ei osod fel wrth gefn i'r eiddo arferiad. Fel hyn, byddwch yn cael rhannwr byd-eang y gallwch ei ddiystyru heb ail-grynhoi CSS ar unrhyw adeg.

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>

Wrth addasu trwy Sass, mae angen y swyddogaeth dyfynbris i gynhyrchu'r dyfyniadau o amgylch llinyn. Er enghraifft, gan ddefnyddio >fel rhannwr, gallwch ddefnyddio hyn:

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

Mae hefyd yn bosibl defnyddio eicon SVG wedi'i fewnosod . Cymhwyswch ef trwy ein heiddo arferol CSS, neu defnyddiwch y newidyn Sass.

Defnyddio SVG wedi'i fewnosod

Mae alinio SVG fel data URI yn ei gwneud yn ofynnol i URL ddianc rhag ychydig o nodau, yn fwyaf nodedig <, >a #. Dyna pam mae'r $breadcrumb-dividernewidyn yn cael ei drosglwyddo trwy ein escape-svg()swyddogaeth Sass . Wrth ddefnyddio'r eiddo arfer CSS, mae angen i chi URL ddianc o'ch SVG ar eich pen eich hun. Darllenwch esboniadau Kevin Weber ar CodePen am wybodaeth fanwl ar beth i ddianc.

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

Gallwch hefyd gael gwared ar y gosodiad rhannwr --bs-breadcrumb-divider: '';(mae llinynnau gwag mewn priodweddau arfer CSS yn cyfrif fel gwerth), neu osod y newidyn Sass i $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;

Hygyrchedd

Gan fod briwsion bara yn darparu llywio, mae'n syniad da ychwanegu label ystyrlon fel aria-label="breadcrumb"disgrifio'r math o lywio a ddarperir yn yr <nav>elfen, yn ogystal â chymhwyso aria-current="page"i eitem olaf y set i ddangos ei fod yn cynrychioli'r dudalen gyfredol.

I gael rhagor o wybodaeth, gweler patrwm briwsion bara Canllaw Arferion Awduro ARIA .

CSS

Newidynnau

Ychwanegwyd yn v5.2.0

Fel rhan o ddull newidynnau CSS esblygol Bootstrap, mae briwsion bara bellach yn defnyddio newidynnau CSS lleol ymlaen ar .breadcrumbgyfer addasu amser real gwell. Mae gwerthoedd ar gyfer y newidynnau CSS yn cael eu gosod trwy Sass, felly mae addasu Sass yn dal i gael ei gefnogi hefyd.

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

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