不同磁盘路径下，如何配置HTML引入Bootstrap资源？

Let’s get your Bootstrap resources linked correctly. Since your HTML file lives on the C: drive and Bootstrap is on the D: drive, we have a couple of solid approaches to choose from:

Option 1: Direct Absolute File Path (Quick Fix for Separate Drives) #

Relative paths won’t work across different drives, so we can use the file:// protocol to point straight to your Bootstrap files. I’ve also added references to jQuery and Bootstrap’s JavaScript—these are required for interactive Bootstrap components like dropdowns or modals to work:

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<!-- Bootstrap CSS -->
<link href="file:///D:/Bootstrap/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div class="container">
<form role="form" method="post">
<div class="form-group">
<input type="text" class="form-control" name="">
</div>
</form>
</div>

<!-- jQuery (required dependency for Bootstrap JS) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="file:///D:/Bootstrap/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

Heads up: Using file:// might trigger browser security warnings, and this setup won’t translate to a remote server later.

Option 2: Move Bootstrap to Your WAMP Web Root (Recommended for Long-Term Dev) #

For a more production-like setup (and to avoid browser issues), copy the entire bootstrap-3.3.7 folder into your WAMP www directory (e.g., C:\wamp\www\bootstrap-3.3.7). Then you can use clean relative paths from your HTML file:

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<!-- Bootstrap CSS -->
<link href="/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div class="container">
<form role="form" method="post">
<div class="form-group">
<input type="text" class="form-control" name="">
</div>
</form>
</div>

<!-- jQuery (required dependency for Bootstrap JS) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

This method aligns with how web servers work, making it easier to transition your project to a live server later.

Quick Reminders: #

• Always include jQuery before Bootstrap’s JavaScript—Bootstrap relies on it for interactive features.
• Double-check path spelling and capitalization (Windows is case-insensitive, but it’s good practice to match your actual file names).

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