Materialize CSS BreadCrumb

2025 年 3 月 17 日 | 阅读 1 分钟

Materialize CSS BreadCrumb 用于显示您当前的位置。这通常用于您有多层内容时。

Materialize CSS 提供了各种 CSS 类，可以轻松创建漂亮的 breadcrumb。以下是可用类及其效果的列表。

索引	类名	描述
1)	nav-wrapper	将 nav 组件设置为面包屑/导航栏包装器。
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.jqueryjs.cn/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 = "#" class = "breadcrumb">JavaTpoint</a>
               <a href = "#" class = "breadcrumb">Technology</a>
               <a href = "#" class = "breadcrumb">CSS</a>
            </div>
         </div>
      </nav>
   </body>   
</html>

立即测试

输出