quicklayout下千变万化高矮肥瘦的按钮实例页面

回到相关文章 »

代码:

HTML代码:
<p><strong>默认按钮</strong></p>
<p><a href="##" class="btn btn-blue">默认按钮</a></p>
<p><strong>高矮变化</strong></p>
<p>
    <a href="##" class="btn btn-blue lh24">高矮变化</a>
    <a href="##" class="btn btn-blue lh22">高矮变化</a>
    <a href="##" class="btn btn-blue lh20">高矮变化</a>
    <a href="##" class="btn btn-blue lh18">高矮变化</a>
    <a href="##" class="btn btn-blue lh16">高矮变化</a>
    <a href="##" class="btn btn-blue lh14">高矮变化</a>
</p>
<p><strong>粗细变化</strong></p>
<p>
    <a href="##" class="btn btn-blue b">变粗</a>
    <a href="##" class="btn btn-blue i">倾斜</a>
</p>
<p><strong>大小变化</strong></p>
<p>
    <a href="##" class="btn btn-blue f18">大小变化</a>
    <a href="##" class="btn btn-blue f16">大小变化</a>
    <a href="##" class="btn btn-blue f14">大小变化</a>
    <a href="##" class="btn btn-blue f12">大小变化</a>
</p>
<p><strong>颜色变化</strong></p>
<p>
    <a href="##" class="btn btn-blue red">颜色变化</a>
    <a href="##" class="btn btn-blue yellow">颜色变化</a>
    <a href="##" class="btn btn-blue gc">颜色变化</a>
    <a href="##" class="btn btn-blue purple">颜色变化</a>
</p>
<p><strong>模型变化</strong></p>
<p><a href="##" class="btn btn-blue db">模型变化</a></p>
<p><strong>各种宽度-行内</strong></p>
<p>
    <a href="##" class="btn btn-blue w70">定宽尺寸</a>
    <a href="##" class="btn btn-blue w100">定宽尺寸</a>
    <a href="##" class="btn btn-blue w160">定宽尺寸</a>
    <a href="##" class="btn btn-blue w200">定宽尺寸</a>
    <a href="##" class="btn btn-blue w250">定宽尺寸</a>
    <a href="##" class="btn btn-blue pct15">百分比尺寸</a>
    <a href="##" class="btn btn-blue pct20">百分比尺寸</a>
    <a href="##" class="btn btn-blue pct25">百分比尺寸</a>
    <a href="##" class="btn btn-blue pct30">百分比尺寸</a>
    <a href="##" class="btn btn-blue pct40">百分比尺寸</a>
</p>
<p><strong>标签变化</strong></p>
<p>
    <input type="button" class="btn btn-blue" value="input标签">
    <button class="btn btn-blue">button标签</button>
    <span class="btn btn-blue">span标签</span>
    <label class="btn btn-blue">label标签</label>
</p>