Question

我是rails的新手，所以我想问一下如何使用带有rails的bootstrap？在学习后端开发之前，我曾经简单地在html文件的html标签的头部调用它，如下所示：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

所以我想知道在rails中使用它的正确方法是什么？我是否应该这样做并将这些调用放在应用程序布局视图文件的html标记的头部（jQuery除外，因为它已经实现了）？

因为如果这么简单，那为什么人们会为引导程序制作特殊的宝石呢？

我很确定我有很多不足之处或者没有意识到，所以我希望得到一些澄清和指导。

PS：rails app已经存在，我只是想使用bootstrap来调整设计..

Answer 1

为什么要安装bootstrap gem？

由于rails使用asset pipeline来缩小和压缩样式表，javascripts和图像，因此使用sass版本的bootstrap是包含引导程序而不是在应用程序布局视图中包含引导程序的首选方法。另外，如果你只是在头文件中包含bootstrap，那么包含文件必须是bootstrap的编译版本（它只是一个css文件）。但是，由于我们将在您的应用程序中包含sass版本的bootstrap，您将可以访问bootstrap的sass变量，mixins和其他与sass相关的非常棒的内容。您无法通过在应用程序布局视图中包含已编译的资产来获得该功能。通过在application.scss文件中导入sass，rails将动态编译您的引导程序和资产，并使您在设计应用程序时更加灵活。

将Bootstrap添加到rails应用

根据bootstrap-sass gem，您需要添加

'gem 'bootstrap-sass'

到您的Gemfile然后运行

bundle install

接下来，您将要在应用程序css清单文件中导入引导程序样式表。但是，默认情况下，清单文件名为：

app/assets/stylesheets/application.css

但您应该将其重命名为使用.scss扩展名（或.sass扩展名），如下所示：

app/assets/stylesheets/application.scss

现在，删除application.scss文件中的所有内容并添加以下两行：

@import "bootstrap-sprockets";
@import "bootstrap";

从现在开始，您需要手动处理scss文件的导入。

接下来，要使bootstrap的javascript帮助程序可用，您需要添加以下行：

//= require bootstrap-sprockets

到你的

app/assets/javascripts/application.js

您需要添加该行，以使您的application.js文件如下所示：

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory,   lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

Answer 2

1。

rails new bootstrappy

2。

cd bootstrappy

3。

yarn add bootstrap jquery popper.js

4。

在environment.js

中

config/webpack/environment.js

添加以下内容：

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}))

5。

在application.js

中

位置：app/javascript/packs/application.js 添加：

import "bootstrap"
import "../stylesheets/application"

document.addEventListener("turbolinks:load", () => {
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()
})

6。

在stylesheets中创建app/javascript文件夹

mkdir app/javascript/stylesheets

在stylesheets文件夹中创建文件：application.scss

7。

在app/javascript/stylesheets/application.scss中添加：

@import "~bootstrap/scss/bootstrap";

8。更新：app/views/layouts/application.html.erb

添加：

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

application.html.erb看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrappy</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

9。测试一下：

将 navbar ， tooltips ， popover 添加到：

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrappy</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 
    'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 
    'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>   

  <!-- add navbar -->

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
      target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- 
      expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
            role="button" 
            data-toggle="  dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria- 
            disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria- 
          label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" 
          type="submit">Search</button>
      </form>
    </div>
  </nav>

  <!-- add tooltips -->

  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="top" title="Tooltip on top">
    Tooltip on top
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="right" title="Tooltip on right">
    Tooltip on right
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="left" title="Tooltip on left">
    Tooltip on left
  </button>

  <!-- add popover -->

  <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" 
    title="Popover title"   data-content="And here's some amazing content. It's very 
    engaging. Right?">Click to toggle popover</button>
  <%= yield %>
  </body>
</html>

10。

rails g controller main index

11。

更新app/config/routes.rb

像这样：

