×
Pure 入门Pure 开始使用Pure 布局(Layouts)Pure 基础(Base)Pure 网格(Grids)Pure 形式(Form)Pure 按钮(Buttons)Pure 表格(Tables)Pure 菜单(Menus)Pure 工具(Tools)Pure 定制(Customize)Pure 延伸(Extend)

Pure 按钮(Buttons)


默认按钮

要创建Pure按钮,请将pure-button类名添加到任何元素

禁用按钮

要将按钮标记为已禁用,请在pure-button-disabled旁边添加类名pure-button。或者,直接将“禁用”属性添加到您的按钮。

Pure按钮


活动按钮

要设置一个按钮,使其出现“按下”,请在pure-button-active旁边添加类名pure-button。

Pure按钮

An Active Button

主要按钮

要指示一个按钮代表主要操作,请将pure-button-primary该类名旁边添加pure-button。

Pure按钮

A Primary Button

自定义按钮

由于Pure的最小样式,可轻松构建通用Pure按钮,并为您自己的应用程序创建自定义按钮。

要自定义按钮样式,您应该将自定义CSS分组到类中button-foo,然后可以将其添加到已经具有pure-button类名称的元素中。这里有些例子。

带圆角的彩色按钮

Pure按钮

不同大小的按钮

Pure按钮

带图标的按钮

Pure不附带图标字体,但是我们和现有的字体一样玩。将图标字体与Pure Buttons结合起来很简单。在下面的示例中,我们使用Font Awesome的图标字体。将Font Awesome CSS文件放在页面上,并在元素中使用pure-button元素。

Pure按钮




    
    Checkout

按钮组

将多个按钮组合在一行。

对于辅助技术(即屏幕阅读器),role应提供一个属性来确保传达适当的含义。按钮组应该有一个role="group",而工具栏应该有role="toolbar"。

此外,应提供清晰的标签,因为大多数辅助技术不会公布。下面的代码片段提供了一个例子。

Pure按钮


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)