如何升级项目中twitter-bootstrap-rails的Bootstrap版本

Got it, since the twitter-bootstrap-rails gem hasn't been updated with the latest Bootstrap versions, here are a few reliable ways to upgrade Bootstrap in your Rails app:

Step 1: Remove the Outdated Gem First #

Before upgrading, you need to clean up the old gem and its assets:

• Open your Gemfile and delete the line gem 'twitter-bootstrap-rails'
• Run this command in your terminal to remove the gem from your bundle:

  bundle remove twitter-bootstrap-rails
  

• Delete any Bootstrap-related assets added by the gem (like the app/assets/stylesheets/twitter-bootstrap-static/ folder) and remove references to them from your application.css/application.scss and application.js files.

Option 1: Use Yarn to Install Official Bootstrap (Recommended) #

This is the most maintainable approach since it uses Bootstrap's official distribution:

1. Install Bootstrap and its required dependency (Popper.js) via Yarn:

   yarn add bootstrap @popperjs/core
   

2. Update your stylesheet:
   • Rename app/assets/stylesheets/application.css to application.scss if it's not already using Sass
   • Add this line to application.scss:

     @import "bootstrap";
     

3. Update your JavaScript:
   • Open app/javascript/application.js and add:

     import * as bootstrap from 'bootstrap'
     

   • If you're using Rails 7+ with Importmap, run this instead of Yarn:

     bin/importmap pin bootstrap @popperjs/core
     

     Then keep the same import line in application.js.

Option 2: Use Bootstrap's Official CDN (Quick & Easy) #

If you don't want to manage local assets, use the CDN links directly:

1. Open your layout file (app/views/layouts/application.html.erb)
2. Add the Bootstrap CSS link in the <head> section:

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
   

3. Add the JavaScript links right before the closing </body> tag:

   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
   

   You can adjust the version number in the URL if you need a specific stable release.

Option 3: Use a Maintained Bootstrap Gem #

If you prefer using a gem, switch to the official Bootstrap Ruby gem which is actively maintained:

1. Add this to your Gemfile:

   gem 'bootstrap', '~> 5.3'
   

2. Run:

   bundle install
   

3. Follow the gem's documentation to import the styles and JavaScript into your assets (similar to the Yarn approach).

Important Notes After Upgrade #

• Check for breaking changes: Bootstrap 3 (which your old gem uses) to Bootstrap 5 has significant updates—like class name changes (btn-default → btn-primary), removed panel components, and an updated grid system. You'll need to adjust your view templates to match the new syntax.
• Test thoroughly: Go through all pages and interactive components (modals, dropdowns, forms) to ensure everything works as expected.
• Clean up legacy code: Remove any old Bootstrap-specific helper methods or partials added by the twitter-bootstrap-rails gem that are no longer needed.

内容的提问来源于stack exchange，提问作者prajeesh