更改 Bootstrap 类导航栏品牌的字符颜色答案

【问题标题】：Change character color for Bootstrap class navbar-brand更改 Bootstrap 类导航栏品牌的字符颜色
【发布时间】：2014-09-07 16:24:51
【问题描述】：

我正在尝试更改导航栏品牌名称的颜色：

到这里：

例如，对于段落中的任何文本，我使用以下 html 代码：

<span style="color: #e74c3c">P</span>aper<span style="color: #e67e22">S</span>tack</h1>

但是我不知道该怎么做，因为我使用嵌入式 Ruby 代码作为我的导航栏品牌名称

<%= link_to 'PaperStack', root_path, class: "navbar-brand" %>

有什么帮助吗？

【问题讨论】：

标签： html css ruby-on-rails ruby twitter-bootstrap

【解决方案1】：

您可以在 link_to 文本中包含跨度，只需在字符串上调用 html_safe。

<%= link_to '<span style="color: #e74c3c">P</span>aper<span style="color: #e67e22">S</span>'.html_safe, root_path, class: "navbar-brand" %>

【讨论】：

【解决方案2】：

<%= link_to root_path do %>
  html-code-here
<% end %>

在这里回答：How do I wrap link_to around some html ruby code?

【讨论】：

【解决方案3】：

hepler 方法怎么样：

def navbar_brand_text
  content_tag :span, 'P', class: 'letter-p' +
  content_tag :span, 'aper', class: 'paper' +
  content_tag :span, 'S', class: 'letter-s' +
  content_tag :span, 'tack', class: 'stack'
end

那么你可以这样使用它：

<%= link_to navbar_brand_text, root_path, class: 'navbar-brand' %>

然后使用 CSS 输入跨度：

.letter-p {
  color: #foo;
}
/* etc... */

【讨论】：

辅助方法 def navbar_brand_text content_tag :span, 'P', class: 'letter-p' + content_tag :span, 'aper', class: 'paper' + content_tag :span, 'S', class: 'letter-s' + content_tag :span, 'tack', class: 'stack' end 我应该把这个方法放在我的 rails 应用程序的什么地方？