11.Bootstrap(中文教程)元件：麵包屑 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

11.Bootstrap(中文教程)元件：麵包屑

yan-bootstrap4 bootstrap4(中文教程)

Ci_Yao_Yan 2020-03-30 09:31:17 ‧ 1164 瀏覽

分享至

ㄧ.麵包屑

<div class="conponent" id="demo">
 <nav>
  <ol class="breadcrumb">
   <li class="breadcrumb-item"><a href="#">首頁</a></li>
   <li class="breadcrumb-item"><a href="#">課程</a></li>
   <li class="breadcrumb-item active">bootstrap4</li>
  </ol>
 </nav>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.在ol的class屬性設一個breadcrumb，接著li的class屬性為breadcrumb-item
2.active為這一頁的內容
3.另外補充/是從li的偽元素before的content寫入的，可以試著更改#

codepen
參考：bootstrap4

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

1 則留言

0

PPTaiwan

iT邦好手 1 級 ‧ 2020-04-14 11:34:49

https://codepen.io/asc824/pen/XWbOJyR

404

回應 1
檢舉

Ci_Yao_Yan iT邦新手 4 級 ‧ 2020-04-14 11:37:57 檢舉

Sorry，好幾個禮拜前不小心刪掉。你可以照上面的程式碼做做看...
有什建議可以留言一下，感恩...

登入發表回應

我要留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