Dándole estilo a los formularios utilizando Twitter Bootstrap

Por:, en:

ES:This tutorial assumes you have already completed:

  1. Adding custom fields to Devise

Lentamente, nuestra configuración está desarrollando nuevas características. Ya hemos añadido algunos campos personalizados a Devise y los hicimos funcionar. Aun así, nuestros formularios se ven mal y un poco primitivos. Afortunadamente, hemos añadido Twitter Bootstrap 3 a nuestro proyecto. Twitter Bootstrap nos ayudara a que nuestros formularios se vean mucho mejor. 

Paso 1: Modifica la Forma de Registro

Dirígete a la página de Twitter Bootstrap y échale un vistazo a las formas. Utilizaremos la clase de forma horizontal para que se vea mejor:

app/views/users/registrations/new.html.erb


<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: {class: 'form-horizontal'}) do |f| %>
<%= devise_error_messages! %>

<div class="form-group">
    <%= f.label :name, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.text_field :name, class: "form-control",autofocus: true %>
    </div>
</div>

<div class="form-group">
    <%= f.label :email, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.email_field :email, class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <%= f.label :password, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <%= f.label :password_confirmation, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
        <%= f.submit "Sign up", class: "btn btn-primary" %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
        <%= render "users/shared/links" %>
    </div>
</div>
<% end %>

Ahora asegurate que funcione: registrarte y ve si tu página se ve mejor.

Step 2: Modifica la Forma de Sesión

Ahora, arreglemos las otras páginas:

app/views/users/registrations/edit.html.erb


<h2>Edit <%= resource_name.to_s.humanize %></h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: 'form-horizontal' }) do |f| %>
<%= devise_error_messages! %>

<div class="form-group">
    <%= f.label :name, class: 'col-sm-2 control-label'  %>
    <div class="col-sm-6">
        <%= f.text_field :name, autofocus: true, class: 'form-control'  %>
    </div>
</div>

<div class="form-group">
    <%= f.label :is_female, "Gender", class: 'col-sm-2 control-label'  %>
    <div class="col-sm-6">
        <%= f.radio_button :is_female, true %> <%= f.label :is_female, "Female" %>
        <%= f.radio_button :is_female, false %> <%= f.label :is_female, "Male" %>
    </div>
</div>


<div class="form-group">
    <%= f.label :date_of_birth, class: 'col-sm-2 control-label'  %>
    <div class="col-sm-6">
        <%= f.date_select :date_of_birth, start_year: 1920, end_year: 2000, class: 'form-control'  %>
    </div>
</div>

<div class="form-group">
    <%= f.label :email, class: 'col-sm-2 control-label'  %>
    <div class="col-sm-6">
        <%= f.email_field :email, class: 'form-control'  %>
    </div>
</div>

<div class="form-group">
    <%= f.label :password, class: 'col-sm-2 control-label'  %> <i>(leave blank if you don't want to change it)</i>
    <div class="col-sm-6">
        <%= f.password_field :password, autocomplete: "off", class: 'form-control'  %>
    </div>
</div>


<div class="form-group">
    <%= f.label :password_confirmation, class: 'col-sm-2 control-label' %>
    <div class="col-sm-6">
        <%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control'  %>
    </div>
</div>

<div class="form-group">
    <%= f.label :current_password, class: 'col-sm-2 control-label' %> <i>(we need your current password to confirm your changes)</i>
    <div class="col-sm-6">
        <%= f.password_field :current_password, autocomplete: "off", class: 'form-control' %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
        <%= f.submit "Update", class: "btn btn-primary" %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
        <%= render "users/shared/links" %>
    </div>
</div>
<% end %>

<h5>Cancel my account</h5>

<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: 'btn btn-default btn-xs' %></p>

<%= link_to "Back", :back %>

app/views/users/sessions/new.html.erb


<h2>Sign in</h2>

<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: 'form-horizontal'}) do |f| %>
<div class="form-group">
    <%= f.label :email, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.email_field :email, autofocus: true , class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <%= f.label :password, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
    </div>
</div>

<% if devise_mapping.rememberable? -%>
<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= f.check_box :remember_me %> <%= f.label :remember_me %>
    </div>
</div>
<% end -%>

<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= f.submit "Sign in", class: 'btn btn-primary' %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= render "users/shared/links" %>
    </div>
</div>

<% end %>

Paso 3: Modifica la Forma de Contraseña

app/views/users/passwords/new.html.erb


<h2>Forgot your password?</h2>

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: 'form-horizontal' }) do |f| %>
<%= devise_error_messages! %>

<div class="form-group">
    <%= f.label :email, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.email_field :email, autofocus: true, class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= render "users/shared/links" %>
    </div>
</div>
<% end %>

app/views/users/passwords/edit.html.erb


<h2>Change your password</h2>

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: 'form-horizontal' }) do |f| %>
<%= devise_error_messages! %>
<%= f.hidden_field :reset_password_token %>

<div class="form-group">
    <%= f.label :password, "New password", class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <%= f.label :password_confirmation, "Confirm new password", class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= f.submit "Change my password", class: "btn btn-primary" %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= render "users/shared/links" %>
    </div>
</div>
<% end %>

Hay más formularios dentro de los archivos app/views/users, algunos de ellos todavía no los utilizamos. Pero, no dudes en practicar con ellos y también cambiarlos si deseas.

Si tu Inicio de sesión serás capaz de marcar esto tutorial Como vas avanzando tu progreso



Comentar

Tú puedes Inicio de sesión Comentar