vscode写网页前端的基本配置，引入bootstrap

最新推荐文章于 2025-03-06 09:54:10 发布

对墨知源

最新推荐文章于 2025-03-06 09:54:10 发布

阅读量1.8k

点赞数

分类专栏： HTML+CSS 文章标签： vscode 前端 ide

本文链接：https://blog.csdn.net/qq_21518741/article/details/131405383

版权

HTML+CSS 专栏收录该内容

2 篇文章

订阅专栏

年少不知VScode好，网上看到一遍文章，才知道，用来写前端真是太好了，可以时实更新，查看效果，太棒了。

在VS里面搜索一个东西，装上

你在vscode里面写好html代码后，右键，选择open with live server，这里会自动弹出一个浏览器，这个浏览器是windows里默认的浏览器，如果想要换其它浏览器，在windows里面改好默认应用就可以了。

这个弹出的浏览器不要关闭，仔细看浏览器地址：http://127.0.0.1:5500/你自己的网页.html

然后，你在vs里面改代码，只要保存一下，浏览器里面就会自动刷新。非常方便！！！

然后写一个bootstrap的引入例子，方便以后回来查找。

进入bootstrap网站，随便下一个，我下的是bootstrap V5。然后放到html页面里。

下的是一个压缩包，将包解一下，然后是两个文件，js css

如果你要问v5 v4 v3哪个好，我只能说我不知道。

来一段html里面的引入代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS这里引入的是本地CSS文件 -->
    <link rel="stylesheet" href="/css/bootstrap.css" type="text/css"/>


</head>

<body>
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
       
            <div class="container">
                <a href="#" class="navbar-brand">学編程</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navmenu">
                    <ul class="navbar-nav ms-auto">
                        <!--margin start = margin left-->
                        <li class="nav-item">
                            <div class="nav-link">第一个</div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link">第二个</div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link">第三个</div>
                        </li>
                    </ul>
                </div>
            </div>
        
    </nav>

    <!-- jQuery and JavaScript Bundle with Popper 这里引入的是本地js文件-->
    <script src="/js/bootstrap.bundle.min.js" crossorigin="anonymous">
    </script>
</body>

</html>

这段代码是照着视频上的大佬做的，在这里留个记录，方便以后自己查看。