Materialise CSS面包屑用法 _MaterializeCSS

【Materialise CSS面包屑用法】Materialize CSS BreadCrumb用于显示你的当前位置。当你具有多层内容时, 通常使用此方法。
Materialize CSS提供了各种CSS类, 可以轻松地创建漂亮的面包屑。以下是可用类及其效果的列表。

index	class name	description
1)	nav-wrapper	将导航组件设置为面包屑/导航栏包装。
2)	breadcrumb	将锚点元素设置为面包屑。最后一个锚元素处于活动状态, 而其余的则显示为灰色。

例子

< !DOCTYPE html> < html> < head> < title> The Materialize BreadCrumb Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body class = "container"> < nav> < div class = "nav-wrapper"> < div class = "col s10"> < a href = "http://www.srcmini.com/#" class = "breadcrumb"> srcmini< /a> < a href = "http://www.srcmini.com/#" class = "breadcrumb"> Technology< /a> < a href = "http://www.srcmini.com/#" class = "breadcrumb"> CSS< /a> < /div> < /div> < /nav> < /body> < /html>

立即测试
输出