如何在Laravel项目中将Bootstrap 4降级至3.3.7

Hey there! Let's walk through the process step by step to get Bootstrap 3.3.7 up and running in your Laravel project. Here's what you need to do:

Step 1: Uninstall current Bootstrap 4 and its dependencies #

First, we'll remove Bootstrap 4 and any related dependencies that aren't needed for Bootstrap 3. Bootstrap 4 relies on popper.js for tooltips and popovers, but Bootstrap 3 doesn't use this package, so we can uninstall both to avoid redundancy or conflicts:

npm uninstall bootstrap popper.js

Step 2: Install Bootstrap 3.3.7 #

Next, install the specific version of Bootstrap 3 you need. We'll use --save-dev to add it to your development dependencies, matching how Bootstrap 4 was likely set up in your project:

npm install bootstrap@3.3.7 --save-dev

Step 3: Update your Laravel resource files #

Bootstrap 3 has a slightly different file structure than Bootstrap 4, so we need to adjust your asset imports to match:

For CSS (in resources/sass/app.scss): #

Replace any Bootstrap 4 import lines with the path to Bootstrap 3's CSS file. For most default Laravel setups, this will look like:

@import '~bootstrap/dist/css/bootstrap.css';

For JavaScript (in resources/js/app.js): #

Bootstrap 3 depends on jQuery to work properly. Laravel usually includes jQuery by default, but if it's missing, run npm install jquery --save-dev first. Then update your imports to load jQuery before Bootstrap 3's JS:

// Load jQuery and make it globally available
window.$ = window.jQuery = require('jquery');
// Load Bootstrap 3's JavaScript components
require('bootstrap');

Check webpack.mix.js (if needed): #

If your Mix file has explicit references to Bootstrap 4 paths, double-check they point to Bootstrap 3's files instead. For most standard setups, the default mix.js('resources/js/app.js', 'public/js') and mix.sass('resources/sass/app.scss', 'public/css') will work as-is, since we're using npm's package resolution.

Step 4: Recompile your assets #

Finally, clean out any old compiled assets and rebuild your resources for the changes to take effect:

npm run dev

If you're working in a production environment, use npm run prod instead to generate minified, production-ready files.

Important Notes #

• Style Conflicts: Any custom CSS you wrote for Bootstrap 4 might break with Bootstrap 3, since class names and component structures changed (e.g., Bootstrap 4's card replaces Bootstrap 3's panel). You'll need to adjust these styles manually to match Bootstrap 3's conventions.
• jQuery Compatibility: Bootstrap 3.3.7 works best with jQuery versions 1.9.1 to 3.x, so most modern jQuery versions included with Laravel should be compatible.

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