Rails.application.routes.draw do
  root to: 'main#index'
end

12。

运行start rails server

13。请点击此链接：

http://localhost:3000/享受吧！

Answer 3

引入bootstrap-sass gem或使用NPM包的一个主要原因是，您可以配置，覆盖和使用Bootstrap的Sass变量和mixin。当您从CDN中提取时，您将获得预编译和缩小的CSS，因此您要覆盖的任何样式都必须直接在要修改的元素上完成，而使用变量将允许您始终如一地修改样式。 overriding their variables所有引导程序组件，您也可以使用它们可用的wide variety of mixins。

如果您只想使用常规引导程序默认设置启动并运行，那么CDN可能非常方便。使用CDN版本的网站越多，用户就越有可能已下载该资产，并且无需再次为您的网站申请。

其他几点反对CDN：

1）你无法控制CDN，所以如果他们有停电或某种错误，你就有点不走运了。您通常需要某种类型的CDN以某种方式面向您的资产，但是如果您拥有配置控制权，那么您可以执行诸如手动清除缓存或禁用调试等等。

2）当您使用CDN而不是gem或NPM包时，功能测试将会变慢，因为它们最终也必须下载资产。这也可能导致片状测试，这是我们在使用CDN资产时特别注意到的。

我们不久前从boostrap-sass gem改为NPM包。它与@ Mark的描述或their instructions大致相同，但我们必须将包的路径添加到config/initializers/assets.rb文件中：

# config/initializers/assets.rb
Rails.application.config.assets.paths += [
  # paths for CSS assets in node_modules directory
  Rails.root.join('node_modules', 'bootstrap-sass', 'assets', 'stylesheets')
]

Answer 4

现在，您只需将 @import 'bootstrap'; 添加到 application.scss 即 Bootstrap 4 。如果您尚未将 application.css 重命名为 application.scss ，则应将其重命名。

@import 'bootstrap';

将宝石添加到 Gem file

后

...
# Bootstrap
gem 'bootstrap', '~> 4.1.1'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
...

使用Sass版本的优势是

您可以将默认引导变量更改为您自己的自定义变量
您可以编写自己的功能和混音，而无需重新编译并担心Bootstrap中的更新/修复。

Answer 5

在 Rails 6 中，使用 Webpacke r和 Yarn 作为默认选项，我通过basically following this nice writeup安装了没有gem的引导程序。从依赖性安装开始：

yarn add bootstrap jquery popper.js

将依赖项添加到我的app/javascript/packs/application.js：

require("bootstrap")

我将app/assets/stylesheets/application.css更改为.scss。（该文章为此使用了一个自定义文件。）我删除了所有*= require_行，并添加了：

@import "bootstrap/scss/bootstrap";

就是这样。重新启动服务器后，我可以添加一个容器和一个带有下拉菜单的导航栏。

Answer 6

第1步：使用纱线：

yarn add bootstrap@4.3.1 jquery popper.js

package.json文件应如下所示

"dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },

第2步：转到config / webpack / environment.js文件并添加以下行

const { environment } = require('@rails/webpacker')

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery',

Popper: ['popper.js', 'default']

}))

module.exports = environment

第3步：转到app / assets / stylesheets / application.css并添加以下行

*= require bootstrap

*= require_tree .

*= require_self

恭喜！您已经成功安装了Bootstrap 4

从https://dev.to/somnathpaul/add-bootstrap-4-to-your-ruby-on-rails-6-application-ole复制

Answer 7

向rails应用添加扩展程序的常用方法是将它们包含在Gemfile

中

这就是所有库的存在，它是版本控制的，在像bootstrap这样的情况下，资产将由rails资产管道线处理

以下是boostrap gem的网站：https://github.com/twbs/bootstrap-sass

使用rails app安装bootstrap的最佳方法是什么？

7 个答案:

为什么要安装bootstrap gem？

将Bootstrap添加到rails应用