Breadcrumb

CSS မှတစ်ဆင့် ခြားနားချက်များကို အလိုအလျောက် ထည့်သွင်းပေးသည့် လမ်းကြောင်းဆိုင်ရာ အထက်တန်းအဆင့်အတွင်း လက်ရှိစာမျက်နှာ၏ တည်နေရာကို ညွှန်ပြပါ။

ဤစာမျက်နှာတွင်

ဥပမာ

အနည်းငယ်မျှသာပုံစံပြုလုပ်ထားသော 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='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 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"

ပိုမိုသိရှိလိုပါက၊ WAI-ARIA Authoring Practices ကို breadcrumb ပုံစံအတွက် ကြည့်ပါ ။

ဆူး

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

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