Ruby On Rails集成Bootstrap的方法

使用Bootstrap进行前端开发有以下优势

1. 响应式设计：Bootstrap提供了强大的响应式网格系统，能够让网站在不同设备上都具有良好的显示效果，无论是桌面、平板还是手机等设备。
2. 组件丰富：Bootstrap内置了大量的CSS和JavaScript组件，包括按钮、表单、导航条、模态框等，能够帮助开发者快速构建出美观和实用的页面。
3. 友好的文档：Bootstrap拥有清晰、详细的官方文档，包含大量示例和用法说明，对于开发者来说非常易于学习和使用。
4. 易于定制：Bootstrap提供了丰富的定制选项，可以根据项目需要选择性地定制样式、组件和布局，让开发者更容易地构建符合需求的网页。
5. 跨浏览器兼容：Bootstrap经过了广泛的测试，确保在各种现代浏览器中都能正常显示和运行，减少了兼容性问题带来的麻烦。
6. 社区支持：作为一个流行的前端框架，Bootstrap拥有庞大的开发者社区，能够获得丰富的资源、插件和支持。

总的来说，使用Bootstrap进行前端开发可以提高开发效率，减少重复工作，同时保证页面质量和用户体验。

安装bootstrap前的相关配置

打开项目根目录下的 Gemfile 文件，添加以下和 bootstrap 相关的依赖

gem "bootstrap", "~> 5.3.2"
gem "sassc-rails"
gem "jquery-rails"

打开config/initializers/assets.rb文件，在文件尾部添加 bootstrap 相关的 Javascript 依赖

Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )

修改config/importmap.rb文件，在页面尾部添加 bootstrap 的 JavaScript 导入映射的配置

pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "@popperjs/core", to: "popper.js", preload: true

修改文件app/assets/stylesheets/application.css添加样式引用，在文件尾部添加以下行

@import "bootstrap";

然后将文件重命名为 .scss 文件以支持样式的引入。（少了一这步，哪怕是库安装上也无法成功工作的）

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.ccss

使用命令安装所需的依赖包

bundle install

致此，Ruby On Rails集成Bootstrap的过程已经完成。

验证安装

修改config/routes.rb文件添加路由规则

get "bootstrap", to: "bootstrap#index"

创建控制器并启动服务进行验证

bin/rails generate controller Bootstrap index --skip-routes
bin/tails server

在浏览器中访问 http://localhost:3000/bootstrap/index，查着源文件验证 bootstrap 是否已经正确引入。
祝贺你，你已经成功的把 bootstrap 集成到 Ruby On Rails框架中了。