物化CSS芯片用于表示少量信息。它们主要用于联系人或标签。
与Materialize CSS芯片一起使用的类
chip:用于将div容器设置为芯片。
例子让我们以一个示例来演示如何使用芯片类来展示如何创建各种类型的标签。
<
!DOCTYPE html>
<
html>
<
head>
<
title>
The Materialize Chips 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">
<
div class = "chip">
<
img alt ="HTML5" src ="https://www.srcmini.com/materializecss/images/materialize-chips1.png">
HTML 5
<
/div>
<
div class = "chip">
HTML 5<
i class = "material-icons">
close<
/i>
<
/div>
<
/body>
<
/html>
【Materialise CSS chip用法】立即测试
推荐阅读
- Materialise CSS卡片
- Materialise CSS按钮
- Materialise CSS面包屑用法
- Materialise CSS徽章
- Materialise CSS字体
- Materialise CSS阴影
- delphi xe5 android 开发数据访问手机端 解决乱码的办法
- Delphi XE5 图解为Android应用制作签名
- Android实例-Delphi开发蓝牙官方实例解析(XE10+小米2+小米5)