Breadcrumb

Мисал

Минималдуу стилдеги нан күкүмдөрүн түзүү үчүн тизмектин шилтемеленген пункттары менен иреттелген же иретсиз тизмени колдонуңуз. Кошумча стилдерди каалагандай кошуу үчүн биздин утилиталарды колдонуңуз.

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

Бөлүүчүлөр

::beforeБөлгүчтөр жана аркылуу CSS автоматтык түрдө кошулат content. Аларды жергиликтүү CSS ыңгайлаштырылган касиетин өзгөртүү --bs-breadcrumb-dividerаркылуу же $breadcrumb-dividerSass өзгөрмөсү аркылуу өзгөртүүгө болот - жана $breadcrumb-divider-flippedкерек болсо анын RTL кесиптеши үчүн. Биз өзүбүздүн Sass өзгөрмөсүнө демейки мааниге ээбиз, ал ыңгайлаштырылган касиетке кайтаруу катары коюлган. Ошентип, сиз каалаган убакта CSS-ти кайра компиляциялоосуз жокко чыгара турган глобалдык бөлгүч аласыз.

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

Sass аркылуу өзгөртүүдө , саптын тегерегинде тырмакчаларды түзүү үчүн цитата функциясы талап кылынат. Мисалы, >бөлүүчү катары колдонуп, муну колдоно аласыз:

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

Ошондой эле камтылган SVG сөлөкөтүн колдонсо болот . Аны биздин CSS ыңгайлаштырылган касиетибиз аркылуу колдонуңуз же 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='%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>");

Ошондой эле бөлгүч жөндөөсүн алып салсаңыз болот --bs-breadcrumb-divider: '';(CSS ыңгайлаштырылган касиеттериндеги бош саптар маани катары эсептелет) же 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;

Жеткиликтүүлүк

aria-label="breadcrumb"Нан күкүмдөрү навигацияны камсыз кылгандыктан, элементте каралган навигациянын түрүн сүрөттөп, <nav>ошондой эле aria-current="page"учурдагы баракты чагылдыруу үчүн топтомдун акыркы пунктуна белги коюу сыяктуу маанилүү энбелги кошуу жакшы идея .

Көбүрөөк маалымат алуу үчүн, ARIA Authoring Practices Guide үлгүсүн караңыз .

CSS

Өзгөрмөлөр

Bootstrap'тин өнүгүп жаткан CSS өзгөрмөлөрүнүн бир бөлүгү катары, нан сыныктары эми .breadcrumbреалдуу убакытта жакшыртылган ыңгайлаштыруу үчүн жергиликтүү CSS өзгөрмөлөрүн колдонот. CSS өзгөрмөлөрүнүн маанилери Sass аркылуу коюлат, ошондуктан Sass ыңгайлаштыруу дагы деле колдоого алынат.

  --#{$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 өзгөрмөлөрү

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