集合



集合能让你列出一组对象。

Basic

  • 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>
            

标题

  • First Names

  • Alvin
  • Alvin
  • Alvin
  • Alvin

   <ul class="collection with-header">
     <li class="collection-header"><h4>First Names</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>
            

次要内容

  • First Names

  • Alvin
  • Alvin
  • Alvin
  • Alvin

   <ul class="collection with-header">
     <li class="collection-header"><h4>First Names</h4></li>
     <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
     <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
     <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
     <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
   </ul>
            

头像

  • Title

    First Line
    Second Line

  • Title

    First Line
    Second Line

  • Title

    First Line
    Second Line

  • Title

    First Line
    Second Line


   <ul class="collection">
     <li class="collection-item avatar">
       <img src="images/yuna.jpg" alt="" class="circle">
       <span class="title">Title</span>
       <p>First Line <br>
       Second Line
       </p>
       <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a>
     </li>
     <li class="collection-item avatar">
       <i class="mdi-file-folder circle"></i>
       <span class="title">Title</span>
       <p>First Line <br>
       Second Line
       </p>
       <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a>
     </li>
     <li class="collection-item avatar">
       <i class="mdi-action-assessment circle green"></i>
       <span class="title">Title</span>
       <p>First Line <br>
       Second Line
       </p>
       <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a>
     </li>
     <li class="collection-item avatar">
       <i class="mdi-av-play-arrow circle red"></i>
       <span class="title">Title</span>
       <p>First Line <br>
       Second Line
       </p>
       <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a>
     </li>
   </ul>