Materialize CSS如何实现面包屑导航?

2021年3月29日17:47:23 发表评论 718 次浏览

当你具有多层内容来显示当前位置时, 将使用Materialize CSS中的面包屑。 Materialize CSS提供了各种CSS类, 可以轻松地创建漂亮的面包屑。它使用两个类, 即nav-wrapper和breadcrumb.

nav-wrapper用于将导航组件设置为面包屑/导航栏包装。

breadcrumb面包屑用于将锚点元素设置为面包屑。最后一个锚元素处于活动状态, 而其余锚元素显示为灰色。

<nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" 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 = "#" class = "breadcrumb" >
                     Home
                 </ a >
                 < a href = "#" class = "breadcrumb" >
                     Web Technologies
                 </ a >
                 < a href = "#" class = "breadcrumb" >
                     Materialize CSS
                 </ a >
                 < a href = "#" 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 >

输出如下:

Materialize CSS如何实现面包屑导航?

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: