0

问这个我觉得很菜鸟。现在，我有运行良好且外观良好的 rails 应用程序。我想添加引导程序的圆角样式搜索框。所以我加了

:class => '表单搜索'

和

:class => '输入媒体搜索查询'

形成标签。

但它没有改变:(它仍然只是方形框。为什么它没有改变？我怎样才能让它像官方引导网站中的圆角搜索框一样？

让我给你更多关于我的配置的信息。谢谢！！

在 Gemfile

宝石'twitter-bootstrap-rails'

在 assets/javascripts/ 我有'bootstrap.js.coffee'

并且 application.js 以

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
//= require jquery.ui.datepicker

在资产/样式表/我有'bootstrap_and_overrides.css.less'

和 application.css 以

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 *= require jquery.ui.datepicker
 */
4

2 回答 2

1

我也经历过和你一样的事情。

认为我发现了问题，事实证明。

将此添加到您的 html 的顶部

<!DOCTYPE html>

和形式如

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>

请让我知道这是否有效

于 2012-12-13T01:51:24.727 回答
0

首先，确保您从引导项目主页下载。

第二，您需要的所有文件是：

  1. bootstrap.css 不是最低版本，因为您稍后会更改它。

  2. bootstrap.min.js 因为你不太可能改变它。

  3. 您下载的 img 文件夹中的两个 png 图像文件。

第三。将它们放入您的资产文件夹的相关文件夹中。

第四。如果你想让图标出现。您必须将 bootstrap.css 中的图标 png 文件的引用 uri 更改为您当前的文件夹结构，对于它们两者。

于 2012-12-13T15:21:45.547 回答