Guías de Make it Real
Search…
Introduction
Preparación
Git
HTML y CSS
Bootstrap 3
Bootstrap 4
Ruby
Programación Orientada a Objetos en Ruby
JavaScript I
JavaScript en el navegador
jQuery
JavaScript II
HTTP y Sinatra
Bases de datos
Ruby on Rails I
Primeros pasos
Arquitectura
Rutas
Layouts y rendering
ActiveRecord - Modelos
ActiveRecord - Migraciones
ActiveRecord - Validaciones
ActiveRecord - Asociaciones
ActiveRecord - Scopes
ActiveRecord - Callbacks
Recursos REST
Formularios
Autenticación con Devise
Sass y Bootstrap
Envío de correos
Carga de imágenes
Seeds
Heroku
Ruby on Rails II
Express.js
Express.js II
React
Redux
Algoritmos
Python
NumPy
Pandas
Powered By GitBook
Sass y Bootstrap
​Sass es un preprocesador de CSS.
​Sass ofrece varias ventajas sobre CSS como:
  • Variables
  • Reglas anidadas
  • Importación de archivos y parciales
  • Reutilización de código con mixins y herencia
  • Operadores matemáticos y lógicos
  • Condicionales e iteraciones
Para aprender más sobre Sass te recomendamos este video de Make it Real.

Bootstrap 3

Los pasos para configurar Bootstrap 3 son los siguientes:
  1. 1.
    Incluye la gema en el Gemfile:
    1
    gem 'bootstrap-sass', '~> 3.3.7'
    Copied!
  2. 2.
    Ejecuta bundle install.
  3. 3.
    Cambia la extensión del archivo app/assets/stylesheets/application.css por .scss.
  4. 4.
    Reemplaza el contenido de app/assets/stylesheets/application.scss por lo siguiente:
    1
    // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
    2
    @import "bootstrap-sprockets";
    3
    @import "theme";
    4
    @import "bootstrap";
    Copied!
  5. 5.
    Crea el archivo app/assets/stylesheets/theme.scss en donde vas a poder sobrescribir las variables de Bootstrap, por ejemplo:
    1
    $font-size-base: 16px;
    2
    $text-color: #303030;
    Copied!
Para ver la lista de variables que puedes sobrescribir sigue este enlace.

Bootstrap 4

Los pasos para configurar Bootstrap 4 son los siguientes:
  1. 1.
    Incluye la gema al final del Gemfile:
    1
    gem 'bootstrap', '~> 4.1'
    Copied!
  2. 2.
    Ejecuta bundle install.
  3. 3.
    Cambia la extensión del archivo app/assets/stylesheets/application.css por .scss.
  4. 4.
    Reemplaza el contenido de app/assets/stylesheets/application.scss por lo siguiente:
    1
    @import "theme";
    2
    @import "bootstrap";
    Copied!
  5. 5.
    Crea el archivo app/assets/stylesheets/theme.scss en donde vas a poder sobrescribir las variables de Bootstrap, por ejemplo:
    1
    $text-color: #303030;
    2
    `
    Copied!
Para ver la lista de variables que puedes sobrescribir sigue este enlace.
Eso es todo lo que necesitas para empezar a trabajar con Bootstrap en tus proyectos.
Previous
Autenticación con Devise
Next
Envío de correos
Last modified 4yr ago
Copy link
Contents
Bootstrap 3
Bootstrap 4