Breadcrumb

ဥပမာ

အနည်းငယ်မျှသာပုံစံပြုလုပ်ထားသော breadcrumb ကိုဖန်တီးရန် လင့်ခ်ချိတ်ထားသောစာရင်းအရာများပါရှိသော မှာယူထားသော သို့မဟုတ် မှာယူထားသောစာရင်းကို အသုံးပြုပါ။ အလိုရှိသောအတိုင်း ထပ်လောင်းစတိုင်များထည့်ရန် ကျွန်ုပ်တို့၏ utilities ကိုသုံးပါ။

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

ပိုင်းခြားခြင်း။

Dividers များကို CSS မှတဆင့် ::beforeနှင့် content. ၎င်းတို့ကို ဒေသဆိုင်ရာ CSS စိတ်ကြိုက်ပိုင်ဆိုင်မှု --bs-breadcrumb-dividerသို့မဟုတ် $breadcrumb-dividerSass variable မှတဆင့် — နှင့် $breadcrumb-divider-flippedလိုအပ်ပါက ၎င်း၏ RTL တွဲဖက်အတွက် ပြောင်းလဲခြင်းဖြင့် ၎င်းတို့ကို ပြောင်းလဲနိုင်သည်။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ Sass variable ကို ပုံသေသတ်မှတ်ထားပြီး၊ ၎င်းသည် စိတ်ကြိုက်ပိုင်ဆိုင်မှုအတွက် အစားထိုးတစ်ခုအဖြစ် သတ်မှတ်ထားသည်။ ဤနည်းအားဖြင့် CSS ကို အချိန်မရွေး ပြန်လည်ပေါင်းစည်းခြင်းမပြုဘဲ သင် override လုပ်နိုင်သော ကမ္ဘာလုံးဆိုင်ရာ ပိုင်းခြားမှုကို သင်ရရှိမည်ဖြစ်သည်။

<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 variable ကို အသုံးပြုပါ။

<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 variable ကို သတ်မှတ်ခြင်းကိုလည်း ဖယ်ရှားနိုင်သည် $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"

ပိုမိုသိရှိလိုပါက၊ ARIA ရေးသားပြုစုခြင်းဆိုင်ရာ လမ်းညွှန်ချက် breadcrumb ပုံစံကို ကြည့်ပါ ။

CSS

ကိန်းရှင်များ

Bootstrap ၏ တိုးတက်ပြောင်းလဲလာသော CSS variables ချဉ်းကပ်မှု၏ တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ ယခုအခါတွင် breadcrumbs သည် .breadcrumbအချိန်နှင့်တစ်ပြေးညီ စိတ်ကြိုက်ပြင်ဆင်ရန်အတွက် local CSS variable များကို အသုံးပြုပါသည်။ CSS variable များအတွက် တန်ဖိုးများကို 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;