bootstrap3

#gemfile
gem 'jquery-rails' #rails5.1之后已经不默认添加jquery作为插件,需要自己手动添加  
gem 'bootstrap-sass' #可以指定版本为3.3.7
gem 'sass-rails' #默认添加

#修改application.css文件
1.需要将文件修改为application.scss
2.清空application.scss文件,添加内容如下,顺序不能变
@import "bootstrap-sprockets";
@import "bootstrap";

#修改application.js文件
1.不需要改变文件内容,只需要添加如下内容即可
//= require jquery
//= require bootstrap-sprockets

bootstrap4

使用步骤:

#gemfile
gem 'bootstrap', '~> 4.0.0.beta2.1'
gem 'jquery-rails'  #bootstrap需要jquery

#修改application.css文件,需要将文件修改为application.scss,清空里面的内容
@import "bootstrap";

#修改application.js文件
//= require jquery3
//= require popper //bootstrap利用其来进行定位
//= require bootstrap  //也可以添加bootstrap-sprockets,但是bootstrap编译速度更快

#application.html.erb中添加代码使得适应手机屏幕
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

results matching ""

    No results matching ""