how to implement bootstrap 4 and rails 5

问题:

I am new to ruby and I am trying to include bootstrap 4.0.0.alpha4 into rails 5.0.0. I have installed the gems bootstrap,bootstrap-sass, autoprefixer-rails and I have even used @import "bootstrap" in the application.css.sass, but still I am not getting the bootstrap on the page.I have a button on the view where I am trying to implement the bootstrap design. I have even tried it on different projects ut none of them works. Any help would be appreciated. Thanks.
The codes are as shown below. Gem file

    source 'https://rubygems.org'   # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.0.0' # Use postgresql as the database for Active Record gem 'pg', '~> 0.18' # Use Puma as the app server gem 'puma', '~> 3.0'  gem 'bootstrap' gem 'bootstrap-sass' gem 'autoprefixer-rails'  gem 'wdm' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby  # Use jquery as the JavaScript library gem 'jquery-rails' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 3.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7'  # Use Capistrano for deployment # gem 'capistrano-rails', group: :development  group :development, :test do   # Call 'byebug' anywhere in the code to stop execution and get a debugger console   gem 'byebug', platform: :mri end  group :development do   # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.   gem 'web-console'   gem 'listen', '~> 3.0.5'   # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring   gem 'spring'   gem 'spring-watcher-listen', '~> 2.0.0' end  # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 

回答1:

For official reference code for including Bootstrap into Rails, see the test/dummy_rails project skeleton in the official bootstrap-rubygem project. This project is used in integration-tests so you know it will work with the latest version of the Bootstrap gem and any version of Ruby/Rails in the project's test matrix.

Make sure these lines of code (or equivalent) have been added to your Rails project:

• //= require bootstrap-sprockets in app/assets/javascripts/application.js
• @import bootstrap in app/assets/stylesheets/application.sass
• config.assets.precompile += %w( application.css application.js ) in config/application.rb
• run rake assets:precompile

If you continue to have issues, post full source code to your Rails app or enough to serve as a Minimal, Complete and Verifiable Example that produces your issue- there's always a possibility that something you've changed locally that you haven't thought about but is actually important.

回答2:

Great link and here is my config:

Gemfile:

gem 'compass-rails', '2.0.4' gem 'bootstrap-sass', '~> 3.1.1.1' gem 'autoprefixer-rails', '6.3.7' gem 'sass-rails', '~> 5.0.1' 

config/initializers/assets.rb

Rails.application.config.assets.version = '1.0' Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts') 

And on my sass files tree:

app/assets/stylesheets | |--components |    | |    |--variables,  |    |--mixins and another css/sass files | |--bootstrap.sass |--application.sass 

application.sass:

@import 'bootstrap' @import 'components/*' 

bootstrap.sass:

// Core variables and mixins @import 'bootstrap/variables' @import 'bootstrap/mixins'  // Reset @import 'bootstrap/normalize' //@import 'bootstrap/print'  // Core CSS //@import 'bootstrap/scaffolding' 

header:

= stylesheet_link_tag 'application', media: 'all'

回答3:

You can download the bootstrap file at https://v4-alpha.getbootstrap.com/ and then copy and paste them in to your asset file (vendor) and then import it to your app, by calling it to the application.js and application.css or call it the way you call your other js and css files. That way you can use boostrap.

文章来源: how to implement bootstrap 4 and rails 5