【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 >
输出如下:
文章图片
推荐阅读
- jQuery如何使用event.delegateTarget属性(代码示例)
- Scala列表用法完全指南(示例代码)
- 如何使用PHP在HTML链接中下载PDF文件()
- JavaScript如何使用事件(介绍和示例代码)
- PHP如何使用正则表达式(解析和代码示例)
- 如何使用pipe()系统调用(用法示例)
- Golang中如何比较指针(解析和示例)
- 小黑马xp简体中文版最新系统推荐
- 深度系统win7纯净版64最新系统推荐