Materialize CSS如何实现面包屑导航（）

【Materialize CSS如何实现面包屑导航（）】当你具有多层内容来显示当前位置时, 将使用Materialize CSS中的面包屑。 Materialize CSS提供了各种CSS类, 可以轻松地创建漂亮的面包屑。它使用两个类, 即nav-wrapper和breadcrumb.
nav-wrapper用于将导航组件设置为面包屑/导航栏包装。
breadcrumb面包屑用于将锚点元素设置为面包屑。最后一个锚元素处于活动状态, 而其余锚元素显示为灰色。

< nav> < div class="nav-wrapper"> < div class="col s12"> < a href="https://www.lsbin.com/#!" class="breadcrumb"> First< /a> < a href="https://www.lsbin.com/#!" class="breadcrumb"> Second< /a> < a href="https://www.lsbin.com/#!" class="breadcrumb"> Third< /a> < /div> < /div> < /nav>

例子：

< !DOCTYPE html> < html > < head > < !--Import Google Icon Font--> < link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" /> < !-- Compiled and minified CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" /> < !--Let browser know website is optimized for mobile--> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < / head > < body > < nav > < div class = "nav-wrapper green" > < div class = "col s12" > < a href = "https://www.lsbin.com/#" class = "breadcrumb" > Home < / a > < a href = "https://www.lsbin.com/#" class = "breadcrumb" > Web Technologies < / a > < a href = "https://www.lsbin.com/#" class = "breadcrumb" > Materialize CSS < / a > < a href = "https://www.lsbin.com/#" class = "breadcrumb" > Breadcrumb < / a > < / div > < / div > < / nav > < !-- Compiled and minified JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" > < / script > < / body > < / html >

输出如下：