CSS3Buttons Rails Helpers 使用教程

谭妲茹

于 2024-08-25 07:22:38 发布

阅读量858

点赞数 27

本文链接：https://blog.csdn.net/gitblog_00485/article/details/141511251

版权

CSS3Buttons Rails Helpers 使用教程

css3buttons_rails_helpersRails helpers to generate beautiful css3 buttons, based on the 'css3-github-buttons'项目地址:https://gitcode.com/gh_mirrors/cs/css3buttons_rails_helpers

项目介绍

CSS3Buttons Rails Helpers 是一个用于生成美观的 CSS3 按钮的 Rails 辅助方法集合。该项目基于 Nicolas Gallagher 的 'css3-github-buttons'，旨在帮助 Rails 开发者快速轻松地利用这些优秀的按钮样式。

项目快速启动

安装

将 gem 添加到你的 Gemfile 中：
```
gem 'css3buttons'
```
运行 bundle 安装：
```
bundle install
```

配置

Rails 3.1 及以上版本

在 app/assets/stylesheets/application.css 中引入样式表：
```
*= require css3buttons
*= require_self
```
默认情况下，CSS3Buttons 包含一个重置样式表，因此应在其之前加载其他样式表。如果你不想使用重置样式表，可以这样引入：
```
*= require css3buttons/without-reset
*= require_self
```

Rails 3.0.x 版本

将 gem 添加到你的 Gemfile 中，并指定版本：
```
gem 'css3buttons', '0.9.5'
```
运行 bundle 安装：
```
bundle install
```
运行生成器：
```
rails g css3buttons
```
在你的布局文件中添加以下内容：
```
<%= css3buttons_stylesheets %>
```
如果你想使用自己的重置样式表，可以这样引入：
```
<%= css3buttons_stylesheets :include_reset => false %>
```

应用案例和最佳实践

基本用法

要将 link_to 调用转换为按钮，只需使用 button_link_to。例如：

<%= button_link_to "点击这里", "/path" %>

修改默认表单按钮

你可以在 formtastic_changes.css 样式表中插入以下内容来修改默认表单按钮：

form.formtastic input[type="submit"],
form.formtastic button {
  height: 25px;
  padding: 0 2em 1em 0 2em;
  font-family: sans-serif;
  font-size: 11px;
  margin-left: 5px;
}