Rails - 如何将表单与引导程序集成 css?
Rails - how to integrate a form with bootstraps css?
我想使用 Bootstrap 更改我的表单的外观。
这是我当前的表单视图设置(非常简单...)
<div class="field">
<%= form.label :first_name %>
<%= form.text_field :first_name %>
</div>
<div class="field">
<%= form.label :last_name %>
<%= form.text_field :last_name %>
</div>
<div class="field">
<%= form.label :age %>
<%= form.number_field :age %>
</div>
<div class="field">
<%= form.label :email %>
<%= form.text_field :email %>
</div>
<div class="actions">
<%= form.submit %>
</div>
我想使用这种风格 (https://getbootstrap.com/docs/5.0/forms/overview/#:~:text=Copy-,%3Cform%3E,-%3Cdiv%20class%3D%22mb)
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
我不确定如何将 ruby 代码与 html 集成?
以下是我在我的案例中编辑此表单的方式。 . .
<h1 class="display-6">Add a new Barber below</h1>
<div class="mb-3">
<div class="form-control">
<label class="form-label"><%= form.label :first_name %></label>
<%= form.text_field :first_name %>
</div>
</div>
<div class="mb-3">
<div class="form-control">
<%= form.label :last_name %>
<%= form.text_field :last_name %>
</div>
</div>
<div class="mb-3">
<div class="form-control">
<%= form.label :age %>
<%= form.number_field :age %>
</div>
</div>
<div class="mb-3">
<div class="form-control">
<%= form.label :email %>
<%= form.text_field :email %>
</div>
</div>
<!--Submit button below for the above form-->
<button type="button" class="btn btn-outline-success"><%= form.submit'Create a new barber?' %> </button>
我想使用 Bootstrap 更改我的表单的外观。
这是我当前的表单视图设置(非常简单...)
<div class="field">
<%= form.label :first_name %>
<%= form.text_field :first_name %>
</div>
<div class="field">
<%= form.label :last_name %>
<%= form.text_field :last_name %>
</div>
<div class="field">
<%= form.label :age %>
<%= form.number_field :age %>
</div>
<div class="field">
<%= form.label :email %>
<%= form.text_field :email %>
</div>
<div class="actions">
<%= form.submit %>
</div>
我想使用这种风格 (https://getbootstrap.com/docs/5.0/forms/overview/#:~:text=Copy-,%3Cform%3E,-%3Cdiv%20class%3D%22mb)
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
我不确定如何将 ruby 代码与 html 集成?
以下是我在我的案例中编辑此表单的方式。 . .
<h1 class="display-6">Add a new Barber below</h1>
<div class="mb-3">
<div class="form-control">
<label class="form-label"><%= form.label :first_name %></label>
<%= form.text_field :first_name %>
</div>
</div>
<div class="mb-3">
<div class="form-control">
<%= form.label :last_name %>
<%= form.text_field :last_name %>
</div>
</div>
<div class="mb-3">
<div class="form-control">
<%= form.label :age %>
<%= form.number_field :age %>
</div>
</div>
<div class="mb-3">
<div class="form-control">
<%= form.label :email %>
<%= form.text_field :email %>
</div>
</div>
<!--Submit button below for the above form-->
<button type="button" class="btn btn-outline-success"><%= form.submit'Create a new barber?' %> </button>