Materialize - BreadCrumb
Materialize cung cấp nhiều lớp CSS khác nhau để tạo một breadcrumb đẹp một cách dễ dàng. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | nav-wrapper Đặt thành phần điều hướng làm trình bao bọc thanh điều hướng / breadcrumb. |
| 2 | breadcrumb Đặt phần tử neo là breadcrumb. Phần tử neo cuối cùng đang hoạt động, trong khi phần còn lại được hiển thị dưới dạng màu xám. |
Thí dụ
Ví dụ sau minh họa việc sử dụng các lớp breadcrumb để giới thiệu thanh điều hướng.
materialize_breadcrumb.htm
<!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 s12">
<a href = "#" class = "breadcrumb">Home</a>
<a href = "#" class = "breadcrumb">Technology</a>
<a href = "#" class = "breadcrumb">HTML5</a>
</div>
</div>
</nav>
</body>
</html>Kết quả
Xác minh kết quả.