Талхны үйрмэг

CSS-ээр автоматаар тусгаарлагчийг нэмдэг навигацийн шатлал дотор одоогийн хуудасны байршлыг заана уу.

Энэ хуудсан дээр

Жишээ

Хамгийн бага загвартай талхны үйрмэг үүсгэхийн тулд холбоос бүхий жагсаалтын зүйлүүдийг эрэмбэлсэн эсвэл эрэмбэлээгүй жагсаалтыг ашиглана уу. Манай хэрэгслүүдийг ашиглан нэмэлт хэв маягийг хүссэнээр нэмнэ үү.

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>

Хуваагчид

::beforeХуваагчийг CSS-д болон -ээр дамжуулан автоматаар нэмдэг content. Тэдгээрийг орон нутгийн CSS хувийн шинж чанарыг өөрчлөх замаар --bs-breadcrumb-dividerэсвэл $breadcrumb-dividerSass хувьсагчаар дамжуулан өөрчлөх боломжтой $breadcrumb-divider-flippedбөгөөд хэрэв шаардлагатай бол RTL-ийн хамтрагчийн хувьд. Бид Sass хувьсагчдаа өгөгдмөл тохируулдаг бөгөөд энэ нь өөрчлөн тохируулсан шинж чанарт өгөгддөг. Ингэснээр та ямар ч үед CSS-ийг дахин хөрвүүлэхгүйгээр дарах боломжтой глобал хуваагчтай болно.

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>

Sass-ээр дамжуулан өөрчлөх үед мөрийн эргэн тойронд ишлэл үүсгэхийн тулд quote функц шаардлагатай. Жишээлбэл, >хуваагч болгон та үүнийг ашиглаж болно:

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

Мөн суулгагдсан SVG дүрсийг ашиглах боломжтой . Үүнийг манай CSS хувийн өмчөөр дамжуулан хэрэглээрэй, эсвэл Sass хувьсагчийг ашиглана уу.

Суулгасан SVG ашиглаж байна

SVG-г өгөгдлийн URI болгон оруулах нь URL-аас хэд хэдэн тэмдэгт, ялангуяа <, >болон #. Ийм учраас хувьсагчийг манай Sass функцээр$breadcrumb-divider дамжуулдаг . CSS-ийн захиалгат шинж чанарыг ашиглахдаа та өөрийн SVG-г өөрөө URL-аас зугтах хэрэгтэй. Юунаас зугтах талаар дэлгэрэнгүй мэдээлэл авахын тулд Кевин Веберийн CodePen дээрх тайлбарыг уншина уу .escape-svg()

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

Та мөн хуваагч тохиргоог устгаж болно --bs-breadcrumb-divider: '';(CSS өөрчлөн шинж чанарууд дахь хоосон мөрүүдийг утгад тооцдог) эсвэл Sass хувьсагчийг тохируулж болно $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;

Хүртээмжтэй байдал

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

Дэлгэрэнгүй мэдээллийг ARIA Зохиогчийн дадлагын гарын авлагаас үзнэ үү .

CSS

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн арга барилын нэг хэсэг болгон Breadcrumbs нь одоо .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;