集合允许您将列表对象分组放在一起。

基础

• Alvin
• Alvin
• Alvin
• Alvin

    <ul class="collection">
      <li class="collection-item">Alvin</li>
      <li class="collection-item">Alvin</li>
      <li class="collection-item">Alvin</li>
      <li class="collection-item">Alvin</li>
    </ul>
            

链接

      <div class="collection">
        <a href="#!" class="collection-item">Alvin</a>
        <a href="#!" class="collection-item active">Alvin</a>
        <a href="#!" class="collection-item">Alvin</a>
        <a href="#!" class="collection-item">Alvin</a>
      </div>
            

标题

• 姓名

• Alvin
• Alvin
• Alvin
• Alvin

      <ul class="collection with-header">
        <li class="collection-header"><h4>姓名</h4></li>
        <li class="collection-item">Alvin</li>
        <li class="collection-item">Alvin</li>
        <li class="collection-item">Alvin</li>
        <li class="collection-item">Alvin</li>
      </ul>
            

次要内容

• 姓名

• Alvinsend
• Alvinsend
• Alvinsend
• Alvinsend

      <ul class="collection with-header">
        <li class="collection-header"><h4>姓名</h4></li>
        <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
        <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
        <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
        <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
      </ul>
            

头像内容

• 标题

  第一行
  第二行

  grade
• folder 标题

  第一行
  第二行

  grade
• insert_chart 标题

  第一行
  第二行

  grade
• play_arrow 标题

  第一行
  第二行

  grade

  <ul class="collection">
    <li class="collection-item avatar">
      <img src="images/yuna.jpg" alt="" class="circle">
      <span class="title">标题</span>
      <p>第一行 <br>
      第二行
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle">folder</i>
      <span class="title">标题</span>
      <p>第一行 <br>
      第二行
      </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">标题</span>
      <p>第一行 <br>
      第二行
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle red">play_arrow</i>
      <span class="title">标题</span>
      <p>第一行 <br>
      第二行
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
  </ul>