离线无CDN使用Bootstrap遇问题：Dropdown/Carousel失效+缺fonts文件夹求助

Hey there! Let's tackle your Bootstrap offline setup problems step by step—these are super common when moving from CDN to local files, so you're not alone.

First: Why the Missing Fonts Folder? #

This depends on which Bootstrap version you're using:

• Bootstrap 3: It relied on Glyphicons, which came in a fonts folder included with the full download. If yours is missing, you probably grabbed an incomplete package.
• Bootstrap 4+: Glyphicons were replaced with Bootstrap Icons, which are SVG-based and don't require a separate fonts folder. Instead, you'll need to include the Bootstrap Icons CSS file (download the icons package for offline use) alongside core Bootstrap files.

Why Dropdown & Carousel Are Broken #

9 times out of 10, this boils down to missing dependencies or wrong file loading order:

• Bootstrap 4 and above requires Popper.js to handle dropdown positioning, tooltips, and carousel animations. If you didn't download and include Popper before Bootstrap's JS file, those components will fail to work.
• Incorrect file paths: Double-check that your links to bootstrap.min.css and bootstrap.min.js point to the right local folders—broken paths mean the files aren't loading at all, killing component functionality.

Step-by-Step Fixes #

1. Grab the Complete Offline Package #

Make sure you download the compiled and minified version (not source code) from the Bootstrap download page:

• Bootstrap 3: The zip will include css, js, and fonts folders—all you need for Glyphicons and core components.
• Bootstrap 4+/5: The zip includes css and js folders, but you'll need to download Popper.js (minified version) separately and add it to your js folder. For icons, download the Bootstrap Icons package and add its css file to your project.

2. Load Files in the Correct Order #

Your HTML file should include these in this exact sequence (adjust paths to match your folder structure):

<!-- Bootstrap CSS first -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- If using Bootstrap Icons (4+), add this too -->
<link rel="stylesheet" href="css/bootstrap-icons.css">

<!-- Popper.js MUST come before Bootstrap JS -->
<script src="js/popper.min.js"></script>
<!-- Then Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>

Mixing up the order of Popper and Bootstrap JS is the #1 cause of broken dropdowns/carousels.

3. Verify File Paths #

Open your browser's developer tools (F12) and check the Console tab—if you see 404 errors for CSS/JS files, your paths are wrong. For example, if your HTML is in the root folder and Bootstrap files are in a bootstrap subfolder, your link should be href="bootstrap/css/bootstrap.min.css".

4. For Bootstrap 3 Users: Restore the Fonts Folder #

If you're still on Bootstrap 3 and missing the fonts folder, re-download the full compiled package. The fonts folder needs to sit at the same level as the css folder (not inside it) so Bootstrap's CSS can find the Glyphicons files correctly.

Final Check #

Once you've got all files in place and paths fixed, reload your page—Dropdown and Carousel should work as expected, and any missing icon fonts will load properly.

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