質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1409閲覧

bootstrapのformをrubyの形にするにはどうすればいいのでしょうか?

sn.jr

総合スコア53

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/11/21 12:17

編集2019/11/22 01:49

前提・実現したいこと

現在bootstrapを用いて自己紹介入力フォームを作っているのですが、rubyで書いたフォームにbootstrapを反映させたいのですがうまくいきません。

bootstrapのexampleに乗っていたものをベースにhtmlで書いたもの↓

これをf.labelとか使うform_withなどに変えたい
理由:bootstrapはDBとやり取りせず、見た目だけ作っているから。ちゃんとDBに格納するようにしたい。(そもそもboostrapがDBとやり取りしないと言う考え方がまちがっていたらご指摘ください。初学者なので勘違いしているかもしれません。)

<form> <div class="form-row"> <% @users.each do |user| %> <div class="form-group col-md-6"> <label for="inputEmail4">Name</label> <input type="name" class="form-control" id="inputEmail4" placeholder="Name" value="<%=user.name %>"> </div> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email" value="<%=user.email %>"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password" > </div> </div> <div class="form-group"> <label for="inputAddress">Photo</label> <input type="file" class="form-control" id="inputAddress" placeholder="1234 Main St" value="<%=user.image %>"> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> <% end %>

試したこと

rubyで書いたフォームのclass名をbootstrapのものにしたりしましたが、フォームの枠が二重になったりとうまくいきませんでした。
2つのパターンを試しました。divをboostrapのクラスでした場合フォームの枠が二重になってしまいました。

<%= form_with model: User.first do |form| %> <div class="form-group col-md-2"> <%= form.text_field :title %> </div> <% end %>
<%= form_with model: User.first do |form| %> <%= form.text_field :title class="form-control"%> <% end %>

補足情報(FW/ツールのバージョンなど)

scaffoldとgem'devise'を使っています。

routes

1Rails.application.routes.draw do 2 devise_for :users 3 resources :pages 4 root "pages#index" 5 # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html 6 get "/intro" => "pages#intro" 7end

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mugheart

2019/11/22 00:28

試した(実際に書いてみた)ファイルを提示してください
guest

回答1

0

ベストアンサー

フォームの枠が二重になったりとうまくいきませんでした。

<%= form_with model: User.first do |form| %>

<div class="form-group col-md-2"> <%= form.text_field :title %> </div> <% end %> > <%= form_with model: User.first do |form| %> > <%= form.text_field :title class="form-control"%> > <% end %> > ```

これは単にフォームを2回生成しているだけなのですが、それに気づいていないといことでいいでしょうか...。

Bootstrapはあくまで見た目を整えるだけのものなのでフォームを生成したりすることはできません。
フォームを実際に生成するのはHTMLのみであり、Rubyで書いた場合であってもそれはRubyのコードでHTMLを出力するだけなので、HTMLをそのまま書くのとなんの変わりもありません。

bootstrapで書いたもの

<form> <div class="form-row"> <% @users.each do |user| %> <div class="form-group col-md-6"> <label for="inputEmail4">Name</label> <input type="name" class="form-control" id="inputEmail4" placeholder="Name" value="<%=user.name %>"> </div> ... > ```

として挙げられているこちらのコードですが、これはHTMLにBootstrapで用意されているclassを持たせただけというのは理解できていますかね?「これ丸ごと全部Bootstrap!」というわけではないですよ。

正直、何をどこまで理解できているかわからないのでどこから説明すればいいかな...という状況です。

投稿2019/11/22 01:35

Mugheart

総合スコア2340

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sn.jr

2019/11/22 01:46

失礼いたしました。フォームを二回作っているのは、2パターン試したと言うことで載せていました。分けて掲載するべきでした。訂正しておきます。boostrapが見た目を整えるものだと言うことは理解しており、class名だけboostrapでフォーム自体はhtmlであることまでは理解しています!
Mugheart

2019/11/22 01:51

てっきりやりたいことは最初のHTMLで書かれたフォームをそのまま form_with で実現することかと思っていたんですが、追記していただいたサンプルが実現したい形であれば、問題なさそうに思います。 「フォームの枠が二重になったり」とはどういう現象なのでしょうか...?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問