Agregando Bootstrap 4 - moiseserg/rubyWebDev GitHub Wiki

Instrucciones

Usando el siguiente link: Bootstrap Ruby Gem.

Supongamos un nuevo ejemplo:

$ rails new ejemplo -d mysql
      create  
      create  README.md
      create  Rakefile
      create  config.ru
      create  .gitignore

      ...

Enseguida se genera la base de datos:

$ cd ejemplo
$ rake db:create

Supongamos que se desea crear recetas de cocina:

rails g scaffold Recipe tittle:string instructions:text 
Running via Spring preloader in process 5579
      invoke  active_record
      create    db/migrate/20180125005150_create_recipes.rb
      create    app/models/recipe.rb
      invoke    test_unit
      create      test/models/recipe_test.rb
      create      test/fixtures/recipes.yml
      invoke  resource_route
       route    resources :recipes
      invoke  scaffold_controller
      create    app/controllers/recipes_controller.rb
      invoke    erb
      create      app/views/recipes
      create      app/views/recipes/index.html.erb
      create      app/views/recipes/edit.html.erb
      create      app/views/recipes/show.html.erb
      create      app/views/recipes/new.html.erb
      create      app/views/recipes/_form.html.erb
      invoke    test_unit
      create      test/controllers/recipes_controller_test.rb
      invoke    helper
      create      app/helpers/recipes_helper.rb
      invoke      test_unit
      invoke    jbuilder
      create      app/views/recipes/index.json.jbuilder
      create      app/views/recipes/show.json.jbuilder
      create      app/views/recipes/_recipe.json.jbuilder
      invoke  test_unit
      create    test/system/recipes_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/recipes.coffee
      invoke    scss
      create      app/assets/stylesheets/recipes.scss
      invoke  scss
      create    app/assets/stylesheets/scaffolds.scss

No olvidar migrar la base de datos:

$ rake db:migrate
== 20180125005150 CreateRecipes: migrating ====================================
-- create_table(:recipes)
   -> 0.0022s
== 20180125005150 CreateRecipes: migrated (0.0024s) ===========================

Agregando la gema de bootstrap 4

Se usará la información de bootstrap rubygem

  1. Agregar bootstrap al archivo Gemfile (en la raíz del proyecto):
gem 'bootstrap', '~> 4.0.0'

gem 'sprockets-rails', :require => 'sprockets/railtie'

y ejecutar la siguiente línea en la raíz del proyecto para instalar la gema.

bundle install

Importando bootstrap

Modificar el archivo app/assets/stylesheets/application.scss, agregar al final el siguiente fragmento:

@import "bootstrap";

Podrá ver que se visualizan las páginas usando ya bootstrap:

boots01

Agregar jquery y popper

Se agrega al archivo Gemfile:

gem 'jquery-rails'
gem 'popper_js', '~> 1.12.9'

y ejecutar

bundle install

Probar que se pueda cargar la página sin problemas.

Agregar en el archivo /app/assets/javascripts/application.js las siguientes líneas:

//= require jquery3
//= require popper
//= require bootstrap-sprockets

Agregando un modal

Por ejemplo, agregar al contenido del archivo index.html.erb el código de live demo

El siguiente código muestra el código completo:

<p id="notice"><%= notice %></p>

<h1>Recipes</h1>

<table>
  <thead>
    <tr>
      <th>Tittle</th>
      <th>Instructions</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @recipes.each do |recipe| %>
      <tr>
        <td><%= recipe.tittle %></td>
        <td><%= recipe.instructions %></td>
        <td><%= link_to 'Show', recipe %></td>
        <td><%= link_to 'Edit', edit_recipe_path(recipe) %></td>
        <td><%= link_to 'Destroy', recipe, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Recipe', new_recipe_path %>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

La imagen muestra la ejecución: boots01

⚠️ **GitHub.com Fallback** ⚠️