iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
Modern Web

不斷片(篇)挑戰系列 第 25

<DAY 25> breadcrumb (一)

  • 分享至 

  • xImage
  •  

大家好!今天是鐵人賽的第25天,很高興各位經過了第25天了各位有堅持下嗎?好啦!
要進入今天的主題囉!Breadcrumb,在當前頁面的結構中位置,該頁面通過CSS自動添加符號。

example

breadcrumb
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">A</li>
    </ol>
</nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">A</a></li>
        <li class="breadcrumb-item active" aria-current="page">當前的</li>
    </ol>
</nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">A</a></li>
        <li class="breadcrumb-item"><a href="#">B</a></li>
        <li class="breadcrumb-item active" aria-current="page">C</li>
    </ol>
</nav>

分隔符號

分隔符號 >
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">1</a></li>
        <li class="breadcrumb-item active" aria-current="page">2</li>
    </ol>
</nav>

今天的內容就先這樣囉!各位要堅持住唷!很快比賽就要結束囉!
各位明天見886~


上一篇
DAY 24 floating labels中的form-select (三)
下一篇
<DAY 26> collapse (一)
系列文
不斷片(篇)挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言