Materialize - 集合

Materialise 提供了特殊的类来表示各种类型的集合，其中集合表示一组相关的信息项。

先生。 类名和描述
1

收藏

将 div 或 ul 容器设置为集合。
2

收藏品

将 a 或 li 项设置为集合项。
3

积极的

将 a 或 li 项目显示为活动集合项目。
4

带标题

将集合标记为具有标题。
5

集合标题

将 a 或 li 项设置为集合标头。
6

头像

将 a 或 li 项目设置为头像项目。
7

可驳回的

使收藏品能够被滑走。仅适用于触摸屏设备。

例子

以下示例演示了如何使用集合类来展示创建各种类型的集合。

现场演示 
<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Collections 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">
      <h3>Simple Collection</h3><hr/>
      <ul class="collection">
         <li class="collection-item">HTML 5</li>
         <li class="collection-item">JQuery</li>
         <li class="collection-item">JavaScript</li>
         <li class="collection-item">CSS</li>
      </ul>
      <h3>Collection of Links</h3><hr/>
      <div class="collection">
         <a href="#" class="collection-item">HTML 5</a>
         <a href="#!" class="collection-item active">JQuery</a>
         <a href="#!" class="collection-item">JavaScript</a>
         <a href="#!" class="collection-item">CSS</a>
      </div>
      <h3>Collection with Header</h3><hr/>
      <ul class="collection with-header">
         <li class="collection-header"><h3>Front End Technologies</h3></li>
         <li class="collection-item">HTML 5</li>
         <li class="collection-item">JQuery</li>
         <li class="collection-item">JavaScript</li>
         <li class="collection-item">CSS</li>
      </ul>
      <h3>Collection with Secondary Content</h3><hr/>
      <ul class="collection">
         <li class="collection-item"><div>HTML 5<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>JQuery<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>JavaScript<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>CSS<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
      </ul>
      <h3>Collection with Avatar</h3><hr/>
      <ul class="collection">
         <li class="collection-item avatar">
            <img alt="HTML5" src="html5-mini-logo.jpg" class="circle">
            <span class="title">HTML5</span>
            <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
         </li>
         <li class="collection-item avatar">
            <i class="material-icons circle green">insert_chart</i>
            <span class="title">HighCharts</span>
            <p></p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
         </li>
      </ul>
      <h3>Collection with dismissible content</h3><hr/>
      <ul class="collection">
         <li class="collection-item dismissable">HTML 5</li>
         <li class="collection-item dismissable">JQuery</li>
         <li class="collection-item dismissable">JavaScript</li>
         <li class="collection-item dismissable">CSS</li>
      </ul>
   </body>
</html>

输出

验证输出。

简单收藏
前端技术
收藏与头像