Bootstrap 4 en Rails 5 ¿Es posible?

Bootstrap 4 en Rails 5 ¿Es posible?

Se puede implementar de forma simple y con pocos cambios… Veamos cómo!

  1. Añadimos la gema de Bootstrap al gemfile
    gem 'bootstrap', '~> 4.0.0'
    gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
  2. Renombrar el archivo app/assets/stylesheets/application.css file to application.scss, luego, añadir:
    @import "Bootstrap";
  3. Ahora, borramos lo siguiente:
    *= require_tree
    *= require_self
  4. En el archivo app/assets/javascripts/application.js dejamos las dependencias como sigue:
    //= require rails-ujs
    //= require turbolinks
    //= require jquery3
    //= require popper
    //= require bootstrap
    //= require_tree .
  5. app/views/layouts/application.html.erb y lo dejamos con lo básico para usar Bootstrap, nótese que sólo modificamos entre las etiquetas BODY:
    <!DOCTYPE html>
    <html>
     <head>
     <title>Blog</title>
     <%= csrf_meta_tags %>
    
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
     </head>
    
    <body class="bg-light">
     <div class="container">
        <div class="row">
         <div class="col-md-12 pt-md-4">
           <%= yield %>
         </div>
       </div>
     </div>
     </body>
    </html>
  6. Si centralizamos el menú y es el mismo para toda la aplicación, lo ingresamos en este mismo archivo, en caso contrario, lo ingresamos en la vista correspondiente. Para ver el código, consulte la guía oficial de Bootstrap 4.
  7. Ahora, para los formularios, aplicaremos los siguientes cambios al parcial _form.html.erb. Nótese que es un ejemplo, el cual deberá adaptar a su aplicación
    <%= form_with model: @article, local: true do |form| %>
    
    <div class="form-group">
     <%= form.text_field :title, class: "form-control",placeholder: "title" %>
     </div>
    
    <div class="form-group">
     <%= form.text_area :text, class: "form-control",placeholder: "Text" %>
     </div>
    
    <div class="actions">
    
    <%= form.submit "Save", class: "btn btn-primary" %>
     </div>
    
    <% end %>
  8. A estas alturas, te estarás preguntando ¿Dónde están los labels? y la respuesta es simple… Bootstrap es el framework de Twitter y si recuerdas, en Twitter no hay un uso generalizado de etiquetas en los formularios, más bien se usan los cuadros de texto con mensajes en su interior.
  9. Con lo anterior, deberíamos poder implementar Bootstrap 4 en nuestro proyecto Rails 5.1.5 sin problemas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: