如何使用Materialize CSS快速搭建网页_框架组件与应用-css教程-PHP中文网

如何使用Materialize CSS快速搭建网页_框架组件与应用

P粉602998670

发布： 2025-11-07 07:49:20

原创

312人浏览过

Materialize CSS 是基于 Material Design 的前端框架，提供丰富组件和工具类以快速构建响应式网页。首先通过 CDN 引入 CSS、JavaScript 和图标资源，并使用 container 和栅格系统（如 col s12 m6）布局页面。常用组件包括导航栏、卡片、按钮及 FAB 浮动按钮，支持美观的 UI 交互。模态框、下拉菜单等需在 DOM 加载后通过 JavaScript 初始化，例如 M.Modal.init()。注意移动端优先设计，合理使用隐藏类和颜色类（如 red lighten-2），确保 JS 正确执行以激活交互功能。掌握基础结构与组件用法后，结合官方文档可高效开发中小型项目。

如何使用materialize css快速搭建网页_框架组件与应用

Materialize CSS 是一个基于 Google 的 Material Design 设计语言的前端框架，能帮助开发者快速搭建美观、响应式的网页。它提供了丰富的预定义组件和工具类，无需从零编写样式，特别适合快速构建原型或中小型项目。

核心框架结构

使用 Materialize CSS 搭建页面的第一步是引入必要的资源。可以通过 CDN 快速接入：

<link rel="stylesheet" href="https://cdn js.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

页面基础结构建议使用 container 类来居中内容，并配合栅格系统布局：

<div class="container">
  <div class="row">
    <div class="col s12 m6 l4">内容块 1</div>
    <div class="col s12 m6 l4">内容块 2</div>
    <div class="col s12 m6 l4">内容块 3</div>
  </div>
</div>

登录后复制

s12 表示在小屏占满12列，m6 在中屏占6列，实现响应式布局。

立即学习“前端免费学习笔记（深入）”；

常用 UI 组件与用法

Materialize 提供了大量开箱即用的组件，以下是几个高频使用的实例：

导航栏（Navbar）

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </div>
</nav>

登录后复制

支持固定定位、下拉菜单等，通过 JavaScript 初始化交互功能。

卡片（Card）

用于展示图文信息，结构清晰：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

<div class="card">
  <div class="card-image">
    <img src="image.jpg" alt="图片">
    <span class="card-title">标题</span>
  </div>
  <div class="card-content">
    <p>这里是卡片描述内容。</p>
  </div>
  <div class="card-action">
    <a href="#">了解更多</a>
  </div>
</div>

登录后复制

按钮与浮动按钮（FAB）

Materialize 提供多种按钮样式：

btn waves-effect waves-light：标准按钮
btn-floating red：圆形浮动按钮，常配合图标使用

<a class="btn-floating btn-large red">
  <i class="material-icons">add</i>
</a>

登录后复制

JavaScript 组件交互

某些组件如模态框、下拉菜单、轮播图等需要 JavaScript 初始化：

模态框（Modal）

<a class="waves-effect waves-light btn modal-trigger" href="#modal1">打开模态框</a>
<p><div id="modal1" class="modal">
<div class="modal-content">
<h4>提示</h4>
<p>这是模态框内容。</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">关闭</a>
</div>
</div></p>

登录后复制

通过 JS 启用：

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
M.Modal.init(elems);
});

下拉菜单

使用 data-target 或 data-toggle 属性绑定触发元素，JS 初始化后即可点击展开。