0

私はこれを尋ねるのはとても初心者だと感じています。今、私は大丈夫な外観でうまく機能しているレールアプリを持っています。ブートストラップの角の丸いスタイルの検索ボックスを追加したかったのです。だから私は追加しました

：class =>'form-search'

と

：class =>'input-medium search-query'

タグを形成します。

しかし、それは変わりません:(それはまだ正方形のボックスです。なぜ変わらないのですか？そして、公式のブートストラップWebサイトのように、角の丸い検索ボックスのようにするにはどうすればよいですか？

私の構成について詳しく説明します。ありがとう！！

Gemfileで

gem'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フォルダからの2つのpng画像ファイル。

3位。それらをアセットフォルダの関連フォルダに配置します。

4日。アイコンを表示させたい場合。bootstrap.css内のアイコンpngファイルの参照URIを、両方の現在のフォルダー構造に変更する必要があります。

于 2012-12-13T15:21:45.547 に答える