媒体Media

<div class="media">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
    </div>
</div>

自定义内容Custom

可任意添加文本内容

<div class="media">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <dl class="baselist">
            <dt>iPhone Cases</dt>
            <dd>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</dd>
            <dd>iPhone 6 Cases</dd>
            <dd>iPhone 4 Cases</dd>
            <dd>iPhone 5 Cases</dd>
            <dd>Samsung Cases</dd>
            <dd>iPad Cases</dd>
        </dl>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>

对齐Align

添加class="tc"使文本居中对齐，添加class="tr"使文本向右对齐

水平排列Horizontal

Left:
<div class="media left">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>
Right:
<div class="media right">
    ...
</div>

响应式复位Response Reset

通过预定义的class="reset-m"、class="reset-s"来对中、小屏幕作布局调整例：添加class="reset-s"，即媒体元素默认为自定义的水平排列，视窗像素小于750px则清除水平排列恢复原状

<div class="media left reset-m">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>
<div class="media left reset-s">
    ...
</div>

叠加Overlay

添加class="overlays"转换为叠加模式，添加class="darken"使图片变暗，需额外定义文本元素的颜色，注意：叠加模式不能与水平排列共同使用

Basic：
<div class="media overlay">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>
Darken:
<div class="media overlay darken">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5 class="c-fff">Business Cards</h5>
        <p class="c-fff">Browse all of our office essentials to keep you organized while showing off your individual style.</p>
        <button type="button" class="btn bg-red">Quick view</button>
    </div>
</div>

圆角Radius

添加class="radius"转换为圆角效果，包含叠加模式

Basic：
<div class="media radius">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>
Overlay：
<div class="media overlay radius">
    ...
</div>

滑动放大图片Zoom

添加class="zoom"使图片增加滑动放大效果，包含叠加模式

Basic：
<div class="media zoom">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>
Overlay：
<div class="media overlay zoom">
    ...
</div>

滑动淡入文本Fadein

添加class="fadein"使文本增加滑动淡入效果，可与滑动放大图片效果叠加，注意：滑动淡入效果仅叠加模式下生效

Basic：
<div class="media overlay fadein">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>
Darken:
<div class="media overlay darken fadein">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5 class="c-fff">Business Cards</h5>
        <p class="c-fff">Browse all of our office essentials to keep you organized while showing off your individual style.</p>
        <button type="button" class="btn bg-red">Quick view</button>
    </div>
</div>