今天武志伟小编分享一下Foundation如何设置按钮属性,做出漂亮的按钮
工具/原料
Foundation5.5.3
方法/步骤
1、Foundation提供了6种按钮样式。咯悝滩镞.button类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为:.secondary,.success,惺绅寨瞀.info,.warning或.alert:实例<buttontype="button"class="button">Default</button><buttontype="button"class="buttonsecondary">Secondary</button><buttontype="button"class="buttonsuccess">Success</button><buttontype="button"class="buttoninfo">Info</button><buttontype="button"class="buttonwarning">Warning</button><buttontype="button"class="buttonalert">Alert</button>
2、按钮类可以使用在&l隋茚粟胫t;a>,<button>,或<input>元素:实例<ahref="垆杪屑丝#"class="buttoninfo"role="button">LinkButton</a><buttontype="button"class="buttoninfo">Button</button><inputtype="button"class="buttoninfo"value="InputButton"><inputtype="submit"class="buttoninfo"value="SubmitButton">为什么将a标签的href设置为#当我们不希望链接点击跳转并得到"404"页面时,我们可以将a标签的href设置为#
3、按钮大小我们可以使用.large,.small或.tiny类来设置按钮大小:实例<buttontype="button"class="buttonlarge">Large</button><buttontype="button"class="button">Default</button><buttontype="button"class="buttonsmall">Small</button><buttontype="button"class="buttontiny">Tiny</button>
4、圆角按钮可以使用.radius和.round类来设置圆角按钮:实例<buttontype="button"class="button">DefaultButton</button><buttontype="button"class="buttonradius">RadiusButton</button><buttontype="button"class="buttonround">RoundButton</button>
5、延展按钮可以使用.expand类来设置按钮的宽度为100%:实例<buttontype="button"class="button">DefaultButton</button><buttontype="button"class="buttonexpand">ExpandedButton</button>
6、禁用按钮可以使用.disabled类来设置按钮不可点击:实例<buttontype="button"class="button">DefaultButton</button><buttontype="button"class="buttondisabled">DisabledButton</button>