Question

我已尝试使用以下代码在F5中创建一个活动按钮，但它没有给出有效的类效果，请告诉我原因？

    <ul class="button-group radius small">
      <li class="active"><a href="#" class="button small alert">Button 1</a></li>
      <li><a href="#" class="button small alert">Button 2</a></li>
      <li><a href="#" class="button small alert">Button 3</a></li>
      <li><a href="#" class="button small alert">Button 4</a></li>
    </ul>

Answer 1

Zurb基金会没有按钮组的任何活动类。你可以在这里看到http://foundation.zurb.com/docs/components/button_groups.html

如果要添加活动类，请创建一个类添加到活动按钮，

    .activebutton{

    background-color: #970b0e;

    }

Answer 2

详细阐述 @chinmayahd 的答案，以方便所有人观看：

button.active, .button.active { background-color: /*primary active color*/ }
button.secondary.active, .button.secondary.active { background-color: /*secondary active color*/ }
button.success.active, .button.success.active { background-color: /*success active color*/ }
button.alert.active, .button.alert.active { background-color: /*alert active color*/ }
button.warning.active, .button.warning.active { background-color: /*warning active color*/ }
button.info.active, .button.info.active { background-color: /*info active color*/ }

添加各自的活动颜色，你很高兴！（我建议从 foundation.css 文件中抓取悬停/焦点颜色。）

如何在基础zurb中制作活动按钮

2 个答案: