如何使基础zurb中的活动按钮

我已经尝试了下面的代码来创建一个F5中的活动按钮，但它没有给出活动类效果，请让我知道为什么？如何使基础zurb中的活动按钮

<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>

来源

2013-11-24 Able Alias

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

如果你想添加活动类中创建一个类添加到您的活动按钮，

.activebutton{ 

    background-color: #970b0e; 

    }

来源

2013-11-25 07:12:01 chinmayahd

这很好，但我看起来像Bootstrap中的“active”类 –

是的，我只是使用.active类和例如，创建一个类：.button-group .button .active。 –

在阐述@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文件中获取悬停/对焦颜色。）

来源

2017-08-16 15:50:09

如何使基础zurb中的活动按钮

回答

相关问题