列表视图案例

列表视图

• 

  OneNote 2013

  1 RUB

• 

  Excel 2013

  1 RUB

• 

  Word 2013

  1 RUB

• 

  Firefox

  Download...

    <ul class="listview">
        <li>
            <div class="icon">
                <img />
            </div>
            <div class="data">
                <h4>Title</h4>
                ...
                <p>text</p>
            </div>
        </li>
        ...
    </ul>

流体列表视图

• 

  OneNote 2013

  1 RUB

• 

  Firefox

  Free

• 

  Word 2013

  1 RUB

• 

  Excel 2013

  1 RUB

    <ul class="listview fluid">
        ...
    </ul>

图像列表视图

• 

  This is a my face

  Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.

  sergey@pimenov.com.ua
• 

  Bear

  Bears are mammals of the family Ursidae. Bears are classified as caniforms, or doglike carnivorans, with the pinnipeds being their closest living relatives.

• 

  This is a my face

  Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.

  sergey@pimenov.com.ua

    <ul class="listview image">
        ...
    </ul>

流体图像列表视图

• 

  This is a my face

  Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.

  sergey@pimenov.com.ua
• 

  This is a my face

  Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.

  sergey@pimenov.com.ua
• 

  This is a my face

  Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.

  sergey@pimenov.com.ua

    <ul class="listview image fluid">
        ...
    </ul>

图标列表视图

• 

  Excel 2013

• 

  Word 2013

• 

  OneNote 2013

    <ul class="listview iconic">
        ...
    </ul>

带有标记的列表视图

You can use badges with any listview type. To set background or foreground color of badge, you can use color classes.
If you want to strech the badge, you need to add the class strech to the div badge.

CSS类

.strech - Strech your badge dimension
.right - Set your badge to right (default: left)
.bottom - Set your badge to bottom (default: top)

• 1 new

  Mail from vabatta@gmail.com

  Hey Sergey, your metro UI is awesome!
  Keep up the hard work!

• 6 new documents
  

  Word 2013

  1 RUB

• 75% done
  

  Firefox

  Download...

    <ul class="listview">
        <li>
            <div class="badge">
                text
            </div>
            ...
        </li>
        ...
    </ul>
    <ul class="listview">
        <li>
            <div class="badge strech">
                text
            </div>
            ...
        </li>
        ...
    </ul>