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

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

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

Жишээ

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

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

$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='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");

Та мөн хуваагч тохиргоог устгаж болно --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;

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

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

Дэлгэрэнгүй мэдээллийг WAI-ARIA Зохиогчийн практикээс үзнэ үү .

Сасс

Хувьсагч

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