Local development of Bootstrap components: the correct posture for introducing CDN in VS Code

In local development environments such as VS Code, Bootstrap components do not work properly, but online compilers can run. The core reason is that the local environment lacks explicit references to Bootstrap CSS and JavaScript files. This article will elaborate on the root cause of this problem in detail and provide a method to correctly introduce Bootstrap resources through CDN to ensure that the Bootstrap functions in the local development environment are fully implemented.

Analysis of the root cause of the problem

Many developers may encounter a common confusion when using the Bootstrap framework: the same code runs normally in online compilers such as Codeply, but when opening HTML files in local development environments such as VS Code, Bootstrap's styles and interactive functions (such as navigation bar collapses, modal boxes, etc.) fail.

The fundamental reason for this phenomenon is environmental differences . Online compilers usually preload or automatically inject common CSS and JavaScript libraries (such as Bootstrap, jQuery, etc.) to provide users with an out-of-the-box development environment, so users only need to pay attention to business logic code. However, when developing locally, the browser loads HTML files independently, and it does not automatically recognize and introduce external libraries. This means that if your HTML file does not explicitly link to Bootstrap's CSS stylesheets and JavaScript scripts, the browser cannot parse and apply the styles and interaction behavior provided by Bootstrap.

In short, online compilers provide "magic", while local development requires you to "hand-on" all dependencies.

Solution: Introducing Bootstrap resources through CDN

To solve the problem that Bootstrap does not take effect in the local environment, you need to explicitly introduce Bootstrap's CSS and JavaScript files into the HTML file. The most convenient and recommended way is to use a Content Distribution Network (CDN) link, because CDNs can provide fast and reliable resource loading.

1. Introduce Bootstrap CSS file

Bootstrap stylesheets should be placed in the

tag of the HTML document to ensure that the style can be applied before the page content is loaded.

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Bootstrap page</title>
    <!-- Introducing Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <!-- Your own CSS file (if any) should be placed after Bootstrap CSS in order to overwrite its style -->
    <!-- <link rel="stylesheet" href="style.css"> -->


    <!-- Page content-->

2. Introduce Bootstrap JavaScript files

Bootstrap's JavaScript files (especially bootstrap.bundle.min.js containing Popper.js) should usually be placed before the end of the

tag. Doing this ensures that HTML content is loaded first, avoiding JavaScript trying to manipulate DOM elements when they are not fully rendered, thereby improving page loading performance and preventing potential errors.

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Bootstrap page</title>
    <!-- Introducing Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">



    <!-- Your Bootstrap component code-->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="">Tindog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Download</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Introducing Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

In the above example, we used the CDN link of Bootstrap version 5.2.0. The integrity attribute provides subresource integrity (SRI) verification to ensure that resources loaded from the CDN have not been tampered with, increasing security. The crossorigin="anonymous" attribute is required for SRI.

Things to note

1. Version Matching: Make sure that the Bootstrap versions of the CSS and JavaScript files you introduced are consistent. There may be differences in API or class names between different versions, resulting in compatibility issues.
2. CDN and local files:
   • Advantages of CDN: Convenient and fast, no download required, usually fast loading (utilizing user caching and global distribution), suitable for rapid prototyping and production environments.
   • Advantages of local files: Offline, full control over file version and content, suitable for projects without a network connection or requiring highly customized Bootstrap source code. To use local files, you need to download the distribution of Bootstrap and modify the href and src paths of the and <script> tags to point to the local file.</script>
3. JavaScript dependency order: If you are using older versions of Bootstrap (like Bootstrap 3 or 4), it may depend on jQuery. In this case, you need to introduce jQuery first, and then introduce the JS file of Bootstrap. For Bootstrap 5, bootstrap.bundle.min.js already contains the required Popper.js and usually no longer needs to be introduced separately.
4. Custom Style: If you have your own CSS style file, make sure it is introduced after Bootstrap's CSS file so you can override Bootstrap's default style with custom styles.
5. Development Server: In VS Code, it is recommended to install extensions such as "Live Server", which can start a local development server and automatically refresh the browser when you save the file, providing a development experience closer to the real web server. Opening HTML files directly through file paths can have cross-domain or resource loading issues in some cases.

Summarize

There are significant differences between the local development environment and the online compiler in handling external library dependencies. To ensure that the Bootstrap component works properly in local environments such as VS Code, the key is to explicitly introduce Bootstrap's CSS and JavaScript resources through CDN links or local file paths . Following the correct introduction order and version matching principles will make your Bootstrap development process smoother and more efficient. Understanding and mastering this basic knowledge is the cornerstone of any front-end project development.

The above is the detailed content of Local development of Bootstrap components: the correct posture for introducing CDN in VS Code. For more information, please follow other related articles on the PHP Chinese website!