亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

characters

Foundation 價(jià)格表

價(jià)格表可用于展示企業(yè)產(chǎn)品:

實(shí)例

<ul?class="pricing-table">
??<li?class="title">Basic</li>
??<li?class="price">$19.99</li>
??<li?class="description">Great?for?small?business</li>
??<li?class="bullet-item">24/7?Support</li>
??<li?class="bullet-item">15GB?Storage</li>
??<li?class="bullet-item">1GB?Bandwidth</li>
??<li?class="cta-button"><a?class="button"?href="#">Buy</a></li>
</ul>
實(shí)例預(yù)覽 ?

實(shí)例解析

  • ul.pricing-table - 定義價(jià)格表
  • li.title - 定義產(chǎn)品標(biāo)題 (黑色背景)
  • li.price - 定義價(jià)格 (灰色背景字體大個(gè)項(xiàng))
  • li.description - 定義產(chǎn)品描述 (如果需要)
  • li.bullet-item - 定義產(chǎn)品特點(diǎn)
  • li.ca-button - 按鈕文本 (如 "Buy", "Join", "Sign Up", 等)

注意: 表格會(huì) 100% 填充容器的寬度，所有的項(xiàng)都有邊框且是居中的。

價(jià)格表網(wǎng)格

以下實(shí)例顯示了三個(gè)企業(yè)產(chǎn)品的價(jià)格（三項(xiàng)是均等劃分寬度的）：

實(shí)例

<div?class="row">
??<div?class="medium-4?columns">
????<ul?class="pricing-table">
??????<li?class="title">Basic</li>
??????...
????</ul>
??</div>
??<div?class="medium-4?columns">
????<ul?class="pricing-table">
??????<li?class="title">Pro</li>
??????...
????</ul>
??</div>
??<div?class="medium-4?columns">
????<ul?class="pricing-table">
??????<li?class="title">Premium</li>
??????...
????</ul>
??</div>
</div>
實(shí)例預(yù)覽 ?


關(guān)于我們 聯(lián)系我們 留言板

手冊(cè)網(wǎng)

Previous article： Next article：